@coinbase/cds-web 9.15.0 → 9.17.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.17.0 (8/14/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support charts gradients for bars. [[#844](https://github.com/coinbase/cds/pull/844)]
+
+## 9.16.0 (8/13/2026 PST)
+
+#### 🚀 Updates
+
+- Deprecate invertColorScheme in favor of new, canoncical active prop for the Chip family of props. [[#843](https://github.com/coinbase/cds/pull/843)]
+
 ## 9.15.0 (8/11/2026 PST)
 
 #### 🚀 Updates

package/dts/alpha/select-chip/SelectChip.d.ts

@@ -1,18 +1,8 @@
 import React from 'react';
-import type { ChipBaseProps } from '../../chips/ChipProps';
 import { type SelectRef } from '../select/Select';
 import type { SelectProps, SelectType } from '../select/types';
-export type SelectChipBaseProps = Pick<
-  ChipBaseProps,
-  'invertColorScheme' | 'numberOfLines' | 'maxWidth' | 'size' | 'compact'
-> & {
-  /**
-   * Override the displayed value in the chip control.
-   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
-   * When provided, this value takes precedence over the default label generation.
-   */
-  displayValue?: React.ReactNode;
-};
+import { type SelectChipControlChipProps, type SelectChipControlProps } from './SelectChipControl';
+export type SelectChipBaseProps = Pick<SelectChipControlProps, keyof SelectChipControlChipProps>;
 export type SelectChipProps<
   Type extends SelectType = 'single',
   SelectOptionValue extends string = string,
@@ -26,6 +16,10 @@ export type SelectChipProps<
     | 'maxWidth'
     | 'size'
     | 'compact'
+    | 'bordered'
+    | 'borderWidth'
+    | 'borderColor'
+    | 'borderRadius'
   >;
 export declare const SelectChip: <
   Type extends SelectType = 'single',

package/dts/alpha/select-chip/SelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,uBAAuB,CAAC;AAGrE,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,aAAa,EACb,mBAAmB,GAAG,eAAe,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACxE,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAClC,wBAAwB,GACxB,YAAY,GACZ,cAAc,GACd,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,CACZ,CAAC;AA0FJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAEL,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,EAAE,MAAM,0BAA0B,CAAC,CAAC;AAEjG,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAClC,wBAAwB,GACxB,YAAY,GACZ,cAAc,GACd,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,GACT,UAAU,GACV,aAAa,GACb,aAAa,GACb,cAAc,CACjB,CAAC;AAuIJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/SelectChipControl.d.ts

@@ -1,13 +1,58 @@
 import React from 'react';
+import type { ChipBaseProps } from '../../chips/ChipProps';
 import { type SelectControlProps, type SelectType } from '../select/types';
-import type { SelectChipBaseProps } from './SelectChip';
+/**
+ * Chip props accepted by {@link SelectChipControl} and forwarded to {@link MediaChip}.
+ * Includes selection state, layout, borders, and `displayValue` for the control label.
+ */
+export type SelectChipControlChipProps = Pick<
+  ChipBaseProps,
+  | 'active'
+  | 'activeBackground'
+  | 'activeColor'
+  | 'background'
+  | 'color'
+  | 'invertColorScheme'
+  | 'inverted'
+  | 'numberOfLines'
+  | 'maxWidth'
+  | 'size'
+  | 'compact'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'bordered'
+  | 'borderRadius'
+> & {
+  /**
+   * Override the displayed value in the chip control.
+   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+   * When provided, this value takes precedence over the default label generation.
+   */
+  displayValue?: React.ReactNode;
+};
+/**
+ * SelectControlProps fields superseded by {@link SelectChipControlChipProps}.
+ * Omit is required: intersection would merge overlapping keys (e.g. `size` as SelectSize &
+ * ChipSize, `background` as responsive Box vs chip tokens) instead of replacing select-scale
+ * definitions.
+ */
+type SelectControlPropsReplacedByChipProps = keyof Pick<
+  SelectControlProps,
+  'size' | 'compact' | 'borderWidth' | 'borderColor' | 'bordered' | 'borderRadius'
+>;
+export type SelectChipControlProps<
+  Type extends SelectType = 'single',
+  SelectOptionValue extends string = string,
+> = Omit<SelectControlProps<Type, SelectOptionValue>, SelectControlPropsReplacedByChipProps> &
+  SelectChipControlChipProps;
+/** Generic memo components need an explicit cast for the public polymorphic signature. */
 export declare const SelectChipControl: <
   Type extends SelectType,
   SelectOptionValue extends string = string,
 >(
-  props: Omit<SelectControlProps<Type, SelectOptionValue>, 'size' | 'compact'> &
-    SelectChipBaseProps & {
-      ref?: React.Ref<HTMLElement>;
-    },
+  props: SelectChipControlProps<Type, SelectOptionValue> & {
+    ref?: React.Ref<HTMLElement>;
+  },
 ) => React.ReactElement;
+export {};
 //# sourceMappingURL=SelectChipControl.d.ts.map

package/dts/alpha/select-chip/SelectChipControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiKxD,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAC1E,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACA,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAEzB;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,aAAa,EACX,QAAQ,GACR,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,OAAO,GACP,mBAAmB,GACnB,UAAU,GACV,eAAe,GACf,UAAU,GACV,MAAM,GACN,SAAS,GACT,aAAa,GACb,aAAa,GACb,UAAU,GACV,cAAc,CACjB,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF;;;;;GAKG;AACH,KAAK,qCAAqC,GAAG,MAAM,IAAI,CACrD,kBAAkB,EAClB,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,CACjF,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAChC,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAAE,qCAAqC,CAAC,GAC1F,0BAA0B,CAAC;AA0K7B,0FAA0F;AAC1F,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACvD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/index.d.ts

@@ -1,3 +1,3 @@
 export * from './SelectChip';
-export * from './SelectChipControl';
+export { SelectChipControl } from './SelectChipControl';
 //# sourceMappingURL=index.d.ts.map

package/dts/alpha/select-chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dts/alpha/tabbed-chips/TabbedChips.d.ts

@@ -15,11 +15,14 @@ export type TabbedChipProps<TabId extends string = string> = Omit<
     Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
     /**
      * Custom background color applied to the chip when it is the active tab.
-     * When set, takes precedence over the default `invertColorScheme` behavior.
+     * Skips color-scheme inversion and paints this token directly. Any `start`,
+     * `end`, or custom tab content must set explicit colors to match.
      */
     activeBackground?: MediaChipBaseProps['background'];
     /**
      * Custom foreground color applied to the chip label when it is the active tab.
+     * Skips color-scheme inversion when set. Any `start`, `end`, or custom tab
+     * content must set explicit colors to match.
      */
     activeColor?: MediaChipBaseProps['color'];
   };

package/dts/alpha/tabbed-chips/TabbedChips.d.ts.map

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

package/dts/chips/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAqBpC;;;;GAIG;AACH,eAAO,MAAM,IAAI,4JAsIhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAqBpC;;;;GAIG;AACH,eAAO,MAAM,IAAI,4JAiJhB,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -1,5 +1,7 @@
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { StyleProps } from '../styles/styleProps';
 import type {
   PressableBaseProps,
   PressableDefaultElement,
@@ -30,18 +32,50 @@ export type ChipBaseProps = SharedProps &
      * @default 200
      */
     maxWidth?: PressableBaseProps['maxWidth'];
+    /**
+     * When true, emphasizes the Chip with higher contrast by inverting the color
+     * scheme for everything rendered inside the Chip — including `background`,
+     * `color`, icons, and other token-based colors. Those props are resolved
+     * against the opposite color scheme, matching the legacy `invertColorScheme`
+     * behavior.
+     *
+     * Set `activeBackground` and/or `activeColor` to opt out of inversion and
+     * paint explicit active colors instead.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Background color applied when `active` is true. When set, the Chip skips
+     * color-scheme inversion and uses this token directly.
+     *
+     * **Warning:** `start`, `end`, and `children` ReactNodes are not updated
+     * automatically — pass explicit `color` props on nested icons and other
+     * content so they match the active palette.
+     */
+    activeBackground?: ThemeVars.Color;
+    /**
+     * Foreground color applied when `active` is true. When set, the Chip skips
+     * color-scheme inversion and uses this token for string labels.
+     *
+     * **Warning:** `start`, `end`, and `children` ReactNodes are not updated
+     * automatically — pass explicit `color` props on nested icons and other
+     * content so they match the active palette.
+     */
+    activeColor?: StyleProps['color'];
     /**
      * Invert the foreground and background colors to emphasize the Chip.
      * Depending on your theme, it may be dangerous to use this prop in conjunction with `transparentWhileInactive`.
      * @default false
-     * @deprecated Use the invertColorScheme prop instead. This will be removed in a future major release.
-     * @deprecationExpectedRemoval v9
+     * @deprecated Use the `active` prop instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v11
      */
     inverted?: boolean;
     /**
      * Invert the foreground and background colors to emphasize the Chip.
      * Depending on your theme, it may be dangerous to use this prop in conjunction with `transparentWhileInactive`.
      * @default false
+     * @deprecated Use the `active` prop instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v11
      */
     invertColorScheme?: boolean;
     /**

package/dts/chips/ChipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EACV,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CACF,cAAc,CAAC,uBAAuB,CAAC,EACrC,UAAU,GACV,SAAS,GACT,OAAO,GACP,eAAe,GACf,mBAAmB,GACnB,yBAAyB,GACzB,UAAU,GACV,OAAO,CACV,GACD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,sBAAsB;QACtB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,uEAAuE;IACvE,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sBAAsB;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,SAAS,GAAG;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EACV,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CACF,cAAc,CAAC,uBAAuB,CAAC,EACrC,UAAU,GACV,SAAS,GACT,OAAO,GACP,eAAe,GACf,mBAAmB,GACnB,yBAAyB,GACzB,UAAU,GACV,OAAO,CACV,GACD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,sBAAsB;QACtB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,uEAAuE;IACvE,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sBAAsB;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,SAAS,GAAG;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dts/chips/InputChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,kGA+BrB,CAAC"}
+{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,kGA8CrB,CAAC"}

package/dts/visualizations/chart/utils/bar.d.ts.map

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

package/dts/visualizations/chart/utils/gradient.d.ts

@@ -49,6 +49,15 @@ export declare const evaluateGradientAtValue: (
   dataValue: number,
   scale: ChartScaleFunction,
 ) => string | undefined;
+/**
+ * Evaluates the opacity at a specific data value based on gradient stops.
+ * Returns undefined when no stops define opacity.
+ */
+export declare const evaluateGradientOpacityAtValue: (
+  stops: GradientStop[],
+  dataValue: number,
+  scale: ChartScaleFunction,
+) => number | undefined;
 /**
  * Creates a gradient configuration for SVG components.
  * Processes a GradientDefinition into a renderable GradientConfig.

package/dts/visualizations/chart/utils/gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/gradient.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAC1C,QAAQ,oBAAoB,KAC3B,GAAG,GAAG,GAER,CAAC;AA8DF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,kBAAkB,KACxB,MAAM,GAAG,SAiEX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,EAC1B,SAAQ,oBAAiC,KACxC,YAAY,EAAE,GAAG,SAsBnB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,EACvB,OAAM,GAAG,GAAG,GAAS,KACpB,kBA0BF,CAAC"}
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/gradient.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAC1C,QAAQ,oBAAoB,KAC3B,GAAG,GAAG,GAER,CAAC;AAuIF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,kBAAkB,KACxB,MAAM,GAAG,SAcX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,GACzC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,kBAAkB,KACxB,MAAM,GAAG,SAcX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,EAC1B,SAAQ,oBAAiC,KACxC,YAAY,EAAE,GAAG,SAsBnB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,EACvB,OAAM,GAAG,GAAG,GAAS,KACpB,kBA0BF,CAAC"}

package/esm/alpha/select-chip/SelectChip.js

@@ -1,4 +1,5 @@
-const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
+const _excluded = ["active", "invertColorScheme", "inverted", "value"],
+  _excluded2 = ["active", "activeBackground", "activeColor", "background", "color", "numberOfLines", "maxWidth", "displayValue", "size", "compact", "borderWidth", "borderColor", "bordered", "borderRadius", "invertColorScheme", "inverted"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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; }
@@ -7,33 +8,22 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { forwardRef, memo, useMemo } from 'react';
+import { getSelectChipActive } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a wrapper component that injects invertColorScheme and numberOfLines
- * into SelectChipControl. This is needed because Select doesn't pass these props
- * to SelectControlComponent, but SelectChipControl requires them.
+ * Creates a wrapper component that injects chip-specific props into SelectChipControl.
+ * Select only forwards generic control props to `SelectControlComponent`; chip styling
+ * and `active` are owned by SelectChip and must be closed over here.
  */
-function createSelectChipControlWrapper(_ref) {
-  let {
-    invertColorScheme,
-    numberOfLines,
-    maxWidth,
-    displayValue,
-    size,
-    compact
-  } = _ref;
+function createSelectChipControlWrapper(chipProps) {
   return /*#__PURE__*/memo(/*#__PURE__*/forwardRef((controlProps, controlRef) => {
-    return /*#__PURE__*/_jsx(SelectChipControl, _objectSpread(_objectSpread({}, controlProps), {}, {
-      ref: controlRef,
-      compact: compact,
-      displayValue: displayValue,
-      invertColorScheme: invertColorScheme,
-      maxWidth: maxWidth,
-      numberOfLines: numberOfLines,
-      size: size
+    // Chip props are spread last so they win at runtime; the cast bridges overlapping keys
+    // (`size`, borders) where SelectControlProps and SelectChipBaseProps use different types.
+    return /*#__PURE__*/_jsx(SelectChipControl, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, controlProps), chipProps)), {}, {
+      ref: controlRef
     }));
   }));
 }
@@ -43,24 +33,63 @@ function createSelectChipControlWrapper(_ref) {
  * Supports both single and multi selection via Select's `type` prop.
  */
 const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  const mergedProps = useComponentConfig('SelectChip', _props);
+  // Resolve `active` from instance props before config merge so state-aware resolvers
+  // (active vs inactive border styling) see the final selection state. `value` and
+  // legacy invert props are pulled out with `active` and passed back explicitly because
+  // they feed that resolution and must remain available to the config resolver input.
   const {
+      active: activeProp,
       invertColorScheme,
+      inverted,
+      value
+    } = _props,
+    restProps = _objectWithoutProperties(_props, _excluded);
+  const resolvedActive = getSelectChipActive(activeProp, value, invertColorScheme, inverted);
+  const mergedProps = useComponentConfig('SelectChip', _objectSpread(_objectSpread({}, restProps), {}, {
+    value,
+    active: resolvedActive,
+    invertColorScheme,
+    inverted
+  }));
+  // SelectChip composes Select + MediaChip; peel chip props off merged props so the rest
+  // can flow to `<Select>` without chip-only fields leaking into the select interface.
+  const {
+      active,
+      activeBackground,
+      activeColor,
+      background,
+      color,
       numberOfLines,
       maxWidth,
       displayValue,
       size,
-      compact
+      compact,
+      borderWidth,
+      borderColor,
+      bordered,
+      borderRadius,
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutProperties(mergedProps, _excluded);
+    selectProps = _objectWithoutProperties(mergedProps, _excluded2);
   const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
-    invertColorScheme,
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
     numberOfLines,
     maxWidth,
     displayValue,
     size,
-    compact
-  }), [displayValue, invertColorScheme, numberOfLines, maxWidth, size, compact]);
+    compact,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius,
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted
+  }), [active, activeBackground, activeColor, background, color, displayValue, numberOfLines, maxWidth, size, compact, borderWidth, borderColor, bordered, borderRadius, mergedInvertColorScheme, mergedInverted]);
   return /*#__PURE__*/_jsx(Select, _objectSpread({
     ref: ref,
     SelectControlComponent: WrappedSelectChipControl,
@@ -68,8 +97,8 @@ const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
       dropdown: {
         width: 'max-content'
       }
-    }, props.styles)
-  }, props));
+    }, selectProps.styles)
+  }, selectProps));
 }));
 SelectChipComponent.displayName = 'SelectChip';
 export const SelectChip = SelectChipComponent;

