@coinbase/cds-web 8.69.1 → 8.71.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.71.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add icon glyph and progress circle styles to IconButton. [[#606](https://github.com/coinbase/cds/pull/606)]
+
+## 8.70.0 (5/8/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support active color on Tabs. [[#669](https://github.com/coinbase/cds/pull/669)]
+
 ## 8.69.1 ((5/6/2026, 10:08 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/buttons/IconButton.d.ts

@@ -2,7 +2,20 @@ import React from 'react';
 import type { IconButtonVariant, IconName, IconSize } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type PressableBaseProps } from '../system/Pressable';
+import type { StylesAndClassNames } from '../types';
 import { type ButtonBaseProps } from './Button';
+/**
+ * Static class names for IconButton component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export declare const iconButtonClassNames: {
+  /** Root button element */
+  readonly root: 'cds-IconButton';
+  /** Inner icon glyph element */
+  readonly icon: 'cds-IconButton-icon';
+  /** Loading progress circle element */
+  readonly progressCircle: 'cds-IconButton-progressCircle';
+};
 export declare const iconButtonDefaultElement = 'button';
 export type IconButtonDefaultElement = typeof iconButtonDefaultElement;
 export type IconButtonBaseProps = Polymorphic.ExtendableProps<
@@ -27,7 +40,8 @@ export type IconButtonBaseProps = Polymorphic.ExtendableProps<
 export type IconButtonProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   IconButtonBaseProps
->;
+> &
+  StylesAndClassNames<typeof iconButtonClassNames>;
 type IconButtonComponent = (<AsComponent extends React.ElementType = IconButtonDefaultElement>(
   props: IconButtonProps<AsComponent>,
 ) => Polymorphic.ReactReturn) &

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBA2FxB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,oBAAoB;IAC/B,0BAA0B;;IAE1B,+BAA+B;;IAE/B,sCAAsC;;CAE9B,CAAC;AAEX,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,GACC,mBAAmB,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBAuGxB,CAAC"}

package/dts/tabs/DefaultTab.d.ts

@@ -7,7 +7,10 @@ import type { TabComponentProps } from './Tabs';
 /** Optional dot count and a11y overrides for the default tab row. */
 export type DefaultTabLabelProps = Partial<Pick<DotCountBaseProps, 'count' | 'max'>> &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
-export type DefaultTabProps<TabId extends string = string> = Omit<PressableBaseProps, 'onClick'> &
+export type DefaultTabProps<TabId extends string = string> = Omit<
+  PressableBaseProps,
+  'onClick' | 'color'
+> &
   TabComponentProps<TabId, TabValue<TabId> & DefaultTabLabelProps> & {
     /** Callback that is fired when the tab is pressed, after the active tab updates. */
     onClick?: (id: TabId) => void;
@@ -19,7 +22,7 @@ type DefaultTabComponent = <TabId extends string = string>(
 ) => React.ReactElement;
 declare const DefaultTabComponent: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Omit<PressableBaseProps, 'onClick'> &
+    Omit<PressableBaseProps, 'color' | 'onClick'> &
       Omit<
         TabValue<string> &
           Partial<Pick<DotCountBaseProps, 'max' | 'count'>> &
@@ -31,6 +34,12 @@ declare const DefaultTabComponent: React.MemoExoticComponent<
         className?: string;
         style?: React.CSSProperties;
         'data-rendered-tab'?: boolean;
+        color?: import('../styles/styleProps').ResponsiveProp<
+          import('@coinbase/cds-common').ThemeVars.Color
+        >;
+        activeColor?: import('../styles/styleProps').ResponsiveProp<
+          import('@coinbase/cds-common').ThemeVars.Color
+        >;
       } & {
         /** Callback that is fired when the tab is pressed, after the active tab updates. */
         onClick?: ((id: string) => void) | undefined;

package/dts/tabs/DefaultTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAIlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AA2BvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC9F,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC5E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;;IARrB,oFAAoF;+BAC3D,IAAI;4CA0EhC,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}
+{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAIlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AA2BvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,kBAAkB,EAClB,SAAS,GAAG,OAAO,CACpB,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC5E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;;;;IARrB,oFAAoF;+BAC3D,IAAI;4CA4EhC,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}

