@coinbase/cds-web 9.16.0 → 9.17.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.17.1 (8/17/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: restore Select field press target after chrome padding adjustments in recent tshirt size work.
+
+## 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

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AA+ClB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AAqiBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AAyDlB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AAkiBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/dts/controls/InputStack.d.ts

@@ -76,6 +76,12 @@ export type InputStackBaseProps = SharedProps &
      * @default 'bg'
      */
     inputBackground?: ThemeVars.Color;
+    /**
+     * Press handler for the bordered field chrome only (not the label or helper).
+     * Use for trigger-style controls so padding on the field remains tappable.
+     * Do not use for text fields — the native input must stay the focus target.
+     */
+    onFieldPress?: React.MouseEventHandler;
   };
 export type InputStackProps = Omit<
   BoxProps<BoxDefaultElement>,

package/dts/controls/InputStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAoDlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IAC3C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,GAAG;IACpB,UAAU,CAAC,EAAE;QACX,6BAA6B;QAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iCAAiC;QACjC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,yCAAyC;QACzC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,iCAAiC;QACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,UAAU,6FA0ItB,CAAC"}
+{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAoDlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IAC3C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACxC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,GAAG;IACpB,UAAU,CAAC,EAAE;QACX,6BAA6B;QAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iCAAiC;QACjC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,yCAAyC;QACzC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,iCAAiC;QACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,UAAU,6FA4ItB,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/DefaultSelectControl.js

@@ -38,6 +38,16 @@ const multiSelectVerticalSpaceVar = {
 // Multi-select value chips always use the compact `xs` size (even at size `l`) so several chips —
 // and a stacked inside label — stay within the field's natural height.
 const multiSelectValueChipSize = 'xs';
+
+// Inner control stays the tab stop but must not paint its own hover/press. The
+// field chrome (InputStack Interactable) owns that look so padding and content
+// share one press treatment instead of double-dimming.
+const inertInnerBlendStyles = {
+  hoveredBackground: 'rgba(0, 0, 0, 0)',
+  hoveredOpacity: 1,
+  pressedBackground: 'rgba(0, 0, 0, 0)',
+  pressedOpacity: 1
+};
 const noFocusOutlineCss = "noFocusOutlineCss-n1gl6kcn";
 const selectedOptionChipContentCss = "selectedOptionChipContentCss-s1kle8pq";
 const variantColor = {
@@ -285,7 +295,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     "aria-readonly": readOnly,
     as: role === 'combobox' ? 'div' : 'button',
     background: "transparent",
-    blendStyles: interactableBlendStyles,
+    blendStyles: inertInnerBlendStyles,
     borderWidth: 0,
     className: cx(noFocusOutlineCss, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode),
     disabled: disabled,
@@ -293,7 +303,6 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     flexShrink: 1,
     focusable: false,
     minWidth: 0,
-    onClick: handleToggleOpen,
     onKeyDown: onKeyDown,
     role: role,
     style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
@@ -359,26 +368,21 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         children: [valueNode, contentNode]
       })
     })]
-  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, readOnly, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, insideHorizontalLabel, insideVerticalLabel, inlineLabelNode, align, valueNode, contentNode, handleToggleOpen]);
-  const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, readOnly, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, insideHorizontalLabel, insideVerticalLabel, inlineLabelNode, align, valueNode, contentNode]);
+  const endNode = useMemo(() => /*#__PURE__*/_jsx(HStack, {
     "aria-hidden": true,
+    alignItems: "center",
+    alignSelf: "stretch",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode,
     flexShrink: 0,
-    onClick: handleToggleOpen,
-    tabIndex: -1,
-    children: /*#__PURE__*/_jsx(HStack, {
-      alignItems: "center",
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode,
-      flexGrow: 1,
-      height: "100%",
-      justifyContent: insideVerticalLabel ? 'flex-end' : undefined,
-      paddingStart: 2,
-      style: styles === null || styles === void 0 ? void 0 : styles.controlEndNode,
-      children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
-        color: "fg",
-        rotate: open ? 0 : 180
-      })
+    justifyContent: insideVerticalLabel ? 'flex-end' : undefined,
+    paddingStart: 2,
+    style: styles === null || styles === void 0 ? void 0 : styles.controlEndNode,
+    children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
+      color: "fg",
+      rotate: open ? 0 : 180
     })
-  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, insideVerticalLabel, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open, handleToggleOpen]);
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, insideVerticalLabel, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open]);
   const inputStackStyles = useMemo(() => {
     let verticalSpaceVar;
     if (insideVerticalLabel) {
@@ -398,7 +402,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       paddingRight: 'var(--space-2)'
     };
   }, [insideVerticalLabel, resolvedSize, isMultiSelect, hasValue]);
-  return /*#__PURE__*/_jsx(InputStack, _objectSpread({
+  return /*#__PURE__*/_jsx(InputStack, _objectSpread(_objectSpread({
     ref: ref,
     blendStyles: interactableBlendStyles,
     borderRadius: borderRadius,
@@ -417,7 +421,9 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       input: inputStackStyles
     },
     variant: variant
-  }, props));
+  }, props), {}, {
+    onFieldPress: handleToggleOpen
+  }));
 }));
 export const DefaultSelectControl = DefaultSelectControlComponent;
 import "./DefaultSelectControl.css";

package/esm/controls/InputStack.js

@@ -1,4 +1,4 @@
-const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "focusedBorderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles", "inputBackground", "className", "style", "classNames", "styles"];
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "focusedBorderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles", "inputBackground", "onFieldPress", "className", "style", "classNames", "styles"];
 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; }
@@ -55,6 +55,7 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       labelVariant = 'outside',
       blendStyles,
       inputBackground = 'bg',
+      onFieldPress,
       className,
       style,
       classNames,
@@ -122,6 +123,7 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
           className: cx(baseCss, focused && persistedFocusCss, classNames === null || classNames === void 0 ? void 0 : classNames.input),
           disabled: disabled,
           height: height,
+          onClick: disabled ? undefined : onFieldPress,
           style: _objectSpread(_objectSpread({}, inputAreaStyles), styles === null || styles === void 0 ? void 0 : styles.input),
           testID: "input-interactable-area",
           children: [!!focused && !!enableColorSurge && /*#__PURE__*/_jsx(ColorSurge, {

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.16.0",
+  "version": "9.17.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.16.0",
+    "@coinbase/cds-common": "^9.17.1",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",