package/esm/alpha/select-chip/SelectChipControl.js

@@ -1,7 +1,20 @@
 import React, { forwardRef, memo, useMemo } from 'react';
+import { getSelectChipHasValue } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { MediaChip } from '../../chips/MediaChip';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { isSelectOptionGroup } from '../select/types';
+
+/**
+ * Chip props accepted by {@link SelectChipControl} and forwarded to {@link MediaChip}.
+ * Includes selection state, layout, borders, and `displayValue` for the control label.
+ */
+
+/**
+ * SelectControlProps fields superseded by {@link SelectChipControlChipProps}.
+ * Omit is required: intersection would merge overlapping keys (e.g. `size` as SelectSize &
+ * ChipSize, `background` as responsive Box vs chip tokens) instead of replacing select-scale
+ * definitions.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -20,16 +33,26 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     maxSelectedOptionsToShow = 2,
     hiddenSelectedOptionsLabel = 'more',
     label,
+    disabled,
     compact,
     size,
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
     invertColorScheme,
+    inverted,
     numberOfLines,
-    disabled,
     maxWidth,
-    displayValue
+    displayValue,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius
   } = _ref;
   const isMultiSelect = type === 'multi';
-  const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
+  const hasValue = getSelectChipHasValue(value);
 
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
@@ -84,32 +107,36 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _opt$label2 !== void 0 ? _opt$label2 : opt === null || opt === void 0 ? void 0 : opt.description) !== null && _ref8 !== void 0 ? _ref8 : opt === null || opt === void 0 ? void 0 : opt.value) !== null && _ref7 !== void 0 ? _ref7 : placeholder) !== null && _ref6 !== void 0 ? _ref6 : null;
   }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
   const endNode = useMemo(() => {
+    // Match Chip's label color. `fg` still inverts with the chip when active uses theme inversion.
     return customEndNode !== null && customEndNode !== void 0 ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
-      color: hasValue ? 'fgInverse' : 'fg',
+      color: resolvedColor !== null && resolvedColor !== void 0 ? resolvedColor : 'fg',
       rotate: open ? 0 : 180,
       size: "xs"
     });
-  }, [customEndNode, hasValue, open]);
-  const color = useMemo(() => {
-    return hasValue ? 'fgInverse' : 'fg';
-  }, [hasValue]);
-  const background = useMemo(() => {
-    return hasValue ? 'bgInverse' : 'bgSecondary';
-  }, [hasValue]);
+  }, [customEndNode, open, resolvedColor]);
   return /*#__PURE__*/_jsx(MediaChip, {
     ref: ref,
     noScaleOnPress: true,
     accessibilityLabel: accessibilityLabel,
+    active: active,
+    activeBackground: activeBackground,
+    activeColor: activeColor,
     "aria-haspopup": ariaHaspopup,
     background: background,
+    bordered: bordered,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
     className: className,
     color: color,
     compact: compact,
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    inverted: inverted,
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onClick: () => setOpen(s => !s),
@@ -119,4 +146,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     children: labelContent
   });
 }));
