fix(ui): address review feedback on #9427

Publish "still covering" rather than the raw `open` flag from
`DialogNestingContext`, so a stacked child keeps `data-stacked` for the
length of the parent's exit instead of painting a second scrim over the
parent's fading one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: maxyinger

packages/headless/src/primitives/dialog/README.md

@@ -237,6 +237,9 @@ alert stack, the middle dialog is stacked on one surface while another is stacke
 backdrop instead of compositing a darker one per level. `data-stack-base` is for whatever the
 surface underneath does to signal depth.
 
+`data-stacked` holds for as long as the dialog underneath is on screen, exit transition included —
+otherwise the one on top would paint a second scrim over the fading original.
+
 The headless parts are unstyled. Target a part with your own className (or `render` prop) and combine it with the `data-*` state attributes above.
 
 ## Important Notes

packages/headless/src/primitives/dialog/dialog-nesting.ts

@@ -11,7 +11,12 @@ import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useSt
  * floating ancestor but sits on the bare page, and must still paint its own scrim.
  */
 export interface DialogNestingContextValue {
-  /** Whether the surrounding dialog is itself open. */
+  /**
+   * Whether the surrounding dialog is still covering the page — open, or closed but still
+   * mounted for its exit transition. Not the raw `open` flag: a child that un-suppressed its
+   * backdrop the instant the parent started closing would paint a second scrim over the
+   * parent's still-fading one.
+   */
   open: boolean;
   /**
    * Called by a dialog rendered inside this one, for as long as it is open. Returns the release.
@@ -41,7 +46,7 @@ export interface DialogNesting {
  * Joins a dialog root to the stack it belongs to, in both directions: up, to report itself to
  * the dialog it renders inside, and down, to count the dialogs that render inside it.
  */
-export function useDialogNesting(open: boolean): DialogNesting {
+export function useDialogNesting(open: boolean, mounted: boolean): DialogNesting {
   const parent = useContext(DialogNestingContext);
   const [stackedChildCount, setStackedChildCount] = useState(0);
 
@@ -70,13 +75,15 @@ export function useDialogNesting(open: boolean): DialogNesting {
     return registerWithParent();
   }, [open, registerWithParent]);
 
+  const covering = open || mounted;
+
   const context = useMemo<DialogNestingContextValue>(
-    () => ({ open, registerStackedChild }),
-    [open, registerStackedChild],
+    () => ({ open: covering, registerStackedChild }),
+    [covering, registerStackedChild],
   );
 
   return {
-    // A closed parent is not something to sit on top of: the child owns the scrim in that case,
+    // A parent that is closed AND gone is not something to sit on top of: the child owns the scrim,
     // which is what a confirmation root mounted beside its dialog's portal relies on.
     isStacked: parent !== null && parent.open,
     stackedChildCount,

packages/headless/src/primitives/dialog/dialog-root.tsx

@@ -89,8 +89,6 @@ function DialogInner<Payload>(props: DialogProps<Payload> & { isNested: boolean
   const [activeTriggerId, setActiveTriggerId] = useControllableState<string | null>(props.triggerId, null);
   const [activePayload, setActivePayload] = useState<Payload | undefined>(undefined);
 
-  const nesting = useDialogNesting(open);
-
   const labelId = useId();
   const descriptionId = useId();
 
@@ -178,6 +176,10 @@ function DialogInner<Payload>(props: DialogProps<Payload> & { isNested: boolean
     ref: popupRef,
   });
 
+  // Below `useTransition` because it needs `mounted`: what a stacked child has to key off is
+  // whether this dialog is still on screen, not whether it is still open.
+  const nesting = useDialogNesting(open, mounted);
+
   const dismiss = useDismiss(floatingContext, {
     outsidePressEvent: 'mousedown',
     escapeKey: closedBy !== 'none',

packages/headless/src/primitives/dialog/dialog.test.tsx

@@ -745,6 +745,49 @@ describe('Dialog', () => {
       expect(screen.getByTestId('outer-popup')).not.toHaveAttribute('data-stack-base');
     });
 
+    it('stays stacked while the dialog beneath is exiting', () => {
+      // Keep an animation pending so the one beneath stays mounted for its exit instead of
+      // unmounting in the same commit.
+      const original = (Element.prototype as { getAnimations?: unknown }).getAnimations;
+      (Element.prototype as { getAnimations?: unknown }).getAnimations = () => [
+        { finished: new Promise<void>(() => {}) },
+      ];
+      try {
+        const { rerender } = renderStack();
+
+        // The one beneath closes first. Its backdrop is still on screen for the length of the
+        // exit, so the one on top has to keep suppressing its own scrim rather than paint a
+        // second one over the fading original.
+        rerender(
+          <Dialog.Root open={false}>
+            <Dialog.Backdrop data-testid='outer-backdrop' />
+            <Dialog.Viewport>
+              <Dialog.Popup data-testid='outer-popup'>
+                <Dialog.Title>Outer</Dialog.Title>
+                <Dialog.Root open>
+                  <Dialog.Backdrop data-testid='inner-backdrop' />
+                  <Dialog.Viewport>
+                    <Dialog.Popup data-testid='inner-popup'>
+                      <Dialog.Title>Inner</Dialog.Title>
+                    </Dialog.Popup>
+                  </Dialog.Viewport>
+                </Dialog.Root>
+              </Dialog.Popup>
+            </Dialog.Viewport>
+          </Dialog.Root>,
+        );
+
+        expect(screen.getByTestId('outer-backdrop')).toBeInTheDocument();
+        expect(screen.getByTestId('inner-backdrop')).toHaveAttribute('data-stacked', '');
+      } finally {
+        if (original) {
+          (Element.prototype as { getAnimations?: unknown }).getAnimations = original;
+        } else {
+          delete (Element.prototype as { getAnimations?: unknown }).getAnimations;
+        }
+      }
+    });
+
     it('is not stacked on a dialog that is closed', () => {
       // A confirmation root mounted beside its dialog's portal is inside the root but outlives
       // the open state; on its own it owns the scrim like any root-level dialog.