@coinbase/cds-mcp-server 9.0.0-rc.2 → 9.0.0

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

@@ -12,13 +12,13 @@ import { SpotSquare } from '@coinbase/cds-web/illustratations/SpotSquare'
 
 ## Examples
 
-### Basic example
+#### Basic example
 
 ```jsx live
 <SpotSquare name="yieldCenterUSDC" />
 ```
 
-### `scaleMultiplier` prop
+#### `scaleMultiplier` prop
 
 If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
 
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
 <SpotSquare name="yieldCenterUSDC" scaleMultiplier={1.5} />
 ```
 
-### Scaling with dimension
+#### Scaling with dimension
 
 If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
 
@@ -36,14 +36,49 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 <SpotSquare name="yieldCenterUSDC" dimension="120x120" scaleMultiplier={1.5} />
 ```
 
+### Theming
+
+Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette.
+
+```jsx live
+<SpotSquare applyTheme name="yieldCenterUSDC" />
+```
+
+To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme:
+
+```jsx live
+function ThemedSpotSquare() {
+  const customTheme = {
+    ...defaultTheme,
+    lightIllustrationColor: {
+      ...defaultTheme.lightIllustrationColor,
+      primary: 'rgb(220, 38, 38)',
+      accent1: 'rgb(124, 58, 237)',
+    },
+    darkIllustrationColor: {
+      ...defaultTheme.darkIllustrationColor,
+      primary: 'rgb(248, 113, 113)',
+      accent1: 'rgb(167, 139, 250)',
+    },
+  };
+
+  return (
+    <ThemeProvider activeColorScheme="light" theme={customTheme}>
+      <SpotSquare applyTheme name="yieldCenterUSDC" />
+    </ThemeProvider>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
 | `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
+| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
 | `dimension` | `96x96` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
-| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
+| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
 | `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/TabbedChipsAlpha.txt

@@ -222,6 +222,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<TabId>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<TabId>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `activeColor` | `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | Active label color (from Tabs when set). |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -248,7 +249,7 @@ render(<Example />);
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
 | `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
-| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
+| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | Inactive label color (from Tabs when set). |
 | `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
 | `dangerouslySetBackground` | `string` | No | `-` | - |

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

@@ -12,11 +12,11 @@ import { Tabs, DefaultTabsActiveIndicator } from '@coinbase/cds-web/tabs'
 
 ## Examples
 
-Tabs manages which tab is active and positions the animated indicator. For the common **underline** pattern, pass **`TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}`** and rely on the default **`TabComponent` (`DefaultTab`)**. Use a custom **`TabComponent`** when you need layout or content beyond what `DefaultTab` provides. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs) instead.
+Tabs manages which tab is active and positions the animated indicator. For **pill / segmented** controls, use [SegmentedTabs](/components/navigation/SegmentedTabs) instead.
 
 ### Basics
 
-Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. **`activeBackground`** sets the **underline color** (it is forwarded to the indicator as its `background` token).
+Out of the box, **`Tabs`** uses **`DefaultTab`** for each row (headline text, optional [DotCount](/components/other/DotCount/) via `count` / `max` on each tab) and **`DefaultTabsActiveIndicator`** for the animated underline. Set **`color`** / **`activeColor`** on **`Tabs`** for inactive / active label tokens, and **`activeBackground`** for the underline (forwarded to the indicator as its **`background`** token).
 
 ```jsx live
 function Example() {
@@ -29,23 +29,15 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
-      // default value; can be omitted.
-      TabComponent={DefaultTab}
       tabs={tabs}
-      // default value; can be omitted.
-      TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}
     />
   );
 }
 ```
 
