@coinbase/cds-web 8.17.5 → 8.18.0

package/CHANGELOG.md

@@ -8,11 +8,23 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.18.0 (10/29/2025 PST)
+
+#### 🚀 Updates
+
+- Support custom `titleNode` `descriptionNode` `detailNode` `subdetailNode``accessoryNode` for ListCell. [[#131](https://github.com/coinbase/cds/pull/131)] [DX-5006]
+
+## 8.17.6 (10/28/2025 PST)
+
+#### 🐞 Fixes
+
+- Fixed Select height on web.
+
 ## 8.17.5 (10/27/2025 PST)
 
 #### 🐞 Fixes
 
-- Fix: correct padding. [[#133](https://github.com/coinbase/cds/pull/133)]
+- Increased ListCell innerSpacing when spacingVariant=“condensed” [[#133](https://github.com/coinbase/cds/pull/133)]
 
 ## 8.17.4 (10/27/2025 PST)
 

package/dts/cells/Cell.d.ts

@@ -38,6 +38,8 @@ export type CellBaseProps = Polymorphic.ExtendableProps<
     onClick?: React.MouseEventHandler;
     /** Accessory element rendered at the end of the cell (e.g., chevron). */
     accessory?: React.ReactElement<CellAccessoryProps>;
+    /** Custom accessory node rendered at the end of the cell. Takes precedence over `accessory`. */
+    accessoryNode?: React.ReactNode;
     /** Main content of the cell; typically title/description content. */
     children: React.ReactNode;
     /**

package/dts/cells/Cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAsC1D,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAExC,MAAM,MAAM,kBAAkB,GAAG,OAAO,kBAAkB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,GACd,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,eAAe,CACrD,YAAY,EACZ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACrC,qBAAqB;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnD,gGAAgG;IAChG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,yDAAyD;IACzD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACvC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACpC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACnC,mDAAmD;QACnD,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACjC,CAAC;IACF,qCAAqC;IACrC,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mDAAmD;QACnD,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAC9E,WAAW,EACX,aAAa,CACd,CAAC;AAEF,KAAK,aAAa,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,kBAAkB,EAC/E,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAC1B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,IAAI,EAAE,aAwRlB,CAAC"}

package/dts/cells/CellDetail.d.ts

@@ -4,14 +4,18 @@ export type CellDetailVariant = 'foregroundMuted' | 'negative' | 'positive' | 'w
 export type CellDetailProps = {
   /**
    * Label and/or extra detail. This prop is only intended to accept a string or Text component;
-   * other use cases, while allowed, are not supported and may result in unexpected behavior.
+   * other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `detailNode`.
    */
   detail?: React.ReactNode;
+  /** React node to render label and/or extra detail. Takes precedence over `detail`. */
+  detailNode?: React.ReactNode;
   /**
    * Subdetail providing more information. This prop is only intended to accept a string or Text component;
-   * other use cases, while allowed, are not supported and may result in unexpected behavior.
+   * other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `subdetailNode`.
    */
   subdetail?: React.ReactNode;
+  /** React node to render subdetail. Takes precedence over `subdetail`. */
+  subdetailNode?: React.ReactNode;
   /** Variant color to apply to the subdetail text. */
   variant?: CellDetailVariant;
   /** Font to apply to the subdetail text. */

package/dts/cells/CellDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAExF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AASF,eAAO,MAAM,UAAU,6CA4BrB,CAAC"}
+{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAExF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sFAAsF;IACtF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AASF,eAAO,MAAM,UAAU,6CAkCrB,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -58,8 +58,10 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
      * @default 'normal'
      */
     spacingVariant?: 'normal' | 'compact' | 'condensed';
-    /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. */
+    /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `descriptionNode`. */
     description?: React.ReactNode;
+    /** React node to render description. Takes precedence over `description`. */
+    descriptionNode?: React.ReactNode;
     /**
      * When there is no description the title will take up two lines by default.
      * When this is set to true multiline title behavior is overwritten, and regardless of description text state
@@ -78,8 +80,10 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
     media?: React.ReactElement;
     /** Allow the description to span multiple lines. This *will* break fixed height requirements, so should not be used in a `FlatList`. */
     multiline?: boolean;
-    /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. */
+    /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `titleNode`. */
     title?: React.ReactNode;
+    /** React node to render title. Takes precedence over `title`. */
+    titleNode?: React.ReactNode;
     /** Class names for the components */
     classNames?: {
       root?: string;

package/dts/cells/ListCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}

package/dts/controls/SelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/controls/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC1D,GAAG;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,aAAa;qBApBP,OAAO;IACxB,qCAAqC;cAC3B,OAAO;IACjB,iEAAiE;cACvD,MAAM,IAAI;sCAwIrB,CAAC"}
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/controls/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC1D,GAAG;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,aAAa;qBApBP,OAAO;IACxB,qCAAqC;cAC3B,OAAO;IACjB,iEAAiE;cACvD,MAAM,IAAI;sCAyIrB,CAAC"}

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
+const _excluded = ["as", "accessory", "accessoryNode", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
   _excluded2 = ["marginX"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -29,6 +29,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
       accessory,
+      accessoryNode,
       alignItems = 'center',
       borderRadius = 200,
       children,
@@ -145,12 +146,12 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
         style: styles === null || styles === void 0 ? void 0 : styles.end,
         width: detailWidth,
         children: end !== null && end !== void 0 ? end : detail
-      }), !!accessory && /*#__PURE__*/_jsx(Box, {
+      }), !!(accessoryNode !== null && accessoryNode !== void 0 ? accessoryNode : accessory) && /*#__PURE__*/_jsx(Box, {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.accessory,
         flexGrow: 0,
         flexShrink: 0,
         style: styles === null || styles === void 0 ? void 0 : styles.accessory,
-        children: accessory
+        children: accessoryNode !== null && accessoryNode !== void 0 ? accessoryNode : accessory
       })]
     });
     if (!bottom) {
@@ -172,7 +173,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
         children: bottom
       })]
     }));
