@coinbase/cds-mcp-server 8.28.1 → 8.29.0

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

@@ -18,9 +18,9 @@ import { TableCell } from '@coinbase/cds-web/tables/TableCell'
     <TableRow backgroundColor="bgAlternate">
       <TableCell title="First Header" />
       <TableCell>
-        <TextHeadline as="p" color="currentColor">
+        <Text as="p" font="headline" color="currentColor">
           Second Header
-        </TextHeadline>
+        </Text>
       </TableCell>
       <TableCell title="Third Header" />
     </TableRow>
@@ -47,12 +47,12 @@ import { TableCell } from '@coinbase/cds-web/tables/TableCell'
         subtitle="0.11882557"
       />
       <TableCell>
-        <TextHeadline as="h2" color="currentColor">
+        <Text as="h2" font="headline" color="currentColor">
           $2,221.01
-        </TextHeadline>
-        <TextLabel2 as="p" color="foregroundMuted">
+        </Text>
+        <Text as="p" font="label2" color="foregroundMuted">
           0.1519581 BTC
-        </TextLabel2>
+        </Text>
       </TableCell>
     </TableRow>
   </TableBody>

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

@@ -110,10 +110,14 @@ You can control the visual prominence of the Tag using the `emphasis` prop. By d
 <HStack justifyContent="space-between" gap="2" alignItems="center">
   <VStack gap={0.5}>
     <HStack gap={1}>
-      <TextHeadline as="p">Tax account status</TextHeadline>
+      <Text as="p" font="headline">
+        Tax account status
+      </Text>
       <Tag colorScheme="red">Not verified</Tag>
     </HStack>
-    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
+    <Text as="p" font="body">
+      Verify your info for tax reporting purposes.
+    </Text>
   </VStack>
   <Button>Get started</Button>
 </HStack>
@@ -125,9 +129,9 @@ You can control the visual prominence of the Tag using the `emphasis` prop. By d
 function MarginExample() {
   const renderStartLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 disabled={disabled} as="span">
+      <Text disabled={disabled} as="span" font="title3">
         ${num.toLocaleString()} (10%)
-      </TextTitle3>
+      </Text>
     );
   }, []);
 
