@coinbase/cds-mcp-server 8.59.0 → 8.61.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.61.0 ((3/30/2026, 02:40 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.60.0 ((3/29/2026, 10:49 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.59.0 ((3/27/2026, 05:43 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -68,7 +68,34 @@ Use transparent buttons for supplementary actions with lower prominence. The con
 
 #### Loading
 
-Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a spinner while preserving its width.
+Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a loading indicator (indeterminate [ProgressCircle](/components/feedback/ProgressCircle)) while preserving its width.
+
+##### Loading by variant
+
+Loading works with all variants and transparent. The label is hidden and the progress circle is shown in the button’s accent color.
+
+```jsx
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <Button loading>Primary</Button>
+  <Button loading variant="secondary">
+    Secondary
+  </Button>
+  <Button loading variant="tertiary">
+    Tertiary
+  </Button>
+  <Button loading variant="negative">
+    Negative
+  </Button>
+  <Button loading transparent variant="secondary">
+    Transparent
+  </Button>
+  <Button loading compact>
+    Compact
+  </Button>
+</HStack>
+```
+
+##### Basic loading
 
 ```jsx
 <HStack gap={2}>
@@ -335,6 +362,7 @@ A full-width primary action with a compact secondary option.
 | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
+| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |

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

@@ -326,6 +326,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
 | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
+| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |

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

@@ -173,7 +173,7 @@ function LoadingExample() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean \| undefined; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
+| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean \| undefined; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
@@ -255,7 +255,7 @@ function LoadingExample() {
 | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
-| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
+| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |

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

@@ -127,13 +127,13 @@ function Example() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `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 | `primary` | Custom progress color. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
 | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
 | `styles` | `{ root?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBar component |

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

@@ -176,10 +176,10 @@ function Example() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
 | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
 | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBarWithFloatLabel component |
 | `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 |

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

@@ -1,6 +1,6 @@
 # ProgressCircle
 
-A circular visual indicator of completion progress.
+A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
 
 ## Import
 
@@ -20,6 +20,65 @@ import { ProgressCircle } from '@coinbase/cds-mobile/visualizations/ProgressCirc
 </HStack>
 ```
 
+### Indeterminate
+
+Use the `indeterminate` prop when progress is unknown (e.g. loading). The circle shows a spinning partial arc with no percentage text. This is the recommended replacement for the deprecated [Spinner](/components/feedback/Spinner) in loading contexts such as [IconButton](/components/buttons/IconButton) or button loading states.
+
+When `indeterminate` is true, the default color is `fgMuted`; you can override `color` as needed. Always provide `accessibilityLabel` so screen readers announce the loading state.
+
+#### Thickness (weight)
+
+Indeterminate uses the same `weight` prop as determinate progress. The default is **`"normal"`** (4px stroke). Use `"thin"` (2px), `"semiheavy"` (8px), or `"heavy"` (12px) to change thickness.
+
+```jsx
+<HStack gap={2} alignItems="center">
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Default (normal)</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">weight="thin"</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="thin" />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">weight="semiheavy"</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="semiheavy" />
+  </VStack>
+</HStack>
+```
+
+#### Progress (arc length)
+
+When `indeterminate` is true, the **`progress` prop controls the length of the visible arc** (how much of the circle is drawn), not a completion percentage. It defaults to `0.75` (a 270° arc). Override it to change the arc length—e.g. `0.5` for a half circle or `0.25` for a shorter arc.
+
+```jsx
+<HStack gap={2} alignItems="center">
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.25</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.25} size={56} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.5</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.5} size={56} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.75 (default)</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.75} size={56} />
+  </VStack>
+</HStack>
+```
+
+#### Sizes and color
+
+```jsx
+<HStack gap={2} alignItems="center">
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={32} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={56} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={100} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate color="bgPrimary" size={56} />
+</HStack>
+```
+
 ### Thin
 
 ```jsx
@@ -238,16 +297,17 @@ function Example() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `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 | `primary` | Custom progress color. |
 | `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
 | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
 | `hideText` | `boolean` | No | `-` | - |
+| `indeterminate` | `boolean` | No | `-` | Toggle used to show an indeterminate progress circle. |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |

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

@@ -242,7 +242,7 @@ function MarginExample() {
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
 | `animated` | `boolean` | No | `-` | - |
 | `aspectRatio` | `string \| number` | No | `-` | - |
-| `background` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
+| `background` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue40 \| blue30 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green40 \| green30 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange40 \| orange30 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow40 \| yellow30 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray40 \| gray30 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo40 \| indigo30 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink40 \| pink30 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple40 \| purple30 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red40 \| red30 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal40 \| teal30 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse40 \| chartreuse30 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
 | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
@@ -262,7 +262,7 @@ function MarginExample() {
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `string \| number` | No | `-` | - |
-| `color` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
+| `color` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue40 \| blue30 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green40 \| green30 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange40 \| orange30 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow40 \| yellow30 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray40 \| gray30 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo40 \| indigo30 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink40 \| pink30 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple40 \| purple30 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red40 \| red30 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal40 \| teal30 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse40 \| chartreuse30 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
 | `colorScheme` | `blue \| green \| yellow \| gray \| purple \| red` | No | `blue` | Specify the colorScheme of the Tag |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |

package/mcp-docs/mobile/routes.txt

@@ -103,7 +103,7 @@
 - [Button](mobile/components/Button.txt): A pressable button element.
 - [AvatarButton](mobile/components/AvatarButton.txt): A pressable Avatar.
 - [Spinner](mobile/components/Spinner.txt): A loading indicator that displays a rotating animation to communicate that content is loading or a background process is in progress.
-- [ProgressCircle](mobile/components/ProgressCircle.txt): A circular visual indicator of completion progress.
+- [ProgressCircle](mobile/components/ProgressCircle.txt): A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
 - [ProgressBarWithFloatLabel](mobile/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
 - [ProgressBarWithFixedLabels](mobile/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
 - [ProgressBar](mobile/components/ProgressBar.txt): A visual indicator of completion progress.

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

@@ -71,7 +71,36 @@ Use transparent buttons for supplementary actions with lower prominence. The con
 
 #### Loading
 
-Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a spinner while preserving its width.
+Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a loading indicator (indeterminate [ProgressCircle](/components/feedback/ProgressCircle)) while preserving its width.
+
+##### Loading by variant
+
+Loading works with all variants and transparent. The label is hidden and the progress circle is shown in the button’s accent color.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <Button loading>Primary</Button>
+  <Button loading variant="secondary">
+    Secondary
+  </Button>
+  <Button loading variant="tertiary">
+    Tertiary
+  </Button>
+  <Button loading variant="negative">
+    Negative
+  </Button>
+  <Button loading transparent variant="secondary">
+    Transparent
+  </Button>
+  <Button loading compact>
+    Compact
+  </Button>
+</HStack>
+```
+
+##### Interactive loading
+
+Toggle loading state to see the transition. Use for async actions like save or submit.
 
 ```jsx live
 function LoadingExample() {
@@ -609,6 +638,7 @@ A full-width primary action with a compact secondary option.
 | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
 | `prefix` | `string \| undefined` | No | `-` | - |
 | `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
+| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
 | `property` | `string \| undefined` | No | `-` | - |
 | `radioGroup` | `string \| undefined` | No | `-` | - |
 | `ref` | `any` | No | `-` | - |

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

@@ -102,7 +102,64 @@ Use the `transparent` prop to remove the background until the user interacts wit
 
 #### Loading
 
-Use the `loading` prop to show a spinner when an action is in progress. The button becomes non-interactive and displays a loading spinner instead of the icon.
+Use the `loading` prop when an action is in progress. The button becomes non-interactive and shows an indeterminate [ProgressCircle](/components/feedback/ProgressCircle) instead of the icon. The circle size follows the button’s `iconSize`.
+
+##### Loading by variant
+
+Loading works with all variants, transparent, and compact. Provide `accessibilityLabel` so screen readers announce the loading state (e.g. "Loading").
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <IconButton
+    loading
+    name="refresh"
+    accessibilityLabel="Loading"
+    variant="primary"
+    onClick={console.log}
+  />
+  <IconButton
+    loading
+    name="refresh"
+    accessibilityLabel="Loading"
+    variant="secondary"
+    onClick={console.log}
+  />
+  <IconButton
+    loading
+    name="refresh"
+    accessibilityLabel="Loading"
+    variant="tertiary"
+    onClick={console.log}
+  />
+  <IconButton
+    loading
+    name="refresh"
+    accessibilityLabel="Loading"
+    variant="foregroundMuted"
+    onClick={console.log}
+  />
+  <IconButton
+    loading
+    transparent
+    name="refresh"
+    accessibilityLabel="Loading"
+    variant="secondary"
+    onClick={console.log}
+  />
+  <IconButton loading compact name="refresh" accessibilityLabel="Loading" onClick={console.log} />
+  <IconButton
+    loading
+    name="refresh"
+    accessibilityLabel="Loading"
+    compact={false}
+    onClick={console.log}
+  />
+</HStack>
+```
+
+##### Interactive loading
+
+Toggle loading to simulate an async action. The button’s `accessibilityLabel` can reflect the state (e.g. "Submit form" vs "Processing submission").
 
 ```jsx live
 function LoadingExample() {

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

@@ -143,7 +143,7 @@ function LoadingExample() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
+| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -230,7 +230,7 @@ function LoadingExample() {
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
-| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
+| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
 | `style` | `CSSProperties` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |

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

@@ -163,7 +163,6 @@ function Example() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `className` | `string` | No | `-` | - |
 | `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressBar component |
 | `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 | `primary` | Custom progress color. |
@@ -172,6 +171,7 @@ function Example() {
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
 | `style` | `CSSProperties` | No | `-` | - |
 | `styles` | `{ root?: CSSProperties; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the ProgressBar component |

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

@@ -239,12 +239,12 @@ function Example() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `className` | `string` | No | `-` | - |
 | `classNames` | `{ root?: string; labelContainer?: string \| undefined; label?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressBarWithFloatLabel component |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
 | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `style` | `CSSProperties` | No | `-` | - |
 | `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; label?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the ProgressBarWithFloatLabel component |
 | `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 |

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

@@ -1,6 +1,6 @@
 # ProgressCircle
 
-A circular visual indicator of completion progress.
+A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
 
 ## Import
 
@@ -20,6 +20,65 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 </HStack>
 ```
 
+### Indeterminate
+
+Use the `indeterminate` prop when progress is unknown (e.g. loading). The circle shows a spinning partial arc with no percentage text. This is the recommended replacement for the deprecated [Spinner](/components/feedback/Spinner) in loading contexts such as [IconButton](/components/inputs/IconButton) or button loading states.
+
+When `indeterminate` is true, the default color is `fgMuted`; you can override `color` as needed. Always provide `accessibilityLabel` so screen readers announce the loading state.
+
+#### Thickness (weight)
+
+Indeterminate uses the same `weight` prop as determinate progress. The default is **`"normal"`** (4px stroke). Use `"thin"` (2px), `"semiheavy"` (8px), or `"heavy"` (12px) to change thickness.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Default (normal)</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">weight="thin"</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="thin" />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">weight="semiheavy"</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="semiheavy" />
+  </VStack>
+</HStack>
+```
+
+#### Progress (arc length)
+
+When `indeterminate` is true, the **`progress` prop controls the length of the visible arc** (how much of the circle is drawn), not a completion percentage. It defaults to `0.75` (a 270° arc). Override it to change the arc length—e.g. `0.5` for a half circle or `0.25` for a shorter arc.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.25</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.25} size={56} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.5</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.5} size={56} />
+  </VStack>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">progress=0.75 (default)</Text>
+    <ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.75} size={56} />
+  </VStack>
+</HStack>
+```
+
+#### Sizes and color
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={32} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={56} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate size={100} />
+  <ProgressCircle accessibilityLabel="Loading" indeterminate color="bgPrimary" size={56} />
+</HStack>
+```
+
 ### Thin
 
 ```jsx live
@@ -447,7 +506,6 @@ function Example() {
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `className` | `string` | No | `-` | - |
 | `classNames` | `{ root?: string; svg?: string \| undefined; circle?: string \| undefined; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressCircle component |
 | `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 | `primary` | Custom progress color. |
@@ -456,9 +514,11 @@ function Example() {
 | `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
 | `hideText` | `boolean` | No | `-` | - |
+| `indeterminate` | `boolean` | No | `-` | Toggle used to show an indeterminate progress circle. |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
 | `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
 | `style` | `CSSProperties` | No | `-` | - |

package/mcp-docs/web/routes.txt

@@ -114,7 +114,7 @@
 - [Button](web/components/Button.txt): A pressable button element.
 - [AvatarButton](web/components/AvatarButton.txt): A pressable Avatar.
 - [Spinner](web/components/Spinner.txt): A loading indicator that displays a rotating animation to communicate that content is loading or a background process is in progress.
-- [ProgressCircle](web/components/ProgressCircle.txt): A circular visual indicator of completion progress.
+- [ProgressCircle](web/components/ProgressCircle.txt): A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
 - [ProgressBarWithFloatLabel](web/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
 - [ProgressBarWithFixedLabels](web/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
 - [ProgressBar](web/components/ProgressBar.txt): A visual indicator of completion progress.

package/package.json

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