+SelectChipControlComponent.displayName = 'SelectChipControl';
+
+/** Generic memo components need an explicit cast for the public polymorphic signature. */
 export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/select-chip/index.js

@@ -1,2 +1,2 @@
 export * from './SelectChip';
-export * from './SelectChipControl';
+export { SelectChipControl } from './SelectChipControl';

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
+const _excluded = ["label", "id", "Component", "activeBackground", "activeColor", "color"],
   _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "size", "styles", "classNames", "autoScrollOffset"];
 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; }
@@ -23,6 +23,7 @@ const DefaultTabComponent = _ref => {
   let {
       label = '',
       id,
+      Component: _Component,
       activeBackground,
       activeColor,
       color
@@ -47,10 +48,10 @@ const DefaultTabComponent = _ref => {
   }, [isActive]);
   return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     ref: chipRef,
+    active: isActive && !activeBackground,
     "aria-selected": isActive,
     background: isActive && activeBackground ? activeBackground : undefined,
     color: isActive && activeColor ? activeColor : color,
-    invertColorScheme: isActive && !activeBackground,
     onClick: handleClick,
     role: "tab",
     width: "max-content"

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "alignItems", "width", "height", "compact", "size", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "color", "onClick"];
+const _excluded = ["as", "alignItems", "width", "height", "compact", "size", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "active", "activeBackground", "activeColor", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "color", "onClick"];
 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; }
