@coinbase/cds-web 9.13.0 → 9.14.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.14.0 (8/11/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support different tick label overflow- #835. [[#835](https://github.com/coinbase/cds/pull/835)]
+
 ## 9.13.0 ((8/11/2026, 09:52 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/visualizations/chart/axis/Axis.d.ts

@@ -29,6 +29,7 @@ export type AxisTickLabelComponentProps = Pick<
   | 'inset'
   | 'background'
   | 'borderRadius'
+  | 'repositionAxes'
   | 'disableRepositioning'
   | 'bounds'
   | 'styles'
@@ -39,6 +40,7 @@ export type AxisTickLabelComponentProps = Pick<
   | 'style'
 >;
 export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
+export type AxisTickLabelOverflow = 'reposition' | 'fade' | 'visible';
 export type AxisBaseProps = SharedProps & {
   /**
    * Placement of grid lines relative to each band.
@@ -138,6 +140,15 @@ export type AxisBaseProps = SharedProps & {
    * Prevents the step from being larger than this value.
    */
   tickMaxStep?: number;
+  /**
+   * How tick labels behave at the chart edges.
+   * - `reposition` — nudge labels to stay in bounds on both axes.
+   * - `fade` — add a fade effect to the labels at the edges (vertical for y-axis, horizontal for x-axis),
+   *   reposition on opposite axis (horizontal for y-axis, vertical for x-axis).
+   * - `visible` — leave labels at their natural positions with no fading.
+   * @default 'reposition'
+   */
+  tickLabelOverflow?: AxisTickLabelOverflow;
 };
 export type AxisProps = AxisBaseProps & {
   /**

package/dts/visualizations/chart/axis/Axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,cAAc,oFAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAI9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,UAG3C,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,QAAQ,GACR,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,OAAO,GACP,UAAU,GACV,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,WAAW,GACX,OAAO,CACV,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,iBAAiB,CAAC;IAC1D;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C,CAAC"}
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"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"}

package/dts/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+export type AxisTickLabelOverflowMaskProps = SharedProps &
+  PropsWithChildren<{
+    /**
+     * Fade along the chart edges for this axis (`x`: left/right, `y`: top/bottom).
+     */
+    axis: 'x' | 'y';
+  }>;
+/**
+ * Masks tick-label children so they fade at the chart/SVG outer edges
+ * without painting over other axes.
+ */
+export declare const AxisTickLabelOverflowMask: import('react').NamedExoticComponent<AxisTickLabelOverflowMaskProps>;
+//# sourceMappingURL=AxisTickLabelOverflowMask.d.ts.map

package/dts/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxisTickLabelOverflowMask.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/AxisTickLabelOverflowMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,MAAM,MAAM,8BAA8B,GAAG,WAAW,GACtD,iBAAiB,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;CACjB,CAAC,CAAC;AAEL;;;GAGG;AACH,eAAO,MAAM,yBAAyB,sEAoErC,CAAC"}

package/dts/visualizations/chart/axis/XAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA2VjB,CAAC"}
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAchB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA2WjB,CAAC"}

package/dts/visualizations/chart/axis/YAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAahB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAmVjB,CAAC"}
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAGf,MAAM,QAAQ,CAAC;AAchB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAmWjB,CAAC"}

package/dts/visualizations/chart/axis/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Axis';
+export * from './AxisTickLabelOverflowMask';
 export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';

package/dts/visualizations/chart/axis/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dts/visualizations/chart/line/ReferenceLine.d.ts

@@ -25,6 +25,7 @@ export type ReferenceLineLabelComponentProps = Pick<
   | 'inset'
   | 'background'
   | 'borderRadius'
+  | 'repositionAxes'
   | 'disableRepositioning'
   | 'styles'
   | 'classNames'

package/dts/visualizations/chart/line/ReferenceLine.d.ts.map

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

package/dts/visualizations/chart/text/ChartText.d.ts

@@ -24,6 +24,10 @@ export type TextHorizontalAlignment = 'left' | 'center' | 'right';
  * Vertical alignment options for chart text.
  */
 export type TextVerticalAlignment = 'top' | 'middle' | 'bottom';
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ */
+export type ChartTextRepositionAxes = 'x' | 'y' | 'both' | 'none';
 export type ChartTextBaseProps = SharedProps & {
   /**
    * The text color.
@@ -37,11 +41,22 @@ export type ChartTextBaseProps = SharedProps & {
   background?: string;
   /**
    * Whether the text should have an elevated appearance with a shadow.
-   * @default false
    */
   elevated?: boolean;
   /**
-   * When true, disables automatic repositioning to fit within bounds.
+   * Which axes to reposition labels on when they would overflow bounds.
+   * @default 'both'
+   */
+  repositionAxes?: ChartTextRepositionAxes;
+  /**
+   * Disables automatic repositioning to fit within bounds.
+   *
+   * @note `true` is equivalent to `repositionAxes='none'`, `false`/omit equals `repositionAxes='both'`.
+   *
+   * @deprecated Use `repositionAxes` instead
+   *
+   * This will be removed in a future major release.
+   * @deprecationExpectedRemoval v11
    */
   disableRepositioning?: boolean;
   /**
@@ -82,12 +97,12 @@ export type ChartTextProps = ChartTextBaseProps &
     children: ChartTextChildren;
     /**
      * The desired x position in SVG pixels.
-     * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
+     * @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
      */
     x: number;
     /**
      * The desired y position in SVG pixels.
-     * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
+     * @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
      */
     y: number;
     /**

package/dts/visualizations/chart/text/ChartText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,gBAAgB,CAAC;AAGhE,KAAK,2BAA2B,GAC5B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAC5D,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,GACT,2BAA2B,GAC3B,2BAA2B,EAAE,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GAAG;IACnF;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACtC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH,CAAC;AAkCJ,eAAO,MAAM,SAAS,4CA4MrB,CAAC"}
+{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"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"}

package/esm/visualizations/chart/axis/AxisTickLabelOverflowMask.js

@@ -0,0 +1,99 @@
+import { memo, useId } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickLabelOverflowFadeWidth = 30;
+/**
+ * Masks tick-label children so they fade at the chart/SVG outer edges
+ * without painting over other axes.
+ */
+export const AxisTickLabelOverflowMask = /*#__PURE__*/memo(_ref => {
+  let {
+    axis,
+    children,
+    testID
+  } = _ref;
+  const {
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const reactId = useId();
+  const maskId = "".concat(reactId, "-mask");
+  const fadeWidth = axisTickLabelOverflowFadeWidth;
+  const isXAxis = axis === 'x';
+  if (chartWidth <= 0 || chartHeight <= 0) {
+    return children;
+  }
+  const fadeX = Math.min(fadeWidth, chartWidth / 2) / chartWidth;
+  const fadeY = Math.min(fadeWidth, chartHeight / 2) / chartHeight;
+  return /*#__PURE__*/_jsxs("g", {
+    "data-testid": testID,
+    children: [/*#__PURE__*/_jsxs("defs", {
+      children: [isXAxis ? /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: "".concat(reactId, "-fade"),
+        x1: 0,
+        x2: chartWidth,
+        y1: 0,
+        y2: 0,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: 0,
+          stopColor: "#fff",
+          stopOpacity: 0
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: fadeX,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1 - fadeX,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1,
+          stopColor: "#fff",
+          stopOpacity: 0
+        })]
+      }) : /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: "".concat(reactId, "-fade"),
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: chartHeight,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: 0,
+          stopColor: "#fff",
+          stopOpacity: 0
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: fadeY,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1 - fadeY,
+          stopColor: "#fff",
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: 1,
+          stopColor: "#fff",
+          stopOpacity: 0
+        })]
+      }), /*#__PURE__*/_jsx("mask", {
+        height: chartHeight,
+        id: maskId,
+        maskUnits: "userSpaceOnUse",
+        width: chartWidth,
+        x: 0,
+        y: 0,
+        children: /*#__PURE__*/_jsx("rect", {
+          fill: "url(#".concat(reactId, "-fade)"),
+          height: chartHeight,
+          width: chartWidth,
+          x: 0,
+          y: 0
+        })
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: children
+    })]
+  });
+});

