@coinbase/cds-mobile 9.15.0 → 9.16.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,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;AAgDJ,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,KAAwB,MAAM,OAAO,CAAC;AAI7C,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;AAI7B,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;AAuHJ,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,14 +1,58 @@
 import React from 'react';
 import type { View } from 'react-native';
+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 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<View>;
-    },
+  props: SelectChipControlProps<Type, SelectOptionValue> & {
+    ref?: React.Ref<View>;
+  },
 ) => 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,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA0JxD,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,IAAI,CAAC,CAAC;CACvB,KACA,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,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;;;;GAIG;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;AAmK7B,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,IAAI,CAAC,CAAC;CACvB,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.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -16,11 +16,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":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA+B3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,GAClB,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAoFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAgC3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,GAClB,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAoFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/Chip.d.ts

@@ -13,6 +13,9 @@ export declare const Chip: React.NamedExoticComponent<
       start?: React.ReactNode;
       end?: React.ReactNode;
       maxWidth?: import('react-native').DimensionValue;
+      active?: boolean;
+      activeBackground?: import('../styles/styleProps').StyleProps['background'];
+      activeColor?: import('../styles/styleProps').StyleProps['color'];
       inverted?: boolean;
       invertColorScheme?: boolean;
       compact?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAiBpC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;YAuDX,CAAN;eAEM,CAAH;;;UArDK,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA0FrB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAiBpC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;YAuGP,CAAP;eAGmB,CAAC;;;UAtGf,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EAwGrB,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -1,6 +1,7 @@
 import { type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
 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 { PressableProps } from '../system/Pressable';
 export type ChipSize = 'xs' | 's';
 export type ChipBaseProps = SharedProps &
@@ -17,18 +18,50 @@ export type ChipBaseProps = SharedProps &
      * @default 200
      */
     maxWidth?: DimensionValue;
+    /**
+     * 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?: StyleProps['background'];
+    /**
+     * 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,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GACjF,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,cAAc,CAAC;IAC1B;;;;;;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,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sBAAsB;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,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,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GACjF,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,cAAc,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5C;;;;;;;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,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sBAAsB;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,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,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA8BF,CAAC"}
+{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA6CF,CAAC"}

package/dts/chips/MediaChip.d.ts

@@ -10,6 +10,9 @@ export declare const MediaChip: import('react').NamedExoticComponent<
       start?: React.ReactNode;
       end?: React.ReactNode;
       maxWidth?: import('react-native').DimensionValue;
+      active?: boolean;
+      activeBackground?: import('../styles/styleProps').StyleProps['background'];
+      activeColor?: import('../styles/styleProps').StyleProps['color'];
       inverted?: boolean;
       invertColorScheme?: boolean;
       compact?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,SAAS,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;YAmE0a,CAAC;eAAkE,CAAC;;;UA/D5f,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA8DrB,CAAC"}
+{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,SAAS,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;YAmEo7D,CAAC;eAAkE,CAAC;;;UA/DtgE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA8DrB,CAAC"}

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

@@ -1,12 +1,30 @@
 const _excluded = ["ref"],
-  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+  _excluded2 = ["active", "invertColorScheme", "inverted", "value"],
+  _excluded3 = ["active", "activeBackground", "activeColor", "background", "color", "numberOfLines", "maxWidth", "displayValue", "size", "compact", "borderWidth", "borderColor", "bordered", "borderRadius", "invertColorScheme", "inverted"];
 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 React, { memo, useCallback } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { 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';
+
+// TODO(CDS-2544): SelectChipBaseProps should also compose SelectBaseProps.
+// https://linear.app/coinbase/issue/CDS-2544/selectchipbaseprops-should-compose-selectbaseprops
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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(chipProps) {
+  return /*#__PURE__*/memo(controlProps => {
+    // 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, _extends({}, _extends({}, controlProps, chipProps)));
+  });
+}
+
 /**
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
@@ -16,33 +34,67 @@ const SelectChipComponent = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  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 = _objectWithoutPropertiesLoose(_props, _excluded2);
+  const resolvedActive = getSelectChipActive(activeProp, value, invertColorScheme, inverted);
+  const mergedProps = useComponentConfig('SelectChip', _extends({}, 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 = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  // Select doesn't pass the chip-specific props (size/compact/displayValue/etc.) down to the
-  // control, so they're injected here. They're listed AFTER the `controlProps` spread so the
-  // chip-level values win — matching the web SelectChip wrapper.
-  const SelectChipControlComponent = useCallback(controlProps => {
-    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, controlProps, {
-      compact: compact,
-      displayValue: displayValue,
-      invertColorScheme: invertColorScheme,
-      maxWidth: maxWidth,
-      numberOfLines: numberOfLines,
-      size: size
-    }));
-  }, [displayValue, invertColorScheme, maxWidth, numberOfLines, size, compact]);
+    selectProps = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
+  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
+    numberOfLines,
+    maxWidth,
+    displayValue,
+    size,
+    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, _extends({
     ref: ref,
-    SelectControlComponent: SelectChipControlComponent
-  }, props));
+    SelectControlComponent: WrappedSelectChipControl
+  }, selectProps));
 });
 SelectChipComponent.displayName = 'SelectChip';
 export const SelectChip = SelectChipComponent;

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

@@ -1,7 +1,19 @@
 import React, { 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 Box vs chip tokens) instead of replacing select-scale definitions.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
   let {
@@ -22,13 +34,23 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     label,
     compact,
     size,
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
     invertColorScheme,
+    inverted,
     numberOfLines,
     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)
@@ -83,30 +105,34 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt == null ? void 0 : opt.label) != null ? _opt$label2 : opt == null ? void 0 : opt.description) != null ? _ref8 : opt == null ? void 0 : opt.value) != null ? _ref7 : placeholder) != null ? _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 : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
-      color: hasValue ? 'fgInverse' : 'fg',
+      color: resolvedColor != null ? resolvedColor : 'fg',
       rotate: open ? 0 : 180,
       size: "xs"
     });
-  }, [customEndNode, open, hasValue]);
-  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,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
+    active: active,
+    activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
+    bordered: bordered,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
     color: color,
     compact: compact,
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    inverted: inverted,
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
@@ -115,4 +141,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     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/__stories__/AlphaSelectChip.stories.js

@@ -217,7 +217,7 @@ export const MultiSelectWithAssets = () => {
     value: value
   });
 };
-export const InvertColorScheme = () => {
+export const Active = () => {
   const exampleOptions = [{
     value: '1',
     label: 'Option 1'
@@ -231,7 +231,7 @@ export const InvertColorScheme = () => {
     borderRadius: 200,
     padding: 2,
     children: /*#__PURE__*/_jsx(SelectChip, {
-      invertColorScheme: true,
+      active: true,
       onChange: setValue,
       options: exampleOptions,
       placeholder: "Choose an option",
@@ -587,8 +587,8 @@ const SelectChipScreen = () => {
       title: "Multi-Select with Assets",
       children: /*#__PURE__*/_jsx(MultiSelectWithAssets, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Invert Color Scheme",
-      children: /*#__PURE__*/_jsx(InvertColorScheme, {})
+      title: "Active",
+      children: /*#__PURE__*/_jsx(Active, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Empty Options",
       children: /*#__PURE__*/_jsx(EmptyOptions, {})

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 = ["ref"],
   _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "size", "styles", "autoScrollOffset"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -32,9 +32,9 @@ const DefaultTabComponent = _ref => {
     accessibilityState: {
       selected: isActive
     },
+    active: isActive && !activeBackground,
     background: isActive && activeBackground ? activeBackground : undefined,
     color: isActive && activeColor ? activeColor : color,
-    invertColorScheme: isActive && !activeBackground,
     onPress: handlePress
   }, tabProps, {
     children: label

package/esm/chips/Chip.js

@@ -1,8 +1,8 @@
 const _excluded = ["ref"],
-  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
+  _excluded2 = ["alignSelf", "children", "start", "end", "active", "activeBackground", "activeColor", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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 React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -44,6 +44,9 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       children,
       start,
       end,
+      active = false,
+      activeBackground,
+      activeColor,
       invertColorScheme,
       inverted,
       maxWidth = chipMaxWidth,
@@ -69,14 +72,20 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       font = sizeConfig.font
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
+  const hasActiveColorOverrides = activeBackground !== undefined || activeColor !== undefined;
+  const activeUsesThemeInversion = active && !hasActiveColorOverrides;
+  const shouldInvert = Boolean(invertColorScheme != null ? invertColorScheme : inverted) || activeUsesThemeInversion;
+  const WrapperComponent = shouldInvert ? InvertedThemeProvider : Fragment;
+  const resolvedBackground = active && activeBackground !== undefined ? activeBackground : background;
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const containerProps = {
     testID,
-    background,
+    background: resolvedBackground,
     borderRadius,
     ref,
     alignSelf,
-    style: [style, styles == null ? void 0 : styles.root]
+    style: containerStyle
   };
   const content = /*#__PURE__*/_jsxs(HStack, {
     alignItems: alignItems,
@@ -93,13 +102,13 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
     style: [contentStyle, styles == null ? void 0 : styles.content],
     testID: testID ? testID + "-content" : undefined,
     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]

package/esm/chips/InputChip.js

@@ -1,5 +1,6 @@
 const _excluded = ["ref"],
-  _excluded2 = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
+  _excluded2 = ["active", "invertColorScheme", "inverted"],
+  _excluded3 = ["value", "children", "accessibilityLabel", "testID", "active", "invertColorScheme", "inverted"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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 React, { memo } from 'react';
@@ -12,18 +13,33 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
+      active: activeProp,
+      invertColorScheme,
+      inverted
+    } = _props,
+    restProps = _objectWithoutPropertiesLoose(_props, _excluded2);
+  // Default before component config so state-aware resolvers (active borders) see the
+  // same active semantics as the rendered chip.
+  const active = activeProp != null ? activeProp : invertColorScheme === undefined && inverted === undefined ? true : false;
+  const mergedProps = useComponentConfig('InputChip', _extends({}, restProps, {
+    active,
+    invertColorScheme,
+    inverted
+  }));
   const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove " + children : 'Remove option',
-      invertColorScheme = true,
-      testID = 'input-chip'
+      testID = 'input-chip',
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   return /*#__PURE__*/_jsx(MediaChip, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
+    active: active,
     end: /*#__PURE__*/_jsx(Icon, {
       active: true,
       color: "fg",
@@ -31,7 +47,9 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       size: "xs",
       testID: testID ? testID + "-close-icon" : 'input-chip-close-icon'
     }),
-    invertColorScheme: invertColorScheme
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted,
+    testID: testID
   }, props, {
     children: children
   }));

package/esm/chips/__stories__/Chip.stories.js

@@ -107,9 +107,9 @@ const ChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default",
     children: /*#__PURE__*/_jsx(ChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(ChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Size xs",

package/esm/chips/__stories__/MediaChip.stories.js

@@ -81,9 +81,9 @@ const MediaChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default (Automatic Spacing)",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Compact",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.15.0",
+  "version": "9.16.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,9 +218,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.15.0",
+    "@coinbase/cds-common": "^9.16.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-native": "^0.10.5",