@@ -64,6 +64,9 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       justifyContent,
       children,
       maxWidth = chipMaxWidth,
+      active = false,
+      activeBackground,
+      activeColor,
       invertColorScheme,
       inverted,
       numberOfLines = 1,
@@ -80,9 +83,14 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       onClick
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
-  const WrapperComponent = (invertColorScheme !== null && invertColorScheme !== void 0 ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
+  const hasActiveColorOverrides = activeBackground !== undefined || activeColor !== undefined;
+  const activeUsesThemeInversion = active && !hasActiveColorOverrides;
+  const shouldInvert = Boolean(invertColorScheme !== null && invertColorScheme !== void 0 ? invertColorScheme : inverted) || activeUsesThemeInversion;
+  const WrapperComponent = shouldInvert ? InvertedThemeProvider : Fragment;
+  const resolvedBackground = active && activeBackground !== undefined ? activeBackground : background;
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
   const containerProps = {
-    background,
+    background: resolvedBackground,
     borderRadius,
     className: cx(transitionCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
@@ -107,19 +115,19 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       paddingY: paddingY,
       style: _objectSpread(_objectSpread({}, contentStyle), styles === null || styles === void 0 ? void 0 : styles.content),
       children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-        color: color,
+        color: resolvedColor,
         flexShrink: 1,
         font: font,
         numberOfLines: numberOfLines,
         children: children
       }) : children ? /*#__PURE__*/_jsx(Box, {
-        color: color,
+        color: resolvedColor,
         flexShrink: 1,
         children: children
       }) : null, end]
     });