package/dts/tabs/SegmentedTab.d.ts

@@ -1,19 +1,20 @@
 import React from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { type TabValue } from '@coinbase/cds-common/tabs/useTabs';
+import type { ResponsiveProp } from '../styles/styleProps';
 import { type PressableBaseProps } from '../system/Pressable';
 export type SegmentedTabBaseProps<TabId extends string = string> = PressableBaseProps &
   TabValue<TabId> & {
     /**
-     * Text color when the SegmentedTab is active.
-     * @default negativeForeground
+     * Text color when active.
+     * @default fgInverse
      */
-    activeColor?: ThemeVars.Color;
+    activeColor?: ResponsiveProp<ThemeVars.Color>;
     /**
-     * Text color when the SegmentedTab is inactive.
-     * @default foreground
+     * Text color when inactive.
+     * @default fg
      */
-    color?: ThemeVars.Color;
+    color?: ResponsiveProp<ThemeVars.Color>;
   };
 export type SegmentedTabProps<TabId extends string = string> = SegmentedTabBaseProps<TabId> & {
   /** Callback that is fired when the SegmentedTab is clicked. */
@@ -37,15 +38,15 @@ declare const SegmentedTabComponent: React.MemoExoticComponent<
       > &
       TabValue<string> & {
         /**
-         * Text color when the SegmentedTab is active.
-         * @default negativeForeground
+         * Text color when active.
+         * @default fgInverse
          */
-        activeColor?: ThemeVars.Color;
+        activeColor?: ResponsiveProp<ThemeVars.Color>;
         /**
-         * Text color when the SegmentedTab is inactive.
-         * @default foreground
+         * Text color when inactive.
+         * @default fg
          */
-        color?: ThemeVars.Color;
+        color?: ResponsiveProp<ThemeVars.Color>;
       } & {
         /** Callback that is fired when the SegmentedTab is clicked. */
         onClick?: ((id: string, event: React.MouseEvent) => void) | undefined;

package/dts/tabs/SegmentedTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AA8BzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;;IAIzB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAsGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AA8BzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACzC,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;IAC7C;;;OAGG;YACK,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;;IAIzC,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAsGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}

package/dts/tabs/Tabs.d.ts

@@ -5,6 +5,7 @@ import { type Rect } from '@coinbase/cds-common/types/Rect';
 import { type MotionProps } from 'framer-motion';
 import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
 import { type HStackDefaultElement, type HStackProps } from '../layout/HStack';
+import type { ResponsiveProp } from '../styles/styleProps';
 export declare const tabsTransitionConfig: {
   readonly type: 'spring';
   readonly mass: 0.15;
@@ -30,6 +31,10 @@ export type TabComponentProps<
   className?: string;
   style?: React.CSSProperties;
   'data-rendered-tab'?: boolean;
+  /** Inactive label color (from `Tabs` when set). */
+  color?: ResponsiveProp<ThemeVars.Color>;
+  /** Active label color (from `Tabs` when set). */
+  activeColor?: ResponsiveProp<ThemeVars.Color>;
 };
 export type TabComponent<
   TabId extends string = string,
@@ -39,8 +44,9 @@ export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
 export type TabsBaseProps<
   TabId extends string = string,
   TTab extends TabValue<TabId> = TabValue<TabId>,
-> = Omit<BoxBaseProps, 'onChange'> &
-  Omit<TabsOptions<TabId, TTab>, 'tabs'> & {
+> = Omit<BoxBaseProps, 'color' | 'onChange'> &
+  Omit<TabsOptions<TabId, TTab>, 'tabs'> &
+  Pick<TabComponentProps<TabId, TTab>, 'color' | 'activeColor'> & {
     /** The array of tabs data. Each tab may optionally define a custom Component to render. */
     tabs: (TTab & {
       Component?: TabComponent<TabId, TTab>;
@@ -58,7 +64,7 @@ export type TabsProps<
   TabId extends string = string,
   TTab extends TabValue<TabId> = TabValue<TabId>,
 > = TabsBaseProps<TabId, TTab> &
-  Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'> & {
+  Omit<HStackProps<HStackDefaultElement>, 'color' | 'onChange' | 'ref'> & {
     /** Custom styles for individual elements of the Tabs component */
     styles?: {
       /** Root element */

package/dts/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint", "styles", "classNames"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -15,7 +15,18 @@ import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
-const COMPONENT_STATIC_CLASSNAME = 'cds-IconButton';
+/**
+ * Static class names for IconButton component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const iconButtonClassNames = {
+  /** Root button element */
+  root: 'cds-IconButton',
+  /** Inner icon glyph element */
+  icon: 'cds-IconButton-icon',
+  /** Loading progress circle element */
+  progressCircle: 'cds-IconButton-progressCircle'
+};
 export const iconButtonDefaultElement = 'button';
 const flushSpaceCss = "flushSpaceCss-f1po8mo6";
 const flushStartCss = "flushStartCss-fqg7x6g";
@@ -45,7 +56,9 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       loading,
       progressCircleSize,
       accessibilityLabel,
-      accessibilityHint
+      accessibilityHint,
+      styles,
+      classNames
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
@@ -66,7 +79,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     borderColor: borderColorValue,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
-    className: cx(COMPONENT_STATIC_CLASSNAME, flush && flushSpaceCss, flush === 'start' && flushStartCss, flush === 'end' && flushEndCss, className),
+    className: cx(iconButtonClassNames.root, flush && flushSpaceCss, flush === 'start' && flushStartCss, flush === 'end' && flushEndCss, classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
     color: colorValue,
     "data-compact": compact,
     "data-flush": flush,
@@ -81,15 +94,23 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
       indeterminate: true,
       accessibilityLabel: "Loading",
+      className: cx(iconButtonClassNames.progressCircle, classNames === null || classNames === void 0 ? void 0 : classNames.progressCircle),
       color: "currentColor",
       size: progressCircleSize !== null && progressCircleSize !== void 0 ? progressCircleSize : iconSizeValue,
+      style: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
       testID: props.testID ? "".concat(props.testID, "-progress-circle") : undefined,
       weight: "thin"
     }) : /*#__PURE__*/_jsx(Icon, {
       active: active,
+      classNames: {
+        icon: cx(iconButtonClassNames.icon, classNames === null || classNames === void 0 ? void 0 : classNames.icon)
+      },
       color: "currentColor",
       name: name,
-      size: iconSize
+      size: iconSize,
+      styles: {
+        icon: styles === null || styles === void 0 ? void 0 : styles.icon
+      }
     })
   }));
 }));

