@coinbase/cds-mcp-server 8.37.0 → 8.38.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.38.0 ((1/14/2026, 01:30 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.37.1 ((1/14/2026, 12:37 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.37.0 ((1/12/2026, 02:16 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -133,6 +133,57 @@ function HelperTextExample() {
 }
 ```
 
+### Borderless
+
+You can remove the border from the combobox control by setting `bordered` to `false`.
+
+```jsx
+function BorderlessExample() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+  ];
+
+  const [singleValue, setSingleValue] = useState('apple');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['apple'],
+  });
+
+  return (
+    <VStack gap={4}>
+      <Combobox
+        bordered={false}
+        label="Borderless single select"
+        onChange={setSingleValue}
+        options={singleSelectOptions}
+        placeholder="Search fruits..."
+        value={singleValue}
+      />
+      <Combobox
+        bordered={false}
+        label="Borderless multi select"
+        onChange={multiOnChange}
+        options={fruitOptions}
+        placeholder="Search fruits..."
+        type="multi"
+        value={multiValue}
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -150,6 +201,7 @@ function HelperTextExample() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `closeButtonLabel` | `string` | No | `-` | Label for close button when combobox is open (mobile only) |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |

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

@@ -1206,6 +1206,49 @@ function StressTestExample() {
 }
 ```
 
+### Borderless
+
+You can remove the border from the select control by setting `bordered` to `false`. Now Select will only show a border when focused.
+
+```jsx
+function BorderlessExample() {
+  const [singleValue, setSingleValue] = useState('1');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['1', '2'],
+  });
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+  ];
+
+  return (
+    <VStack gap={4}>
+      <Select
+        bordered={false}
+        label="Borderless single select"
+        value={singleValue}
+        onChange={setSingleValue}
+        options={options}
+        placeholder="Select an option"
+      />
+
+      <Select
+        bordered={false}
+        type="multi"
+        label="Borderless multi select"
+        value={multiValue}
+        onChange={multiOnChange}
+        options={options}
+        placeholder="Select options"
+      />
+    </VStack>
+  );
+}
+```
+
 ### Custom styles
 
 You can use custom styles on the various subcomponents in Select.
@@ -1390,6 +1433,7 @@ function CustomComponentExamples() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |

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

@@ -475,6 +475,7 @@ function ExampleDisabled() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |

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

@@ -121,6 +121,57 @@ const fruitOptions: SelectOption[] = [
 }
 ```
 
+### Borderless
+
+You can remove the border from the combobox control by setting `bordered` to `false`.
+
+```jsx live
+function BorderlessExample() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+  ];
+
+  const [singleValue, setSingleValue] = useState('apple');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['apple'],
+  });
+
+  return (
+    <VStack gap={4}>
+      <Combobox
+        bordered={false}
+        label="Borderless single select"
+        onChange={setSingleValue}
+        options={singleSelectOptions}
+        placeholder="Search fruits..."
+        value={singleValue}
+      />
+      <Combobox
+        bordered={false}
+        label="Borderless multi select"
+        onChange={multiOnChange}
+        options={fruitOptions}
+        placeholder="Search fruits..."
+        type="multi"
+        value={multiValue}
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -137,6 +188,7 @@ const fruitOptions: SelectOption[] = [
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `className` | `string` | No | `-` | CSS class name for the root element |
 | `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |

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

@@ -0,0 +1,150 @@
+# FocusTrap
+
+FocusTrap is a component that traps focus within its children.
+
+## Import
+
+```tsx
+import { FocusTrap } from '@coinbase/cds-web/overlays/FocusTrap'
+```
+
+## Examples
+
+:::note Before using FocusTrap
+`<FocusTrap>` is intended to prevent keyboard users from interacting with elements on the page that a mouse user cannot interact with either. An example of this is `<Modal>` where the user cannot click the items behind the modal. If you want to shift focus based on UI events, consider using the [.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method instead.
+:::
+
+:::warning Accessibility
+It is **required** that when using a `<FocusTrap>` there is logic using only key presses to escape the focus trap. Otherwise, keyboard users will be blocked after they enter a `<FocusTrap>`.
+:::
+
+### Basic example
+
+:::note
+All the examples have controls to enable / disable the focus trap so that page keyboard navigation isn't blocked.
+:::
+
+When enabled, only the children of the `<FocusTrap>` will be able to receive focus. Otherwise, standard DOM focus order follows.
+
+```jsx live
+function Example() {
+  const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
+
+  return (
+    <VStack gap={2}>
+      <Checkbox
+        checked={focusTrapEnabled}
+        onChange={() => setFocusTrapEnabled((prev) => !prev)}
+        label="Focus trap enabled"
+      />
+      {focusTrapEnabled && (
+        <FocusTrap>
+          <VStack gap={2} background="bgAlternate" padding={2}>
+            <Text>Inside FocusTrap</Text>
+            <HStack gap={1}>
+              <Button>1</Button>
+              <Button>2</Button>
+              <Button>3</Button>
+            </HStack>
+            <Checkbox
+              checked={focusTrapEnabled}
+              onChange={() => setFocusTrapEnabled((prev) => !prev)}
+              label="Focus trap enabled"
+            />
+          </VStack>
+        </FocusTrap>
+      )}
+    </VStack>
+  );
+}
+```
+
+### Include trigger in FocusTrap
+
+The `includeTriggerInFocusTrap` prop includes the triggering element causing the `<FocusTrap>` to render as part of the focus order.
+
+```jsx live
+function Example() {
+  const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
+
+  return (
+    <VStack gap={2}>
+      <Checkbox
+        checked={focusTrapEnabled}
+        onChange={() => setFocusTrapEnabled((prev) => !prev)}
+        label="Focus trap enabled"
+      />
+      {focusTrapEnabled && (
+        <FocusTrap includeTriggerInFocusTrap>
+          <VStack gap={2} background="bgAlternate" padding={2}>
+            <Text>Inside FocusTrap</Text>
+            <HStack gap={1}>
+              <Button>1</Button>
+              <Button>2</Button>
+              <Button>3</Button>
+            </HStack>
+            <Checkbox
+              checked={focusTrapEnabled}
+              onChange={() => setFocusTrapEnabled((prev) => !prev)}
+              label="Focus trap enabled"
+            />
+          </VStack>
+        </FocusTrap>
+      )}
+    </VStack>
+  );
+}
+```
+
+### Restore focus on unmount
+
+The `restoreFocusOnUnmount` prop returns focus to the triggering element when the `<FocusTrap>` is unmounted.
+
+```jsx live
+function Example() {
+  const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
+
+  return (
+    <VStack gap={2}>
+      <Checkbox
+        checked={focusTrapEnabled}
+        onChange={() => setFocusTrapEnabled((prev) => !prev)}
+        label="Focus trap enabled"
+      />
+      {focusTrapEnabled && (
+        <FocusTrap restoreFocusOnUnmount>
+          <VStack gap={2} background="bgAlternate" padding={2}>
+            <Text>Inside FocusTrap</Text>
+            <HStack gap={1}>
+              <Button>1</Button>
+              <Button>2</Button>
+              <Button>3</Button>
+            </HStack>
+            <Checkbox
+              checked={focusTrapEnabled}
+              onChange={() => setFocusTrapEnabled((prev) => !prev)}
+              label="Focus trap enabled"
+            />
+          </VStack>
+        </FocusTrap>
+      )}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
+| `disableAutoFocus` | `boolean` | No | `false` | If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. |
+| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
+| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
+| `includeTriggerInFocusTrap` | `boolean` | No | `-` | If true, the focus trap will include the trigger in the focus trap. |
+| `onEscPress` | `(() => void)` | No | `-` | - |
+| `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
+| `restoreFocusOnUnmount` | `boolean` | No | `false` | If true, the focus trap will restore focus to the previously focused element when it unmounts. |
+
+

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

@@ -1214,6 +1214,49 @@ function CustomLabelExample() {
 }
 ```
 
+### Borderless
+
+You can remove the border from the select control by setting `bordered` to `false`. Now Select will only show a border when focused.
+
+```jsx live
+function BorderlessExample() {
+  const [singleValue, setSingleValue] = useState('1');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['1', '2'],
+  });
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+  ];
+
+  return (
+    <VStack gap={4}>
+      <Select
+        bordered={false}
+        label="Borderless single select"
+        value={singleValue}
+        onChange={setSingleValue}
+        options={options}
+        placeholder="Select an option"
+      />
+
+      <Select
+        bordered={false}
+        type="multi"
+        label="Borderless multi select"
+        value={multiValue}
+        onChange={multiOnChange}
+        options={options}
+        placeholder="Select options"
+      />
+    </VStack>
+  );
+}
+```
+
 ### Custom components
 
 Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select.
@@ -1297,6 +1340,7 @@ function CustomComponentExamples() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `className` | `string` | No | `-` | CSS class name for the root element |
 | `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |

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

@@ -457,6 +457,7 @@ function ExampleDisabled() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `className` | `string` | No | `-` | CSS class name for the root element |
 | `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |

package/mcp-docs/web/routes.txt

@@ -28,6 +28,7 @@
 - [FullscreenModalLayout](web/components/FullscreenModalLayout.txt): Provides the layout structure, overlay, focus trapping, and animations for fullscreen modals. Intended for internal use within Modal component variants.
 - [FullscreenModal](web/components/FullscreenModal.txt): FullscreenModal is a component that displays content in a full-screen overlay, typically used for immersive experiences or complex interactions.
 - [FullscreenAlert](web/components/FullscreenAlert.txt): A fullscreen alert component for displaying important messages that require user attention.
+- [FocusTrap](web/components/FocusTrap.txt): FocusTrap is a component that traps focus within its children.
 - [Alert](web/components/Alert.txt): A dialog that communicates critical information and blocks user interaction.
 - [ThemeProvider](web/components/ThemeProvider.txt): Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
 - [MediaQueryProvider](web/components/MediaQueryProvider.txt): Manages window.matchMedia subscriptions with SSR support.

package/package.json

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