@coinbase/cds-mcp-server 8.52.0 → 8.52.2

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

@@ -172,10 +172,10 @@ function MultipleCheckboxes() {
 | `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 | `-` | Background color of the overlay (element being interacted with). |
 | `borderColor` | `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 | `-` | Border color of the element. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
-| `borderWidth` | `((BorderWidth \| { base?: BorderWidth; phone?: BorderWidth \| undefined; tablet?: BorderWidth \| undefined; desktop?: BorderWidth \| undefined; }) & BorderWidth) \| undefined` | No | `100` | Optional.Sets the border width of the control. |
+| `borderWidth` | `((BorderWidth \| { base?: BorderWidth; phone?: BorderWidth \| undefined; tablet?: BorderWidth \| undefined; desktop?: BorderWidth \| undefined; }) & BorderWidth) \| undefined` | No | `100` | Sets the border width of the checkbox. |
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
 | `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 | `-` | - |
-| `controlColor` | `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 | `fgInverse` | Sets the checked/active color of the control. |
+| `controlColor` | `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 | `fgInverse` | Sets the checked/active color of the checkbox. |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
 | `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
 | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |

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

@@ -1,6 +1,6 @@
 # Chip
 
-A compact, interactive content element.
+A compact content element for tags, filters, and selections.
 
 ## Import
 
@@ -10,60 +10,46 @@ import { Chip } from '@coinbase/cds-web/chips/Chip'
 
 ## Examples
 
-### Basic usage
+### Basics
+
+Render a Chip with text. Without `onClick`, it displays as a static pill. With `onClick`, it becomes a button. Use `disabled` to prevent interaction on an otherwise interactive chip.
 
 ```tsx live
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
       <Chip>Basic Chip</Chip>
-      <Chip disabled>Disabled Chip</Chip>
       <Chip onClick={() => alert('Clicked!')}>Interactive Chip</Chip>
+      <Chip disabled onClick={() => alert('Clicked!')}>
+        Disabled Chip
+      </Chip>
     </HStack>
   );
 }
 ```
 
-### Variants
-
-```tsx live
-function Example() {
-  return (
-    <VStack gap={2}>
-      <HStack gap={2}>
-        <Chip compact>Compact</Chip>
-        <Chip inverted>Inverted</Chip>
-        <Chip maxWidth={100} numberOfLines={1}>
-          Long text that should truncate nicely
-        </Chip>
-      </HStack>
-    </VStack>
-  );
-}
-```
-
-### With Icons and Images
+### Icons and Images
 
 ```tsx live
 function Example() {
   return (
     <VStack gap={2}>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <Chip start={<Icon name="star" />}>With Start Icon</Chip>
-        <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
-        <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
+        <Chip end={<Icon name="caretDown" />}>With End Icon</Chip>
+        <Chip start={<Icon name="star" />} end={<Icon name="caretDown" />}>
           Both Icons
         </Chip>
       </HStack>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <Chip
-          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
+          start={<RemoteImage source={assets.btc.imageUrl} width={24} height={24} shape="circle" />}
           onClick={() => alert('BTC selected')}
         >
           BTC
         </Chip>
         <Chip
-          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
+          start={<RemoteImage source={assets.eth.imageUrl} width={24} height={24} shape="circle" />}
           onClick={() => alert('ETH selected')}
         >
           ETH
@@ -74,6 +60,65 @@ function Example() {
 }
 ```
 
+### Styling
+
+#### Color
+
+Use `invertColorScheme` to invert foreground and background for emphasis.
+
+```tsx live
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip>Default</Chip>
+      <Chip invertColorScheme>Inverted</Chip>
+    </HStack>
+  );
+}
+```
+
+#### Compact
+
+Use `compact` for smaller chips with reduced padding.
+
+```tsx live
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip>Default</Chip>
+      <Chip compact>Compact</Chip>
+    </HStack>
+  );
+}
+```
+
+### Accessibility
+
+When using `onClick`, provide an `accessibilityLabel` for screen readers, especially when the label text alone is ambiguous or when the chip has non-text content.
+
+```tsx live
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip
+        accessibilityLabel="Select Bitcoin"
+        onClick={() => alert('BTC')}
+        start={<RemoteImage source={assets.btc.imageUrl} width={24} height={24} shape="circle" />}
+      >
+        BTC
+      </Chip>
+      <Chip
+        accessibilityLabel="Filter by category"
+        end={<Icon name="caretDown" />}
+        onClick={() => alert('Filter')}
+      >
+        Category
+      </Chip>
+    </HStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -140,11 +140,12 @@ function Example() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
+| `disableArrowKeyNavigation` | `boolean` | No | `false` | If true, the focus trap will not allow arrow key navigation. |
 | `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. |
+| `includeTriggerInFocusTrap` | `boolean` | No | `false` | 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/FullscreenModal.txt

@@ -147,9 +147,9 @@ For more complex layouts, including three-column structures with custom headers
 | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
 | `contentContainerClassName` | `string` | No | `-` | Class applied to the content container element |
 | `contentStyle` | `CSSProperties` | No | `-` | Apply styles to content. |
-| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
+| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
 | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
-| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `hideDivider` | `boolean` | No | `false` | Hide header bottom divider |
 | `logo` | `ReactElement` | No | `-` | The logo to display |
 | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |

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

@@ -371,9 +371,9 @@ function ThreeColumnExample() {
 | `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
 | `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
 | `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
-| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa Disables the focus trap to allow normal keyboard navigation. |
+| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
 | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
-| `focusTabIndexElements` | `boolean` | No | `false false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `key` | `Key \| null` | No | `-` | - |
 | `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |

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

@@ -29,6 +29,45 @@ The only prop required is `series`, which takes an array of series objects. Each
 />
 ```
 
+### Layout
+
+Lines can be rendered horizontally or vertically by setting the `layout` prop.
+
+```jsx live
+function HorizontalLine() {
+  const dataset = [
+    { month: 'Jan', seoul: 21 },
+    { month: 'Feb', seoul: 28 },
+    { month: 'Mar', seoul: 41 },
+    { month: 'Apr', seoul: 73 },
+    { month: 'May', seoul: 99 },
+    { month: 'June', seoul: 144 },
+    { month: 'July', seoul: 319 },
+    { month: 'Aug', seoul: 249 },
+    { month: 'Sept', seoul: 131 },
+    { month: 'Oct', seoul: 55 },
+    { month: 'Nov', seoul: 48 },
+    { month: 'Dec', seoul: 25 },
+  ];
+
+  return (
+    <LineChart
+      height={400}
+      layout="horizontal"
+      series={[
+        { id: 'seoul', data: dataset.map((d) => d.seoul), color: 'var(--color-accentBoldBlue)' },
+      ]}
+      showXAxis
+      showYAxis
+      xAxis={{ label: 'rainfall (mm)' }}
+      yAxis={{
+        data: dataset.map((d) => d.month),
+      }}
+    />
+  );
+}
+```
+
 LineChart also supports multiple lines, interaction, and axes.
 Other props, such as `areaType` can be applied to the chart as a whole or per series.
 
@@ -1973,6 +2012,7 @@ function ForecastAssetPrice() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -2027,8 +2067,8 @@ function ForecastAssetPrice() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

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

@@ -162,6 +162,70 @@ function ChainedModalsExample() {
 }
 ```
 
+### Scrollable Modal Content
+
+If the Modal has content which is expected to overflow and doesn't have focusable elements, set the following props to ensure the scrollable content can be navigated using keyboard arrows:
+
+- `focusTabIndexElements`: `true`
+- `disableArrowKeyNavigation`: `true`
+
+As well, assign a `tabIndex` greater than or equal to `0` to the ModalBody so that the overflow can be reached via keyboard.
+
+```jsx live
+function Example() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>Open Modal</Button>
+      <Modal
+        focusTabIndexElements
+        disableArrowKeyNavigation
+        onRequestClose={() => setVisible(false)}
+        visible={visible}
+      >
+        <ModalHeader
+          backAccessibilityLabel="Back"
+          closeAccessibilityLabel="Close"
+          onBackButtonClick={() => setVisible(false)}
+          testID="Basic Modal Test ID"
+          title="Basic Modal"
+        />
+        <ModalBody tabIndex={0} testID="modal-body">
+          <VStack>
+            <Text font="title1" paddingBottom={10}>
+              This tray has content which will overflow.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              To enable keyboard scrolling, certain props have to be set.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Otherwise, the content won't be viewable to users who navigate using a keyboard.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              It's important to account for this to ensure an accessible experience.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Here's some text that is in the overflow and needs to be scrolled to.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Here's some more text to help more easily showcase scrolling.
+            </Text>
+          </VStack>
+        </ModalBody>
+        <ModalFooter
+          primaryAction={<Button onClick={() => setVisible(false)}>Save</Button>}
+          secondaryAction={
+            <Button onClick={() => setVisible(false)} variant="secondary">
+              Cancel
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -199,7 +263,8 @@ function ChainedModalsExample() {
 | `dangerouslyDisableResponsiveness` | `boolean` | No | `false` | Disable responsiveness so it maintains the same UI across different viewports. |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `dangerouslySetPosition` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | Set the position for the modal dialogue |
-| `disableFocusTrap` | `boolean` | No | `false` | Set disableFocusTrap to disable keyboard listeners responsible for focus trap behavior This can be useful for scenarios like Yubikey 2fa |
+| `disableArrowKeyNavigation` | `boolean` | No | `false` | If true, the focus trap will not allow arrow key navigation. |
+| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
 | `disableOverlayPress` | `boolean` | No | `false` | Disable overlay click that closes the Modal |
 | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
 | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
@@ -209,7 +274,7 @@ function ChainedModalsExample() {
 | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
-| `focusTabIndexElements` | `boolean` | No | `false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
 | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
 | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |

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

@@ -575,6 +575,7 @@ function ScatterplotWithCustomLabels() {
 | `x` | `string \| number` | No | `-` | - |
 | `x1` | `string \| number` | No | `-` | - |
 | `x2` | `string \| number` | No | `-` | - |
+| `xAxisId` | `string` | No | `first x-axis defined in chart props.` | Optional X-axis id to specify which axis to plot along. |
 | `xChannelSelector` | `string` | No | `-` | - |
 | `xHeight` | `string \| number` | No | `-` | - |
 | `xlinkActuate` | `string` | No | `-` | - |

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

@@ -203,10 +203,10 @@ function CustomStyledRadio() {
 | `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 | `-` | Background color of the overlay (element being interacted with). |
 | `borderColor` | `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 | `-` | Border color of the element. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
-| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `((BorderWidth \| { base?: BorderWidth; phone?: BorderWidth \| undefined; tablet?: BorderWidth \| undefined; desktop?: BorderWidth \| undefined; }) & BorderWidth) \| undefined` | No | `100` | Sets the border width of the radio. |
 | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
 | `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 | `black` | - |
-| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
+| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the radio. |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
 | `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
 | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |

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

@@ -645,7 +645,7 @@ function DraggablePriceTarget() {
 | `beaconStroke` | `string` | No | `'var(--color-bg)'` | Stroke color of the scrubber beacon circle. |
 | `beaconTransitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
 | `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; label?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Scrubber component |
-| `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |
+| `hideBeaconLabels` | `boolean` | No | `true in horizontal layout, false in vertical layout.` | Hides the beacon labels while keeping the line label visible (if provided). |
 | `hideLine` | `boolean` | No | `-` | Hides the scrubber line. |
 | `hideOverlay` | `boolean` | No | `-` | Hides the overlay rect which obscures data beyond the scrubber position. |
 | `idlePulse` | `boolean` | No | `-` | Pulse the beacons while at rest. |

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

@@ -87,6 +87,7 @@ All series will be scrubbed by default. You can set `seriesIds` to show only spe
 
 Setting `label` on a series will display a label to the side of the scrubber beacon, and
 setting `label` on Scrubber displays a label above the scrubber line.
+In `layout="horizontal"`, beacon labels are intentionally hidden to avoid overlap with scrubber beacons.
 
 ```jsx live
 <LineChart
@@ -922,7 +923,7 @@ function MatchupBeaconLabels() {
 | `beaconStroke` | `string` | No | `'var(--color-bg)'` | Stroke color of the scrubber beacon circle. |
 | `beaconTransitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; pulse?: Transition$1 \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
 | `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; label?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Scrubber component |
-| `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |
+| `hideBeaconLabels` | `boolean` | No | `true in horizontal layout, false in vertical layout.` | Hides the beacon labels while keeping the line label visible (if provided). |
 | `hideLine` | `boolean` | No | `-` | Hides the scrubber line. |
 | `hideOverlay` | `boolean` | No | `-` | Hides the overlay rect which obscures data beyond the scrubber position. |
 | `idlePulse` | `boolean` | No | `-` | Pulse the beacons while at rest. |

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

@@ -498,6 +498,72 @@ function ReducedMotionTray() {
 }
 ```
 
+#### Scrollable content and keyboard navigation
+
+If the Tray has content which is expected to overflow and doesn't have focusable elements, set the following props to ensure the scrollable content can be navigated using keyboard arrows:
+
+- `focusTabIndexElements`: `true`
+- `disableArrowKeyNavigation`: `true`
+
+As well, assign a `tabIndex` greater than or equal to `0` to the Tray's content so that the overflow can be reached via keyboard.
+
+```jsx live
+function ScrollableTray() {
+  const [visible, setVisible] = useState(false);
+  const { isPhone } = useBreakpoints();
+  const handleOpen = () => setVisible(true);
+  const handleClose = () => setVisible(false);
+
+  return (
+    <VStack gap={2}>
+      <Button onClick={handleOpen}>Open Tray</Button>
+      {visible && (
+        <Tray
+          focusTabIndexElements
+          disableArrowKeyNavigation
+          pin={isPhone ? 'bottom' : 'right'}
+          showHandleBar={isPhone}
+          onCloseComplete={handleClose}
+          title="Scrollable Tray"
+          footer={({ handleClose }) => (
+            <PageFooter
+              borderedTop
+              justifyContent={isPhone ? 'center' : 'flex-end'}
+              action={
+                <Button block={isPhone} onClick={handleClose}>
+                  Close
+                </Button>
+              }
+            />
+          )}
+        >
+          <VStack tabIndex={0}>
+            <Text font="title1" paddingBottom={10}>
+              This tray has content which will overflow.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              To enable keyboard scrolling, certain props have to be set.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Otherwise, the content won't be viewable to users who navigate using a keyboard.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              It's important to account for this to ensure an accessible experience.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Here's some text that is in the overflow and needs to be scrolled to.
+            </Text>
+            <Text font="title1" paddingBottom={10}>
+              Here's some more text to help more easily showcase scrolling.
+            </Text>
+          </VStack>
+        </Tray>
+      )}
+    </VStack>
+  );
+}
+```
+
 ### Styling
 
 The Tray component exposes `styles` and `classNames` props for customizing various parts of the component. Available keys include: `root`, `overlay`, `container`, `header`, `title`, `content`, `footer`, `handleBar`, `handleBarHandle`, and `closeButton`.
@@ -1186,7 +1252,8 @@ function ResponsiveTrayExample() {
 | `classNames` | `{ readonly root?: string; readonly overlay?: string \| undefined; readonly container?: string \| undefined; readonly header?: string \| undefined; readonly title?: string \| undefined; readonly content?: string \| undefined; readonly handleBar?: string \| undefined; readonly handleBarHandle?: string \| undefined; readonly closeButton?: string \| undefined; } \| undefined` | No | `-` | - |
 | `closeAccessibilityHint` | `string` | No | `-` | Sets an accessible hint or description for the close button. On web, maps to aria-describedby and lists the id(s) of the element(s) that describe the element on which the attribute is set. On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. |
 | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
-| `focusTabIndexElements` | `boolean` | No | `-` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
+| `disableArrowKeyNavigation` | `boolean` | No | `false` | If true, the focus trap will not allow arrow key navigation. |
+| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `footer` | `ReactNode \| TrayRenderChildren` | No | `-` | ReactNode to render as the Drawer footer. Can be a ReactNode or a function that receives { handleClose }. |
 | `header` | `ReactNode \| TrayRenderChildren` | No | `-` | ReactNode to render as the Drawer header. Can be a ReactNode or a function that receives { handleClose }. |
 | `hideCloseButton` | `boolean` | No | ``true` when handlebar is shown, false otherwise.` | Hide the close icon on the top right. |
@@ -1199,7 +1266,7 @@ function ResponsiveTrayExample() {
 | `preventDismiss` | `boolean` | No | `-` | Prevents a user from dismissing the tray by pressing the overlay or swiping |
 | `reduceMotion` | `boolean` | No | `-` | When true, the tray will use opacity animation instead of transform animation. This is useful for supporting reduced motion for accessibility. |
 | `ref` | `((instance: TrayRefProps \| null) => void) \| RefObject<TrayRefProps> \| null` | No | `-` | - |
-| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts.  WARNING: If you disable this, you need to ensure that focus is restored properly so it doesnt end up on the body |
+| `restoreFocusOnUnmount` | `boolean` | No | `true` | If true, the focus trap will restore focus to the previously focused element when it unmounts. |
 | `role` | `dialog \| alertdialog` | No | `-` | WAI-ARIA Roles |
 | `showHandleBar` | `boolean` | No | `-` | Show a handle bar indicator at the top of the tray. The handle bar is positioned inside the tray content area. |
 | `styles` | `{ readonly root?: CSSProperties; readonly overlay?: CSSProperties \| undefined; readonly container?: CSSProperties \| undefined; readonly header?: CSSProperties \| undefined; readonly title?: CSSProperties \| undefined; readonly content?: CSSProperties \| undefined; readonly handleBar?: CSSProperties \| undefined; readonly handleBarHandle?: CSSProperties \| undefined; readonly closeButton?: CSSProperties \| undefined; } \| undefined` | No | `-` | - |

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

@@ -34,6 +34,58 @@ The XAxis component provides a horizontal axis for charts with automatic tick ge
 </CartesianChart>
 ```
 
+### Multiple X Axes (Horizontal Layout)
+
+When `layout="horizontal"`, you can configure multiple x-axes and bind each series to an axis with `xAxisId`.
+Use `XAxis`'s `axisId` prop to render each axis configuration.
+
+```jsx live
+<CartesianChart
+  enableScrubbing
+  height={300}
+  layout="horizontal"
+  series={[
+    {
+      id: 'temperature',
+      label: 'Temperature',
+      data: [72, 68, 74, 70],
+      color: 'var(--color-accentBoldBlue)',
+      xAxisId: 'temperature-axis',
+    },
+    {
+      id: 'volume',
+      label: 'Volume',
+      data: [1200, 900, 1500, 1100],
+      color: 'var(--color-accentBoldOrange)',
+      xAxisId: 'volume-axis',
+    },
+  ]}
+  xAxis={[
+    {
+      id: 'temperature-axis',
+      domain: { min: 60, max: 80 },
+      domainLimit: 'strict',
+    },
+    {
+      id: 'volume-axis',
+      domain: { min: 0, max: 2000 },
+      domainLimit: 'strict',
+    },
+  ]}
+  yAxis={{
+    scaleType: 'band',
+    data: ['Mon', 'Tue', 'Wed', 'Thu'],
+  }}
+>
+  <YAxis showLine showTickMarks />
+  <XAxis axisId="temperature-axis" label="Temp (F)" position="bottom" showLine />
+  <XAxis axisId="volume-axis" label="Volume" position="top" showLine />
+  <Line seriesId="temperature" />
+  <Line seriesId="volume" />
+  <Scrubber />
+</CartesianChart>
+```
+
 ### Axis Config
 
 Properties related to the scale of an axis are set on the Chart component. This includes `scaleType`, `domain`, `domainLimit`, `range`, `data`, and `categoryPadding`.
@@ -769,6 +821,7 @@ function CustomTickLabelExample() {
 | `LineComponent` | `LineComponent` | No | `SolidLine` | Component to render the axis line. |
 | `TickLabelComponent` | `AxisTickLabelComponent` | No | `DefaultAxisTickLabel` | Component to render tick labels. Allows for custom styling and formatting that works cross-platform. |
 | `TickMarkLineComponent` | `LineComponent` | No | `SolidLine` | Component to render the tick marks. |
+| `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
 | `bandGridLinePlacement` | `end \| start \| middle \| edges` | No | `'edges'` | Placement of grid lines relative to each band. Options: start, middle, end, edges |
 | `bandTickMarkPlacement` | `end \| start \| middle \| edges` | No | `'middle'` | Placement of tick marks relative to each band. Options: start, middle, end, edges |
 | `className` | `string` | No | `-` | Custom className for the axis. |
@@ -778,7 +831,7 @@ function CustomTickLabelExample() {
 | `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |
 | `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
 | `position` | `top \| bottom` | No | `'bottom'` | The position of the axis relative to the charts drawing area. |
-| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
+| `requestedTickCount` | `number` | No | `5 for value axes by layout: - X axis when chart layout is horizontal - Y axis when chart layout is vertical` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
 | `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
 | `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
@@ -786,7 +839,7 @@ function CustomTickLabelExample() {
 | `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
 | `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 |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
-| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component.  For band scales with string data, the value will be the string label (e.g., Jan, Feb). For numeric scales, the value will be the number. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
 | `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
 | `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |