@coinbase/cds-mcp-server 8.17.5 → 8.18.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.18.0 ((10/29/2025, 10:09 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.17.6 ((10/28/2025, 02:28 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.17.5 ((10/27/2025, 04:19 PM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/ContentCell.txt

@@ -114,6 +114,7 @@ Note: The mobile ContentCellFallback uses theme-based line heights and reuses th
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `accessory` | `more \| selected \| arrow` | No | `-` | Accessory to display at the end of the cell. |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |

package/mcp-docs/mobile/components/ListCell.txt

@@ -10,7 +10,17 @@ import { ListCell } from '@coinbase/cds-mobile/cells/ListCell'
 
 ## Examples
 
-### Basic usage
+### Overview
+
+A ListCell row is divided into the following 5 columns:
+
+- Media
+- Title & description
+- Intermediary
+- End (detail & subdetail or action)
+- Accessory
+
+#### Basic Usage
 
 ```tsx
 <ListCell
@@ -20,10 +30,12 @@ import { ListCell } from '@coinbase/cds-mobile/cells/ListCell'
 />
 ```
 
-:::note
+:::tip
 Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` may be removed in a future major release.
 :::
 
+#### Spacing Variant
+
 ```tsx
 <VStack>
   {/* Preferred (new design) */}
@@ -33,7 +45,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
     detail="$12,345.00"
     spacingVariant="condensed"
     media={<Avatar src={assets.eth.imageUrl} size="m" />}
-    onClick={console.log}
+    onPress={console.log}
     title="Condensed"
     variant="positive"
   />
@@ -44,7 +56,7 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
     detail="$12,345.00"
     spacingVariant="compact"
     media={<Avatar src={assets.eth.imageUrl} size="m" />}
-    onClick={console.log}
+    onPress={console.log}
     title="Compact (deprecated)"
     variant="positive"
   />
@@ -53,90 +65,243 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
     detail="$12,345.00"
     spacingVariant="normal"
     media={<Avatar src={assets.eth.imageUrl} size="m" />}
-    onClick={console.log}
+    onPress={console.log}
     title="Normal"
     variant="positive"
   />
 </VStack>
 ```
 
-### With Media
+### Media
+
+::::note
+We have deprecated `CellMedia`; pass media directly as shown below.
+::::
+
+#### Leading Icon
 
 ```tsx
 <ListCell
   spacingVariant="condensed"
-  title="List Cell with Media"
-  description="Shows usage with media"
+  title="List Cell with Icon"
+  description="Shows usage with a leading icon"
   media={<Icon active name="info" />}
 />
 ```
 
-### With Detail and Subdetail
+#### Leading Avatar
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="List Cell with Icon"
+  description="Shows usage with a leading icon"
+  media={<Avatar src={assets.btc.imageUrl} size="l" />}
+/>
+```
+
+### Title & Description
+
+#### Title Line Limits
+
+- In condensed spacing (`spacingVariant="condensed"`), the title shows up to two lines by default, regardless of whether a description is present.
+- In normal and compact spacing, the title shows up to two lines when there is no description; if a description is present, the title is limited to one line.
+- Use `disableMultilineTitle` to force the title to one line in all cases.
+
+::::warning
+The `title` and `description` props are rendered inside a CDS `Text` with default fonts and truncation. To render arbitrary React nodes without being wrapped by a `<Text>`, use `titleNode` and `descriptionNode`.
+When using the Node props, you are responsible for styling, layout, and truncation behavior.
+::::
+
+#### Custom Title/Description via Node Props
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  media={<Avatar src={assets.eth.imageUrl} size="m" />}
+  titleNode={
+    <HStack gap={1} alignItems="center">
+      <Icon name="checkmark" />
+      <span>Verified account</span>
+    </HStack>
+  }
+  descriptionNode={
+    <HStack gap={1} alignItems="center">
+      <span>Composed description with any React nodes</span>
+      <Icon name="info" />
+    </HStack>
+  }
+/>
+```
+
+#### Multiline Description
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="Multiline Description"
+  description="This is a longer description that demonstrates how the text wraps when the multiline prop is enabled. It can span multiple lines without truncating."
+  multiline
+/>
+```
+
+### Intermediary
+
+```tsx
+function Intermediary() {
+  const dimensions = { width: 62, height: 18 };
+  const sparklineData = prices
+    .map((price) => parseFloat(price))
+    .filter((price, index) => index % 10 === 0);
+  const referenceY = sparklineData[Math.floor(sparklineData.length / 3)];
+
+  const CompactChart = memo(
+    ({ data, color = 'var(--color-fgPositive)', showArea = false, referenceY }) => (
+      <Box style={{ padding: 1 }}>
+        <LineChart
+          {...dimensions}
+          enableScrubbing={false}
+          overflow="visible"
+          inset={0}
+          showArea={showArea}
+          series={[
+            {
+              id: 'series',
+              data,
+              color,
+            },
+          ]}
+        >
+          <ReferenceLine dataY={referenceY} />
+        </LineChart>
+      </Box>
+    ),
+  );
+
+  return (
+    <ListCell
+      media={<Avatar src={assets.btc.imageUrl} />}
+      spacingVariant="condensed"
+      title="Bitcoin"
+      description="BTC"
+      intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+      detail="$334,239.03"
+      subdetail="+4.06%"
+      priority="start"
+      variant="positive"
+    />
+  );
+}
+```
+
+### End
+
+#### Detail and Subdetail
 
 ```tsx
 <ListCell
   spacingVariant="condensed"
   title="List Cell with Details"
   description="Shows usage with detail and subdetail"
-  detail="$1,234.56"
-  subdetail="+2.5%"
-  variant="positive"
+  detail="Primary detail"
+  subdetail="Secondary detail"
 />
 ```
 
-### With Accessory
+::::warning
+Like `title` and `description`, `detail` and `subdetail` props are also rendered inside a CDS `Text` with default fonts. To render arbitrary React nodes without being wrapped by a `<Text>`, use `detailNode` and `subdetailNode`.
+::::
+
+#### Custom Detail/Subdetail via Node Props
 
 ```tsx
 <ListCell
   spacingVariant="condensed"
-  title="List Cell with Accessory"
-  description="Shows usage with accessory"
-  accessory="arrow"
+  media={<Avatar src={assets.btc.imageUrl} size="m" />}
+  title="Custom end content"
+  description="Detail and subdetail rendered with custom nodes"
+  detailNode={
+    <HStack gap={2} alignItems="center" justifyContent="flex-end">
+      <Icon name="info" />
+      <Text as="div" font="body" overflow="truncate" textAlign="end">
+        $12,345.00
+      </Text>
+    </HStack>
+  }
+  subdetailNode={
+    <HStack gap={1} alignItems="center" justifyContent="flex-end">
+      <Icon name="info" />
+      <Text as="div" color="fgPositive" font="label2" overflow="truncate" textAlign="end">
+        +5.43%
+      </Text>
+    </HStack>
+  }
 />
 ```
 
-### Interactive Cell
+#### End Action
+
+When you pass the `end` prop, it overrides the `detail`/`subdetail`/`detailNode`/`subdetailNode`.
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="End action"
+  detail="This is overridden and won't show up"
+  subdetail="This is overridden and won't show up"
+  detailNode="This is overridden and won't show up"
+  subdetailNode="This is overridden and won't show up"
+  end={
+    <Button
+      compact
+      onPress={() => {
+        alert('Action clicked');
+      }}
+    >
+      Action
+    </Button>
+  }
+/>
+```
+
+### Accessory
+
+#### Interactive Cell with Accessory
 
 ```tsx
 <ListCell
   spacingVariant="condensed"
   title="Interactive List Cell"
-  description="Tap to interact"
-  media={<Icon active name="info" />}
+  description="Click or tap to interact"
   accessory="arrow"
-  onPress={() => alert('Cell pressed!')}
+  onPress={() => alert('Cell clicked!')}
 />
 ```
 
-### With Helper Text
+#### Custom Accessory via Node Prop
 
 ```tsx
-<VStack gap={3}>
-  <ListCell
-    spacingVariant="condensed"
-    title="List Cell with Helper Text"
-    description="Shows usage with helper text below the cell"
-    helperText={<CellHelperText>This is a default helper message.</CellHelperText>}
-    media={<Avatar src={assets.btc.imageUrl} />}
-    end={<Button compact>Action</Button>}
-  />
-  <ListCell
-    spacingVariant="condensed"
-    title="List Cell with Warning"
-    description="Shows usage with a warning message"
-    helperText={<CellHelperText variant="warning">This is a warning message.</CellHelperText>}
-    media={<Avatar src={assets.btc.imageUrl} />}
-    end={<Button compact>Action</Button>}
-  />
-  <ListCell
-    spacingVariant="condensed"
-    title="List Cell with Error"
-    description="Shows usage with an error message"
-    helperText={<CellHelperText variant="error">This is an error message.</CellHelperText>}
-    media={<Avatar src={assets.btc.imageUrl} />}
-    end={<Button compact>Action</Button>}
-  />
-</VStack>
+<ListCell
+  spacingVariant="condensed"
+  title="Accessory Node"
+  description="Custom accessory with its own onPress"
+  media={<Avatar src={assets.eth.imageUrl} size="m" />}
+  end={
+    <Button
+      compact
+      onPress={() => {
+        alert('Action clicked');
+      }}
+    >
+      Action
+    </Button>
+  }
+  accessoryNode={
+    <Tooltip content="question">
+      <Icon size="s" name="questionMark" compact variant="secondary" />
+    </Tooltip>
+  }
+/>
 ```
 
 ### Accessibility Label
@@ -149,55 +314,77 @@ The accessibility props are only applied when the `<ListCell>` has a value for t
     accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onPress prop has a value"
     intermediary={<Icon name="chartLine" />}
     media={<Avatar src={assets.btc.imageUrl} />}
-    onPress={() => console.log('List cell pressed')}
+    onPress={() => window.alert('ListCell clicked!')}
     title="BTC"
+    spacingVariant="condensed"
   />
 
   <ListCell
     intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
     media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
     title="BTC"
+    spacingVariant="condensed"
   />
 </VStack>
 ```
 
-### Compact Mode
-
-```tsx
-<ListCell
-  spacingVariant="compact"
-  title="Compact List Cell"
-  description="Shows compact variant"
-  media={<Icon active name="info" />}
-/>
-```
-
-### Selected State
+### Helper text
 
 ```tsx
-<ListCell
-  spacingVariant="condensed"
-  selected
-  title="Selected List Cell"
-  description="Shows selected state"
-  media={<Icon active name="info" />}
-/>
+<VStack gap={3}>
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Helper Text"
+    description="Shows usage with helper text below the cell"
+    helperText={
+      <CellHelperText font="label2" paddingStart={6}>
+        This is a default helper message.
+      </CellHelperText>
+    }
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Warning"
+    description="Shows usage with a warning message"
+    helperText={
+      <CellHelperText font="label2" variant="warning" paddingStart={6}>
+        This is a warning message.
+      </CellHelperText>
+    }
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Error"
+    description="Shows usage with an error message"
+    helperText={
+      <CellHelperText font="label2" variant="error" paddingStart={6}>
+        This is an error message.
+      </CellHelperText>
+    }
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+</VStack>
 ```
 
 ### Loading States
 
-The ListCellFallback component provides loading state representations of ListCell. It uses placeholder rectangles to indicate where content will appear, creating a smooth loading experience. The mobile version leverages the theme system for consistent line heights and reuses the ListCell component structure for layout consistency.
+The ListCellFallback component provides loading state representations of ListCell. It uses placeholder rectangles to indicate where content will appear, creating a smooth loading experience. The web version uses percentage-based widths and custom layouts to match the ListCell's four-column structure.
 
 ```tsx
 <VStack gap={3}>
   {/* Basic loading state */}
-  <ListCellFallback spacingVariant="condensed" title description />
+  <ListCellFallback title description spacingVariant="condensed" />
 
   {/* Loading state with media */}
-  <ListCellFallback spacingVariant="condensed" title description media="icon" />
+  <ListCellFallback title description media="icon" spacingVariant="condensed" />
 
   {/* Loading state with details */}
-  <ListCellFallback spacingVariant="condensed" title description detail subdetail />
+  <ListCellFallback title description detail subdetail spacingVariant="condensed" />
 
   {/* Full loading state with custom widths */}
   <ListCellFallback
@@ -206,17 +393,96 @@ The ListCellFallback component provides loading state representations of ListCel
     description
     detail
     subdetail
+    helperText
     media="icon"
-    compact
-    rectWidthVariant={1} // Creates a deterministic variant of the loading state
+    rectWidthVariant={2} // Creates a deterministic variant of the loading state
     disableRandomRectWidth
+    styles={{ helperText: { paddingLeft: 48 } }}
   />
 </VStack>
 ```
 
-:::note
-The mobile ListCellFallback uses theme-based line heights and reuses the ListCell component structure, resulting in a more consistent loading state appearance. The compact prop is also supported for loading states.
-:::
+### Priority
+
+The priority prop controls which parts of the cell are protected from shrinking and truncation when horizontal space is limited. It accepts start, middle, and end as a string or an array of strings.
+
+```tsx
+function PriorityContent() {
+  const dimensions = { width: 62, height: 18 };
+  const sparklineData = prices
+    .map((price) => parseFloat(price))
+    .filter((price, index) => index % 10 === 0);
+  const referenceY = sparklineData[Math.floor(sparklineData.length / 3)];
+
+  const CompactChart = memo(
+    ({ data, color = 'var(--color-fgPositive)', showArea = false, referenceY }) => (
+      <Box style={{ padding: 1 }}>
+        <LineChart
+          {...dimensions}
+          enableScrubbing={false}
+          overflow="visible"
+          inset={0}
+          showArea={showArea}
+          series={[
+            {
+              id: 'series',
+              data,
+              color,
+            },
+          ]}
+        >
+          <ReferenceLine dataY={referenceY} />
+        </LineChart>
+      </Box>
+    ),
+  );
+
+  return (
+    <VStack gap={3} style={{ width: '100%', maxWidth: 320, overflow: 'hidden' }}>
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="start"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="middle"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="end"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority={['start', 'middle', 'end']}
+        variant="warning"
+      />
+    </VStack>
+  );
+}
+```
 
 ### Anatomy
 
@@ -290,6 +556,7 @@ Mapping to `styles` / `classNames` keys:
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `accessory` | `more \| selected \| arrow` | No | `-` | Accessory to display at the end of the cell. |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `adjustsFontSizeToFit` | `boolean` | No | `-` | Specifies whether font should be scaled down automatically to fit given style constraints. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
@@ -322,8 +589,10 @@ Mapping to `styles` / `classNames` keys:
 | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
 | `compact` | `boolean` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
-| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. |
-| `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `descriptionNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render description. Takes precedence over description. |
+| `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. For arbitrary content, use detailNode. |
+| `detailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label and/or extra detail. Takes precedence over detail. |
 | `detailWidth` | `string \| number` | No | `-` | - |
 | `disableMultilineTitle` | `boolean` | No | `false 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 the title will take up a single line truncating with ellipses.` | - |
 | `disableSelectionAccessory` | `boolean` | No | `-` | Disable the default accessory that is displayed when the cell is selected. If accessory is provided, that will continue to be displayed, otherwise no accessory will be displayed when the cell is selected. |
@@ -394,14 +663,16 @@ Mapping to `styles` / `classNames` keys:
 | `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed.  When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body  When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px  When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
 | `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components |
-| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. For arbitrary content, use subdetailNode. |
 | `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
+| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
 | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
 | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `titleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render title. Takes precedence over title. |
 | `top` | `string \| number` | No | `-` | - |
 | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |

package/mcp-docs/mobile/components/SelectOption.txt

@@ -62,9 +62,10 @@ const SelectMobile = () => {
 | --- | --- | --- | --- | --- |
 | `value` | `string` | Yes | `-` | Unique identifier for each option |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content. |
-| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
 | `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `detailWidth` | `string \| number` | No | `-` | - |
 | `disabled` | `boolean` | No | `-` | Is the cell disabled? Will apply opacity and disable interaction. |
@@ -79,6 +80,6 @@ const SelectMobile = () => {
 | `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; }` | No | `-` | Styles for the components |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
 
 

package/mcp-docs/web/components/ContentCell.txt

@@ -97,6 +97,7 @@ The ContentCellFallback component provides loading state representations of Cont
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `accessory` | `more \| selected \| arrow` | No | `-` | Accessory to display at the end of the cell. |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |

package/mcp-docs/web/components/ListCell.txt

@@ -10,6 +10,8 @@ import { ListCell } from '@coinbase/cds-web/cells/ListCell'
 
 ## Examples
 
+### Overview
+
 A ListCell row is divided into the following 5 columns:
 
 - Media
@@ -18,13 +20,7 @@ A ListCell row is divided into the following 5 columns:
 - End (detail & subdetail or action)
 - Accessory
 
-:::warning
-
-The `title`, `description`, `detail` and `subdetail` props are only intended to accept a string or `Text` component. Other use cases, while allowed, are not supported and may result in unexpected behavior.
-
-:::
-
-### Basic usage
+#### Basic Usage
 
 ```tsx live
 <ListCell
@@ -34,10 +30,12 @@ The `title`, `description`, `detail` and `subdetail` props are only intended to
 />
 ```
 
-:::note
+:::tip
 Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` may be removed in a future major release.
 :::
 
+#### Spacing Variant
+
 ```tsx live
 <VStack>
   {/* Preferred (new design) */}
@@ -74,7 +72,13 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 </VStack>
 ```
 
-### With Leading Icon
+### Media
+
+::::note
+We have deprecated `CellMedia`; pass media directly as shown below.
+::::
+
+#### Leading Icon
 
 ```tsx live
 <ListCell
@@ -85,7 +89,114 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 />
 ```
 
-### With Detail and Subdetail
+#### Leading Avatar
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  title="List Cell with Icon"
+  description="Shows usage with a leading icon"
+  media={<Avatar src={assets.btc.imageUrl} size="l" />}
+/>
+```
+
+### Title & Description
+
+#### Title Line Limits
+
+- In condensed spacing (`spacingVariant="condensed"`), the title shows up to two lines by default, regardless of whether a description is present.
+- In normal and compact spacing, the title shows up to two lines when there is no description; if a description is present, the title is limited to one line.
+- Use `disableMultilineTitle` to force the title to one line in all cases.
+
+::::warning
+The `title` and `description` props are rendered inside a CDS `Text` with default fonts and truncation. To render arbitrary React nodes without being wrapped by a `<Text>`, use `titleNode` and `descriptionNode`.
+When using the Node props, you are responsible for styling, layout, and truncation behavior.
+::::
+
+#### Custom Title/Description via Node Props
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  media={<Avatar src={assets.eth.imageUrl} size="m" />}
+  titleNode={
+    <HStack gap={1} alignItems="center">
+      <Icon name="checkmark" />
+      <span>Verified account</span>
+    </HStack>
+  }
+  descriptionNode={
+    <HStack gap={1} alignItems="center">
+      <span>Composed description with any React nodes</span>
+      <Icon name="info" />
+    </HStack>
+  }
+/>
+```
+
+#### Multiline Description
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  title="Multiline Description"
+  description="This is a longer description that demonstrates how the text wraps when the multiline prop is enabled. It can span multiple lines without truncating."
+  multiline
+/>
+```
+
+### Intermediary
+
+```tsx live
+function Intermediary() {
+  const dimensions = { width: 62, height: 18 };
+  const sparklineData = prices
+    .map((price) => parseFloat(price))
+    .filter((price, index) => index % 10 === 0);
+  const referenceY = sparklineData[Math.floor(sparklineData.length / 3)];
+
+  const CompactChart = memo(
+    ({ data, color = 'var(--color-fgPositive)', showArea = false, referenceY }) => (
+      <Box style={{ padding: 1 }}>
+        <LineChart
+          {...dimensions}
+          enableScrubbing={false}
+          overflow="visible"
+          inset={0}
+          showArea={showArea}
+          series={[
+            {
+              id: 'series',
+              data,
+              color,
+            },
+          ]}
+        >
+          <ReferenceLine dataY={referenceY} />
+        </LineChart>
+      </Box>
+    ),
+  );
+
+  return (
+    <ListCell
+      media={<Avatar src={assets.btc.imageUrl} />}
+      spacingVariant="condensed"
+      title="Bitcoin"
+      description="BTC"
+      intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+      detail="$334,239.03"
+      subdetail="+4.06%"
+      priority="start"
+      variant="positive"
+    />
+  );
+}
+```
+
+### End
+
+#### Detail and Subdetail
 
 ```tsx live
 <ListCell
@@ -97,7 +208,65 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 />
 ```
 
-### Interactive Cell with Accessory
+::::warning
+Like `title` and `description`, `detail` and `subdetail` props are also rendered inside a CDS `Text` with default fonts. To render arbitrary React nodes without being wrapped by a `<Text>`, use `detailNode` and `subdetailNode`.
+::::
+
+#### Custom Detail/Subdetail via Node Props
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  media={<Avatar src={assets.btc.imageUrl} size="m" />}
+  title="Custom end content"
+  description="Detail and subdetail rendered with custom nodes"
+  detailNode={
+    <HStack gap={2} alignItems="center" justifyContent="flex-end">
+      <Icon name="info" />
+      <Text as="div" font="body" overflow="truncate" textAlign="end">
+        $12,345.00
+      </Text>
+    </HStack>
+  }
+  subdetailNode={
+    <HStack gap={1} alignItems="center" justifyContent="flex-end">
+      <Icon name="info" />
+      <Text as="div" color="fgPositive" font="label2" overflow="truncate" textAlign="end">
+        +5.43%
+      </Text>
+    </HStack>
+  }
+/>
+```
+
+#### End Action
+
+When you pass the `end` prop, it overrides the `detail`/`subdetail`/`detailNode`/`subdetailNode`.
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  title="End action"
+  detail="This is overridden and won't show up"
+  subdetail="This is overridden and won't show up"
+  detailNode="This is overridden and won't show up"
+  subdetailNode="This is overridden and won't show up"
+  end={
+    <Button
+      compact
+      onClick={() => {
+        alert('Action clicked');
+      }}
+    >
+      Action
+    </Button>
+  }
+/>
+```
+
+### Accessory
+
+#### Interactive Cell with Accessory
 
 ```tsx live
 <ListCell
@@ -109,7 +278,57 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 />
 ```
 
-### With Helper Text
+#### Custom Accessory via Node Prop
+
+```tsx live
+<ListCell
+  spacingVariant="condensed"
+  title="Accessory Node"
+  description="Custom accessory with its own onClick"
+  media={<Avatar src={assets.eth.imageUrl} size="m" />}
+  end={
+    <Button
+      compact
+      onClick={() => {
+        alert('Action clicked');
+      }}
+    >
+      Action
+    </Button>
+  }
+  accessoryNode={
+    <Tooltip content="question">
+      <Icon size="s" name="questionMark" compact variant="secondary" />
+    </Tooltip>
+  }
+/>
+```
+
+### Accessibility Label
+
+The accessibility props are only applied when the `<ListCell>` has a value for the `onClick` prop. Otherwise, content passed into the `<ListCell>` must use accessibility props and attributes as needed.
+
+```tsx live
+<VStack gap={1}>
+  <ListCell
+    accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onClick prop has a value"
+    intermediary={<Icon name="chartLine" />}
+    media={<Avatar src={assets.btc.imageUrl} />}
+    onClick={() => window.alert('ListCell clicked!')}
+    title="BTC"
+    spacingVariant="condensed"
+  />
+
+  <ListCell
+    intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
+    media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
+    title="BTC"
+    spacingVariant="condensed"
+  />
+</VStack>
+```
+
+### Helper text
 
 ```tsx live
 <VStack gap={3}>
@@ -152,39 +371,6 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 </VStack>
 ```
 
-### Accessibility Label
-
-The accessibility props are only applied when the `<ListCell>` has a value for the `onClick` prop. Otherwise, content passed into the `<ListCell>` must use accessibility props and attributes as needed.
-
-```tsx live
-<VStack gap={1}>
-  <ListCell
-    accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onClick prop has a value"
-    intermediary={<Icon name="chartLine" />}
-    media={<Avatar src={assets.btc.imageUrl} />}
-    onClick={() => window.alert('ListCell clicked!')}
-    title="BTC"
-  />
-
-  <ListCell
-    intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
-    media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
-    title="BTC"
-  />
-</VStack>
-```
-
-### Multiline Description
-
-```tsx live
-<ListCell
-  spacingVariant="condensed"
-  title="Multiline Description"
-  description="This is a longer description that demonstrates how the text wraps when the multiline prop is enabled. It can span multiple lines without truncating."
-  multiline
-/>
-```
-
 ### Loading States
 
 The ListCellFallback component provides loading state representations of ListCell. It uses placeholder rectangles to indicate where content will appear, creating a smooth loading experience. The web version uses percentage-based widths and custom layouts to match the ListCell's four-column structure.
@@ -216,6 +402,88 @@ The ListCellFallback component provides loading state representations of ListCel
 </VStack>
 ```
 
+### Priority
+
+The priority prop controls which parts of the cell are protected from shrinking and truncation when horizontal space is limited. It accepts start, middle, and end as a string or an array of strings.
+
+```tsx live
+function PriorityContent() {
+  const dimensions = { width: 62, height: 18 };
+  const sparklineData = prices
+    .map((price) => parseFloat(price))
+    .filter((price, index) => index % 10 === 0);
+  const referenceY = sparklineData[Math.floor(sparklineData.length / 3)];
+
+  const CompactChart = memo(
+    ({ data, color = 'var(--color-fgPositive)', showArea = false, referenceY }) => (
+      <Box style={{ padding: 1 }}>
+        <LineChart
+          {...dimensions}
+          enableScrubbing={false}
+          overflow="visible"
+          inset={0}
+          showArea={showArea}
+          series={[
+            {
+              id: 'series',
+              data,
+              color,
+            },
+          ]}
+        >
+          <ReferenceLine dataY={referenceY} />
+        </LineChart>
+      </Box>
+    ),
+  );
+
+  return (
+    <VStack gap={3} style={{ width: '100%', maxWidth: 320, overflow: 'hidden' }}>
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="start"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="middle"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority="end"
+        variant="positive"
+      />
+      <ListCell
+        spacingVariant="condensed"
+        title="Asset with a really long name"
+        description="Some description of the asset"
+        intermediary={<CompactChart data={sparklineData} referenceY={referenceY} />}
+        detail="$334,239.03"
+        subdetail="+4.06%"
+        priority={['start', 'middle', 'end']}
+        variant="warning"
+      />
+    </VStack>
+  );
+}
+```
+
 ### Anatomy
 
 Without helper text (top-only layout):
@@ -288,6 +556,7 @@ Mapping to `styles` / `classNames` keys:
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `accessory` | `more \| selected \| arrow` | No | `-` | Accessory to display at the end of the cell. |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -321,8 +590,10 @@ Mapping to `styles` / `classNames` keys:
 | `compact` | `boolean` | No | `-` | - |
 | `contentClassName` | `string` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
-| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. |
-| `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `descriptionNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render description. Takes precedence over description. |
+| `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. For arbitrary content, use detailNode. |
+| `detailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label and/or extra detail. Takes precedence over detail. |
 | `detailWidth` | `string \| number` | No | `-` | - |
 | `disableMultilineTitle` | `boolean` | No | `-` | 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 the title will take up a single line truncating with ellipses. |
 | `disableSelectionAccessory` | `boolean` | No | `-` | Disable the default accessory that is displayed when the cell is selected. If accessory is provided, that will continue to be displayed, otherwise no accessory will be displayed when the cell is selected. |
@@ -400,13 +671,15 @@ Mapping to `styles` / `classNames` keys:
 | `spacingVariant` | `normal \| compact \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed.  When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body  When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px  When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
 | `style` | `CSSProperties` | No | `-` | - |
 | `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
-| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. For arbitrary content, use subdetailNode. |
 | `subdetailFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font to apply to the subdetail text. |
+| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
 | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
+| `titleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render title. Takes precedence over title. |
 | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
 | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
 | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |

package/mcp-docs/web/components/SelectOption.txt

@@ -44,6 +44,7 @@ function DefaultSelect() {
 | --- | --- | --- | --- | --- |
 | `value` | `string` | Yes | `-` | Unique identifier for each option |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `accessoryNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom accessory node rendered at the end of the cell. Takes precedence over accessory. |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -75,7 +76,7 @@ function DefaultSelect() {
 | `compact` | `boolean` | No | `-` | - |
 | `contentClassName` | `string` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
-| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
 | `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `detailWidth` | `string \| number` | No | `-` | - |
 | `disableCloseOnOptionChange` | `boolean` | No | `-` | Prevent menu from closing when an option is selected |
@@ -154,7 +155,7 @@ function DefaultSelect() {
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
 | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | 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. |
 | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
 | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
 | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.17.5",
+  "version": "8.18.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",