-  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, bottom, rowGap]);
+  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, accessoryNode, bottom, rowGap]);
   const pressableWrappedContent = useMemo(() => {
     const pressableSharedProps = {
       noScaleOnPress: true,

package/esm/cells/CellDetail.js

@@ -14,17 +14,19 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
     detail,
     subdetail,
     variant = 'foregroundMuted',
-    subdetailFont = 'label2'
+    subdetailFont = 'label2',
+    detailNode,
+    subdetailNode
   } = _ref;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!!detail && /*#__PURE__*/_jsx(Text, {
+    children: [detailNode ? detailNode : detail ? /*#__PURE__*/_jsx(Text, {
       as: "div",
       display: "block",
       font: "body",
       overflow: "truncate",
       textAlign: "end",
       children: detail
-    }), !!subdetail && /*#__PURE__*/_jsx(Text, {
+    }) : null, subdetailNode ? subdetailNode : subdetail ? /*#__PURE__*/_jsx(Text, {
       as: "div",
       color: variantColorMap[variant],
       display: "block",
@@ -32,6 +34,6 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
       overflow: "truncate",
       textAlign: "end",
       children: subdetail
-    })]
+    }) : null]
   });
 });

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "end", "action", "compact", "title", "description", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "spacingVariant", "className", "classNames", "styles", "style"];
+const _excluded = ["as", "accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "description", "descriptionNode", "detailNode", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetailNode", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "spacingVariant", "className", "classNames", "styles", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -34,11 +34,15 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
   let {
       as,
       accessory,
+      accessoryNode,
       end: endProp,
       action,
       compact,
       title,
+      titleNode,
       description,
+      descriptionNode,
+      detailNode,
       detail,
       disabled,
       disableMultilineTitle = false,
@@ -47,6 +51,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       media,
       multiline,
       selected,
+      subdetailNode,
       subdetail,
       variant,
       intermediary,
@@ -76,21 +81,24 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         children: action
       });
     }
-    if (detail || subdetail) {
+    if (detail || subdetail || detailNode || subdetailNode) {
       return /*#__PURE__*/_jsx(CellDetail, {
         detail: detail,
+        detailNode: detailNode,
         subdetail: subdetail,
         subdetailFont: spacingVariant === 'condensed' ? 'label2' : 'body',
+        subdetailNode: subdetailNode,
         variant: variant
       });
     }
     return undefined;
-  }, [endProp, action, detail, subdetail, variant, spacingVariant]);
+  }, [endProp, action, detail, detailNode, subdetail, subdetailNode, variant, spacingVariant]);
   return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
     ref: ref,
     accessory: accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
       type: accessoryType
     }),
+    accessoryNode: accessoryNode,
     as: Component,
     borderRadius: (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
     bottomContent: helperText,
@@ -117,7 +125,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     }
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(VStack, {
-      children: [!!title && /*#__PURE__*/_jsx(Text, {
+      children: [titleNode ? titleNode : title ? /*#__PURE__*/_jsx(Text, {
         as: "div",
         display: "block",
         font: "headline",
@@ -127,7 +135,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         overflow: "wrap",
         style: styles === null || styles === void 0 ? void 0 : styles.title,
         children: title
-      }), !!description && /*#__PURE__*/_jsx(Text, {
+      }) : null, descriptionNode ? descriptionNode : description ? /*#__PURE__*/_jsx(Text, {
         as: "div",
         className: cx(multiline ? overflowCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.description),
         color: "fgMuted",
@@ -136,7 +144,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         overflow: multiline ? undefined : 'truncate',
         style: styles === null || styles === void 0 ? void 0 : styles.description,
         children: description
-      })]
+      }) : null]
     })
   }));
 }));

package/esm/controls/SelectTrigger.js

@@ -67,6 +67,7 @@ export const SelectTrigger = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
     children: /*#__PURE__*/_jsxs(Pressable, _objectSpread(_objectSpread({
       noScaleOnPress: true,
       background: "transparent",
+      borderWidth: 0,
       className: pressableOverridesCss,
       minHeight: minHeight,
       minWidth: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.17.5",
+  "version": "8.18.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.17.5",
+    "@coinbase/cds-common": "^8.18.0",
     "@coinbase/cds-icons": "^5.5.0",
     "@coinbase/cds-illustrations": "^4.25.0",
     "@coinbase/cds-lottie-files": "^3.3.2",