-You can omit `TabComponent` explicitly: **`Tabs`** defaults it to **`DefaultTab`**.
-
 #### No initial selection
 
 ```jsx live
@@ -59,9 +51,7 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -84,9 +74,7 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Mail folders"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -110,9 +98,40 @@ function Example() {
   return (
     <Tabs
       accessibilityLabel="Example tabs"
-      activeBackground="bgPrimary"
       activeTab={activeTab}
-      background="bg"
+      gap={4}
+      onChange={setActiveTab}
+      tabs={tabs}
+    />
+  );
+}
+```
+
+### Accessibility
+
+Provide a descriptive **`accessibilityLabel`** on **`Tabs`** for the tab list. **`DefaultTab`** sets `aria-controls` / `aria-selected` for each tab; pair tabs with **`role="tabpanel"`** regions in your page content when you switch panels.
+
+### Styling
+
+#### Colors
+
+You can set **`color`** and **`activeColor`** for label tokens, and **`activeBackground`** for the underline.
+
+```jsx live
+function Example() {
+  const tabs = [
+    { id: 'tab1', label: 'Tab 1' },
+    { id: 'tab2', label: 'Tab 2' },
+    { id: 'tab3', label: 'Tab 3' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <Tabs
+      accessibilityLabel="Example tabs"
+      activeBackground="fg"
+      activeColor="fg"
+      activeTab={activeTab}
+      color="fgMuted"
       gap={4}
       onChange={setActiveTab}
       tabs={tabs}
@@ -151,7 +170,7 @@ function Example() {
   }, []);
 
   const ActiveIndicator = useCallback(
-    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    (props) => <TabsActiveIndicator {...props} background="bgPositive" bottom={0} height={2} />,
     [],
   );
 
@@ -220,10 +239,6 @@ function Example() {
 }
 ```
 
