@coinbase/cds-mcp-server 8.49.2 → 8.51.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.51.0 ((3/9/2026, 06:39 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.50.0 ((3/6/2026, 09:36 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.49.2 ((3/6/2026, 09:04 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -178,7 +178,7 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
 | `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 | `-` | - |
 | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. |
-| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
+| `size` | `s \| m \| l \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
 | `src` | `string` | No | `-` | Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. |
 | `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 | `-` | - |
 | `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. |

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

@@ -52,7 +52,7 @@ function Variants() {
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children of where the dot will anchor to |
 | `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
 | `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of dot relative to its parent |
-| `size` | `s \| l \| xs \| m` | No | `-` | Size of dot |
+| `size` | `xs \| s \| m \| l` | No | `-` | Size of dot |
 | `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 |
 
 

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

@@ -125,7 +125,7 @@ function UseDotSymbolPairedWithAnotherAsset() {
 | `imageStyle` | `null \| false \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
 | `overlap` | `circular` | No | `-` | Indicates what shape dot is overlapping |
 | `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of the dot |
-| `size` | `s \| l \| xs \| m` | No | `-` | Size of the dot |
+| `size` | `xs \| s \| m \| l` | No | `-` | Size of the dot |
 | `source` | `string \| ImageSourcePropType` | No | `-` | Image source path |
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
 | `symbol` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Add an arbitrary ReactNode to the dot instead of an icon. |

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

@@ -49,7 +49,7 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Color of the icon when used as a foreground. |
 | `dangerouslySetColor` | `string \| AnimatedInterpolation<string>` | No | `-` | - |
 | `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `null` | Fallback element to render if unable to find an icon with matching name |
-| `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
+| `size` | `xs \| s \| m \| l` | No | `m` | Size for a given icon. |
 | `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
 | `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the Icon 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 |

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

@@ -192,6 +192,8 @@ Since icon buttons have no visible text, an `accessibilityLabel` is required to
 
 When composing a button with a visible label, use `accessibilityLabelledBy` to reference the label's `id` instead. See the [Claim Drop example](#claim-drop) below.
 
+For most use cases, keep the IconButton target area at `40 x 40` or larger. Reserve `iconSize="xs"` for specific constrained layouts, and avoid shrinking the interactive area below `24 x 24`, which is the absolute minimum target size recommended by [WCAG 2.2 target size guidance](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
 ### Composed Examples
 
 #### Claim Drop
@@ -292,6 +294,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
 | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `height` | `string \| number` | No | `-` | - |
+| `iconSize` | `xs \| s \| m \| l` | No | `compact ? 's' : 'm'` | Size for the icon rendered inside the button. |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |

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

@@ -93,7 +93,7 @@ If no images are shown, RemoteImage will show a default Fallback. Be aware that
 | `resizeMode` | `repeat \| center \| stretch \| cover \| contain` | No | `-` | Determines how to resize the image when the frame doesnt match the raw image dimensions.  cover: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).  contain: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).  stretch: Scale width and height independently, This may change the aspect ratio of the src.  repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)  center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
 | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `square` | Shape of RemoteImage |
 | `shouldApplyDarkModeEnhacements` | `boolean` | No | `-` | - |
-| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
+| `size` | `s \| m \| l \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
 | `source` | `string \| number \| ImageURISource \| ImageURISource[]` | No | `-` | - |
 | `src` | `string` | No | `-` | A string representing the resource identifier for the image. Similar to src from HTML.  See https://reactnative.dev/docs/image#src |
 | `srcSet` | `string` | No | `-` | Similar to srcset from HTML.  See https://reactnative.dev/docs/image#srcset |

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

@@ -194,7 +194,7 @@ We've created a palette of identity colors using our CDS spectrum colors. When u
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `selected` | `boolean` | No | `-` | Adds treatment that indicates that the Avatar is currently selected |
 | `shape` | `circle \| square \| hexagon` | No | `-` | Shape of Avatar. Note: If the shape is a hexagon, do not use name. |
-| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
+| `size` | `s \| m \| l \| xl \| xxl \| xxxl` | No | `-` | Size for a given avatar. |
 | `src` | `string` | No | `-` | Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. |
 | `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 |

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

@@ -52,7 +52,7 @@ function Variants() {
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children of where the dot will anchor to |
 | `overlap` | `circular` | No | `-` | Indicates what shape Dot is overlapping |
 | `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of dot relative to its parent |
-| `size` | `s \| l \| xs \| m` | No | `-` | Size of dot |
+| `size` | `xs \| s \| m \| l` | No | `-` | Size of dot |
 | `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 |
 
 

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

@@ -128,7 +128,7 @@ function UseDotSymbolPairedWithAnotherAsset() {
 | `imageStyle` | `CSSProperties` | No | `-` | - |
 | `overlap` | `circular` | No | `-` | Indicates what shape dot is overlapping |
 | `pin` | `top-start \| top-end \| bottom-start \| bottom-end` | No | `-` | Position of the dot |
-| `size` | `s \| l \| xs \| m` | No | `-` | Size of the dot |
+| `size` | `xs \| s \| m \| l` | No | `-` | Size of the dot |
 | `source` | `string` | No | `-` | Image source path |
 | `style` | `CSSProperties` | No | `-` | - |
 | `symbol` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Add an arbitrary ReactNode to the dot instead of an icon. |

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

@@ -128,7 +128,7 @@ import { Icon } from '@coinbase/cds-web/icons/Icon'
 | `ref` | `((instance: HTMLElement \| null) => void) \| RefObject<HTMLElement> \| 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 | `-` | - |
-| `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
+| `size` | `xs \| s \| m \| l` | No | `m` | Size for a given icon. |
 | `style` | `CSSProperties` | No | `-` | - |
 | `styles` | `{ root?: CSSProperties; icon?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom inline styles for individual elements of the Icon 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 |

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

@@ -201,6 +201,8 @@ Since icon buttons have no visible text, an `accessibilityLabel` is required to
 
 When composing a button with a visible label, use `accessibilityLabelledBy` to reference the label's `id` instead. See the [Claim Drop example](#claim-drop) below.
 
+For most use cases, keep the IconButton target area at `40 x 40` or larger. Reserve `iconSize="xs"` for specific constrained layouts, and avoid shrinking the interactive area below `24 x 24`, which is the absolute minimum target size recommended by [WCAG 2.2 target size guidance](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+
 ### Composed Examples
 
 #### Claim Drop
@@ -392,6 +394,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
 | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
 | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
 | `hidden` | `boolean \| undefined` | No | `-` | - |
+| `iconSize` | `xs \| s \| m \| l` | No | `compact ? 's' : 'm'` | Size for the icon rendered inside the button. |
 | `id` | `string \| undefined` | No | `-` | - |
 | `inlist` | `any` | No | `-` | - |
 | `inputMode` | `search \| text \| none \| email \| tel \| url \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |

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

@@ -148,7 +148,7 @@ If no images are shown, RemoteImage will show a default Fallback. Be aware that
 | `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 | `-` | - |
 | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `square` | Shape of RemoteImage |
-| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
+| `size` | `s \| m \| l \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
 | `source` | `string` | No | `-` | Absolute url to the image that should be shown in the RemoteImage. If no source is provided then a generic fallback image is used. |
 | `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 |

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

@@ -94,7 +94,7 @@ You can use tooltips within `TextInput` to provide more context.
       <InputLabel htmlFor="tooltip-input-example">Display name</InputLabel>
       {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */}
       <Tooltip content="This will be visible to other users.">
-        <Icon active color="fg" name="info" padding={0.75} size="xs" tabIndex={0} />
+        <Icon active color="fg" name="info" padding={0.75} size="xs" tabIndex={0} role="button" />
       </Tooltip>
     </HStack>
   }
@@ -124,6 +124,92 @@ function TooltipVisibilityDelay() {
 }
 ```
 
+### Accessibility (A11y)
+
+When tooltip content is non-interactive (text only), focus stays on the trigger and the tooltip is rendered in a portal. When tooltip content has **interactive elements** (links, buttons), set **`hasInteractiveContent={true}`** so the tooltip stays in the document flow and keyboard users can tab into the content. This sets `disablePortal`, `disableAutoFocus`, and `disableFocusTrap` appropriately.
+
+**Tooltip on an icon (or other non-button anchor):**
+
+When using an Icon (or other non-`<button>` element) as the tooltip trigger, add **`role="button"`** and **`tabIndex={0}`** so screen readers (e.g. VoiceOver) can discover it with arrow keys and announce the tooltip. If the icon performs an action on click, use **IconButton** instead so the trigger is a real `<button>`.
+
+**Example: tooltip on an icon (string content)**
+
+```jsx live
+function TooltipIconStringContent() {
+  return (
+    <HStack alignItems="center" gap={2}>
+      <Tooltip content="This will be visible to other users.">
+        <Icon active color="fg" name="info" role="button" tabIndex={0} />
+      </Tooltip>
+      <Text as="span" font="body" color="fgMuted">
+        Focus the icon to hear the tooltip announced.
+      </Text>
+    </HStack>
+  );
+}
+```
+
+**Example: tooltip on an icon (React node content)**
+
+```jsx live
+function TooltipIconReactNodeContent() {
+  return (
+    <HStack alignItems="center" gap={2}>
+      <Tooltip
+        content={
+          <Text font="label2">
+            Styled <strong>description</strong> text.
+          </Text>
+        }
+      >
+        <Icon active color="fg" name="info" role="button" tabIndex={0} />
+      </Tooltip>
+      <Text as="span" font="body" color="fgMuted">
+        Focus the icon to hear the tooltip announced.
+      </Text>
+    </HStack>
+  );
+}
+```
+
+**When tooltip content is interactive (links, buttons):**
+
+- Prefer **Modal** or another pattern for actionable content when possible. Tooltips are intended for short, non-interactive descriptions.
+- If you must use interactive content inside a tooltip, set **`hasInteractiveContent={true}`** so the content stays in the document flow. The prop allows keyboard users to tab into the tooltip, through its content, and out to the next focusable element on the page. With the default portal, focus behavior can be inconsistent when moving between trigger and content.
+
+**Example: tooltip with interactive content**
+
+```jsx live
+function TooltipWithInteractiveContent() {
+  return (
+    <Box position="relative" paddingY={5}>
+      <Text as="span" font="body" color="fgMuted">
+        Set your default display currency.{' '}
+      </Text>
+      <Tooltip
+        content={
+          <Text font="label2" color="fg">
+            Learn more at{' '}
+            <Text
+              as="a"
+              href="https://www.coinbase.com/settings"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Settings
+            </Text>
+            .
+          </Text>
+        }
+        hasInteractiveContent
+      >
+        <Icon active color="fg" name="info" paddingStart={1} role="button" tabIndex={0} />
+      </Tooltip>
+    </Box>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -138,6 +224,7 @@ function TooltipVisibilityDelay() {
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
 | `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | This value corresponds to how big the gap between the subject and the tooltip is. We do not encourage usage of this prop. But it is enabled for special cases as an escape hatch. |
+| `hasInteractiveContent` | `boolean` | No | `-` | Whether the tooltip has interactive elements inside the content. |
 | `invertColorScheme` | `boolean` | No | `true` | Invert the themes activeColorScheme for this component |
 | `openDelay` | `number` | No | `-` | Delay (in ms) before showing the tooltip on pointer hover. Keyboard focus still opens immediately for accessibility. |
 | `placement` | `top \| bottom \| left \| right` | No | `top` | Position of tooltip in relation to the subject. |

package/package.json

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