package/esm/visualizations/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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; }
@@ -19,6 +19,7 @@ import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
 import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;
@@ -54,7 +55,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
       testID = 'x-axis',
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -68,6 +70,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     getAxisBounds,
     drawingArea
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const xScale = getXScale(axisId);
   const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -201,11 +204,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
           color: 'var(--color-fgMuted)',
           verticalAlignment: 'middle',
           style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
-          horizontalAlignment: 'center'
+          horizontalAlignment: 'center',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'y' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel, fadeTickLabels, tickLabelOverflow]);
   if (!xScale || !axisBounds || !drawingArea) return;
   const labelX = axisBounds.x + axisBounds.width / 2;
   const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
@@ -251,12 +255,21 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
           style: styles === null || styles === void 0 ? void 0 : styles.gridLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "x",
+      testID: "".concat(testID, "-tick-label-overflow"),
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
       LabelComponent: TickLabelComponent,
       labels: chartTextData,
       minGap: minTickLabelGap
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
+    })), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
       "data-testid": "".concat(testID, "-tick-marks"),
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -303,9 +316,9 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       strokeWidth: 1,
       style: styles === null || styles === void 0 ? void 0 : styles.line
     }), label && /*#__PURE__*/_jsx(ChartText, {
-      disableRepositioning: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
       horizontalAlignment: "center",
+      repositionAxes: "none",
       style: styles === null || styles === void 0 ? void 0 : styles.label,
       testID: "".concat(testID, "-label"),
       verticalAlignment: "middle",

package/esm/visualizations/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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; }
@@ -19,6 +19,7 @@ import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
 import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -52,7 +53,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
       testID = 'y-axis',
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -66,6 +68,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     getAxisBounds,
     drawingArea
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -195,11 +198,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           color: 'var(--color-fgMuted)',
           verticalAlignment: 'middle',
           style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
-          horizontalAlignment: position === 'left' ? 'right' : 'left'
+          horizontalAlignment: position === 'left' ? 'right' : 'left',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'x' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel, fadeTickLabels, tickLabelOverflow]);
   if (!yScale || !axisBounds || !drawingArea) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
