@coinbase/cds-mcp-server 8.36.2 → 8.36.3

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.36.3 ((1/9/2026, 01:51 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.36.2 ((1/7/2026, 10:19 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -381,6 +381,100 @@ function StepperCustomMetadataExample() {
 }
 ```
 
+##### Custom Step with Error State
+
+You can create custom icon, label, and progress components for individual steps to show special states like errors.
+In this example, the "Payment Method" step uses metadata to indicate an error condition. The custom components check this metadata and the completion state to dynamically render an error indicator, falling back to default components otherwise.
+
+```jsx
+const ErrorStepperIcon = memo(function ErrorStepperIcon(props) {
+  const { step, visited, complete } = props;
+  const showError = step.metadata?.isError && (visited || complete);
+
+  if (!showError) {
+    return <DefaultStepperIconVertical {...props} />;
+  }
+
+  return (
+    <DefaultStepperIconVertical
+      {...props}
+      activeColor="bgNegative"
+      completeName="circleCross"
+      completeColor="bgNegative"
+      visitedName="circleCross"
+      visitedColor="bgNegative"
+    />
+  );
+});
+
+const ErrorStepperLabel = memo(function ErrorStepperLabel(props) {
+  const { step, visited, complete } = props;
+  const showError = step.metadata?.isError && (visited || complete);
+
+  if (!showError) {
+    return <DefaultStepperLabelVertical {...props} />;
+  }
+
+  return (
+    <DefaultStepperLabelVertical
+      {...props}
+      activeColor="fgNegative"
+      completeColor="fgNegative"
+      visitedColor="fgNegative"
+    />
+  );
+});
+
+const ErrorStepperProgress = memo(function ErrorStepperProgress(props) {
+  const { step, visited, complete } = props;
+  const showError = step.metadata?.isError && (visited || complete);
+
+  if (!showError) {
+    return <DefaultStepperProgressVertical {...props} />;
+  }
+
+  return (
+    <DefaultStepperProgressVertical {...props} completeFill="bgNegative" visitedFill="bgNegative" />
+  );
+});
+
+function StepperErrorStepExample() {
+  const steps = [
+    { id: '1', label: 'Account Details' },
+    { id: '2', label: 'Personal Information' },
+    {
+      id: '3',
+      label: 'Payment Method',
+      metadata: { isError: true },
+    },
+    { id: '4', label: 'Review & Submit' },
+  ];
+
+  const [stepperState, stepperApi] = useStepper({ steps });
+  const [complete, setComplete] = useState(false);
+
+  const handleNext = () => {
+    if (stepperState.activeStepId === '4') {
+      setComplete(true);
+    } else {
+      stepperApi.goNextStep();
+    }
+  };
+
+  return (
+    <Stepper
+      direction="vertical"
+      activeStepId={stepperState.activeStepId}
+      steps={steps}
+      complete={complete}
+      StepperIconComponent={ErrorStepperIcon}
+      StepperLabelComponent={ErrorStepperLabel}
+      StepperProgressComponent={ErrorStepperProgress}
+    />
+  );
+}
+```
+
 #### 2. styles API
 
 The Stepper component provides flexible styling options through the `styles` prop.

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

@@ -355,6 +355,42 @@ function CustomGridLineExample() {
 }
 ```
 
+On band scales, you can also use `bandGridLinePlacement` to control where grid lines appear relative to each band.
+
+Using edges will place a grid line at the start of each band, plus a grid line at the end of the last band.
+
+```jsx
+function BandGridPlacement() {
+  const [selectedBandGridPlacement, setSelectedBandGridPlacement] = useState('edges');
+
+  return (
+    <CartesianChart
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22],
+        },
+      ]}
+      xAxis={{
+        scaleType: 'band',
+        data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+      }}
+      yAxis={{ domain: { min: 0 } }}
+    >
+      <XAxis
+        bandGridLinePlacement={selectedBandGridPlacement}
+        GridLineComponent={SolidLine}
+        showGrid
+        showLine
+        showTickMarks
+      />
+      <BarPlot />
+    </CartesianChart>
+  );
+}
+```
+
 #### Line
 
 You can show the axis line using the `showLine` prop.
@@ -548,6 +584,41 @@ function XAxisTickMarksExample() {
 }
 ```
 
+On band scales, you can also use `bandTickMarkPlacement` to control where tick marks appear relative to each band.
+
+Using edges will place a tick mark at the start of each band, plus a tick mark at the end of the last band.
+
+```jsx
+function BandTickMarkPlacement() {
+  const [selectedBandTickMarkPlacement, setSelectedBandTickMarkPlacement] = useState('middle');
+
+  return (
+    <CartesianChart
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22],
+        },
+      ]}
+      xAxis={{
+        scaleType: 'band',
+        data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+      }}
+      yAxis={{ domain: { min: 0 } }}
+    >
+      <XAxis
+        bandTickMarkPlacement={selectedBandTickMarkPlacement}
+        showLine
+        showTickMarks
+        tickMarkSize={8}
+      />
+      <BarPlot />
+    </CartesianChart>
+  );
+}
+```
+
 #### Tick Labels
 
 You can customize the tick labels using the `tickLabelFormatter` prop. It will receive the x data value of the tick. Meaning, if data is provided for the axis, it will receive the string label for the tick.
@@ -663,6 +734,8 @@ 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. |
+| `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 |
 | `height` | `number` | No | `32 when no label is provided, 52 when a label is provided` | Height of the axis. This value is inclusive of the padding. |
 | `label` | `string` | No | `-` | Label text to display for the axis. |
 | `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |

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

@@ -605,6 +605,8 @@ function MultipleYAxesExample() {
 | `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 |
 | `label` | `string` | No | `-` | Label text to display for the axis. |
 | `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. |

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

@@ -725,8 +725,8 @@ function XAxisGradient() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; 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 & { label?: string; 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<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. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

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

@@ -1129,8 +1129,8 @@ function UpdatingChartValues() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; 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 & { label?: string; 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<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. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

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

@@ -2052,8 +2052,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 & { label?: string; 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 & { label?: string; 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<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. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

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

@@ -76,6 +76,92 @@ function Example() {
 }
 ```
 