-  }, [alignItems, classNames === null || classNames === void 0 ? void 0 : classNames.content, gap, justifyContent, maxWidth, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, paddingX, paddingY, contentStyle, styles === null || styles === void 0 ? void 0 : styles.content, start, children, color, font, numberOfLines, end]);
-  return /*#__PURE__*/_jsx(WrapperComponent, _objectSpread(_objectSpread({}, inverted ? {
+  }, [alignItems, classNames === null || classNames === void 0 ? void 0 : classNames.content, gap, justifyContent, maxWidth, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, paddingX, paddingY, contentStyle, styles === null || styles === void 0 ? void 0 : styles.content, start, children, resolvedColor, font, numberOfLines, end]);
+  return /*#__PURE__*/_jsx(WrapperComponent, _objectSpread(_objectSpread({}, shouldInvert && inverted ? {
     display: 'content'
   } : {}), {}, {
     children: onClick ? /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread(_objectSpread({

package/esm/chips/InputChip.js

@@ -1,4 +1,5 @@
-const _excluded = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
+const _excluded = ["active", "invertColorScheme", "inverted"],
+  _excluded2 = ["value", "children", "accessibilityLabel", "testID", "active", "invertColorScheme", "inverted"];
 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; }
@@ -12,18 +13,34 @@ import { Icon } from '../icons/Icon';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
+      active: activeProp,
+      invertColorScheme,
+      inverted
+    } = _props,
+    restProps = _objectWithoutProperties(_props, _excluded);
+  // Default before component config so state-aware resolvers (active borders) see the
+  // same active semantics as the rendered chip.
+  const active = activeProp !== null && activeProp !== void 0 ? activeProp : invertColorScheme === undefined && inverted === undefined ? true : false;
+  const mergedProps = useComponentConfig('InputChip', _objectSpread(_objectSpread({}, restProps), {}, {
+    active,
+    invertColorScheme,
+    inverted
+  }));
   const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove option',
-      invertColorScheme = true,
-      testID = 'input-chip'
+      testID = 'input-chip',
+      active: _active,
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutProperties(mergedProps, _excluded);
+    props = _objectWithoutProperties(mergedProps, _excluded2);
   return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
+    active: active,
     end: /*#__PURE__*/_jsx(Icon, {
       active: true,
       color: "fg",
@@ -31,7 +48,9 @@ export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       size: "xs",
       testID: testID ? "".concat(testID, "-close-icon") : 'input-chip-close-icon'
     }),
-    invertColorScheme: invertColorScheme
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted,
+    testID: testID
   }, props), {}, {
     children: children
   }));

package/esm/visualizations/chart/utils/bar.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { defaultAxisId as fallbackAxisId } from './axis';
-import { evaluateGradientAtValue } from './gradient';
+import { evaluateGradientAtValue, evaluateGradientOpacityAtValue } from './gradient';
 import { defaultTransition } from './transition';
 
 /**
@@ -869,6 +869,7 @@ export function getBars(params) {
     // Skip bars that would have zero or negative height
     if (length <= 0) return;
     let barFill = (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : defaultFill;
+    let barFillOpacity = defaultFillOpacity;
 
     // Evaluate gradient if provided (using precomputed stops)
     const seriesGradientConfig = seriesGradients.find(g => (g === null || g === void 0 ? void 0 : g.seriesId) === s.id);
@@ -887,6 +888,10 @@ export function getBars(params) {
       if (evaluatedColor) {
         barFill = evaluatedColor;
       }
+      const evaluatedOpacity = evaluateGradientOpacityAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+      if (evaluatedOpacity !== undefined) {
+        barFillOpacity = defaultFillOpacity !== undefined ? defaultFillOpacity * evaluatedOpacity : evaluatedOpacity;
+      }
     }
     allBars.push({
       seriesId: s.id,
@@ -894,6 +899,7 @@ export function getBars(params) {
       length,
       dataValue: value,
       fill: barFill,
+      fillOpacity: barFillOpacity,
       roundTop,
       roundBottom,
       shouldApplyGap,
@@ -943,7 +949,7 @@ export function getBars(params) {
     dataY: layout === 'vertical' ? bar.dataValue : categoryValue,
     origin: barOrigins[i],
     borderRadius,
-    fillOpacity: defaultFillOpacity,
+    fillOpacity: bar.fillOpacity,
     stroke: defaultStroke,
     strokeWidth: defaultStrokeWidth,
     minSize: initialBarMinSizes[i],

package/esm/visualizations/chart/utils/gradient.js

@@ -63,21 +63,15 @@ const processGradientStops = (stops, scale) => {
   }).sort((a, b) => a.offset - b.offset);
   return normalizedStops;
 };
+const GRADIENT_OFFSET_EPSILON = 1e-10;
 
 /**
- * Evaluates the color at a specific data value based on the gradient stops, ignoring opacity.
- * @param stops - The gradient stops configuration
- * @param dataValue - The data value to evaluate (for band scales, this is the index)
- * @param scale - The scale to use for value mapping (handles log scales correctly)
- * @returns The color string at this data value, or undefined if invalid
+ * Returns stop indices and blend progress for a data value.
+ * When startIndex === endIndex, use that stop directly; otherwise blend with t.
  */
-export const evaluateGradientAtValue = (stops, dataValue, scale) => {
+const getGradientStopInterpolation = (stops, dataValue, scale) => {
   if (stops.length === 0) return;
 
-  // Use srgb color space to match our linearGradient which uses srgb color space
-  // https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty
-  const colorSpace = 'srgb';
-
   // Use scale to map values to positions (handles log scales correctly)
   // For numeric scales: scale(value) returns pixel position
   // We normalize these positions to 0-1 based on the range
@@ -85,11 +79,11 @@ export const evaluateGradientAtValue = (stops, dataValue, scale) => {
   const [rangeMin, rangeMax] = Array.isArray(scaleRange) ? scaleRange : [scaleRange, scaleRange]; // fallback for band scales
 
   const rangeSpan = Math.abs(rangeMax - rangeMin);
-  if (rangeSpan === 0) return stops[0].color;
+  if (rangeSpan === 0) return [0, 0, 0];
 
   // Map dataValue through scale to get position
   const dataPosition = scale(dataValue);
-  if (dataPosition === undefined) return stops[0].color;
+  if (dataPosition === undefined) return [0, 0, 0];
 
   // Normalize to 0-1 based on range
   const normalizedValue = Math.max(0, Math.min(1, Math.abs(dataPosition - rangeMin) / rangeSpan));
@@ -98,38 +92,77 @@ export const evaluateGradientAtValue = (stops, dataValue, scale) => {
   const positions = stops.map(stop => stop.offset);
 
   // Find which segment we're in
-  if (normalizedValue < positions[0]) {
-    return stops[0].color;
-  }
-  if (normalizedValue >= positions[positions.length - 1]) {
-    return stops[stops.length - 1].color;
-  }
+  if (normalizedValue < positions[0]) return [0, 0, 0];
+  const lastIndex = stops.length - 1;
+  if (normalizedValue >= positions[lastIndex]) return [lastIndex, lastIndex, 0];
 
   // Check if normalizedValue matches any stop offset exactly (for hard transitions)
   for (let i = 0; i < stops.length; i++) {
-    if (Math.abs(normalizedValue - stops[i].offset) < 1e-10) {
+    if (Math.abs(normalizedValue - stops[i].offset) < GRADIENT_OFFSET_EPSILON) {
       // Found exact match - check if there are multiple stops at this offset (hard transition)
-      // Use the LAST color at this offset for hard transitions
+      // Use the LAST stop at this offset for hard transitions
       let lastIndexAtOffset = i;
-      while (lastIndexAtOffset + 1 < stops.length && Math.abs(stops[lastIndexAtOffset + 1].offset - stops[i].offset) < 1e-10) {
+      while (lastIndexAtOffset + 1 < stops.length && Math.abs(stops[lastIndexAtOffset + 1].offset - stops[i].offset) < GRADIENT_OFFSET_EPSILON) {
         lastIndexAtOffset++;
       }
-      return stops[lastIndexAtOffset].color;
+      return [lastIndexAtOffset, lastIndexAtOffset, 0];
     }
   }
 
-  // Find the two colors to mix based on normalized positions
+  // Find the two stops to mix based on normalized positions
   for (let i = 0; i < positions.length - 1; i++) {
     const start = positions[i];
     const end = positions[i + 1];
     if (normalizedValue >= start && normalizedValue <= end) {
-      const segmentProgress = (normalizedValue - start) / (end - start);
-      return "color-mix(in ".concat(colorSpace, ", ").concat(stops[i + 1].color, " ").concat(segmentProgress * 100, "%, ").concat(stops[i].color, ")");
+      if (end === start) return [i, i, 0];
+      const t = (normalizedValue - start) / (end - start);
+      return [i, i + 1, t];
     }
   }
 
-  // If we didn't reach any to be mixed, return the last color
-  return stops[stops.length - 1].color;
+  // If we didn't reach any to be mixed, return the last stop
+  return [lastIndex, lastIndex, 0];
+};
+
+/**
+ * Evaluates the color at a specific data value based on the gradient stops, ignoring opacity.
+ * @param stops - The gradient stops configuration
+ * @param dataValue - The data value to evaluate (for band scales, this is the index)
+ * @param scale - The scale to use for value mapping (handles log scales correctly)
+ * @returns The color string at this data value, or undefined if invalid
+ */
+export const evaluateGradientAtValue = (stops, dataValue, scale) => {
+  const interpolation = getGradientStopInterpolation(stops, dataValue, scale);
+  if (!interpolation) return;
+  const [startIndex, endIndex, t] = interpolation;
+
+  // Use srgb color space to match our linearGradient which uses srgb color space
+  // https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty
+  const colorSpace = 'srgb';
+  if (startIndex === endIndex) return stops[startIndex].color;
+
+  // Mix colors between the resolved stops
+  return "color-mix(in ".concat(colorSpace, ", ").concat(stops[endIndex].color, " ").concat(t * 100, "%, ").concat(stops[startIndex].color, ")");
+};
+
+/**
+ * Evaluates the opacity at a specific data value based on gradient stops.
+ * Returns undefined when no stops define opacity.
+ */
+export const evaluateGradientOpacityAtValue = (stops, dataValue, scale) => {
+  var _stops$startIndex$opa, _stops$endIndex$opaci;
+  if (stops.length === 0) return;
+  if (stops.every(stop => {
+    var _stop$opacity2;
+    return ((_stop$opacity2 = stop.opacity) !== null && _stop$opacity2 !== void 0 ? _stop$opacity2 : 1) === 1;
+  })) return;
+  const interpolation = getGradientStopInterpolation(stops, dataValue, scale);
+  if (!interpolation) return;
+  const [startIndex, endIndex, t] = interpolation;
+  const startOpacity = (_stops$startIndex$opa = stops[startIndex].opacity) !== null && _stops$startIndex$opa !== void 0 ? _stops$startIndex$opa : 1;
+  if (startIndex === endIndex) return startOpacity;
+  const endOpacity = (_stops$endIndex$opaci = stops[endIndex].opacity) !== null && _stops$endIndex$opaci !== void 0 ? _stops$endIndex$opaci : 1;
+  return startOpacity + (endOpacity - startOpacity) * t;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.15.0",
+  "version": "9.17.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,9 +227,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.15.0",
+    "@coinbase/cds-common": "^9.17.0",
     "@coinbase/cds-icons": "^5.21.0",
-    "@coinbase/cds-illustrations": "^4.47.0",
+    "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",