@coinbase/cds-web 9.10.4 → 9.11.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.11.0 (8/7/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: add a tertiary-level header to AccordionItem. [[#830](https://github.com/coinbase/cds/pull/830)]
+
 ## 9.10.4 ((8/6/2026, 12:30 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/accordion/AccordionHeader.d.ts

@@ -13,6 +13,10 @@ export type AccordionTitleBaseProps = {
    * Subtitle of the accordion item
    */
   subtitle?: string;
+  /**
+   * Tertiary text of the accordion item. Uses the CDS `legal` font.
+   */
+  tertiaryTitle?: string;
 };
 export type AccordionIconBaseProps = Pick<CollapsibleBaseProps, 'collapsed'>;
 export type AccordionHeaderBaseProps = SharedProps &
@@ -36,7 +40,11 @@ export declare const AccordionMedia: React.MemoExoticComponent<
 >;
 type AccordionTitleProps = AccordionTitleBaseProps;
 export declare const AccordionTitle: React.MemoExoticComponent<
-  ({ title, subtitle }: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
+  ({
+    title,
+    subtitle,
+    tertiaryTitle,
+  }: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
 >;
 type AccordionIconProps = AccordionIconBaseProps;
 export declare const AccordionIcon: React.MemoExoticComponent<

package/dts/accordion/AccordionHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAWvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAoBJ,KAAK,mBAAmB,GAAG,uBAAuB,CAAC;AAEnD,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAIhE,CAAC;AAEH,KAAK,mBAAmB,GAAG,uBAAuB,CAAC;AAEnD,eAAO,MAAM,cAAc,kDAA8B,mBAAmB,6CAoB1E,CAAC;AAEH,KAAK,kBAAkB,GAAG,sBAAsB,CAAC;AAEjD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,eAAe;IA9ExB;;OAEG;cACO,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAC/B;;;;OAIG;aACM,MAAM;2CAiHlB,CAAC"}
+{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAWvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAoBJ,KAAK,mBAAmB,GAAG,uBAAuB,CAAC;AAEnD,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAIhE,CAAC;AAEH,KAAK,mBAAmB,GAAG,uBAAuB,CAAC;AAEnD,eAAO,MAAM,cAAc,iEAA6C,mBAAmB,6CAgCzF,CAAC;AAEH,KAAK,kBAAkB,GAAG,sBAAsB,CAAC;AAEjD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,eAAe;IA1FxB;;OAEG;cACO,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAC/B;;;;OAIG;aACM,MAAM;2CAsIlB,CAAC"}

package/dts/accordion/AccordionItem.d.ts

@@ -18,6 +18,7 @@ export declare const AccordionItem: React.MemoExoticComponent<
     itemKey,
     title,
     subtitle,
+    tertiaryTitle,
     children,
     onClick,
     media,

package/dts/accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC9E,IAAI,CAAC,uBAAuB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,qIAarB,kBAAkB,6CA4BtB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC9E,IAAI,CAAC,uBAAuB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,oJAcrB,kBAAkB,6CA6BtB,CAAC"}

package/esm/accordion/AccordionHeader.js

@@ -32,7 +32,8 @@ export const AccordionMedia = /*#__PURE__*/memo(_ref => {
 export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
   let {
     title,
-    subtitle
+    subtitle,
+    tertiaryTitle
   } = _ref2;
   return /*#__PURE__*/_jsx(Box, {
     className: titleCss,
@@ -49,11 +50,19 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
       }), !!subtitle && /*#__PURE__*/_jsx(Text, {
         as: "div",
         className: subtitleCss,
-        color: "fgMuted",
+        color: tertiaryTitle ? undefined : 'fgMuted',
         display: "block",
-        font: "body",
+        font: "label2",
         overflow: "wrap",
         children: subtitle
+      }), !!tertiaryTitle && /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        className: subtitleCss,
+        color: "fgMuted",
+        display: "block",
+        font: "legal",
+        overflow: "wrap",
+        children: tertiaryTitle
       })]
     })
   });
@@ -78,6 +87,7 @@ export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4,
     itemKey,
     title,
     subtitle,
+    tertiaryTitle,
     onClick,
     media,
     collapsed = false,
@@ -116,6 +126,7 @@ export const AccordionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4,
           media: media
         }), /*#__PURE__*/_jsx(AccordionTitle, {
           subtitle: subtitle,
+          tertiaryTitle: tertiaryTitle,
           title: title
         }), /*#__PURE__*/_jsx(AccordionIcon, {
           collapsed: collapsed

package/esm/accordion/AccordionItem.js

@@ -15,6 +15,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
     itemKey,
     title,
     subtitle,
+    tertiaryTitle,
     children,
     onClick,
     media,
@@ -39,6 +40,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
       media: media,
       onClick: onClick,
       subtitle: subtitle,
+      tertiaryTitle: tertiaryTitle,
       testID: testID && "".concat(testID, "-header"),
       title: title
     }), /*#__PURE__*/_jsx(AccordionPanel, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.10.4",
+  "version": "9.11.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.10.4",
+    "@coinbase/cds-common": "^9.11.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.46.0",
     "@coinbase/cds-lottie-files": "^3.3.4",