@coinbase/cds-web 8.67.0 → 8.69.0

package/CHANGELOG.md

@@ -8,6 +8,19 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.69.0 (5/5/2026 PST)
+
+#### 🚀 Updates
+
+- Fix: NavigationBar no longer reserves space for absent start content. [[#664](https://github.com/coinbase/cds/pull/664)]
+- Add collapsedStyle prop to Collapsible.[[#664](https://github.com/coinbase/cds/pull/664)]
+
+## 8.68.0 (5/1/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update bgWarning to orange60. [[#659](https://github.com/coinbase/cds/pull/659)]
+
 ## 8.67.0 (5/1/2026 PST)
 
 #### 🚀 Updates

package/dts/collapsible/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIlG,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO3E,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,YAAY,GACZ,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,yBAAyB,CAAC,GAAG;IAC7E;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW;IA/BpB;;;OAGG;eACQ,OAAO;IAClB;;OAEG;cACO,KAAK,CAAC,SAAS;IACzB;;;OAGG;gBACS,oBAAoB;IAChC;;;OAGG;uCACgC,OAAO;IAC1C;;OAEG;gBACS,QAAQ,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC;IACpD;;OAEG;eACQ,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC;yCAkGrD,CAAC"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIlG,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO3E,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,YAAY,GACZ,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,yBAAyB,CAAC,GAAG;IAC7E;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW;IA/BpB;;;OAGG;eACQ,OAAO;IAClB;;OAEG;cACO,KAAK,CAAC,SAAS;IACzB;;;OAGG;gBACS,oBAAoB;IAChC;;;OAGG;uCACgC,OAAO;IAC1C;;OAEG;gBACS,QAAQ,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC;IACpD;;OAEG;eACQ,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC;yCA2FrD,CAAC"}

package/dts/navigation/NavigationBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../src/navigation/NavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAkB,MAAM,WAAW,CAAC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,2BAA2B,QAAQ,CAAC;AAEjD,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,uBAAuB;IAClC,4DAA4D;;IAE5D,uDAAuD;;IAEvD,4DAA4D;;CAEpD,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5C;;OAEG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,mBAAmB,CAAC,OAAO,uBAAuB,CAAC,GACnD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,UAAU,CAAC,CAAC;AAE1D,eAAO,MAAM,aAAa,qCAAiB,kBAAkB,6CA+E3D,CAAC"}
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../src/navigation/NavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAkB,MAAM,WAAW,CAAC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,2BAA2B,QAAQ,CAAC;AAEjD,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,uBAAuB;IAClC,4DAA4D;;IAE5D,uDAAuD;;IAEvD,4DAA4D;;CAEpD,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5C;;OAEG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,mBAAmB,CAAC,OAAO,uBAAuB,CAAC,GACnD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,UAAU,CAAC,CAAC;AAE1D,eAAO,MAAM,aAAa,qCAAiB,kBAAkB,6CAiF3D,CAAC"}

package/dts/themes/coinbaseDenseTheme.d.ts

@@ -415,7 +415,7 @@ export declare const coinbaseDenseTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -460,7 +460,7 @@ export declare const coinbaseDenseTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/dts/themes/coinbaseTheme.d.ts

@@ -312,7 +312,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const coinbaseTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/dts/themes/defaultTheme.d.ts

@@ -312,7 +312,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(255,245,246)';
     readonly bgPositive: 'rgb(9,133,81)';
     readonly bgPositiveWash: 'rgb(245,255,251)';
-    readonly bgWarning: 'rgb(237,112,47)';
+    readonly bgWarning: 'rgb(207,71,14)';
     readonly bgWarningWash: 'rgb(255,250,245)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(91,97,110,0.2)';
@@ -357,7 +357,7 @@ export declare const defaultTheme: {
     readonly bgNegativeWash: 'rgb(51,0,4)';
     readonly bgPositive: 'rgb(39,173,117)';
     readonly bgPositiveWash: 'rgb(0,31,18)';
-    readonly bgWarning: 'rgb(199,158,0)';
+    readonly bgWarning: 'rgb(240,120,54)';
     readonly bgWarningWash: 'rgb(51,13,0)';
     readonly currentColor: 'currentColor';
     readonly bgLine: 'rgba(138,145,158,0.2)';

package/esm/collapsible/Collapsible.js

@@ -54,27 +54,23 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
     };
   }, [direction, maxWidth, maxHeight]);
 
-  // visibility is used to prevent child content from being focusable when collapsed
-  const [visibility, setVisibility] = useState(collapsed ? 'hidden' : 'visible');
-  // update the visibility to "visible" when the content is expanding
-  if (!collapsed && visibility !== 'visible') {
-    setVisibility('visible');
+  // display: none is applied after the collapse animation completes so the element no longer
+  // participates in layout and its children are not focusable. It is restored immediately when
+  // expanding so the animation has content to reveal.
+  const [isDisplayNone, setIsDisplayNone] = useState(collapsed);
+  if (!collapsed && isDisplayNone) {
+    setIsDisplayNone(false);
   }
-
-  // when the animation completes, set the visibility to "hidden" if the content should be collapsed
-  // this is to prevent children of the Collapsible element from being focusable in this state
   const handleAnimationComplete = useCallback(() => {
     if (collapsed) {
-      setVisibility('hidden');
+      setIsDisplayNone(true);
     }
   }, [collapsed]);
-
-  // merge visible style with the computed framer-motion styles
   const style = useMemo(() => {
-    return _objectSpread(_objectSpread({}, motionStyle), {}, {
-      visibility
-    });
-  }, [visibility, motionStyle]);
+    return isDisplayNone ? _objectSpread(_objectSpread({}, motionStyle), {}, {
+      display: 'none'
+    }) : motionStyle;
+  }, [motionStyle, isDisplayNone]);
   return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
     ref: forwardedRef,
     "aria-labelledby": accessibilityLabelledBy,

package/esm/navigation/NavigationBar.js

@@ -77,10 +77,6 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
   }, props), {}, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
-      gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
-        base: 2,
-        phone: 1
-      },
       overflow: "auto",
       children: [/*#__PURE__*/_jsx(Collapsible, {
         collapsed: !start,
@@ -96,14 +92,22 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
           style: styles === null || styles === void 0 ? void 0 : styles.start,
           children: startNode
         })
-      }), /*#__PURE__*/_jsx(HStack, {
+      }), /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
-        className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
         flexGrow: 1,
-        gap: 1,
-        style: styles === null || styles === void 0 ? void 0 : styles.content,
-        children: children
-      }), end]
+        gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
+          base: 2,
+          phone: 1
+        },
+        children: [/*#__PURE__*/_jsx(HStack, {
+          alignItems: "center",
+          className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+          flexGrow: 1,
+          gap: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.content,
+          children: children
+        }), end]
+      })]
     }), bottom]
   }));
 });

package/esm/themes/coinbaseTheme.js

@@ -316,7 +316,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
+    bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
+    bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line

package/esm/themes/defaultTheme.js

@@ -316,7 +316,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
+    bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
+    bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.67.0",
+  "version": "8.69.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.67.0",
+    "@coinbase/cds-common": "^8.69.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",