@coinbase/cds-mcp-server 8.56.1 → 8.57.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.57.0 ((3/24/2026, 12:46 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.56.1 ((3/24/2026, 08:39 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -260,6 +260,47 @@ function Example() {
 }
 ```
 
+#### Borderless
+
+For borderless DateInput usage, prefer adding a focus border with `focusedBorderWidth`.
+If you need a fully borderless input (including focus), use that pattern with a TypeAhead
+composition.
+
+```jsx
+function Example() {
+  const [defaultBorderlessDate, setDefaultBorderlessDate] = useState(null);
+  const [defaultBorderlessError, setDefaultBorderlessError] = useState(null);
+  const [focusBorderDate, setFocusBorderDate] = useState(null);
+  const [focusBorderError, setFocusBorderError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        bordered={false}
+        date={defaultBorderlessDate}
+        error={defaultBorderlessError}
+        helperText="Default borderless behavior with no focus border."
+        invalidDateError="Please enter a valid date"
+        label="Borderless date input"
+        onChangeDate={setDefaultBorderlessDate}
+        onErrorDate={setDefaultBorderlessError}
+      />
+      <DateInput
+        bordered={false}
+        date={focusBorderDate}
+        error={focusBorderError}
+        focusedBorderWidth={200}
+        helperText="Set focusedBorderWidth to opt into a focus border."
+        invalidDateError="Please enter a valid date"
+        label="Borderless date input with focus border"
+        onChangeDate={setFocusBorderDate}
+        onErrorDate={setFocusBorderError}
+      />
+    </VStack>
+  );
+}
+```
+
 #### Helper text
 
 ```jsx
@@ -456,7 +497,7 @@ The DateInput fires events in a specific order:
 | `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
 | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Determines if the input should have a border |
+| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
 | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
 | `clearButtonMode` | `never \| while-editing \| unless-editing \| always` | No | `-` | enum(never, while-editing, unless-editing, always) When the clear button should appear on the right side of the text view |
 | `clearTextOnFocus` | `boolean` | No | `-` | If true, clears the text field automatically when editing begins |
@@ -473,6 +514,7 @@ The DateInput fires events in a specific order:
 | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
 | `end` | `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 |
 | `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
 | `height` | `string \| number` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

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

@@ -709,7 +709,7 @@ function Example() {
 | `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
 | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Determines if the input should have a border |
+| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
 | `calendarIconButtonAccessibilityLabel` | `string` | No | `-` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
 | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
 | `clearButtonMode` | `never \| while-editing \| unless-editing \| always` | No | `-` | enum(never, while-editing, unless-editing, always) When the clear button should appear on the right side of the text view |
@@ -731,6 +731,7 @@ function Example() {
 | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
 | `end` | `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 |
 | `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
 | `height` | `string \| number` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

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

@@ -57,10 +57,15 @@ function SearchInputWithBack() {
 
 ### Variants
 
+When `bordered={false}`, SearchInput keeps focused border styling disabled by default. Set
+`focusedBorderWidth` to opt into a focus border style.
+
 ```tsx
 function SearchInputVariants() {
   const [value1, setValue1] = useState('');
   const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+  const [value4, setValue4] = useState('');
 
   return (
     <VStack gap={2}>
@@ -75,6 +80,21 @@ function SearchInputVariants() {
         value={value2}
         onChangeText={setValue2}
         onClear={() => setValue2('')}
+        placeholder="Borderless search (default focus behavior)..."
+        bordered={false}
+      />
+      <SearchInput
+        value={value3}
+        onChangeText={setValue3}
+        onClear={() => setValue3('')}
+        placeholder="Borderless search (with focus border)..."
+        bordered={false}
+        focusedBorderWidth={200}
+      />
+      <SearchInput
+        value={value4}
+        onChangeText={setValue4}
+        onClear={() => setValue4('')}
         placeholder="No icons..."
         hideStartIcon
         hideEndIcon
@@ -94,6 +114,7 @@ function SearchInputVariants() {
 | `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
 | `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
 | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
+| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
 | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
 | `clearButtonMode` | `never \| while-editing \| unless-editing \| always` | No | `-` | enum(never, while-editing, unless-editing, always) When the clear button should appear on the right side of the text view |
 | `clearIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the clear icon |
@@ -111,6 +132,7 @@ function SearchInputVariants() {
 | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node |
 | `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
 | `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
 | `hideStartIcon` | `boolean` | No | `false` | hide the start icon |

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

@@ -105,19 +105,26 @@ It's also advised you always format `helperText` with `Error: ${errorMessage}`.
 
 #### Borderless
 
-:::warning
-You should not use a borderless TextInput alone. It should be used with a TypeAhead component.
-:::
+For borderless TextInput usage, prefer adding a focus border with `focusedBorderWidth`.
+If you need a fully borderless input (including focus), use that pattern with a TypeAhead
+composition.
 
 ```jsx
-<HStack padding={2}>
+<VStack gap={2} padding={2}>
   <TextInput
     label="Borderless TextInput"
     placeholder="placeholder"
-    helperText="helperText"
+    helperText="When bordered is false, focus border styling is disabled by default."
     bordered={false}
   />
-</HStack>
+  <TextInput
+    label="Borderless TextInput (with focus border)"
+    placeholder="placeholder"
+    helperText="Set focusedBorderWidth to opt into a focus border style."
+    bordered={false}
+    focusedBorderWidth={200}
+  />
+</VStack>
 ```
 
 #### Helper Text
@@ -674,7 +681,7 @@ function TextInputKeyboardExample() {
 | `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
 | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Determines if the input should have a border |
+| `bordered` | `boolean` | No | `true` | Determines if the input should have a border. When set to false, focus border styling is disabled by default. |
 | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
 | `clearButtonMode` | `never \| while-editing \| unless-editing \| always` | No | `-` | enum(never, while-editing, unless-editing, always) When the clear button should appear on the right side of the text view |
 | `clearTextOnFocus` | `boolean` | No | `-` | If true, clears the text field automatically when editing begins |
@@ -690,6 +697,7 @@ function TextInputKeyboardExample() {
 | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
 | `end` | `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 |
 | `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
 | `height` | `string \| number` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

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

@@ -262,6 +262,47 @@ function Example() {
 }
 ```
 
+#### Borderless
+
+For borderless DateInput usage, prefer adding a focus border with `focusedBorderWidth`.
+If you need a fully borderless input (including focus), use that pattern with a TypeAhead
+composition.
+
+```jsx live
+function Example() {
+  const [defaultBorderlessDate, setDefaultBorderlessDate] = useState(null);
+  const [defaultBorderlessError, setDefaultBorderlessError] = useState(null);
+  const [focusBorderDate, setFocusBorderDate] = useState(null);
+  const [focusBorderError, setFocusBorderError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        bordered={false}
+        date={defaultBorderlessDate}
+        error={defaultBorderlessError}
+        helperText="Default borderless behavior with no focus border."
+        invalidDateError="Please enter a valid date"
+        label="Borderless date input"
+        onChangeDate={setDefaultBorderlessDate}
+        onErrorDate={setDefaultBorderlessError}
+      />
+      <DateInput
+        bordered={false}
+        date={focusBorderDate}
+        error={focusBorderError}
+        focusedBorderWidth={200}
+        helperText="Set focusedBorderWidth to opt into a focus border."
+        invalidDateError="Please enter a valid date"
+        label="Borderless date input with focus border"
+        onChangeDate={setFocusBorderDate}
+        onErrorDate={setFocusBorderError}
+      />
+    </VStack>
+  );
+}
+```
+
 #### Helper text
 
 ```jsx live
@@ -430,7 +471,7 @@ The DateInput fires events in a specific order:
 | `onErrorDate` | `(error: DateInputValidationError \| null) => void` | Yes | `-` | Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after onChangeDate. |
 | `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `bordered` | `boolean` | No | `true` | Adds border to input. When set to false, focus border styling is disabled by default. |
 | `className` | `string` | No | `-` | - |
 | `compact` | `boolean` | No | `false` | Enables compact variation |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
@@ -438,6 +479,7 @@ The DateInput fires events in a specific order:
 | `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `end` | `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 |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | Additional border width when focused. Set this when bordered={false} to opt into a focus border style. |
 | `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

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

@@ -661,7 +661,7 @@ function Example() {
 | `onErrorDate` | `((error: DateInputValidationError \| null) => void) & ((error: DateInputValidationError \| null) => void)` | Yes | `-` | Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after onChangeDate. |
 | `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `bordered` | `boolean` | No | `true` | Adds border to input. When set to false, focus border styling is disabled by default. |
 | `calendarClassName` | `string` | No | `-` | Custom class name to apply to the Calendar container. |
 | `calendarIconButtonAccessibilityLabel` | `string` | No | `-` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
 | `calendarStyle` | `CSSProperties` | No | `-` | Custom style to apply to the Calendar container. |
@@ -676,6 +676,7 @@ function Example() {
 | `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `end` | `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 |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | Additional border width when focused. Set this when bordered={false} to opt into a focus border style. |
 | `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

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

@@ -34,11 +34,15 @@ function BasicSearchInput() {
 
 ### Variants
 
+When `bordered={false}`, SearchInput keeps focused border styling disabled by default. Set
+`focusedBorderWidth` to opt into a focus border style.
+
 ```tsx live
 function SearchInputVariants() {
   const [value1, setValue1] = useState('');
   const [value2, setValue2] = useState('');
   const [value3, setValue3] = useState('');
+  const [value4, setValue4] = useState('');
 
   return (
     <VStack gap={2}>
@@ -53,13 +57,21 @@ function SearchInputVariants() {
         value={value2}
         onChangeText={setValue2}
         onClear={() => setValue2('')}
-        placeholder="Borderless search..."
+        placeholder="Borderless search (default focus behavior)..."
         bordered={false}
       />
       <SearchInput
         value={value3}
         onChangeText={setValue3}
         onClear={() => setValue3('')}
+        placeholder="Borderless search (with focus border)..."
+        bordered={false}
+        focusedBorderWidth={200}
+      />
+      <SearchInput
+        value={value4}
+        onChangeText={setValue4}
+        onClear={() => setValue4('')}
         placeholder="No icons..."
         hideStartIcon
         hideEndIcon
@@ -91,12 +103,13 @@ function CustomEndSearchInput() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `onChangeText` | `(text: string) => void` | Yes | `-` | - |
-| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `bordered` | `boolean` | No | `true` | Adds border to input. When set to false, focus border styling is disabled by default. |
 | `clearIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the clear icon |
 | `compact` | `boolean` | No | `false` | Enables compact variation |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | Additional border width when focused. Set this when bordered={false} to opt into a focus border style. |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
 | `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
 | `hideStartIcon` | `boolean` | No | `false` | hide the start icon |

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

@@ -105,19 +105,26 @@ It's also advised you always format `helperText` with `Error: ${errorMessage}`.
 
 #### Borderless
 
-:::warning
-You should not use a borderless TextInput alone. It should be used with a TypeAhead component.
-:::
+For borderless TextInput usage, prefer adding a focus border with `focusedBorderWidth`.
+If you need a fully borderless input (including focus), use that pattern with a TypeAhead
+composition.
 
 ```jsx live
-<HStack padding={2}>
+<VStack gap={2} padding={2}>
   <TextInput
     label="Borderless TextInput"
     placeholder="placeholder"
-    helperText="helperText"
+    helperText="When bordered is false, focus border styling is disabled by default."
     bordered={false}
   />
-</HStack>
+  <TextInput
+    label="Borderless TextInput (with focus border)"
+    placeholder="placeholder"
+    helperText="Set focusedBorderWidth to opt into a focus border style."
+    bordered={false}
+    focusedBorderWidth={200}
+  />
+</VStack>
 ```
 
 #### Helper Text
@@ -641,11 +648,12 @@ function testExample() {
 | --- | --- | --- | --- | --- |
 | `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
-| `bordered` | `boolean` | No | `true` | Adds border to input |
+| `bordered` | `boolean` | No | `true` | Adds border to input. When set to false, focus border styling is disabled by default. |
 | `compact` | `boolean` | No | `false` | Enables compact variation |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `end` | `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 |
+| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | Additional border width when focused. Set this when bordered={false} to opt into a focus border style. |
 | `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |

package/package.json

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