+### Chained Modals
+
+:::tip Accessibility tip
+For chained modals, set `restoreFocusOnUnmount={false}` on each one and return focus to the opener when exiting the chain (e.g., `triggerRef.current?.focus()`) to keep tab order predictable.
+:::
+
+```jsx live
+function ChainedModalsExample() {
+  const triggerRef = useRef(null);
+  const [isFirstModalOpen, setIsFirstModalOpen] = useState(false);
+  const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
+
+  const closeFirstModal = () => {
+    setIsFirstModalOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const openSecondModal = () => {
+    setIsFirstModalOpen(false);
+    setIsSecondModalOpen(true);
+  };
+
+  const closeSecondModal = () => {
+    setIsSecondModalOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const goBackToFirstModal = () => {
+    setIsSecondModalOpen(false);
+    setIsFirstModalOpen(true);
+  };
+
+  return (
+    <>
+      <Button ref={triggerRef} onClick={() => setIsFirstModalOpen(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        onRequestClose={closeFirstModal}
+        restoreFocusOnUnmount={false}
+        visible={isFirstModalOpen}
+      >
+        <ModalHeader
+          closeAccessibilityLabel="Close"
+          onBackButtonClick={closeFirstModal}
+          title="First Modal"
+        />
+        <ModalBody tabIndex={0} testID="first-modal-body">
+          <Text>First modal content</Text>
+        </ModalBody>
+        <ModalFooter
+          primaryAction={<Button onClick={openSecondModal}>Next</Button>}
+          secondaryAction={
+            <Button onClick={closeFirstModal} variant="secondary">
+              Cancel
+            </Button>
+          }
+        />
+      </Modal>
+      <Modal
+        onRequestClose={closeSecondModal}
+        restoreFocusOnUnmount={false}
+        visible={isSecondModalOpen}
+      >
+        <ModalHeader
+          closeAccessibilityLabel="Close"
+          onBackButtonClick={goBackToFirstModal}
+          title="Second Modal"
+        />
+        <ModalBody tabIndex={0} testID="second-modal-body">
+          <Text>Second modal content</Text>
+        </ModalBody>
+        <ModalFooter
+          primaryAction={<Button onClick={closeSecondModal}>Close</Button>}
+          secondaryAction={
+            <Button onClick={closeSecondModal} variant="secondary">
+              Cancel
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -497,6 +497,141 @@ function StepperCustomMetadataExample() {
 }
 ```
 
