@coinbase/cds-mcp-server 8.47.4 → 8.48.1

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

@@ -376,6 +376,255 @@ function Scrubbing() {
 }
 ```
 
+### Animations
+
+CartesianChart delegates transition control to its child components. You can also disable all animations chart-wide by passing `animate={false}` on CartesianChart.
+
+#### Enter Only
+
+Disable the update morph animation while keeping a slow enter reveal. Data changes snap instantly but the initial chart appearance animates. Useful when new data arrives frequently and morphing would be distracting.
+
+```tsx live
+function EnterAnimationOnly() {
+  const dataCount = 15;
+  const updateInterval = 2500;
+
+  function generateNextValue(prev: number) {
+    const step = Math.random() * 30 - 15;
+    return Math.max(0, Math.min(100, prev + step));
+  }
+
+  function generateInitialData() {
+    const data = [50];
+    for (let i = 1; i < dataCount; i++) {
+      data.push(generateNextValue(data[i - 1]));
+    }
+    return data;
+  }
+
+  function Chart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((current) => {
+          const last = current[current.length - 1];
+          return [...current.slice(1), generateNextValue(last)];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+      <CartesianChart
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        inset={{ top: 16, bottom: 16, left: 16, right: 16 }}
+        series={[{ id: 'values', data }]}
+        aria-hidden="true"
+      >
+        <Line
+          seriesId="values"
+          strokeWidth={3}
+          transitions={{
+            update: null,
+            enter: { type: 'tween', duration: 1.0 },
+          }}
+        />
+      </CartesianChart>
+    );
+  }
+
+  return <Chart />;
+}
+```
+
+#### Update Only
+
+Disable the enter reveal animation while keeping a slow update morph. The chart appears instantly but data changes animate smoothly. Useful when the chart is embedded in content that should not animate on load.
+
+```tsx live
+function UpdateAnimationOnly() {
+  const dataCount = 15;
+  const updateInterval = 2500;
+
+  function generateNextValue(prev: number) {
+    const step = Math.random() * 30 - 15;
+    return Math.max(0, Math.min(100, prev + step));
+  }
+
+  function generateInitialData() {
+    const data = [50];
+    for (let i = 1; i < dataCount; i++) {
+      data.push(generateNextValue(data[i - 1]));
+    }
+    return data;
+  }
+
+  function Chart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((current) => {
+          const last = current[current.length - 1];
+          return [...current.slice(1), generateNextValue(last)];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+      <CartesianChart
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        inset={{ top: 16, bottom: 16, left: 16, right: 16 }}
+        series={[{ id: 'values', data }]}
+        aria-hidden="true"
+      >
+        <Line
+          seriesId="values"
+          strokeWidth={3}
+          transitions={{
+            enter: null,
+            update: { type: 'spring', stiffness: 900, damping: 120, mass: 8 },
+          }}
+        />
+      </CartesianChart>
+    );
+  }
+
+  return <Chart />;
+}
+```
+
+#### Mixed Transitions Per Child
+
+Each child component can define its own transitions independently. Here, the `Line` uses a spring morph while the bars snap with no update animation. This lets you fine-tune each visual layer within a single chart.
+
+```tsx live
+function MixedTransitions() {
+  const dataCount = 10;
+  const updateInterval = 2000;
+
+  function generateNextValue(prev: number) {
+    const step = Math.random() * 20 - 10;
+    return Math.max(10, Math.min(100, prev + step));
+  }
+
+  function generateInitialData() {
+    const data = [50];
+    for (let i = 1; i < dataCount; i++) {
+      data.push(generateNextValue(data[i - 1]));
+    }
+    return data;
+  }
+
+  function Chart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((current) => {
+          const last = current[current.length - 1];
+          return [...current.slice(1), generateNextValue(last)];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+      <CartesianChart
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        inset={{ top: 16, bottom: 16, left: 16, right: 16 }}
+        series={[
+          { id: 'line', data, color: 'var(--color-accentBoldBlue)', yAxisId: 'default' },
+          {
+            id: 'bars',
+            data: data.map((d) => d * 0.3),
+            color: 'var(--color-accentBoldPurple)',
+            yAxisId: 'bars',
+          },
+        ]}
+        xAxis={{ scaleType: 'band' }}
+        yAxis={[
+          { id: 'default' },
+          { id: 'bars', range: ({ min, max }) => ({ min: max - 48, max }) },
+        ]}
+        aria-hidden="true"
+      >
+        <BarPlot
+          seriesIds={['bars']}
+          transitions={{
+            update: null,
+            enter: { type: 'tween', duration: 0.6 },
+          }}
+        />
+        <Line
+          seriesId="line"
+          strokeWidth={3}
+          transitions={{
+            update: { type: 'spring', stiffness: 700, damping: 20 },
+          }}
+        />
+      </CartesianChart>
+    );
+  }
+
+  return <Chart />;
+}
+```
+
+#### No Animations
+
+You can disable all animations chart-wide by setting `animate` to `false` on CartesianChart. This is useful for static snapshots or when performance is a concern. Compare this to the animated examples above — data still updates, but changes snap instantly without any transition.
+
+```tsx live
+function DisableAnimations() {
+  const dataCount = 15;
+  const updateInterval = 2500;
+
+  function generateNextValue(prev: number) {
+    const step = Math.random() * 30 - 15;
+    return Math.max(0, Math.min(100, prev + step));
+  }
+
+  function generateInitialData() {
+    const data = [50];
+    for (let i = 1; i < dataCount; i++) {
+      data.push(generateNextValue(data[i - 1]));
+    }
+    return data;
+  }
+
+  function Chart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((current) => {
+          const last = current[current.length - 1];
+          return [...current.slice(1), generateNextValue(last)];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+      <CartesianChart
+        animate={false}
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        inset={{ top: 16, bottom: 16, left: 16, right: 16 }}
+        series={[{ id: 'values', data }]}
+        aria-hidden="true"
+      >
+        <Line seriesId="values" showArea strokeWidth={3} />
+      </CartesianChart>
+    );
+  }
+
+  return <Chart />;
+}
+```
+
 ### Customization
 
 #### Price with Volume

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

@@ -402,7 +402,7 @@ function Points() {
 
 ### Animations
 
-You can configure chart transitions using `transition` on LineChart and `beaconTransitions` on [Scrubber](/components/graphs/Scrubber). You can also disable animations by setting the `animate` on LineChart to `false`.
+You can configure chart transitions using `transitions`. The `transitions` prop accepts an object with `enter` (the clip-path reveal animation) and `update` (data change morph animation) keys. Set either to `null` to disable that animation phase. You can also disable all animations by setting `animate` on LineChart to `false`.
 
 ```jsx live
 function Transitions() {
@@ -526,12 +526,12 @@ function Transitions() {
           AreaComponent={MyGradient}
           seriesId="prices"
           strokeWidth={3}
-          transition={myTransitionConfig}
+          transitions={{ update: myTransitionConfig }}
         />
         <Scrubber
           hideOverlay
-          beaconTransitions={{ update: myTransitionConfig }}
           label={valueAtIndexFormatter}
+          transitions={{ update: myTransitionConfig }}
         />
       </CartesianChart>
     );
@@ -2021,7 +2021,8 @@ function ForecastAssetPrice() {
 | `textTransform` | `ResponsiveProp<none \| uppercase \| lowercase \| capitalize>` | No | `-` | - |
 | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
 | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
-| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition configuration for line animations. |
+| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
+| `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
 | `type` | `dotted \| solid` | No | `'solid'` | The type of line to render. |
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |

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

@@ -10,19 +10,77 @@ import { Link } from '@coinbase/cds-web/typography/Link'
 
 ## Examples
 
-### Default
+Link renders a pressable [Text](/components/typography/Text) element as an anchor (`<a>`) by default. It inherits parent text styles and supports the same `font` and `color` props as Text.
 
-Default Link text will inherit parent text styles.
+### Basics
+
+By default, Link inherits the text styles of its parent. Pass an `href` to set the destination URL.
+
+```jsx live
+<Text font="body" as="p">
+  Check out the <Link href="https://www.coinbase.com/">Coinbase homepage</Link> for more info.
+</Text>
+```
+
+### Underline
+
+Use the `underline` prop to add a text decoration underline to the link. This is particularly important for inline links within body text to meet [WCAG 2.0 accessibility requirements](https://webaim.org/standards/wcag/checklist).
+
+```jsx live
+<Text font="body" as="p">
+  Read our{' '}
+  <Link underline href="https://www.coinbase.com/">
+    terms and conditions
+  </Link>{' '}
+  before proceeding.
+</Text>
+```
+
+#### Underline with different fonts
+
+The underline works across all font styles.
+
+```jsx live
+<VStack alignItems="flex-start" gap={3}>
+  <Link underline font="body" href="https://www.coinbase.com/">
+    body link
+  </Link>
+  <Link underline font="label1" href="https://www.coinbase.com/">
+    label1 link
+  </Link>
+  <Link underline font="caption" href="https://www.coinbase.com/">
+    caption link
+  </Link>
+  <Link underline font="legal" href="https://www.coinbase.com/">
+    legal link
+  </Link>
+  <Link underline font="title2" href="https://www.coinbase.com/">
+    title2 link
+  </Link>
+</VStack>
+```
+
+#### Underline within a paragraph
+
+When a link appears inline within body text, always use `underline` so users can distinguish the link from surrounding text without relying on color alone.
 
 ```jsx live
-<Link>Default is inherited text</Link>
+<Text as="p" display="block" font="body">
+  This is a paragraph with an{' '}
+  <Link underline href="https://www.coinbase.com/">
+    inline underlined link
+  </Link>{' '}
+  that is clearly distinguishable from the surrounding text.
+</Text>
 ```
 
-### Styling your link
+### Styling
+
+#### Font
 
-To style a `<Link />` component, simply wrap the `Link` node in the desired `Text` component, using the `as` prop for your usecase (for example, `p` for body text, `h1`/`h2`/`h3` for titles, etc). However, there may be times when a rendering a span is exactly what you want. In those cases, providing a font prop makes sense.
+To style a Link, either wrap it in the desired [Text](/components/typography/Text) component with the appropriate `as` prop for semantic HTML, or use the `font` prop directly on the Link.
 
-Wrapping your Link in the appropriate Text element
+##### Wrapping in Text
 
 ```jsx live
 <VStack alignItems="flex-start" gap={3}>
@@ -69,9 +127,9 @@ Wrapping your Link in the appropriate Text element
 </VStack>
 ```
 
-### Using the font prop
+##### Using the font prop
 
-If you find yourself in a situation where you simply need to style a link as a Text component without wrapping it in the semantically appropriate text element, reach for the `font` prop.
+If you need to style a link without wrapping it in a semantically appropriate text element, use the `font` prop directly.
 
 ```jsx live
 <VStack alignItems="flex-start" gap={3}>
@@ -83,38 +141,51 @@ If you find yourself in a situation where you simply need to style a link as a T
 </VStack>
 ```
 
-### Color override
-
-```jsx live
-<Link href="https://www.coinbase.com/" color="fgNegative">
-  With color override
-</Link>
-```
+#### Color
 
-### openInNewWindow and rel props
+Override the default link color using the `color` prop with any CDS foreground token.
 
 ```jsx live
 <VStack alignItems="flex-start" gap={3}>
-  <Link font="title1" href="https://www.coinbase.com/" openInNewWindow>
-    Open window in existing tab
+  <Link href="https://www.coinbase.com/" color="fgPrimary">
+    fgPrimary (default)
   </Link>
-  <Link font="title2" href="https://www.coinbase.com/" rel="noreferrer">
-    Sets rel to noreferrer
+  <Link href="https://www.coinbase.com/" color="fgNegative">
+    fgNegative
   </Link>
-  <Link font="title3" href="https://www.coinbase.com/" rel="noopener">
-    Sets rel to noopener
+  <Link underline href="https://www.coinbase.com/" color="fgNegative">
+    fgNegative with underline
   </Link>
 </VStack>
 ```
 
-### Handling onClick
+### Navigation
+
+#### openInNewWindow
+
+Set `openInNewWindow` to open the link in a new browser tab.
 
 ```jsx live
-<Link font="headline" href="#tagname" onClick={() => console.log('pressed link')} rel="noopener">
-  Handles onClick
+<Link font="body" href="https://www.coinbase.com/" openInNewWindow>
+  Opens in a new tab
 </Link>
 ```
 
+#### rel
+
+Use the `rel` prop to set the relationship between the current document and the linked resource.
+
+```jsx live
+<VStack alignItems="flex-start" gap={3}>
+  <Link font="body" href="https://www.coinbase.com/" rel="noreferrer">
+    rel=noreferrer
+  </Link>
+  <Link font="body" href="https://www.coinbase.com/" rel="noopener">
+    rel=noopener
+  </Link>
+</VStack>
+```
+
 ### Accessibility
 
 :::tip Accessibility tip
@@ -127,6 +198,22 @@ _The link text must have a 3:1 contrast ratio from the surrounding non-link text
 
 :::
 
+Use the `underline` prop on inline links within body text to ensure they are distinguishable without relying on color alone.
+
+```jsx live
+<Text as="p" font="body">
+  By continuing, you agree to the{' '}
+  <Link underline href="https://www.coinbase.com/">
+    Terms of Service
+  </Link>{' '}
+  and{' '}
+  <Link underline href="https://www.coinbase.com/">
+    Privacy Policy
+  </Link>
+  .
+</Text>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -544,7 +544,8 @@ function ScatterplotWithCustomLabels() {
 | `textRendering` | `string \| number` | No | `-` | - |
 | `to` | `string \| number` | No | `-` | - |
 | `transform` | `string` | No | `-` | - |
-| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `defaultTransition` | Transition configuration for animation. |
+| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
+| `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `-` | Transition configuration for enter and update animations. |
 | `type` | `string` | No | `-` | - |
 | `u1` | `string \| number` | No | `-` | - |
 | `u2` | `string \| number` | No | `-` | - |

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

@@ -643,7 +643,7 @@ function DraggablePriceTarget() {
 | `beaconLabelMinGap` | `number` | No | `-` | Minimum gap between beacon labels to prevent overlap. Measured in pixels. |
 | `beaconLabelPreferredSide` | `left \| right` | No | `'right'` | Preferred side for beacon labels. |
 | `beaconStroke` | `string` | No | `'var(--color-bg)'` | Stroke color of the scrubber beacon circle. |
-| `beaconTransitions` | `{ update?: Transition$1; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
+| `beaconTransitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
 | `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Scrubber component |
 | `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |
 | `hideLine` | `boolean` | No | `-` | Hides the scrubber line. |
@@ -651,7 +651,7 @@ function DraggablePriceTarget() {
 | `idlePulse` | `boolean` | No | `-` | Pulse the beacons while at rest. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. Can be a static string or a function that receives the current dataIndex. |
-| `labelBoundsInset` | `number \| ChartInset` | No | `{ top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none` | Bounds inset for the scrubber line label to prevent cutoff at chart edges. |
+| `labelBoundsInset` | `number \| ChartInset` | No | `inset { top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none` | Bounds inset for the scrubber line label to prevent cutoff at chart edges. |
 | `labelElevated` | `boolean` | No | `-` | Whether to elevate the label with a shadow. When true, applies elevation and automatically adds bounds to keep label within chart area. |
 | `labelFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font style for the scrubber line label. |
 | `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
@@ -660,5 +660,6 @@ function DraggablePriceTarget() {
 | `seriesIds` | `string[]` | No | `-` | Array of series IDs to highlight when scrubbing with scrubber beacons. By default, all series will be highlighted. |
 | `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Scrubber component |
 | `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 |
+| `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber. Controls enter, update, and pulse animations for beacons and beacon labels. |
 
 

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

@@ -738,7 +738,7 @@ function PercentageBeaconLabels() {
 | `beaconLabelMinGap` | `number` | No | `-` | Minimum gap between beacon labels to prevent overlap. Measured in pixels. |
 | `beaconLabelPreferredSide` | `left \| right` | No | `'right'` | Preferred side for beacon labels. |
 | `beaconStroke` | `string` | No | `'var(--color-bg)'` | Stroke color of the scrubber beacon circle. |
-| `beaconTransitions` | `{ update?: Transition$1; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
+| `beaconTransitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
 | `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Scrubber component |
 | `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |
 | `hideLine` | `boolean` | No | `-` | Hides the scrubber line. |
@@ -746,7 +746,7 @@ function PercentageBeaconLabels() {
 | `idlePulse` | `boolean` | No | `-` | Pulse the beacons while at rest. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. Can be a static string or a function that receives the current dataIndex. |
-| `labelBoundsInset` | `number \| ChartInset` | No | `{ top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none` | Bounds inset for the scrubber line label to prevent cutoff at chart edges. |
+| `labelBoundsInset` | `number \| ChartInset` | No | `inset { top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none` | Bounds inset for the scrubber line label to prevent cutoff at chart edges. |
 | `labelElevated` | `boolean` | No | `-` | Whether to elevate the label with a shadow. When true, applies elevation and automatically adds bounds to keep label within chart area. |
 | `labelFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font style for the scrubber line label. |
 | `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
@@ -755,6 +755,7 @@ function PercentageBeaconLabels() {
 | `seriesIds` | `string[]` | No | `-` | Array of series IDs to highlight when scrubbing with scrubber beacons. By default, all series will be highlighted. |
 | `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Scrubber component |
 | `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 |
+| `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber. Controls enter, update, and pulse animations for beacons and beacon labels. |
 
 
 ## Styles

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

@@ -102,6 +102,49 @@ You can control the visual prominence of the Tag using the `emphasis` prop. By d
 </VStack>
 ```
 
+### Icons
+
+Use the `startIcon` and `endIcon` props to render an icon at the start or end of the tag.
+
+```jsx live
+<VStack gap={2} alignItems="flex-start">
+  <Tag colorScheme="blue" startIcon="add">
+    Start icon
+  </Tag>
+  <Tag colorScheme="green" endIcon="add">
+    End icon
+  </Tag>
+  <Tag colorScheme="purple" startIcon="add" endIcon="add">
+    Both icons
+  </Tag>
+  <Tag colorScheme="red" intent="promotional" startIcon="add" endIcon="add">
+    Promotional with icons
+  </Tag>
+</VStack>
+```
+
+### Custom Nodes
+
+Use the `start` and `end` props to render custom nodes at the start or end of the tag for full control over styling.
+
+```jsx live
+<VStack gap={2} alignItems="flex-start">
+  <Tag colorScheme="blue" start={<Icon color="fgNegative" name="add" size="xs" />}>
+    Custom start node
+  </Tag>
+  <Tag colorScheme="green" end={<Icon color="fgPositive" name="add" size="xs" />}>
+    Custom end node
+  </Tag>
+  <Tag
+    colorScheme="purple"
+    start={<Icon color="fgPositive" name="add" size="xs" />}
+    end={<Icon color="fgNegative" name="close" size="xs" />}
+  >
+    Both custom nodes
+  </Tag>
+</VStack>
+```
+
 ### Composed Examples
 
 #### Account Status
@@ -284,6 +327,9 @@ function MarginExample() {
 | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
 | `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
+| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| menu \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
+| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
 | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
 | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
 | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
@@ -341,6 +387,9 @@ function MarginExample() {
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
+| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| application \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| document \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| menu \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
+| `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
 | `style` | `CSSProperties` | No | `-` | - |
 | `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 | `-` | - |

package/package.json

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