@coinbase/cds-mcp-server 8.29.0 → 8.30.1

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.30.1 ((12/12/2025, 03:00 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.30.0 ((12/12/2025, 02:53 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.29.0 ((12/12/2025, 01:12 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -289,6 +289,91 @@ function ExampleDescriptions() {
 }
 ```
 
+### With display value
+
+Use the `displayValue` prop to override the displayed value and avoid truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+
+```tsx
+function ExampleDisplayValue() {
+  const exampleOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+    { value: '5', label: 'Option 5' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const displayValue =
+    Array.isArray(value) && value.length > 0
+      ? `${value.length} ${value.length === 1 ? 'option' : 'options'} selected`
+      : undefined;
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple values"
+      displayValue={displayValue}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose options"
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### With max width
+
+```tsx
+function ExampleMaxWidth() {
+  const exampleOptions = [
+    { value: '1', label: 'Very Long Option Name That Exceeds Default Width' },
+    { value: '2', label: 'Another Extremely Long Option Label' },
+    { value: '3', label: 'Short' },
+    { value: '4', label: 'Medium Length Option' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <VStack gap={2}>
+      <VStack gap={1}>
+        <Text>Default maxWidth (200px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>Custom maxWidth (150px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          maxWidth={150}
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>No maxWidth constraint:</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          maxWidth="100%"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+    </VStack>
+  );
+}
+```
+
 ### Disabled
 
 ```tsx
@@ -342,6 +427,7 @@ function ExampleDisabled() {
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
 | `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `displayValue` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Override the displayed value in the chip control. Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display. When provided, this value takes precedence over the default label generation. |
 | `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
 | `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
@@ -350,6 +436,7 @@ function ExampleDisabled() {
 | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
 | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
 | `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `maxWidth` | `string \| number` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
 | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
 | `open` | `boolean` | No | `-` | Controlled open state of the dropdown |

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

@@ -57,6 +57,35 @@ function ExampleManyTabs() {
 }
 ```
 
+### With autoScrollOffset
+
+:::tip Auto-scroll offset
+The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the overflow gradient on the left side. Try clicking tabs near the edges to see the difference.
+:::
+
+```tsx
+function ExampleAutoScrollOffset() {
+  const tabs = Array.from({ length: 25 }).map((_, i) => ({
+    id: `tab_${i + 1}`,
+    label: `Tab ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <VStack gap={2}>
+      <Text>Default offset (30px)</Text>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <Text>Custom offset (60px)</Text>
+      <TabbedChips
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        tabs={tabs}
+        autoScrollOffset={60}
+      />
+    </VStack>
+  );
+}
+```
+
 ### Long text tabs
 
 ```tsx
@@ -163,6 +192,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `autoScrollOffset` | `number` | No | `30` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the overflow gradient on the left side, default: 30px) |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
 | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | The spacing between Tabs |

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

@@ -158,7 +158,7 @@ function Example() {
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
-| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |

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

@@ -153,7 +153,7 @@ function Example() {
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
-| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |

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

@@ -234,7 +234,7 @@ You can override the automatic spacing with custom values if needed.
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
-| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |

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

@@ -268,7 +268,7 @@ function SelectChipExample() {
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `((MaxHeight<string \| number> \| { base?: MaxHeight<string \| number>; phone?: MaxHeight<string \| number> \| undefined; tablet?: MaxHeight<string \| number> \| undefined; desktop?: MaxHeight<string \| number> \| undefined; }) & MaxHeight<string \| number>) \| undefined` | No | `300` | Can optionally pass a maxHeight. |
-| `maxWidth` | `(((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
+| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `((MinWidth<string \| number> \| { base?: MinWidth<string \| number>; phone?: MinWidth<string \| number> \| undefined; tablet?: MinWidth<string \| number> \| undefined; desktop?: MinWidth<string \| number> \| undefined; }) & MinWidth<string \| number>) \| undefined` | No | `-` | Minimum width of input as a percentage string or number converted to pixels. |
 | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |

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

@@ -273,6 +273,88 @@ function ExampleDescriptions() {
 }
 ```
 
+### With display value
+
+Use the `displayValue` prop to override the displayed value and avoid truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+
+```jsx live
+function ExampleDisplayValue() {
+  const exampleOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+    { value: '5', label: 'Option 5' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const displayValue =
+    Array.isArray(value) && value.length > 0
+      ? `${value.length} ${value.length === 1 ? 'option' : 'options'} selected`
+      : undefined;
+  return (
+    <SelectChip
+      controlAccessibilityLabel="Select multiple values"
+      displayValue={displayValue}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose options"
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### With max width
+
+```jsx live
+function ExampleMaxWidth() {
+  const exampleOptions = [
+    { value: '1', label: 'Very Long Option Name That Exceeds Default Width' },
+    { value: '2', label: 'Another Extremely Long Option Label' },
+    { value: '3', label: 'Short' },
+    { value: '4', label: 'Medium Length Option' },
+  ];
+  const [value, setValue] = useState(null);
+  return (
+    <VStack gap={2}>
+      <VStack gap={1}>
+        <Text>Default maxWidth (200px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>Custom maxWidth (150px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          maxWidth={150}
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>No maxWidth constraint:</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          maxWidth="100%"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+    </VStack>
+  );
+}
+```
+
 ### Disabled
 
 ```jsx live
@@ -285,7 +367,7 @@ function ExampleDisabled() {
   ];
   const [value, setValue] = useState('1');
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    <VStack gap={2}>
       <SelectChip
         disabled
         accessibilityLabel="Select a value"
@@ -302,7 +384,7 @@ function ExampleDisabled() {
         placeholder="Choose an option"
         value={value}
       />
-    </div>
+    </VStack>
   );
 }
 ```
@@ -329,6 +411,7 @@ function ExampleDisabled() {
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
 | `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `displayValue` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Override the displayed value in the chip control. Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display. When provided, this value takes precedence over the default label generation. |
 | `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
 | `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
@@ -337,6 +420,7 @@ function ExampleDisabled() {
 | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
 | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
 | `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
 | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
 | `open` | `boolean` | No | `-` | Controlled open state of the dropdown |

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

@@ -1,6 +1,6 @@
 # Sidebar
 
-A vertical navigation menu for accessing different sections.
+A composable and customizable vertical navigation component with support for multiple variants, collapsible states, and custom content areas.
 
 ## Import
 
@@ -10,12 +10,53 @@ import { Sidebar } from '@coinbase/cds-web/navigation/Sidebar'
 
 ## Examples
 
-### Default
+Sidebar is a vertical navigation component for accessing different sections of an application. It supports multiple variants, collapsible states, and custom content areas.
 
-Use the Default variant on standard consumer-facing surfaces like Retail where maximum navigation and content space is desired.
+### Basics
+
+A Sidebar is composed of the following parts:
+
+- `Sidebar` - The main container with logo and navigation items
+- `SidebarItem` - Individual navigation items with icon and title
+- `SidebarMoreMenu` - Overflow menu for additional navigation options
+
+```jsx live
+function BasicSidebar() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const items = [
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+    { title: 'Settings', icon: 'cog' },
+  ];
+
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar logo={<LogoMark />}>
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+            tooltipContent={item.title}
+          />
+        ))}
+      </Sidebar>
+    </HStack>
+  );
+}
+```
+
+### Variants
+
+#### Default
+
+Use the Default variant on standard consumer-facing surfaces like Retail where maximum navigation and content space is desired. This variant shows full labels alongside icons.
 
 ```jsx live
-function Example() {
+function DefaultVariant() {
   const items = [
     { title: 'Home', icon: 'home' },
     { title: 'Assets', icon: 'chartPie' },
@@ -44,18 +85,13 @@ function Example() {
     return (
       <Pressable
         as="button"
-        background="transparent"
+        background="bgPrimaryWash"
         borderRadius={1000}
+        transparentWhileInactive
         width="100%"
         onClick={() => console.log}
       >
-        <HStack
-          alignItems="center"
-          gap={2}
-          justifyContent="flex-start"
-          padding={2}
-          testID="sidebar-item-primary"
-        >
+        <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
           <Icon name="documentation" />
           <Text as="span" font="headline" color="foreground">
             End item
@@ -73,6 +109,11 @@ function Example() {
           </Box>
         }
         renderEnd={renderEnd}
+        styles={{
+          end: {
+            width: '100%',
+          },
+        }}
       >
         {navItems.map((item, index) => (
           <SidebarItem
@@ -104,12 +145,77 @@ function Example() {
 }
 ```
 
-### Collapsed
+#### Condensed
 
-Use for professional-focused interfaces such as Cloud that balance navigation importance with a desire to expand the content viewing area.
+Use in specialized workflows with complex data displays, such as Exchange and Advanced Trade, where navigation space is minimized to focus on core tasks. This variant displays icons with small labels below.
 
 ```jsx live
-function Example() {
+function CondensedVariant() {
+  const items = [
+    { title: 'Spot', icon: 'chartCandles' },
+    { title: 'Futures', icon: 'chartBar' },
+    { title: 'Portfolio', icon: 'chartPie' },
+    { title: 'Orders', icon: 'documentation' },
+    { title: 'For you', icon: 'newsFeed' },
+    { title: 'Earn', icon: 'giftBox' },
+    { title: 'Borrow', icon: 'cash' },
+    { title: 'DeFi', icon: 'defi' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [moreMenuValue, setMoreMenuValue] = useState();
+  const navItems = items.slice(0, 4);
+  const moreMenuOptions = items.slice(4);
+  const handleMoreMenuChange = (newValue) => {
+    const moreIndex =
+      moreMenuOptions.findIndex((option) => option.title === newValue) + navItems.length;
+    setActiveIndex(moreIndex);
+    setMoreMenuValue(newValue);
+  };
+  const handleItemClick = (index) => {
+    setActiveIndex(index);
+    setMoreMenuValue(undefined);
+  };
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar logo={<LogoMark foreground />} variant="condensed">
+        {navItems.map((item, index) => (
+          <SidebarItem
+            key={`sidebar-item--${item.title}`}
+            active={index === activeIndex}
+            onClick={() => handleItemClick(index)}
+            tooltipContent={item.title}
+            {...item}
+          />
+        ))}
+        <SidebarMoreMenu
+          active={activeIndex >= navItems.length}
+          onChange={handleMoreMenuChange}
+          tooltipContent="More"
+          value={moreMenuValue}
+        >
+          {moreMenuOptions.map((item) => (
+            <SelectOption
+              key={`sidebar-more-menu-item--${item.title}`}
+              description={item.title}
+              media={<Icon name={item.icon} />}
+              value={item.title}
+            />
+          ))}
+        </SidebarMoreMenu>
+      </Sidebar>
+    </HStack>
+  );
+}
+```
+
+### Collapsed State
+
+#### Controlled Collapse
+
+Use the `collapsed` prop to control the sidebar's collapsed state. When collapsed, only icons are shown with tooltips for labels.
+
+```jsx live
+function ControlledCollapse() {
   const items = [
     { title: 'Home', icon: 'home' },
     { title: 'Assets', icon: 'chartPie' },
@@ -175,46 +281,331 @@ function Example() {
 }
 ```
 
-### Condensed
+#### Auto Collapse
 
-Use in specialized workflows with complex data displays, such as Exchange and Advanced Trade, where navigation space is minimized to focus on core tasks.
+Use the `autoCollapse` prop to automatically collapse the sidebar at or below the tablet breakpoint (768px). This is useful for responsive layouts where the sidebar should adapt to screen size.
 
 ```jsx live
-function Example() {
+function AutoCollapse() {
   const items = [
-    { title: 'Spot', icon: 'chartCandles' },
-    { title: 'Futures', icon: 'chartBar' },
-    { title: 'Portfolio', icon: 'chartPie' },
-    { title: 'Orders', icon: 'documentation' },
-    { title: 'For you', icon: 'newsFeed' },
-    { title: 'Earn', icon: 'giftBox' },
-    { title: 'Borrow', icon: 'cash' },
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+    { title: 'Settings', icon: 'cog' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar autoCollapse logo={<LogoMark />}>
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+            tooltipContent={item.title}
+          />
+        ))}
+      </Sidebar>
+      <VStack flexGrow={1} padding={3}>
+        <Text color="fgMuted" font="label1">
+          Resize the browser window to see the sidebar auto-collapse at the tablet breakpoint.
+        </Text>
+      </VStack>
+    </HStack>
+  );
+}
+```
+
+### Custom Content
+
+#### Logo
+
+The `logo` prop accepts either a React element or a render function that receives the collapsed state. Use the render function when you need different logos for collapsed and expanded states.
+
+```jsx live
+function CustomLogo() {
+  const items = [
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [collapsed, setCollapsed] = useState(false);
+
+  const renderLogo = (isCollapsed) =>
+    isCollapsed ? (
+      <LogoMark />
+    ) : (
+      <Box height={32}>
+        <SubBrandLogoMark type="commerce" />
+      </Box>
+    );
+
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar
+        collapsed={collapsed}
+        logo={renderLogo}
+        renderEnd={() => (
+          <IconButton
+            name={collapsed ? 'caretRight' : 'caretLeft'}
+            onClick={() => setCollapsed(!collapsed)}
+          />
+        )}
+      >
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+            tooltipContent={item.title}
+          />
+        ))}
+      </Sidebar>
+    </HStack>
+  );
+}
+```
+
+#### Render End
+
+The `renderEnd` prop places content at the bottom of the sidebar. It receives the collapsed state as a parameter, allowing you to adapt the content based on the sidebar's state.
+
+```jsx live
+function RenderEndExample() {
+  const items = [
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const renderEnd = (isCollapsed) => (
+    <Pressable
+      as="button"
+      background="bgPrimaryWash"
+      borderRadius={1000}
+      transparentWhileInactive
+      width="100%"
+      onClick={() => alert('Help clicked!')}
+    >
+      <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
+        <Icon name="questionCircle" />
+        {!isCollapsed && (
+          <TextHeadline as="span" color="foreground">
+            Help & Support
+          </TextHeadline>
+        )}
+      </HStack>
+    </Pressable>
+  );
+
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar
+        logo={<LogoMark />}
+        renderEnd={renderEnd}
+        styles={{
+          end: {
+            width: '100%',
+          },
+        }}
+      >
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+            tooltipContent={item.title}
+          />
+        ))}
+      </Sidebar>
+    </HStack>
+  );
+}
+```
+
+### Styling
+
+Use the `styles` prop to customize specific parts of the sidebar.
+
+```jsx live
+function CustomStyles() {
+  const items = [
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+    { title: 'Settings', icon: 'cog' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
+      <Sidebar
+        logo={<LogoMark />}
+        renderEnd={() => (
+          <Pressable
+            as="button"
+            background="bgPrimaryWash"
+            borderRadius={1000}
+            transparentWhileInactive
+            width="100%"
+          >
+            <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
+              <Icon name="questionCircle" />
+              <TextHeadline as="span">Help</TextHeadline>
+            </HStack>
+          </Pressable>
+        )}
+        styles={{
+          root: {
+            background:
+              'linear-gradient(180deg, var(--color-bg) 0%, var(--color-bgAlternate) 100%)',
+          },
+          logo: { paddingBottom: 32 },
+          end: { width: '100%' },
+        }}
+      >
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+            tooltipContent={item.title}
+          />
+        ))}
+      </Sidebar>
+    </HStack>
+  );
+}
+```
+
+You can also use custom class names on the various subcomponents in Sidebar using the `classNames` prop.
+
+```jsx
+const customLogoStyles = css`
+  padding-bottom: var(--spacing-6);
+`;
+
+function CustomClassNamesExample() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const items = [
+    { title: 'Home', icon: 'home' },
+    { title: 'Assets', icon: 'chartPie' },
+    { title: 'Trade', icon: 'trading' },
+    { title: 'Settings', icon: 'cog' },
+  ];
+
+  return (
+    <Sidebar
+      logo={<LogoMark />}
+      classNames={{
+        logo: customLogoStyles,
+      }}
+    >
+      {items.map((item, index) => (
+        <SidebarItem
+          key={item.title}
+          active={index === activeIndex}
+          icon={item.icon}
+          onClick={() => setActiveIndex(index)}
+          title={item.title}
+          tooltipContent={item.title}
+        />
+      ))}
+    </Sidebar>
+  );
+}
+```
+
+### Composed Examples
+
+#### Application Shell
+
+A complete application layout with sidebar navigation, main content area, and responsive behavior.
+
+```jsx live
+function ApplicationShell() {
+  const items = [
+    { title: 'Dashboard', icon: 'home' },
+    { title: 'Analytics', icon: 'chartPie' },
+    { title: 'Transactions', icon: 'trading' },
+    { title: 'Payments', icon: 'pay' },
+    { title: 'News Feed', icon: 'newsFeed' },
+    { title: 'Rewards', icon: 'giftBox' },
+    { title: 'Lending', icon: 'cash' },
     { title: 'DeFi', icon: 'defi' },
   ];
   const [activeIndex, setActiveIndex] = useState(0);
   const [moreMenuValue, setMoreMenuValue] = useState();
-  const navItems = items.slice(0, 4);
-  const moreMenuOptions = items.slice(4);
+  const navItems = items.slice(0, 5);
+  const moreMenuOptions = items.slice(5);
+
   const handleMoreMenuChange = (newValue) => {
     const moreIndex =
       moreMenuOptions.findIndex((option) => option.title === newValue) + navItems.length;
     setActiveIndex(moreIndex);
     setMoreMenuValue(newValue);
   };
-  const handleItemClick = (index) => {
+
+  const handleItemPress = (index) => {
     setActiveIndex(index);
     setMoreMenuValue(undefined);
   };
+
+  const currentPage = items[activeIndex]?.title || 'Dashboard';
+
   return (
-    <HStack alignItems="flex-start" justifyContent="center" overflow="hidden">
-      <Sidebar logo={<LogoMark foreground />} variant="condensed">
+    <HStack alignItems="stretch" height={400} overflow="hidden">
+      <Sidebar
+        autoCollapse
+        logo={<LogoMark />}
+        renderEnd={(isCollapsed) => (
+          <VStack gap={1}>
+            <Pressable
+              as="button"
+              background="bgPrimaryWash"
+              borderRadius={1000}
+              transparentWhileInactive
+              width="100%"
+            >
+              <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
+                <Icon name="cog" />
+                {!isCollapsed && <TextHeadline as="span">Settings</TextHeadline>}
+              </HStack>
+            </Pressable>
+            <Pressable
+              as="button"
+              background="bgPrimaryWash"
+              borderRadius={1000}
+              transparentWhileInactive
+              width="100%"
+            >
+              <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
+                <Avatar size="s" />
+                {!isCollapsed && <TextHeadline as="span">Profile</TextHeadline>}
+              </HStack>
+            </Pressable>
+          </VStack>
+        )}
+      >
         {navItems.map((item, index) => (
           <SidebarItem
-            key={`sidebar-item--${item.title}`}
+            key={item.title}
             active={index === activeIndex}
-            onClick={() => handleItemClick(index)}
+            icon={item.icon}
+            onClick={() => handleItemPress(index)}
+            title={item.title}
             tooltipContent={item.title}
-            {...item}
           />
         ))}
         <SidebarMoreMenu
@@ -225,7 +616,7 @@ function Example() {
         >
           {moreMenuOptions.map((item) => (
             <SelectOption
-              key={`sidebar-more-menu-item--${item.title}`}
+              key={item.title}
               description={item.title}
               media={<Icon name={item.icon} />}
               value={item.title}
@@ -233,6 +624,69 @@ function Example() {
           ))}
         </SidebarMoreMenu>
       </Sidebar>
+      <VStack background="bgAlternate" flexGrow={1} padding={3}>
+        <Text as="h1" font="title2">
+          {currentPage}
+        </Text>
+        <Text color="fgMuted" font="body">
+          Welcome to the {currentPage.toLowerCase()} page. This is a sample application shell
+          demonstrating the Sidebar component with responsive behavior.
+        </Text>
+      </VStack>
+    </HStack>
+  );
+}
+```
+
+#### Condensed Trading Interface
+
+A condensed sidebar optimized for professional trading interfaces with minimal visual footprint.
+
+```jsx live
+function TradingInterface() {
+  const items = [
+    { title: 'Spot', icon: 'chartCandles' },
+    { title: 'Futures', icon: 'chartBar' },
+    { title: 'Portfolio', icon: 'chartPie' },
+    { title: 'Orders', icon: 'documentation' },
+  ];
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <HStack>
+      <Sidebar logo={<LogoMark foreground />} variant="condensed">
+        {items.map((item, index) => (
+          <SidebarItem
+            key={item.title}
+            active={index === activeIndex}
+            icon={item.icon}
+            onClick={() => setActiveIndex(index)}
+            title={item.title}
+          />
+        ))}
+      </Sidebar>
+      <VStack background="bgAlternate" flexGrow={1} gap={2} padding={3}>
+        <HStack justifyContent="space-between">
+          <Text font="title3">BTC/USD</Text>
+          <Text color="fgPositive" font="title3">
+            $67,432.50
+          </Text>
+        </HStack>
+        <Box
+          background="bg"
+          borderRadius={200}
+          flexGrow={1}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text color="fgMuted" font="label1">
+            {items[activeIndex].title} Chart Area
+          </Text>
+        </Box>
+      </VStack>
     </HStack>
   );
 }
@@ -269,6 +723,7 @@ function Example() {
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `classNames` | `{ root?: string; logo?: string \| undefined; content?: string \| undefined; end?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the sidebar components. |
 | `collapsed` | `boolean` | No | `false` | Use collapsed to show only the logo |
 | `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 | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
@@ -334,6 +789,7 @@ function Example() {
 | `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 | `-` | - |
 | `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ root?: CSSProperties; logo?: CSSProperties \| undefined; content?: CSSProperties \| undefined; end?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the sidebar components. |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |

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

@@ -27,7 +27,7 @@ function ExampleDefault() {
 
 ### Compact
 
-```jsx live
+```jsx lived
 function ExampleCompactNoStart() {
   const tabs = [
     { id: 'all', label: 'All' },
@@ -57,6 +57,39 @@ function ExampleWithPaddles() {
 }
 ```
 
+### With autoScrollOffset
+
+:::tip Auto-scroll offset
+The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the paddle on the left side. Try clicking tabs near the edges to see the difference.
+:::
+
+```jsx live
+function ExampleAutoScrollOffset() {
+  const tabs = Array.from({ length: 25 }).map((_, i) => ({
+    id: `tab_${i + 1}`,
+    label: `Tab ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <VStack gap={2}>
+      <Text as="p" font="body">
+        Default offset (50px)
+      </Text>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <Text as="p" font="body">
+        Custom offset (100px)
+      </Text>
+      <TabbedChips
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        tabs={tabs}
+        autoScrollOffset={100}
+      />
+    </VStack>
+  );
+}
+```
+
 ### With custom sized paddles
 
 :::tip Paddle styling
@@ -187,6 +220,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `autoScrollOffset` | `number` | No | `50` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the paddle on the left side, default: 50px) |
 | `background` | `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 | `-` | - |
 | `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |

package/mcp-docs/web/routes.txt

@@ -47,7 +47,7 @@
 - [Stepper](web/components/Stepper.txt): A component that visualizes states within a multi-step process.
 - [SidebarMoreMenu](web/components/SidebarMoreMenu.txt): SidebarMoreMenu provides a dropdown menu for additional navigation options in the Sidebar.
 - [SidebarItem](web/components/SidebarItem.txt): SidebarItem represents a single navigation item within the Sidebar component.
-- [Sidebar](web/components/Sidebar.txt): A vertical navigation menu for accessing different sections.
+- [Sidebar](web/components/Sidebar.txt): A composable and customizable vertical navigation component with support for multiple variants, collapsible states, and custom content areas.
 - [SegmentedTabs](web/components/SegmentedTabs.txt): Switches between different views of content.
 - [SectionHeader](web/components/SectionHeader.txt): A header component used to organize and label sections of content, with support for icons, descriptions, and additional content.
 - [Pagination](web/components/Pagination.txt): Pagination is used to navigate through a list of items.

package/package.json

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