+##### Custom Step with Error State
+
+You can create custom icon, label, and progress components for individual steps to show special states like errors.
+In this example, the "Payment Method" step uses metadata to indicate an error condition. The custom components check this metadata and the completion state to dynamically render an error indicator, falling back to default components otherwise.
+
+```jsx live
+function StepperErrorStepExample() {
+  const ErrorStepperIcon = useMemo(
+    () =>
+      memo(function ErrorStepperIcon(props) {
+        const { step, visited, complete } = props;
+        const showError = step.metadata?.isError && (visited || complete);
+
+        if (!showError) {
+          return <DefaultStepperIconVertical {...props} />;
+        }
+
+        return (
+          <DefaultStepperIconVertical
+            {...props}
+            activeColor="bgNegative"
+            completeName="circleCross"
+            completeColor="bgNegative"
+            visitedName="circleCross"
+            visitedColor="bgNegative"
+          />
+        );
+      }),
+    [],
+  );
+
+  const ErrorStepperLabel = useMemo(
+    () =>
+      memo(function ErrorStepperLabel(props) {
+        const { step, visited, complete } = props;
+        const showError = step.metadata?.isError && (visited || complete);
+
+        if (!showError) {
+          return <DefaultStepperLabelVertical {...props} />;
+        }
+
+        return (
+          <DefaultStepperLabelVertical
+            {...props}
+            activeColor="fgNegative"
+            completeColor="fgNegative"
+            visitedColor="fgNegative"
+          />
+        );
+      }),
+    [],
+  );
+
+  const ErrorStepperProgress = useMemo(
+    () =>
+      memo(function ErrorStepperProgress(props) {
+        const { step, visited, complete } = props;
+        const showError = step.metadata?.isError && (visited || complete);
+
+        if (!showError) {
+          return <DefaultStepperProgressVertical {...props} />;
+        }
+
+        return (
+          <DefaultStepperProgressVertical
+            {...props}
+            completeFill="bgNegative"
+            visitedFill="bgNegative"
+          />
+        );
+      }),
+    [],
+  );
+
+  const steps = [
+    { id: '1', label: 'Account Details' },
+    { id: '2', label: 'Personal Information' },
+    {
+      id: '3',
+      label: 'Payment Method',
+      metadata: { isError: true },
+    },
+    { id: '4', label: 'Review & Submit' },
+  ];
+
+  const [stepperState, stepperApi] = useStepper({ steps });
+  const [complete, setComplete] = useState(false);
+
+  const handleNext = () => {
+    if (stepperState.activeStepId === '4') {
+      setComplete(true);
+    } else {
+      stepperApi.goNextStep();
+    }
+  };
+
+  const handlePrevious = () => {
+    setComplete(false);
+    stepperApi.goPreviousStep();
+  };
+
+  const handleReset = () => {
+    setComplete(false);
+    stepperApi.reset();
+  };
+
+  return (
+    <VStack gap={2}>
+      <Stepper
+        direction="vertical"
+        activeStepId={stepperState.activeStepId}
+        steps={steps}
+        complete={complete}
+        StepperIconComponent={ErrorStepperIcon}
+        StepperLabelComponent={ErrorStepperLabel}
+        StepperProgressComponent={ErrorStepperProgress}
+      />
+      <HStack gap={1}>
+        <Button
+          variant="secondary"
+          onClick={handlePrevious}
+          disabled={stepperState.activeStepId === '1'}
+        >
+          Previous
+        </Button>
+        <Button onClick={handleNext} disabled={complete}>
+          {stepperState.activeStepId === '4' ? 'Complete' : 'Next'}
+        </Button>
+        {complete && <Button onClick={handleReset}>Reset</Button>}
+      </HStack>
+    </VStack>
+  );
+}
+```
+
 #### 2. style and className APIs
 
 The Stepper component provides flexible styling options through the `classNames` and `styles` props.

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