@@ -149,12 +153,14 @@ function MarginExample() {
       >
         <VStack gap={0.5}>
           <HStack gap={1}>
-            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Text as="p" font="headline">
+              Margin ratio
+            </Text>
             <Tag colorScheme="green">Low</Tag>
           </HStack>
-          <TextBody as="p">
+          <Text as="p" font="body">
             The portion of your balance being held on margin is low. No action is required.
-          </TextBody>
+          </Text>
         </VStack>
         <ProgressBarWithFixedLabels
           startLabel={{ value: 400, render: renderStartLabelNum }}
@@ -176,10 +182,14 @@ function MarginExample() {
       >
         <VStack gap={0.5}>
           <HStack gap={1}>
-            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Text as="p" font="headline">
+              Margin ratio
+            </Text>
             <Tag colorScheme="red">high</Tag>
           </HStack>
-          <TextBody as="p">Margin usage is high. Deposit funds to avoid liquidation</TextBody>
+          <Text as="p" font="body">
+            Margin usage is high. Deposit funds to avoid liquidation
+          </Text>
         </VStack>
         <ProgressBarWithFixedLabels
           startLabel={{ value: 60000, render: renderStartLabelNum }}

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

@@ -126,7 +126,9 @@ with a TypeAhead component.
 ```jsx live
 <VStack gap={3}>
   <VStack>
-    <TextHeadline as="p">Default sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Default sentiment
+    </Text>
     <TextInput
       label="Campaign title"
       placeholder="Title"
@@ -135,7 +137,9 @@ with a TypeAhead component.
   </VStack>
 
   <VStack>
-    <TextHeadline as="p">Positive sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Positive sentiment
+    </Text>
     <TextInput
       label="Address"
       helperText="Valid BTC address"
@@ -146,7 +150,9 @@ with a TypeAhead component.
   </VStack>
 
   <VStack>
-    <TextHeadline as="p">Negative Sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Negative Sentiment
+    </Text>
     <TextInput
       label="Address"
       helperText="Invalid BTC address"

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

@@ -271,7 +271,8 @@ Note: The Tray component is an elevated container that is pinned to the bottom o
 | `closeAccessibilityHint` | `string` | No | `-` | Sets an accessible hint or description for the close button. On web, maps to aria-describedby and lists the id(s) of the element(s) that describe the element on which the attribute is set. On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. |
 | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
 | `focusTabIndexElements` | `boolean` | No | `false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
-| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional footer content that will be fixed to the bottom of the tray |
+| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Drawer footer |
+| `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Drawer header |
 | `id` | `string` | No | `-` | HTML ID for the tray |
 | `key` | `Key \| null` | No | `-` | - |
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |

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

@@ -98,14 +98,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -160,14 +160,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -222,14 +222,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -284,14 +284,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );

package/mcp-docs/web/hooks/useDimensions.txt

@@ -79,9 +79,9 @@ function Example() {
 
   return (
     <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
-      <TextHeadline>
+      <Text font="headline">
         This box is {width}px wide and {height}px tall
-      </TextHeadline>
+      </Text>
     </Box>
   );
 }
@@ -104,8 +104,8 @@ function Example() {
   return (
     <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
       <VStack gap={2}>
-        <TextHeadline>Width: {width}px</TextHeadline>
-        <TextHeadline>Current breakpoint: {currentBreakpoint || 'none'}</TextHeadline>
+        <Text font="headline">Width: {width}px</Text>
+        <Text font="headline">Current breakpoint: {currentBreakpoint || 'none'}</Text>
       </VStack>
     </Box>
   );

package/mcp-docs/web/hooks/useHasMounted.txt

@@ -41,7 +41,11 @@ const hasMounted = useHasMounted();
 
 // in component render
 {
-  hasMounted && isPhone && <TextHeadline as="h3">Welcome {username}!</TextHeadline>;
+  hasMounted && isPhone && (
+    <Text as="h3" font="headline">
+      Welcome {username}!
+    </Text>
+  );
 }
 ```
 
@@ -51,7 +55,7 @@ const hasMounted = useHasMounted();
 function Example() {
   const hasMounted = useHasMounted();
 
-  return <TextHeadline>Component has {hasMounted ? 'mounted' : 'not mounted'}</TextHeadline>;
+  return <Text font="headline">Component has {hasMounted ? 'mounted' : 'not mounted'}</Text>;
 }
 ```
 
@@ -69,7 +73,7 @@ function Example() {
     }
   }, [hasMounted]);
 
-  return <TextHeadline>{hasMounted ? `Current time: ${currentTime}` : 'Loading...'}</TextHeadline>;
+  return <Text font="headline">{hasMounted ? `Current time: ${currentTime}` : 'Loading...'}</Text>;
 }
 ```
 

package/mcp-docs/web/hooks/useIsoEffect.txt

@@ -48,7 +48,7 @@ function Example() {
 
   return (
     <VStack gap={2}>
-      <TextHeadline>Mouse Position</TextHeadline>
+      <Text font="headline">Mouse Position</Text>
       <Text>X: {position.x}</Text>
       <Text>Y: {position.y}</Text>
     </VStack>

package/mcp-docs/web/hooks/useMergeRefs.txt

@@ -47,7 +47,7 @@ function Example() {
 
     return (
       <Box ref={refs} padding={3} background="bgAlternate" borderRadius={300}>
-        <TextBody>This box uses a merged ref</TextBody>
+        <Text font="body">This box uses a merged ref</Text>
       </Box>
     );
   });
@@ -76,7 +76,7 @@ function Example() {
   return (
     <VStack gap={2}>
       <Box ref={mergedRefs} padding={3} background="bgAlternate" borderRadius={300}>
-        <TextBody>This element is referenced by three refs</TextBody>
+        <Text font="body">This element is referenced by three refs</Text>
       </Box>
       <Button onClick={checkRefs}>Check Refs</Button>
     </VStack>
@@ -106,9 +106,9 @@ function Example() {
   return (
     <VStack gap={2}>
       <Box ref={refs} padding={3} background="bgAlternate" borderRadius={300} width="100%">
-        <TextBody>This box uses both function and object refs</TextBody>
+        <Text font="body">This box uses both function and object refs</Text>
       </Box>
-      <TextBody>Box width: {elementWidth}px</TextBody>
+      <Text font="body">Box width: {elementWidth}px</Text>
     </VStack>
   );
 }

package/mcp-docs/web/hooks/useOverlayContentContext.txt

@@ -83,7 +83,7 @@ function ExampleComponent() {
 
   return (
     <VStack gap={2}>
-      <TextHeadline>Overlay Context Information</TextHeadline>
+      <Text font="headline">Overlay Context Information</Text>
       <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
       <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
       <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
@@ -106,7 +106,7 @@ function ModalExample() {
 
     return (
       <VStack gap={2}>
-        <TextHeadline>Overlay Context Information</TextHeadline>
+        <Text font="headline">Overlay Context Information</Text>
         <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
         <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
         <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
@@ -118,7 +118,7 @@ function ModalExample() {
   return (
     <VStack gap={3}>
       <VStack gap={2} padding={3} background="bgSecondary" borderRadius={400}>
-        <TextHeadline>Outside Modal</TextHeadline>
+        <Text font="headline">Outside Modal</Text>
         <ExampleComponent />
       </VStack>
 
@@ -156,7 +156,7 @@ function ContextProviderExample() {
 
     return (
       <VStack gap={2}>
-        <TextHeadline>Overlay Context Information</TextHeadline>
+        <Text font="headline">Overlay Context Information</Text>
         <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
         <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
         <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
@@ -174,7 +174,7 @@ function ContextProviderExample() {
   return (
     <OverlayContentContext.Provider value={contextValue}>
       <VStack gap={2} padding={3} background="bgSecondary" borderRadius={400}>
-        <TextHeadline>Inside Context Provider</TextHeadline>
+        <Text font="headline">Inside Context Provider</Text>
         <ExampleComponent />
       </VStack>
     </OverlayContentContext.Provider>
@@ -195,7 +195,7 @@ function ConditionalRenderingExample() {
 
     return (
       <VStack gap={2}>
-        <TextHeadline>Conditional Content</TextHeadline>
+        <Text font="headline">Conditional Content</Text>
         {isOverlay ? (
           <VStack gap={1}>
             <Text color="fgPositive">✓ This content shows when inside an overlay</Text>
@@ -211,7 +211,7 @@ function ConditionalRenderingExample() {
   return (
     <VStack gap={3}>
       <VStack gap={2} padding={3} background="bgSecondary" borderRadius={400}>
-        <TextHeadline>Outside Modal</TextHeadline>
+        <Text font="headline">Outside Modal</Text>
         <ConditionalContent />
       </VStack>
 
@@ -251,7 +251,7 @@ function StylingExample() {
 
     return (
       <VStack padding={3} background={getBackgroundColor()} borderRadius={400} gap={2}>
-        <TextHeadline>Dynamic Styling</TextHeadline>
+        <Text font="headline">Dynamic Styling</Text>
         <Text>{getStatusText()}</Text>
         <Text color="fgMuted" font="caption">
           Background color: {getBackgroundColor()}

package/mcp-docs/web/hooks/usePreviousValue.txt

@@ -39,8 +39,8 @@ function Example() {
   return (
     <VStack gap={3} alignItems="start">
       <VStack gap={1}>
-        <TextHeadline>Current count: {count}</TextHeadline>
-        <TextHeadline>Previous count: {previousCount ?? 'None'}</TextHeadline>
+        <Text font="headline">Current count: {count}</Text>
+        <Text font="headline">Previous count: {previousCount ?? 'None'}</Text>
       </VStack>
       <Button onClick={() => setCount(count + 1)}>Increment</Button>
     </VStack>
@@ -62,9 +62,9 @@ function Example() {
   return (
     <VStack gap={3} alignItems="start">
       <VStack gap={1}>
-        <TextHeadline>Name: {user.name}</TextHeadline>
-        <TextHeadline>Age: {user.age}</TextHeadline>
-        <TextHeadline>Previous age: {previousUser?.age ?? 'None'}</TextHeadline>
+        <Text font="headline">Name: {user.name}</Text>
+        <Text font="headline">Age: {user.age}</Text>
+        <Text font="headline">Previous age: {previousUser?.age ?? 'None'}</Text>
       </VStack>
       <Button onClick={updateAge}>Add Year</Button>
     </VStack>

package/mcp-docs/web/hooks/useRefMap.txt

@@ -56,7 +56,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>This box is registered with ID 'box1'</TextBody>
+        <Text font="body">This box is registered with ID 'box1'</Text>
       </Box>
       <Button onClick={handleClick}>Get Box Dimensions</Button>
     </VStack>
@@ -103,7 +103,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 1</TextBody>
+          <Text font="body">Box 1</Text>
         </Box>
 
         <Box
@@ -112,7 +112,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 2</TextBody>
+          <Text font="body">Box 2</Text>
         </Box>
 
         <Box
@@ -121,7 +121,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 3</TextBody>
+          <Text font="body">Box 3</Text>
         </Box>
       </VStack>
     </VStack>
@@ -158,7 +158,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>Box 1</TextBody>
+        <Text font="body">Box 1</Text>
       </Box>
 
       <Box
@@ -167,7 +167,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>Box 2</TextBody>
+        <Text font="body">Box 2</Text>
       </Box>
 
       <Button onClick={logRefs}>Log Refs</Button>

package/mcp-docs/web/hooks/useScrollBlocker.txt

@@ -44,7 +44,7 @@ function Example() {
 
   return (
     <VStack gap={3} alignItems="start">
-      <TextHeadline>Scroll is currently {isBlocked ? 'blocked' : 'enabled'}</TextHeadline>
+      <Text font="headline">Scroll is currently {isBlocked ? 'blocked' : 'enabled'}</Text>
       <Button onClick={toggleScroll}>{isBlocked ? 'Enable Scroll' : 'Block Scroll'}</Button>
     </VStack>
   );

package/mcp-docs/web/hooks/useTheme.txt

@@ -300,7 +300,7 @@ function Example() {
   return (
     <VStack gap={2}>
       <Box padding={3} background="bgAlternate" borderRadius={300}>
-        <TextHeadline>Current Color Scheme: {theme.activeColorScheme}</TextHeadline>
+        <Text font="headline">Current Color Scheme: {theme.activeColorScheme}</Text>
       </Box>
 
       <VStack padding={3} background="bgAlternate" borderRadius={300}>
@@ -354,9 +354,9 @@ function Example() {
   return (
     <Box gap={0.5} borderRadius={300} alignItems="baseline">
       <Text as="span">This box adapts to {isDarkMode ? 'dark' : 'light'} mode</Text>
-      <TextHeadline as="span" color={isDarkMode ? 'fgMuted' : 'fgPrimary'}>
+      <Text as="span" font="headline" color={isDarkMode ? 'fgMuted' : 'fgPrimary'}>
         with adaptive text colors
-      </TextHeadline>
+      </Text>
     </Box>
   );
 }

package/mcp-docs/web/routes.txt

@@ -103,6 +103,7 @@
 - [InputChip](web/components/InputChip.txt): A Chip used for removable selections.
 - [IconButton](web/components/IconButton.txt): A Button with an Icon for content.
 - [ControlGroup](web/components/ControlGroup.txt): A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.
+- [Combobox](web/components/Combobox.txt): A flexible combobox component for both single and multi-selection, built for web applications with comprehensive accessibility support.
 - [Chip](web/components/Chip.txt): A compact, interactive content element.
 - [CheckboxGroup](web/components/CheckboxGroup.txt): CheckboxGroup is a control component that allows users to select multiple options from a set of choices. It manages the state and layout of multiple checkbox inputs as a cohesive group.
 - [CheckboxCell](web/components/CheckboxCell.txt): A selectable cell that pairs a checkbox with a title and description for multi-choice selections.

package/package.json

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