package/esm/tabs/DefaultTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className"];
+const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className", "color", "activeColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -28,7 +28,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       count,
       max,
       accessibilityLabel,
-      className
+      className,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -60,7 +62,7 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       children: [/*#__PURE__*/_jsx(Text, {
         as: "h2",
         className: labelPaddingCss,
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         display: "block",
         font: "headline",
         children: label

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeColor", "activeTab", "color", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
   _excluded3 = ["activeTabRect", "position", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -50,7 +50,9 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      activeColor,
       activeTab,
+      color,
       onActiveTabElementChange,
       disabled,
       onChange,
@@ -142,6 +144,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    color: color,
     onKeyDown: handleTabsContainerKeyDown,
     opacity: disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -166,7 +169,10 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       }), tabs.map(props => {
         var _props$Component;
         const RenderedTab = (_props$Component = props.Component) !== null && _props$Component !== void 0 ? _props$Component : TabComponent;
-        const renderedTabProps = _objectSpread(_objectSpread({}, props), {}, {
+        const renderedTabProps = _objectSpread(_objectSpread({
+          activeColor,
+          color
+        }, props), {}, {
           'data-rendered-tab': true,
           className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
           role: 'tab',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.69.1",
+  "version": "8.71.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.69.1",
+    "@coinbase/cds-common": "^8.71.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",