@coinbase/cds-mcp-server 8.23.0 → 8.25.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.25.0 ((12/1/2025, 07:38 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.24.0 ((12/1/2025, 06:51 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.23.0 ((12/1/2025, 06:33 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -36,6 +36,40 @@ function Example() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <HStack alignItems="center" gap={1}>
+          <InputLabel>Birthdate</InputLabel>
+          <Tooltip content="This will be visible to other users.">
+            <Icon color="fgMuted" name="info" size="xs" />
+          </Tooltip>
+        </HStack>
+      }
+      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      nextArrowAccessibilityLabel="Next month"
+      previousArrowAccessibilityLabel="Previous month"
+      helperTextErrorIconAccessibilityLabel="Error"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
 ### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
@@ -420,6 +454,7 @@ function Example() {
 | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
 | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
 | `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |

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

@@ -1131,6 +1131,39 @@ function CustomClassNamesExamples() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can pass a React Node to the `label` prop.
+
+```jsx
+function CustomLabelExample() {
+  const [value, setValue] = useState('1');
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label={
+        <HStack alignItems="center" gap={1}>
+          Custom Label
+          <Tooltip content="This will be visible to other users.">
+            <Icon color="fgMuted" name="info" size="xs" />
+          </Tooltip>
+        </HStack>
+      }
+      value={value}
+      onChange={setValue}
+      options={options}
+      placeholder="Select an option"
+    />
+  );
+}
+```
+
 ### Custom components
 
 Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select.

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

@@ -10,51 +10,43 @@ import { Tag } from '@coinbase/cds-mobile/tag/Tag'
 
 ## Examples
 
-### Informational (Default)
+### Basics
 
-Informational Tags are used to note a characteristic or state of an object. The relationship between the Tag and the other UI component should be easy to interpret for a user.
+Informational tags (default) are used to note a characteristic or state of an object. Promotional tags for editorial, ephemeral communication.
 
 ```jsx
-<HStack gap={2} wrap>
-  <Tag colorScheme="green">Green</Tag>
-  <Tag colorScheme="blue">Blue</Tag>
-  <Tag colorScheme="yellow">Yellow</Tag>
-  <Tag colorScheme="purple">Purple</Tag>
-  <Tag colorScheme="red">Red</Tag>
-  <Tag colorScheme="gray">Gray</Tag>
+<HStack>
+  <Tag intent="informational" colorScheme="green">
+    Green
+  </Tag>
+  <Tag intent="promotional" colorScheme="green">
+    Green
+  </Tag>
 </HStack>
 ```
 
-### Promotional
+### Emphasis
 
-Promotional Tags are for editorial, ephemeral communication. Terms like “New”, “Recommended”, “Beta”, “Hot”, “Trending”, fall into this Promotional Tag category.
+You can control the visual prominence of the Tag using the `emphasis` prop. By default, informational tags are low emphasis and promotional tags are high emphasis.
 
 ```jsx
-<HStack gap={2} wrap>
-  <Tag intent="promotional" colorScheme="green">
-    Green
-  </Tag>
-  <Tag intent="promotional" colorScheme="blue">
-    Blue
-  </Tag>
-  <Tag intent="promotional" colorScheme="yellow">
-    Yellow
+<HStack>
+  <Tag emphasis="high" colorScheme="green">
+    High Green
   </Tag>
   <Tag intent="promotional" colorScheme="purple">
-    Purple
+    High Purple
   </Tag>
-  <Tag intent="promotional" colorScheme="red">
-    Red
-  </Tag>
-  <Tag intent="promotional" colorScheme="gray">
-    Gray
+  <Tag colorScheme="green">Low Green</Tag>
+  <Tag intent="promotional" emphasis="low" colorScheme="purple">
+    Low Purple
   </Tag>
 </HStack>
 ```
 
-### Working with Tags
+### Composed Examples
 
-To get a better idea of what it workng with Tags is like, we've created some example UI components that use Tags.
+#### Account Status
 
 ```jsx
 <HStack justifyContent="space-between" gap="2" alignItems="center">
@@ -69,18 +61,7 @@ To get a better idea of what it workng with Tags is like, we've created some exa
 </HStack>
 ```
 
-```jsx
-<HStack justifyContent="space-between" gap="2" alignItems="center">
-  <VStack gap={0.5}>
-    <HStack gap={1}>
-      <TextHeadline as="p">Tax account status</TextHeadline>
-      <Tag colorScheme="red">Not verified</Tag>
-    </HStack>
-    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
-  </VStack>
-  <Button>Get started</Button>
-</HStack>
-```
+#### Margin Ratio
 
 ```jsx
 function MarginExample() {
@@ -155,6 +136,8 @@ function MarginExample() {
 }
 ```
 
+#### List Cell Integration
+
 ```jsx
 <Box justifyContent="center">
   <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
@@ -232,6 +215,7 @@ function MarginExample() {
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `display` | `flex \| none` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
+| `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
 | `flexBasis` | `string \| number` | No | `-` | - |
 | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
 | `flexGrow` | `number` | No | `-` | - |

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

@@ -323,6 +323,25 @@ When using the `inside` label variant, you should always include a `placeholder`
 />
 ```
 
+#### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx
+<TextInput
+  label="Display name"
+  labelNode={
+    <HStack alignItems="center" gap={1}>
+      <InputLabel>Display name</InputLabel>
+      <Tooltip content="This will be visible to other users.">
+        <Icon active color="fg" name="info" size="xs" />
+      </Tooltip>
+    </HStack>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 ### Example of Input Objects placed at the End
 
 Here are some examples and best practices when using end content in a TextField.
@@ -648,6 +667,7 @@ function TextInputKeyboardExample() {
 | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
 | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
 | `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |

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

@@ -36,6 +36,40 @@ function Example() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <HStack alignItems="center" gap={1}>
+          <InputLabel>Birthdate</InputLabel>
+          <Tooltip content="This will be visible to other users.">
+            <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+          </Tooltip>
+        </HStack>
+      }
+      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      nextArrowAccessibilityLabel="Next month"
+      previousArrowAccessibilityLabel="Previous month"
+      helperTextErrorIconAccessibilityLabel="Error"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
 ### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
@@ -475,6 +509,7 @@ function Example() {
 | `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |
 | `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |

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

@@ -1037,6 +1037,39 @@ function CustomClassNamesExamples() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can pass a React Node to the `label` prop.
+
+```jsx live
+function CustomLabelExample() {
+  const [value, setValue] = useState('1');
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label={
+        <HStack alignItems="center" gap={1}>
+          Custom Label
+          <Tooltip content="This will be visible to other users.">
+            <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+          </Tooltip>
+        </HStack>
+      }
+      value={value}
+      onChange={setValue}
+      options={options}
+      placeholder="Select an option"
+    />
+  );
+}
+```
+
 ### Custom components
 
 Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select.

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

@@ -10,51 +10,101 @@ import { Tag } from '@coinbase/cds-web/tag/Tag'
 
 ## Examples
 
-### Informational (Default)
+### Basics
 
-Informational Tags are used to note a characteristic or state of an object. The relationship between the Tag and the other UI component should be easy to interpret for a user.
+Informational tags (default) are used to note a characteristic or state of an object. Promotional tags for editorial, ephemeral communication.
 
 ```jsx live
-<HStack gap={2} wrap>
-  <Tag colorScheme="green">Green</Tag>
-  <Tag colorScheme="blue">Blue</Tag>
-  <Tag colorScheme="yellow">Yellow</Tag>
-  <Tag colorScheme="purple">Purple</Tag>
-  <Tag colorScheme="red">Red</Tag>
-  <Tag colorScheme="gray">Gray</Tag>
-</HStack>
+<VStack gap={2}>
+  <HStack gap={2} wrap>
+    <Tag intent="informational" colorScheme="green">
+      Green
+    </Tag>
+    <Tag intent="informational" colorScheme="blue">
+      Blue
+    </Tag>
+    <Tag intent="informational" colorScheme="yellow">
+      Yellow
+    </Tag>
+    <Tag intent="informational" colorScheme="purple">
+      Purple
+    </Tag>
+    <Tag intent="informational" colorScheme="red">
+      Red
+    </Tag>
+    <Tag intent="informational" colorScheme="gray">
+      Gray
+    </Tag>
+  </HStack>
+  <HStack gap={2} wrap>
+    <Tag intent="promotional" colorScheme="green">
+      Green
+    </Tag>
+    <Tag intent="promotional" colorScheme="blue">
+      Blue
+    </Tag>
+    <Tag intent="promotional" colorScheme="yellow">
+      Yellow
+    </Tag>
+    <Tag intent="promotional" colorScheme="purple">
+      Purple
+    </Tag>
+    <Tag intent="promotional" colorScheme="red">
+      Red
+    </Tag>
+    <Tag intent="promotional" colorScheme="gray">
+      Gray
+    </Tag>
+  </HStack>
+</VStack>
 ```
 
-### Promotional
+### Emphasis
 
-Promotional Tags are for editorial, ephemeral communication. Terms like “New”, “Recommended”, “Beta”, “Hot”, “Trending”, fall into this Promotional Tag category.
+You can control the visual prominence of the Tag using the `emphasis` prop. By default, informational tags are low emphasis and promotional tags are high emphasis.
 
 ```jsx live
-<HStack gap={2} wrap>
-  <Tag intent="promotional" colorScheme="green">
-    Green
-  </Tag>
-  <Tag intent="promotional" colorScheme="blue">
-    Blue
-  </Tag>
-  <Tag intent="promotional" colorScheme="yellow">
-    Yellow
-  </Tag>
-  <Tag intent="promotional" colorScheme="purple">
-    Purple
-  </Tag>
-  <Tag intent="promotional" colorScheme="red">
-    Red
-  </Tag>
-  <Tag intent="promotional" colorScheme="gray">
-    Gray
-  </Tag>
-</HStack>
+<VStack gap={2}>
+  <HStack gap={2} wrap>
+    <Tag emphasis="high" colorScheme="green">
+      High Green
+    </Tag>
+    <Tag emphasis="high" colorScheme="blue">
+      High Blue
+    </Tag>
+    <Tag emphasis="high" colorScheme="yellow">
+      High Yellow
+    </Tag>
+    <Tag intent="promotional" colorScheme="purple">
+      High Purple
+    </Tag>
+    <Tag intent="promotional" colorScheme="red">
+      High Red
+    </Tag>
+    <Tag intent="promotional" colorScheme="gray">
+      High Gray
+    </Tag>
+  </HStack>
+  <HStack gap={2} wrap>
+    <Tag colorScheme="green">Low Green</Tag>
+    <Tag colorScheme="blue">Low Blue</Tag>
+    <Tag colorScheme="yellow">Low Yellow</Tag>
+    <Tag intent="promotional" emphasis="low" colorScheme="purple">
+      Low Purple
+    </Tag>
+    <Tag intent="promotional" emphasis="low" colorScheme="red">
+      Low Red
+    </Tag>
+    <Tag intent="promotional" emphasis="low" colorScheme="gray">
+      Low Gray
+    </Tag>
+  </HStack>
+</VStack>
 ```
 
-### Working with Tags
+### Composed Examples
 
-To get a better idea of what it workng with Tags is like, we've created some example UI components that use Tags.
+#### Account Status
 
 ```jsx live
 <HStack justifyContent="space-between" gap="2" alignItems="center">
@@ -69,18 +119,7 @@ To get a better idea of what it workng with Tags is like, we've created some exa
 </HStack>
 ```
 
-```jsx live
-<HStack justifyContent="space-between" gap="2" alignItems="center">
-  <VStack gap={0.5}>
-    <HStack gap={1}>
-      <TextHeadline as="p">Tax account status</TextHeadline>
-      <Tag colorScheme="red">Not verified</Tag>
-    </HStack>
-    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
-  </VStack>
-  <Button>Get started</Button>
-</HStack>
-```
+#### Margin Ratio
 
 ```jsx live
 function MarginExample() {
@@ -155,6 +194,8 @@ function MarginExample() {
 }
 ```
 
+#### List Cell Integration
+
 ```jsx live
 <Box justifyContent="center">
   <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
@@ -232,6 +273,7 @@ function MarginExample() {
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `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. |
 | `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 | `-` | - |

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

@@ -266,6 +266,28 @@ When using the `inside` label variant, you should always include a `placeholder`
 </VStack>
 ```
 
+#### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx live
+<TextInput
+  id="display-name-tooltip"
+  label="Display name"
+  labelNode={
+    <InputLabel htmlFor="display-name-tooltip">
+      <HStack alignItems="center" gap={1}>
+        Display name
+        <Tooltip content="This will be visible to other users.">
+          <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+        </Tooltip>
+      </HStack>
+    </InputLabel>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 #### StartContent & EndContent
 
 ##### Examples of Input Objects placed at the Start
@@ -635,6 +657,7 @@ function TextInputKeyboardExample() {
 | `inputNode` | `ReactElement` | No | `-` | Customize the element which the input area will be rendered as. Adds ability to render the input area as a <textarea />, <input /> etc... By default, the input area will be rendered as an <input />. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
 | `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |

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

@@ -51,13 +51,13 @@ function TooltipPosition() {
       <Box position="relative">
         Set your default display currency.
         <Tooltip content="I am not centered horizontally">
-          <Icon active color="fg" name="info" paddingStart={1} position="absolute" />
+          <Icon active color="fg" name="info" paddingStart={1} position="absolute" tabIndex={0} />
         </Tooltip>
       </Box>
       <Box position="relative">
         Set your default display currency.
         <Tooltip content="I am centered horizontally" position="absolute">
-          <Icon active color="fg" name="info" paddingStart={1} />
+          <Icon active color="fg" name="info" paddingStart={1} tabIndex={0} />
         </Tooltip>
       </Box>
     </VStack>
@@ -81,6 +81,28 @@ function TooltipColorSchemeOptOut() {
 }
 ```
 
+### Tooltip in TextInput
+
+You can use tooltips within `TextInput` to provide more context.
+
+```jsx live
+<TextInput
+  id="tooltip-input-example"
+  label="Display name"
+  labelNode={
+    <InputLabel htmlFor="tooltip-input-example">
+      <HStack alignItems="center" gap={1}>
+        Display name
+        <Tooltip content="This will be visible to other users.">
+          <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+        </Tooltip>
+      </HStack>
+    </InputLabel>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

package/package.json

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