@@ -245,12 +249,21 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           style: styles === null || styles === void 0 ? void 0 : styles.gridLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "y",
+      testID: "".concat(testID, "-tick-label-overflow"),
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
       LabelComponent: TickLabelComponent,
       labels: chartTextData,
       minGap: minTickLabelGap
-    }), showTickMarks && /*#__PURE__*/_jsx("g", {
+    })), showTickMarks && /*#__PURE__*/_jsx("g", {
       "data-testid": "".concat(testID, "-tick-marks"),
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -303,9 +316,9 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         transform: "rotate(".concat(position === 'left' ? -90 : 90, "deg)")
       },
       children: /*#__PURE__*/_jsx(ChartText, {
-        disableRepositioning: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
         horizontalAlignment: "center",
+        repositionAxes: "none",
         style: styles === null || styles === void 0 ? void 0 : styles.label,
         testID: "".concat(testID, "-label-text"),
         verticalAlignment: "middle",

package/esm/visualizations/chart/axis/index.js

@@ -1,5 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './Axis';
+export * from './AxisTickLabelOverflowMask';
 export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -41,13 +41,13 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
     initial: false,
     transition: transition,
     children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
-      disableRepositioning: true,
       background: background,
       borderRadius: borderRadius,
       color: color,
       elevated: elevated,
       font: font,
       inset: inset,
+      repositionAxes: "none",
       verticalAlignment: verticalAlignment,
       y: transition ? 0 : y
     }, chartTextProps), {}, {

package/esm/visualizations/chart/text/ChartText.js

@@ -23,6 +23,10 @@ import { accessoryFadeTransitionDuration } from '../utils/transition';
 /**
  * Vertical alignment options for chart text.
  */
+
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Get text anchor based on horizontal alignment.
@@ -60,7 +64,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     verticalAlignment = 'middle',
     dx,
     dy,
-    disableRepositioning,
+    disableRepositioning = false,
+    repositionAxes = disableRepositioning ? 'none' : 'both',
     bounds,
     opacity,
     testID,
@@ -92,7 +97,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
   }), [chartWidth, chartHeight]);
   const textRef = useRef(null);
   const [textBBox, setTextBBox] = useState(null);
-  const isDimensionsReady = disableRepositioning || textRef.current !== null;
+  const isDimensionsReady = repositionAxes === 'none' || textRef.current !== null;
   const backgroundRectDimensions = useMemo(() => {
     if (!textBBox) {
       return null;
@@ -106,12 +111,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     };
   }, [textBBox, insetInput]);
   const overflowAmount = useMemo(() => {
-    if (disableRepositioning) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
+    const repositionX = repositionAxes === 'both' || repositionAxes === 'x';
+    const repositionY = repositionAxes === 'both' || repositionAxes === 'y';
     const parentBounds = bounds !== null && bounds !== void 0 ? bounds : fullChartBounds;
     if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
@@ -119,23 +120,27 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
         y: 0
       };
     }
-    let x = 0;
-    let y = 0;
-    if (backgroundRectDimensions.x < parentBounds.x) {
-      x = parentBounds.x - backgroundRectDimensions.x; // positive = shift right
-    } else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
-      x = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width); // negative = shift left
+    let nextX = 0;
+    let nextY = 0;
+    if (repositionX) {
+      if (backgroundRectDimensions.x < parentBounds.x) {
+        nextX = parentBounds.x - backgroundRectDimensions.x;
+      } else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
+        nextX = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width);
+      }
     }
-    if (backgroundRectDimensions.y < parentBounds.y) {
-      y = parentBounds.y - backgroundRectDimensions.y; // positive = shift down
-    } else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
-      y = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height); // negative = shift up
+    if (repositionY) {
+      if (backgroundRectDimensions.y < parentBounds.y) {
+        nextY = parentBounds.y - backgroundRectDimensions.y;
+      } else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
+        nextY = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height);
+      }
     }
     return {
-      x,
-      y
+      x: nextX,
+      y: nextY
     };
-  }, [backgroundRectDimensions, fullChartBounds, bounds, disableRepositioning]);
+  }, [backgroundRectDimensions, fullChartBounds, bounds, repositionAxes]);
 
   // Compose the final reported rect including any overflow translation applied
   const reportedRect = useMemo(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.13.0",
+  "version": "9.14.0",
   "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.13.0",
+    "@coinbase/cds-common": "^9.14.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.47.0",
     "@coinbase/cds-lottie-files": "^3.3.4",