@kushagradhawan/kookie-ui 0.3.21 → 0.3.23

package/src/components/_internal/base-card.css

@@ -88,7 +88,7 @@
   /* Backdrop-filter for ::before - applies to outline, soft, surface */
   :where([data-panel-background='translucent'], [data-material='translucent']) &::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   &:where([data-material='solid'], [data-panel-background='solid'])::before {
@@ -97,7 +97,7 @@
 
   &:where([data-material='translucent'], [data-panel-background='translucent'])::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   /* Interactive scale - applies to all interactive cards */
@@ -413,6 +413,21 @@
  ***************************************************************************************************/
 
 .rt-BaseCard:where(.rt-variant-ghost) {
+  /*
+   * Ghost is the only card variant whose backdrop filter sits on the element
+   * rather than on ::before, which makes it — and only it — the backdrop root
+   * for its contents. A component nested here would re-blur an already blurred
+   * surface, so switch the component filter off for the subtree.
+   *
+   * The other variants deliberately do not do this: their filter is on
+   * ::before, so the card element is not a backdrop root and a nested
+   * component is still blurring the page itself. Measured over a textured
+   * background, dropping it there is a visible change (max 82/255 channel
+   * delta) rather than the imperceptible one it is on a real backdrop root
+   * (max 7/255).
+   */
+  --backdrop-filter-components-enabled: none;
+
   --card-border-width: 0px;
   --v-bg-hover: var(--gray-3);
   --v-bg-hover-a: var(--gray-a3);
@@ -454,7 +469,7 @@
   /* Backdrop-filter handling for ghost - on element, not ::before */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   &:where([data-panel-background='solid'], [data-material='solid']) {
@@ -463,7 +478,7 @@
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   /* Interactive states - background on element, not ::before */

package/src/components/_internal/base-checkbox.css

@@ -19,7 +19,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -33,7 +33,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
 

package/src/components/_internal/base-dialog.css

@@ -18,19 +18,6 @@
   inset: 0;
 }
 
-/* When forceMount detaches the scroll wrapper from the overlay, it needs its
-   own fixed positioning and must become inert when the content is closed. */
-.rt-BaseDialogScroll--detached {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-
-  &:where(:has([data-state='closed'])) {
-    pointer-events: none;
-    visibility: hidden;
-  }
-}
-
 .rt-BaseDialogScrollPadding {
   flex-grow: 1;
   margin: auto;
@@ -50,6 +37,13 @@
 }
 
 .rt-BaseDialogContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   margin: auto;
   width: 100%;
   z-index: 1;

package/src/components/_internal/base-menu.css

@@ -1,4 +1,11 @@
 .rt-BaseMenuContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);

package/src/components/_internal/base-radio.css

@@ -19,7 +19,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -33,7 +33,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(:disabled, [data-disabled]) {

package/src/components/_internal/base-sidebar.css

@@ -28,6 +28,13 @@
 
 /* Sidebar Container */
 .rt-SidebarContainer {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   --sidebar-base-border-radius: 0; /* Default to no radius */
   display: flex;
   flex-direction: column;

package/src/components/_internal/base-tab-list.css

@@ -161,7 +161,7 @@
       :where(.rt-BaseTabList[data-panel-background='translucent']) & {
         background-color: var(--gray-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
       }
 
       /* Disable backdrop-filter when inside elements that already have backdrop-filter */
@@ -189,7 +189,7 @@
       :where(.rt-BaseTabList[data-panel-background='translucent']) & {
         background-color: var(--accent-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
       }
     }
   }

package/src/components/_internal/shell-handles.tsx

@@ -77,7 +77,30 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';
         body.style.userSelect = 'none';
         onResizeStart?.(startSize);
+
+        // The move handler is attached to the handle, the document and the
+        // window so the drag survives environments where PointerEvent does not
+        // reach all three. A real move therefore arrives here several times:
+        // once per node it propagates through, plus again as the compatibility
+        // mouse event. Doing the work more than once per movement is pure waste
+        // on the most latency-sensitive interaction in the shell, so ignore the
+        // repeats.
+        let lastHandledMove: Event | null = null;
+        let seenPointerEvent = false;
+
+        const shouldHandle = (ev: Event, pointerType: string) => {
+          if (ev.type === pointerType) seenPointerEvent = true;
+          // Once pointer events are known to work, the mouse fallbacks are
+          // duplicates of an event we have already handled.
+          else if (seenPointerEvent) return false;
+          return true;
+        };
+
         const handleMove = (ev: PointerEvent) => {
+          if (!shouldHandle(ev, 'pointermove')) return;
+          if (ev === lastHandledMove) return;
+          lastHandledMove = ev;
+
           const client = orientation === 'vertical' ? ev.clientX : ev.clientY;
           const next = clamp(computeNext(client, startClient, startSize));
           container.style.setProperty(cssVarName, `${next}px`);
@@ -106,7 +129,11 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           body.style.userSelect = prevUserSelect;
           activeCleanupRef.current = null;
         };
+        let finished = false;
         const handleUp = () => {
+          if (finished) return;
+          finished = true;
+
           const finalSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
           let snapped = finalSize;
           if (snapPoints && snapPoints.length) {

package/src/components/accordion.css

@@ -7,7 +7,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -21,7 +21,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -68,7 +68,7 @@
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -94,7 +94,7 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: var(--color-surface-translucent);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -119,7 +119,7 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -143,7 +143,7 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 

package/src/components/accordion.tsx

@@ -19,6 +19,7 @@ import type {
   AccordionContentOwnProps,
 } from './accordion.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 // Root component
 type AccordionRootElement = React.ElementRef<typeof AccordionPrimitive.Root>;
@@ -35,14 +36,7 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
       typeof AccordionPrimitive.Root
     >;
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial = material ?? panelBackground;

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
@@ -35,6 +36,19 @@ const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDial
 );
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 
+// Split once at module scope. `extractProps` memoises on the identity of the
+// prop def objects it is handed, so rebuilding these per render would recompile
+// them on every render.
+const {
+  align: alignPropDef,
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+  ...contentPropDefs
+} = alertDialogContentPropDefs;
+const alignPropDefs = { align: alignPropDef };
+const panelBackgroundPropDefs = { panelBackground: panelBackgroundPropDef };
+const materialPropDefs = { material: materialPropDef };
+
 type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
 interface AlertDialogContentProps
   extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>,
@@ -43,35 +57,23 @@ interface AlertDialogContentProps
 }
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const {
-      align: alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = alertDialogContentPropDefs;
-
-    const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
+    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     // Extract panelBackground and material from props
     const { panelBackground: extractedPanelBackground } = extractProps(
       { panelBackground: props.panelBackground },
-      { panelBackground: panelBackgroundPropDef },
+      panelBackgroundPropDefs,
     );
 
     const { material: extractedMaterial } = extractProps(
       { material: props.material },
-      { material: materialPropDef },
+      materialPropDefs,
     );
 
-    // Handle material prop with panelBackground fallback
-    const materialValue = React.useMemo(() => {
-      if (extractedMaterial !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-      return extractedMaterial ?? extractedPanelBackground;
-    }, [extractedMaterial, extractedPanelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+
+    // Material takes precedence over the deprecated panelBackground
+    const materialValue = extractedMaterial ?? extractedPanelBackground;
 
     const {
       className,
@@ -80,7 +82,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
       panelBackground: _,
       material: __,
       ...contentProps
-    } = extractProps(props, propDefs);
+    } = extractProps(props, contentPropDefs);
 
     // Focus management
     const contentRef = React.useRef<HTMLDivElement>(null);

package/src/components/avatar.css

@@ -44,7 +44,7 @@
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -58,7 +58,7 @@
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 

package/src/components/badge.css

@@ -27,7 +27,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -45,7 +45,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Reduced motion support */

package/src/components/badge.tsx

@@ -10,6 +10,7 @@ import { Tooltip } from './tooltip.js';
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 type BadgeElement = React.ElementRef<'span'>;
 type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
@@ -52,14 +53,7 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     [material, panelBackground],
   );
 
-  // Show deprecation warning for panelBackground when used
-  React.useEffect(() => {
-    if (panelBackground !== undefined) {
-      console.warn(
-        'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-      );
-    }
-  }, [panelBackground]);
+  useDeprecatedPanelBackgroundWarning(panelBackground);
 
   // Memoize component variable to prevent unnecessary re-renders
   const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);

package/src/components/callout.css

@@ -17,7 +17,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -35,7 +35,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(.rt-high-contrast) {

package/src/components/chatbar.css

@@ -173,7 +173,7 @@
 /* Theme-level translucent override for the visual shell */
 .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
   backdrop-filter: var(--backdrop-filter-components);
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
   backdrop-filter: none;

package/src/components/context-menu.tsx

@@ -23,6 +23,7 @@ import { Kbd } from './kbd.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 interface ContextMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root> {}
@@ -56,14 +57,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial =

package/src/components/dialog.tsx

@@ -7,6 +7,7 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -33,6 +34,19 @@ const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>
 );
 DialogTrigger.displayName = 'Dialog.Trigger';
 
+// Split once at module scope. `extractProps` memoises on the identity of the
+// prop def objects it is handed, so rebuilding these per render would recompile
+// them on every render.
+const {
+  align: alignPropDef,
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+  ...contentPropDefs
+} = dialogContentPropDefs;
+const alignPropDefs = { align: alignPropDef };
+const panelBackgroundPropDefs = { panelBackground: panelBackgroundPropDef };
+const materialPropDefs = { material: materialPropDef };
+
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface DialogContentProps
   extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
@@ -41,35 +55,23 @@ interface DialogContentProps
 }
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const {
-      align: alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = dialogContentPropDefs;
-
-    const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
+    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     // Extract panelBackground and material from props
     const { panelBackground: extractedPanelBackground } = extractProps(
       { panelBackground: props.panelBackground },
-      { panelBackground: panelBackgroundPropDef },
+      panelBackgroundPropDefs,
     );
 
     const { material: extractedMaterial } = extractProps(
       { material: props.material },
-      { material: materialPropDef },
+      materialPropDefs,
     );
 
-    // Handle material prop with panelBackground fallback
-    const materialValue = React.useMemo(() => {
-      if (extractedMaterial !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-      return extractedMaterial ?? extractedPanelBackground;
-    }, [extractedMaterial, extractedPanelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+
+    // Material takes precedence over the deprecated panelBackground
+    const materialValue = extractedMaterial ?? extractedPanelBackground;
 
     const {
       className,
@@ -78,7 +80,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
       panelBackground: _,
       material: __,
       ...contentProps
-    } = extractProps(props, propDefs);
+    } = extractProps(props, contentPropDefs);
 
     // Focus management
     const contentRef = React.useRef<HTMLDivElement>(null);
@@ -140,65 +142,37 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
       };
     }, []);
 
-    const contentElement = (
-      <DialogPrimitive.Content
-        {...contentProps}
-        ref={combinedRef}
-        className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
-        data-material={materialValue}
-        data-panel-background={materialValue}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        onCloseAutoFocus={(event) => {
-          // Prevent default focus behavior
-          event.preventDefault();
-          // Restore pointer-events to body (Radix UI fix for issue #1241)
-          document.body.style.pointerEvents = '';
-        }}
-      />
-    );
-
-    const ariaLiveRegion = (
-      <div
-        aria-live="polite"
-        aria-atomic="true"
-        className="rt-sr-only"
-        id="dialog-announcement"
-      />
-    );
-
-    // When forceMount is used, render Overlay and Content as siblings so the
-    // Overlay (which uses react-remove-scroll) can unmount independently when
-    // the dialog closes, while the Content stays mounted.
-    if (forceMount) {
-      return (
-        <DialogPrimitive.Portal container={container} forceMount>
-          <Theme>
-            <DialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-DialogOverlay" />
-            <div className="rt-BaseDialogScroll rt-DialogScroll rt-BaseDialogScroll--detached">
-              <div
-                className={`rt-BaseDialogScrollPadding rt-DialogScrollPadding ${alignClassName}`}
-              >
-                {React.cloneElement(contentElement, { forceMount: true })}
-                {ariaLiveRegion}
-              </div>
-            </div>
-          </Theme>
-        </DialogPrimitive.Portal>
-      );
-    }
-
     return (
-      <DialogPrimitive.Portal container={container}>
+      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
           <DialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-DialogOverlay">
             <div className="rt-BaseDialogScroll rt-DialogScroll">
               <div
                 className={`rt-BaseDialogScrollPadding rt-DialogScrollPadding ${alignClassName}`}
               >
-                {contentElement}
-                {ariaLiveRegion}
+                <DialogPrimitive.Content
+                  {...contentProps}
+                  ref={combinedRef}
+                  className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
+                  data-material={materialValue}
+                  data-panel-background={materialValue}
+                  tabIndex={-1}
+                  role="dialog"
+                  aria-modal="true"
+                  onCloseAutoFocus={(event) => {
+                    // Prevent default focus behavior
+                    event.preventDefault();
+                    // Restore pointer-events to body (Radix UI fix for issue #1241)
+                    document.body.style.pointerEvents = '';
+                  }}
+                />
+                {/* ARIA live region for screen reader announcements */}
+                <div
+                  aria-live="polite"
+                  aria-atomic="true"
+                  className="rt-sr-only"
+                  id="dialog-announcement"
+                />
               </div>
             </div>
           </DialogPrimitive.Overlay>