-### Accessibility
-
-Provide a descriptive **`accessibilityLabel`** on **`Tabs`** for the tab list. **`DefaultTab`** sets `aria-controls` / `aria-selected` for each tab; pair tabs with **`role="tabpanel"`** regions in your page content when you switch panels.
-
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -234,6 +249,7 @@ Provide a descriptive **`accessibilityLabel`** on **`Tabs`** for the tab list. *
 | `TabComponent` | `TabComponent<TabId, TTab>` | No | `-` | The default Component to render each tab. |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | The default Component to render the tabs active indicator. |
 | `activeBackground` | `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 | `-` | Background color passed to the TabsActiveIndicatorComponent. |
+| `activeColor` | `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 \| ResponsiveValue<Color>` | No | `-` | Active label color (from Tabs when set). |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -260,7 +276,7 @@ Provide a descriptive **`accessibilityLabel`** on **`Tabs`** for the tab list. *
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
 | `classNames` | `{ root?: string; tab?: string \| undefined; activeIndicator?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Tabs component |
-| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
+| `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 \| ResponsiveValue<Color>` | No | `-` | Inactive label color (from Tabs when set). |
 | `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |

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

@@ -719,6 +719,8 @@ function testExample() {
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelColor` | `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 | `-` | Color token for the field label. |
+| `labelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Typography token for the field label. |
 | `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | 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. |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
@@ -747,6 +749,7 @@ function testExample() {
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
 | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `readOnly` | `boolean` | No | `-` | When true, the value cannot be edited but the control may remain focusable (unlike disabled). |
 | `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |

package/mcp-docs/web/guides/_v9MobileInstallCommands.txt

@@ -0,0 +1,9 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9MobileInstallCommands/
+
+```bash
+# npm
+npm install @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-mobile@9.0.0-rc.2
+
+# yarn
+yarn add @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-mobile@9.0.0-rc.2
+```

package/mcp-docs/web/guides/_v9MobilePeerDependencies.txt

@@ -0,0 +1,15 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9MobilePeerDependencies/
+
+<br />
+
+| Package                          | Previous range | Required range |
+| -------------------------------- | -------------- | -------------- |
+| `react`                          | `^18.3.1`      | `~19.1.2`      |
+| `react-native`                   | `^0.74.5`      | `~0.81.5`      |
+| `lottie-react-native`            | `^6.7.0`       | `7.3.1`        |
+| `react-native-gesture-handler`   | `^2.16.2`      | `2.28.0`       |
+| `react-native-reanimated`        | `^3.14.0`      | `4.1.1`        |
+| `react-native-safe-area-context` | `^4.10.5`      | `5.6.0`        |
+| `react-native-svg`               | `^14.1.0`      | `15.12.1`      |
+| `@shopify/react-native-skia`     | -              | `2.2.12`       |
+| `react-native-worklets`          | -              | `0.5.2`        |

package/mcp-docs/web/guides/_v9WebInstallCommands.txt

@@ -0,0 +1,9 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9WebInstallCommands/
+
+```bash
+# npm
+npm install @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-web@9.0.0-rc.2
+
+# yarn
+yarn add @coinbase/cds-common@9.0.0-rc.2 @coinbase/cds-web@9.0.0-rc.2
+```

package/mcp-docs/web/guides/_v9WebPeerDependencies.txt

@@ -0,0 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/_v9WebPeerDependencies/
+
+<br />
+
+No required peer dependency changes for web.

package/mcp-docs/web/guides/v9-migration-guide.txt

@@ -0,0 +1,348 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/v9-migration-guide/
+
+---
+id: v9-migration-guide
+title: v9 Upgrade Guide
+slug: /guides/v9-upgrade-guide
+hide_title: true
+---
+
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { DeprecationTable } from '@site/src/components/page/DeprecationTable';
+import { StandalonePlatformSwitcher } from '@site/src/components/page/PlatformSwitcher';
+import { VStack, HStack } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography/Text';
+import { Tag } from '@coinbase/cds-web/tag/Tag';
+
+import {
+  componentDeprecations,
+  hookFunctionDeprecations,
+  tokenConstantDeprecations,
+  typeDeprecations,
+} from '@site/src/data/v9Deprecations';
+
+import WebInstallCommands from './_v9WebInstallCommands.mdx';
+import MobileInstallCommands from './_v9MobileInstallCommands.mdx';
+import WebPeerDependencies from './_v9WebPeerDependencies.mdx';
+import MobilePeerDependencies from './_v9MobilePeerDependencies.mdx';
+
+<VStack gap={5}>
+<ContentHeader title="v9 Upgrade Guide" />
+
+<MDXSection>
+<MDXArticle>
+
+## 👋 Introduction
+
+CDS 9 builds on the foundation laid in v8 and focuses on stability, modernization, and addressing specific debt that improves future maintainability.
+
+Highlights of this release:
+
+- 🔮 React 19 support on web (with backwards compatibility for React 18)
+- 📱 React Native 0.81 / Expo SDK 54 support on mobile
+- 📐 Eliminates hard-coded fixed widths/heights from all components to improve customizability and themeability
+- 🎯 Consolidates standalone visualization packages in order to simplify the CDS ecosystem
+- 🌬️ NEW migrator tool (`@coinbase/cds-migrator`) to help with this and future upgrades
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## 📦 Packages
+
+The following CDS packages are receiving new versions:
+
+- `@coinbase/cds-common@9.0.0-rc.2`
+- `@coinbase/cds-web@9.0.0-rc.2`
+- `@coinbase/cds-mobile@9.0.0-rc.2`
+- `@coinbase/cds-mcp-server@9.0.0-rc.2`
+- `@coinbase/cds-migrator@1.0.0`{' '} <Tag colorScheme="blue">New</Tag>
+
+:::tip Release Candidate Status
+CDS 9 is currently in release candidate status. There are no breaking changes planned prior to the official release of 9.0.0. So it is safe to upgrade to `9.0.0-rc.2` if you want to get an early start.
+:::
+
+In CDS 9, we are deprecating the standalone visualization packages. See the [Deprecated packages](#packages) for more details.
+
+- `@coinbase/cds-web-visualization`{' '} <Tag colorScheme="red">Deprecated</Tag>
+- `@coinbase/cds-mobile-visualization`{' '} <Tag colorScheme="red">Deprecated</Tag>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## ✅ Upgrade Steps
+
+### 1. Prerequisites
+
+CDS 9 no longer bundles the v7 shim (`cds-web/v7`/`cds-mobile/v7`).
+Incremental upgrade strategies, which this pattern enabled, are no longer recommended.
+Starting with CDS 9, major releases will minimize breaking changes relateive to the prior version, making major upgrades possible to land in a single PR, even for large monorepos.
+
+Before upgrading to v9:
+
+1. Search your codebase for any remaining `cds-web/v7` / `cds-mobile/v7` imports.
+2. Complete any partial migrations from the v7 shim to proper CDS 8 imports by following the [v8 Migration Guide](./v8-migration-guide).
+3. Once all v7 imports are eliminated, you can upgrade to v9.
+
+```tsx
+// ❌ Before (still on v8 with incremental migration)
+import { Button } from '@coinbase/cds-web/v7/buttons/Button';
+
+// ✅ After (must complete before upgrading to v9)
+import { Button } from '@coinbase/cds-web/buttons/Button';
+```
+
+### 2. Update Packages
+
+<StandalonePlatformSwitcher.Root>
+  <VStack>
+    <HStack alignItems="center" justifyContent="space-between" width="100%">
+      <Text font="title3">Updgrade CDS Packages</Text>
+      <StandalonePlatformSwitcher.Toggle accessibilityLabel="Select package platform" />
+    </HStack>
+    <Text font="body">Update the CDS packages your app uses to v9.</Text>
+    <StandalonePlatformSwitcher.Content platform="web">
+      <WebInstallCommands />
+    </StandalonePlatformSwitcher.Content>
+    <StandalonePlatformSwitcher.Content platform="mobile">
+      <MobileInstallCommands />
+    </StandalonePlatformSwitcher.Content>
+  </VStack>
+</StandalonePlatformSwitcher.Root>
+
+<StandalonePlatformSwitcher.Root>
+  <VStack>
+    <HStack alignItems="center" justifyContent="space-between" width="100%">
+      <Text font="title3">Update CDS Peer Dependencies</Text>
+      <StandalonePlatformSwitcher.Toggle accessibilityLabel="Select peer dependency platform" />
+    </HStack>
+    <StandalonePlatformSwitcher.Content platform="web">
+      <WebPeerDependencies />
+    </StandalonePlatformSwitcher.Content>
+    <StandalonePlatformSwitcher.Content platform="mobile">
+      <MobilePeerDependencies />
+    </StandalonePlatformSwitcher.Content>
+  </VStack>
+</StandalonePlatformSwitcher.Root>
+
+<br />
+
+### 3. Run Automated Codemods
+
+The new `@coinbase/cds-migrator` will help expedite your upgrade to CDS 9.
+It encapsulates individual changes in **transforms**, and groups related transforms into versioned **presets**.
+For upgrades from CDS 8 to CDS 9, use the `v8-to-v9` preset.
+
+For detailed CLI documentation and individual transform/preset details, see the [package README](https://github.com/coinbase/cds/blob/cds-v9-master/packages/migrator/README.md).
+
+:::tip Proactive Codemods
+We will continually publish new transforms and presets to proactively address deprecations in preparation of the following major release.
+:::
+
+#### Running the codemods
+
+```bash
+# Preview all changes (recommended first step)
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --dry-run
+
+# Review the generated migration.log
+cat migration.log
+
+# Apply the migration
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+```
+
+You can also run a single transform:
+
+```bash
+npx @coinbase/cds-migrator ./src -t button-variant-values --dry-run
+```
+
+The migrator tool records what it has already run in `.cds-migration-history.json` and leaves `// TODO [cds-migrator:<transform-name>]` comments in the source code for cases that may need manual review.
+
+#### Manual upgrade effort
+
+The CDS 9 codemods should address the vast majority of potential incompatibility issues, however there are a few specific edge cases that may require manual attention.
+
+- Tightening some TypeScript types (`Carousel`, `Drawer`, `Tray`, `Modal`, `TableCell.end`, etc.)
+- Updating custom Stepper progress UIs and `SlideButton` slot components to use Reanimated / `framer-motion` instead of `react-spring`
+- See [Breaking Change Overview](#-breaking-change-overview) for more details
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## 💥 Breaking Change Overview
+
+### Hard-Coded Dimensions Removed
+
+CDS 9 removes hard-coded fixed heights and widths from all components. Components are now driven by their content, your layout, or theme tokens. As a side effect, several constants and utilities that exposed those fixed pixel values are deprecated (see [New Deprecations](#new-deprecations)). Review any surfaces that depended on CDS components occupying fixed dimensions, since those layouts may need small visual adjustments after upgrading.
+
+### Packages & Imports
+
+- **v7 import paths dropped** — `@coinbase/cds-web/v7` and `@coinbase/cds-mobile/v7` are no longer bundled. Apps must finish their CDS 8 upgrade before jumping to CDS 9.
+- **Visualization packages merged** — deep paths on `@coinbase/cds-(web|mobile)-visualization` may no longer resolve. Use the new `@coinbase/cds-(web|mobile)/visualizations/*` exports.
+
+### Cutting react-spring references
+
+CDS is migrating away from `react-spring`, which is poorly maintained and has been the source of recurring bugs.
+The implementation detail leaked into the public API of two components — `Stepper` and `SlideButton`.
+These APIs need to be adjusted before CDS can transition to the preferred animation libraries, `framer-motion` and `react-native-reanimated`.
+
+#### Stepper <Tag colorScheme="blue">Web</Tag> <Tag colorScheme="green">Mobile</Tag>
+
+If you supply a custom step / progress UI to `Stepper`, the `progress` prop is now a plain `number` between `0` and `1` instead of a `react-spring` value. For built-in progress animation, configure timing via the new `progressTimingConfig` / `defaultProgressTimingConfig` props. The legacy `progressSpringConfig` prop is ignored on this animation path.
+
+```tsx
+// ❌ Before (v8) — progress was a SpringValue<number>
+const CustomProgress = ({ progress }: { progress: SpringValue<number> }) => (
+  <animated.div style={{ width: progress.to((p) => `${p * 100}%`) }} />
+);
+
+// ✅ After (v9) — progress is a number between 0 and 1
+const CustomProgress = ({ progress }: { progress: number }) => (
+  <div style={{ width: `${progress * 100}%` }} />
+);
+
+// Built-in animation timing
+<Stepper
+  progressTimingConfig={{ duration: 0.4, ease: 'easeInOut' }}
+  // progressSpringConfig is ignored in v9
+/>;
+```
+
+#### SlideButton <Tag colorScheme="green">Mobile</Tag>
+
+Custom `SlideButtonBackgroundComponent` and `SlideButtonHandleComponent` slots now receive `progress` as a Reanimated `SharedValue<number>` instead of a `react-spring` `SpringValue<number>`. Any custom slot that drove animation with spring helpers must switch to Reanimated.
+
+```tsx
+// ❌ Before (v8)
+import { SpringValue } from '@react-spring/native';
+const BackgroundComponent = ({ progress }: { progress: SpringValue<number> }) => {
+  // animated.View, react-spring helpers...
+};
+
+// ✅ After (v9)
+import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reanimated';
+
+const BackgroundComponent = ({ progress }: { progress: SharedValue<number> }) => {
+  const style = useAnimatedStyle(() => ({ opacity: progress.value }));
+  return <Animated.View style={style} />;
+};
+```
+
+**Spring config:** `animationConfig` on `DefaultSlideButtonHandle` is deprecated. Use `slideButtonSpringConfig` together with Reanimated's `withSpring`.
+
+**Layout:** `SlideButton` now applies default heights (`40` for compact, `56` for regular) and derives the handle's `minWidth` from `height`. If you previously omitted `height` and relied on the old interactable-height + spring-driven sizing, double-check the rendered layout — you may need to set `height` explicitly to preserve v8 behavior.
+
+### TypeScript Type Changes
+
+A handful of CDS types have been tightened to better reflect runtime behavior or to align with React 19's updated typedefs.
+These changes are runtime-compatible but may surface as TypeScript errors after you upgrade.
+
+:::tip Tip
+In most cases, removing explicit type annotations and letting TypeScript infer the type from CDS is the simplest fix.
+:::
+
+#### React.FC type removed for render-children types <Tag colorScheme="blue">Web</Tag><Tag colorScheme="green">Mobile</Tag>
+
+The following components' render functions are now typed as `(props) => ReactNode` instead of using the deprecated `React.FC` type:
+
+- `CarouselItem`
+- `Drawer`
+- `Tray`
+- `Modal`
+
+#### `TableCell.end` and `SelectOptionGroupComponent.accessory` <Tag colorScheme="blue">Web</Tag>
+
+Both components' props now require a stricter type: `React.ReactElement<CellAccessoryProps>`.
+
+```tsx
+// ❌ Before (v8) — was previously typed as ReactElement/ReactNode
+<TableCell end={<div>123</div>} />;
+
+// ✅ After (v9)
+import { CellTextAccessory } from '@coinbase/cds-web/cells';
+<TableCell end={<CellTextAccessory text="123" />} />;
+```
+
+#### Input `onFocus` / `onBlur` Event Types <Tag colorScheme="green">Mobile</Tag>
+
+Certain mobile component APIs that accept focus/blur event handlers now use simpler typing
+
+```tsx
+// ❌ Before (v8)
+import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+const onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  /* ... */
+};
+
+// ✅ After (v9)
+import type { FocusEvent } from 'react-native';
+const onFocus = (e: FocusEvent) => {
+  /* ... */
+};
+```
+
+### Removed APIs (Dropped Deprecations)
+
+The following `@deprecated` APIs are **fully removed** in v9.
+
+| Package                               | Dropped deprecations                                                                                                                                                       |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <Tag colorScheme="gray">Common</Tag>  | `emptyObject`, `StickyFooterProps`                                                                                                                                         |
+| <Tag colorScheme="blue">Web</Tag>     | `AnnouncementCardProps`, `FeatureEntryCardProps`, `RadioGroupProps`, `CheckboxGroupProps`, `FeedCardProps`, `IconCounterButton.iconSize`                                   |
+| <Tag colorScheme="green">Mobile</Tag> | `AnnouncementCardProps`, `FeatureEntryCardProps`, `RadioGroupProps`, `CheckboxGroupProps`, `FeedCardProps`, `LinearGradient.isBelowChildren`, `IconCounterButton.iconSize` |
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## ⚠️ New Deprecations
+
+The following APIs are **still available in v9** but are scheduled for removal in CDS 10. Migrators and/or AI agents will be released following the v9 launch to help with each. You can also start migrating manually using the guidance below.
+
+### Packages
+
+| Package                                  | Notes                                                                                                                      |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| **`@coinbase/cds-web-visualization`**    | Use `@coinbase/cds-web/visualizations/{chart,sparkline}` instead. Remove the dependency once your imports are migrated.    |
+| **`@coinbase/cds-mobile-visualization`** | Use `@coinbase/cds-mobile/visualizations/{chart,sparkline}` instead. Remove the dependency once your imports are migrated. |
+
+:::tip Codemod
+The CDS migrator's `v8-to-v9` preset will update these packages' import paths for you.
+:::
+
+### Components
+
+<DeprecationTable rows={componentDeprecations} />
+
+### Hooks & Functions
+
+<DeprecationTable rows={hookFunctionDeprecations} />
+
+### Tokens & Constants
+
+The following tokens were fixed pixel values that pin component sizing. With v9 removing hard-coded heights/widths, they are no longer published. Define your own values or rely on layout-driven sizing.
+
+<DeprecationTable rows={tokenConstantDeprecations} />
+
+### Types
+
+<DeprecationTable rows={typeDeprecations} />
+
+</MDXArticle>
+</MDXSection>
+
+</VStack>