@@ -354,6 +354,62 @@ function CustomGridLineExample() {
 }
 ```
 
+On band scales, you can also use `bandGridLinePlacement` to control where grid lines appear relative to each band.
+
+Using edges will place a grid line at the start of each band, plus a grid line at the end of the last band.
+
+```jsx live
+function BandGridPlacement() {
+  const bandGridLinePlacements = [
+    { id: 'edges', label: 'Edges' },
+    { id: 'start', label: 'Start' },
+    { id: 'middle', label: 'Middle' },
+    { id: 'end', label: 'End' },
+  ];
+  const [selectedBandGridPlacement, setSelectedBandGridPlacement] = useState(
+    bandGridLinePlacements[0],
+  );
+
+  return (
+    <VStack gap={2}>
+      <HStack justifyContent="flex-end" gap={2} alignItems="center">
+        <Text as="h3" font="headline">
+          Band Grid Placement
+        </Text>
+        <SegmentedTabs
+          activeTab={selectedBandGridPlacement}
+          onChange={setSelectedBandGridPlacement}
+          tabs={bandGridLinePlacements}
+        />
+      </HStack>
+      <CartesianChart
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22],
+          },
+        ]}
+        xAxis={{
+          scaleType: 'band',
+          data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+        }}
+        yAxis={{ domain: { min: 0 } }}
+      >
+        <XAxis
+          bandGridLinePlacement={selectedBandGridPlacement.id}
+          GridLineComponent={SolidLine}
+          showGrid
+          showLine
+          showTickMarks
+        />
+        <BarPlot />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
 #### Line
 
 You can show the axis line using the `showLine` prop.
@@ -546,6 +602,61 @@ function XAxisTickMarksExample() {
 }
 ```
 
+On band scales, you can also use `bandTickMarkPlacement` to control where tick marks appear relative to each band.
+
+Using edges will place a tick mark at the start of each band, plus a tick mark at the end of the last band.
+
+```jsx live
+function BandTickMarkPlacement() {
+  const bandTickMarkPlacements = [
+    { id: 'middle', label: 'Middle' },
+    { id: 'edges', label: 'Edges' },
+    { id: 'start', label: 'Start' },
+    { id: 'end', label: 'End' },
+  ];
+  const [selectedBandTickMarkPlacement, setSelectedBandTickMarkPlacement] = useState(
+    bandTickMarkPlacements[0],
+  );
+
+  return (
+    <VStack gap={2}>
+      <HStack justifyContent="flex-end" gap={2} alignItems="center">
+        <Text as="h3" font="headline">
+          Band Tick Mark Placement
+        </Text>
+        <SegmentedTabs
+          activeTab={selectedBandTickMarkPlacement}
+          onChange={setSelectedBandTickMarkPlacement}
+          tabs={bandTickMarkPlacements}
+        />
+      </HStack>
+      <CartesianChart
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22],
+          },
+        ]}
+        xAxis={{
+          scaleType: 'band',
+          data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+        }}
+        yAxis={{ domain: { min: 0 } }}
+      >
+        <XAxis
+          bandTickMarkPlacement={selectedBandTickMarkPlacement.id}
+          showLine
+          showTickMarks
+          tickMarkSize={8}
+        />
+        <BarPlot />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
 #### Tick Labels
 
 You can customize the tick labels using the `tickLabelFormatter` prop. It will receive the x data value of the tick. Meaning, if data is provided for the axis, it will receive the string label for the tick.
@@ -659,6 +770,8 @@ 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. |
+| `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. |
 | `classNames` | `{ root?: string; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
 | `height` | `number` | No | `32 when no label is provided, 52 when a label is provided` | Height of the axis. This value is inclusive of the padding. |

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

@@ -568,6 +568,8 @@ function CustomTickLabelExample() {
 | `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. |
 | `classNames` | `{ root?: string; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
 | `label` | `string` | No | `-` | Label text to display for the axis. |

package/package.json

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