coinbase · torkelrogstad · Jun 18, 2026 · Jun 18, 2026
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 ((6/17/2026, 11:55 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.4.1 ((6/15/2026, 01:02 PM PST))
 
 This is an artificial version bump with no new change.

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 ((6/17/2026, 11:55 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.4.1 ((6/15/2026, 01:02 PM PST))
 
 This is an artificial version bump with no new change.

diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 ((6/17/2026, 11:55 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.4.1 (6/15/2026 PST)
 
 #### 🐞 Fixes

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 (6/17/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Tray overlay backdrop now fades out on close. [[#736](https://github.com/coinbase/cds/pull/736)]
+
 ## 9.4.1 (6/15/2026 PST)
 
 #### 🐞 Fixes

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",

diff --git a/packages/web/src/overlays/tray/Tray.tsx b/packages/web/src/overlays/tray/Tray.tsx
@@ -288,6 +288,7 @@ export const Tray = memo(
     const trayRef = useRef<HTMLDivElement>(null);
     const { observe: observeTraySize, height: trayHeight } = useDimensions<HTMLDivElement>();
     const contentRef = useRef<HTMLDivElement>(null);
+    const overlayRef = useRef<HTMLDivElement>(null);
     const hasCalledOnOpenComplete = useRef(false);
     const [scope, animate] = useAnimate();
     const dragControls = useDragControls();
@@ -320,6 +321,9 @@ export const Tray = memo(
           ? { x: pin === 'right' ? '100%' : '-100%' }
           : { y: pin === 'bottom' ? '100%' : '-100%' };
       }
+      if (overlayRef.current) {
+        animate(overlayRef.current, { opacity: 0 }, animationConfig.slideOut.transition);
+      }
       animate(scope.current, finalAnimationValue, animationConfig.slideOut.transition).then(() => {
         setIsOpen(false);
         onClose?.();
@@ -329,6 +333,9 @@ export const Tray = memo(
 
     const handleSwipeClose = useCallback(() => {
       if (!scope.current) return;
+      if (overlayRef.current) {
+        animate(overlayRef.current, { opacity: 0 }, { duration: 0.15, ease: 'easeOut' });
+      }
       animate(scope.current, { y: '100%' }, { duration: 0.15, ease: 'easeOut' }).then(() => {
         setIsOpen(false);
         onBlur?.();
@@ -454,6 +461,8 @@ export const Tray = memo(
             zIndex={zIndex}
           >
             <Overlay
+              ref={overlayRef}
+              animated
               className={cx(trayClassNames.overlay, classNames?.overlay)}
               onClick={handleOverlayClick}
               style={styles?.overlay}

diff --git a/packages/web/src/overlays/tray/__tests__/Tray.test.tsx b/packages/web/src/overlays/tray/__tests__/Tray.test.tsx
@@ -460,4 +460,18 @@ describe('Tray', () => {
       expect(root?.querySelector(`.${trayClassNames.handleBarHandle}`)).toBeInTheDocument();
     });
   });
+
+  describe('overlay animation', () => {
+    it('wraps the overlay in a motion container so the backdrop fades', () => {
+      const onCloseCompleteSpy = jest.fn();
+      render(
+        <DefaultThemeProvider>
+          <Tray onCloseComplete={onCloseCompleteSpy} title={titleText}>
+            {loremIpsum}
+          </Tray>
+        </DefaultThemeProvider>,
+      );
+      expect(screen.getByTestId('tray-overlay-motion')).toBeInTheDocument();
+    });
+  });
 });