@automattic/charts 4.9.0 → 4.11.0

package/dist/index.css

@@ -1,4 +1,4 @@
-:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
   --a8c-charts-color-series-1: var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)));
   --a8c-charts-color-grid: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   --a8c-charts-color-axis-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -37,10 +37,12 @@
   --a8c-charts-border-radius-leaderboard-bar: 9999px;
   --a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md, 12px);
   --a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs, 4px);
+  --a8c-charts-dimension-legend-column-gap: var(--wpds-dimension-gap-lg, 16px);
+  --a8c-charts-dimension-legend-row-gap: var(--wpds-dimension-gap-sm, 8px);
 }
 
 @media (forced-colors: active) {
-  :where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+  :where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
     --a8c-charts-color-label-axis: CanvasText;
     --a8c-charts-color-grid: GrayText;
     --a8c-charts-color-axis-x: GrayText;
@@ -51,6 +53,11 @@
   align-self: stretch;
 }
 
+.a8ccharts-04TogW-legend--horizontal {
+  column-gap: var(--a8c-charts-dimension-legend-column-gap);
+  row-gap: var(--a8c-charts-dimension-legend-row-gap);
+}
+
 .a8ccharts-04TogW-legend-item {
   font-size: var(--wpds-typography-font-size-md, 13px);
 }
@@ -428,6 +435,11 @@
   position: relative;
 }
 
+.a8ccharts-mGEVca-bar-container:focus-visible {
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
+
 .a8ccharts-mGEVca-funnel-bar {
   border-radius: var(--a8c-charts-border-radius-bar) var(--a8c-charts-border-radius-bar) 0 0;
   width: 100%;
@@ -478,6 +490,43 @@
 
 .a8ccharts-8hS2IW-container .google-visualization-tooltip {
   white-space: nowrap;
+  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
+  background-color: var(--a8c-charts-color-surface);
+  color: var(--a8c-charts-color-label);
+  border-radius: var(--wpds-border-radius-md, 4px);
+  font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-typography-font-size-sm, 12px);
+  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+  pointer-events: none;
+  border: 0;
+  min-width: fit-content;
+  line-height: 1.4;
+}
+
+@media (forced-colors: active) {
+  .a8ccharts-8hS2IW-container .google-visualization-tooltip {
+    border: var(--wpds-border-width-xs, 1px) solid CanvasText;
+  }
+}
+
+.a8ccharts-8hS2IW-container .google-visualization-tooltip-item-list {
+  margin: 0;
+  padding: 0;
+}
+
+.a8ccharts-8hS2IW-container .google-visualization-tooltip .google-visualization-tooltip-item-list .google-visualization-tooltip-item {
+  margin: 0;
+  padding: 0;
+}
+
+.a8ccharts-8hS2IW-container .google-visualization-tooltip .google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child {
+  padding-block-end: var(--wpds-dimension-padding-md, 12px);
+}
+
+.a8ccharts-8hS2IW-container .google-visualization-tooltip-item span {
+  color: inherit !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
 }
 .a8ccharts-O3YMOW-heatmap-chart {
   isolation: isolate;
@@ -507,7 +556,7 @@
 
 .a8ccharts-O3YMOW-heatmap-chart__grid:focus-visible {
   outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: 2px;
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
   border-radius: var(--wpds-border-radius-sm, 2px);
 }
 
@@ -770,6 +819,12 @@
   inset: 0;
 }
 
+.a8ccharts-GovfoW-rowItem {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  display: grid;
+}
+
 .a8ccharts-GovfoW-row {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
@@ -890,6 +945,10 @@
   stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
 }
+.a8ccharts-gnszbG-pie-chart {
+  isolation: isolate;
+}
+
 .a8ccharts-gnszbG-pie-chart__plot {
   position: relative;
 }
@@ -918,6 +977,10 @@
 .a8ccharts-gnszbG-pie-chart__label-text--white {
   fill: #fff;
 }
+.a8ccharts-YtTOxW-pie-semi-circle-chart {
+  isolation: isolate;
+}
+
 .a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
   position: relative;
 }

package/dist/index.d.cts

@@ -32,7 +32,7 @@ type LegendShapeRenderProps<Data, Output> = {
 };
 type LegendShape<Data, Output> = 'rect' | 'circle' | 'line' | FC<LegendShapeRenderProps<Data, Output>> | ComponentClass<LegendShapeRenderProps<Data, Output>>;
 type GoogleDataTableColumnType = 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'timeofday';
-declare enum GoogleDataTableColumnRoleType {
+export declare enum GoogleDataTableColumnRoleType {
   annotation = "annotation",
   annotationText = "annotationText",
   certainty = "certainty",
@@ -328,9 +328,15 @@ type ChartTheme = {
    *
    * `fontFamily: 'inherit'` is load-bearing here — it overrides the font stack
    * `buildChartTheme` injects inline on SVG `<text>`.
+   *
+   * Give `fontSize` in pixels (`12` or `'12px'`). Margins and pie labels cannot measure `rem`, `em`, `%` or `var()`, so they use the default size and labels can clip (CHARTS-303). An invalid size is dropped.
    */
   svgLabelSmall?: Omit<TextProps, 'fill'>;
-  /** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
+  /**
+   * Styles for large SVG text (eg. axis titles), passed through to the XYChart theme.
+   *
+   * Give `fontSize` in pixels, as for `svgLabelSmall`.
+   */
   svgLabelBig?: TextProps;
   annotationStyles?: ThemeAnnotationStyles;
   /** LeaderboardChart specific settings */
@@ -574,6 +580,8 @@ type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
    */
   shapeStyles?: LegendShapeStyles;
 };
+/** Names a comparison series' legend item after the label of the series it is compared with. */
+type ComparisonItemLabel = (seriesLabel: string) => string;
 /**
  * Legend config for charts built from `SeriesData` (line, bar, area). Adds `collapseGroups` on top
  * of the shared config. It is intentionally absent from the base `ChartLegendConfig` so point-based
@@ -594,6 +602,11 @@ type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
    * Pass a string to replace the default label.
    */
   comparisonItem?: boolean | string;
+  /**
+   * Append one static item per comparison series instead, named by calling this with the label
+   * of the series it is compared with, and left out while that series is hidden.
+   */
+  comparisonSeriesItems?: ComparisonItemLabel;
 };
 /**
  * Initial visibility options for charts built from labelled series.
@@ -622,6 +635,10 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
    * Additional CSS class name for the chart container
    */
   className?: string;
+  /**
+   * Accessible name of the chart. Name it after what it shows, and give each chart on a page a different name. Each chart type has a localized default, such as "Line chart".
+   */
+  ariaLabel?: string;
   /**
    * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
    */
@@ -761,10 +778,12 @@ type BaseLegendItem = {
   seriesLabels?: string[];
   /** Set to false for a static item that cannot be toggled or dimmed. */
   interactive?: boolean;
+  /** Label of the series this static item describes; the item is left out while it is hidden. */
+  describesSeries?: string;
 };
 //#endregion
 //#region src/components/legend/legend.d.ts
-declare const Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
+export declare const Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
   items?: BaseLegendItem[];
   chartId?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
@@ -788,7 +807,9 @@ interface ChartLegendOptions {
    * `options.type === 'comparison'`. Skipped when that series already has its own
    * item. Pass a string to replace the default label.
    */
-  comparisonItem?: boolean | string;
+  comparisonItem?: SeriesChartLegendConfig['comparisonItem'];
+  /** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
+  comparisonSeriesItems?: SeriesChartLegendConfig['comparisonSeriesItems'];
 }
 /**
  * Hook to transform chart data into legend items
@@ -797,7 +818,7 @@ interface ChartLegendOptions {
  * @param legendShape - The shape type for legend items (string literal or React component)
  * @return Array of legend items ready for display
  */
-declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
+export declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
 //#endregion
 //#region src/charts/private/chart-instance-context/chart-instance-context.d.ts
 interface ChartInstanceRef {
@@ -908,8 +929,6 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   position?: 'start' | 'end';
 };
 interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
-  /** Accessible name of the chart. Defaults to a localized "Line chart". */
-  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -965,8 +984,6 @@ type TooltipDatum = {
 //#endregion
 //#region src/charts/area-chart/types.d.ts
 interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
-  /** Accessible name of the chart. Defaults to a localized "Area chart". */
-  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1076,8 +1093,6 @@ type BandHighlightSelection = {
   height: number;
 };
 interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
-  /** Accessible name of the chart. Defaults to a localized "Bar chart". */
-  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1234,7 +1249,7 @@ interface TooltipRenderProps {
 /**
  * Props for the ConversionFunnelChart component
  */
-interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'animation'> {
+interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'animation' | 'ariaLabel'> {
   /** Main conversion rate to highlight */
   mainRate: number;
   /** Change indicator (e.g., +2%, -1.5%) */
@@ -1294,7 +1309,7 @@ interface GeoChartError {
   detailedMessage?: string;
   options?: Record<string, unknown>;
 }
-interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'width' | 'height'> {
+interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'ariaLabel' | 'width' | 'height'> {
   /**
    * Data in Google Charts native format for maximum flexibility.
    * First row contains column headers, subsequent rows contain data.
@@ -1413,8 +1428,6 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
    * group past the edge, Page Up/Down by one group. Default `grid`.
    */
   keyboardNavigation?: 'grid' | 'calendar';
-  /** Accessible name of the grid. Defaults to a localized "Heatmap chart". */
-  ariaLabel?: string;
   /** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
   compact?: boolean;
   /** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */
@@ -1443,7 +1456,7 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   /** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
   minCellHeight?: number;
   /**
-   * Color the cell scale is built from, deepened at the highest value toward 9:1
+   * Color the cell scale is built from, deepened at the highest value toward 6:1
    * against the background. Defaults to the first series palette slot,
    * `--a8c-charts-color-series-1`.
    */
@@ -1533,7 +1546,7 @@ declare const HeatmapChartResponsive: FC<HeatmapChartProps & ResponsiveConfig> &
  * @param options - Grid shape, plus the locale and zone to read days in.
  * @return Columns and row labels for `HeatmapChart`.
  */
-declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
+export declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
 //#endregion
 //#region src/charts/heatmap-chart/build-month-calendar-data.d.ts
 /**
@@ -1545,7 +1558,7 @@ declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: Cale
  * @param options    - Week start and label locale.
  * @return Columns and one group per month; empty for an invalid or reversed range.
  */
-declare const buildMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
+export declare const buildMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
 //#endregion
 //#region src/charts/heatmap-chart/use-calendar-heatmap-data.d.ts
 /**
@@ -1556,7 +1569,7 @@ declare const buildMonthCalendarHeatmapData: (valueByDay: Record<string, number
  * @param options - As for `buildCalendarHeatmapData`; `locale` and `timeZone` win over the provider.
  * @return Columns and row labels for `HeatmapChart`.
  */
-declare const useCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
+export declare const useCalendarHeatmapData: (series: DataPointDate[], options?: CalendarHeatmapOptions) => CalendarHeatmapResult;
 //#endregion
 //#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.d.ts
 /**
@@ -1568,10 +1581,10 @@ declare const useCalendarHeatmapData: (series: DataPointDate[], options?: Calend
  * @param options    - As for `buildMonthCalendarHeatmapData`; `locale` wins over the provider.
  * @return Columns and groups for `HeatmapChart`.
  */
-declare const useMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
+export declare const useMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
 //#endregion
 //#region src/charts/leaderboard-chart/types.d.ts
-interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
+interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation' | 'ariaLabel'> {
   /**
    * Entries to display. Declared here rather than picked, since the base type
    * would split the entry union into one array type per member.
@@ -1665,7 +1678,7 @@ declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspe
  * @param tickResolution - Caller-declared bucket resolution, when known.
  * @return The declared or inferred bucket, and the resolution formats key on.
  */
-declare const getBucketInfo: (data: SeriesData[], tickResolution?: TickResolution) => BucketInfo;
+export declare const getBucketInfo: (data: SeriesData[], tickResolution?: TickResolution) => BucketInfo;
 //#endregion
 //#region src/utils/date-parsing.d.ts
 /**
@@ -1684,7 +1697,7 @@ declare const getBucketInfo: (data: SeriesData[], tickResolution?: TickResolutio
  * @param {string} [timeZone] - IANA zone a naive string is read in; the runtime's own when absent, and ignored by a string that carries its own offset
  * @return {Date} A Date object representing the parsed instant, or an invalid Date if parsing fails
  */
-declare const parseAsLocalDate: (dateString: string, timeZone?: string) => Date;
+export declare const parseAsLocalDate: (dateString: string, timeZone?: string) => Date;
 //#endregion
 //#region src/utils/format-metric-value.d.ts
 /**
@@ -1708,7 +1721,7 @@ type FormatMetricValueOptions = {
  * @param options.signDisplay    - Controls when to display the sign (auto, always, never, exceptZero)
  * @return Formatted string
  */
-declare const formatMetricValue: (value: string | number, type?: MetricValueType, { decimals, useMultipliers, signDisplay }?: FormatMetricValueOptions) => string;
+export declare const formatMetricValue: (value: string | number, type?: MetricValueType, { decimals, useMultipliers, signDisplay }?: FormatMetricValueOptions) => string;
 //#endregion
 //#region src/utils/format-percentage.d.ts
 /**
@@ -1719,7 +1732,7 @@ declare const formatMetricValue: (value: string | number, type?: MetricValueType
  * @param value - The percentage value (0-100 range)
  * @return Formatted percentage string (e.g., "30%", "30.1%", "30.25%")
  */
-declare const formatPercentage: (value: number) => string;
+export declare const formatPercentage: (value: number) => string;
 //#endregion
 //#region src/utils/merge-themes.d.ts
 /**
@@ -1730,8 +1743,8 @@ declare const formatPercentage: (value: number) => string;
  * @param overrideTheme - Theme to override base with (takes precedence)
  * @return Merged theme with overrideTheme values taking precedence
  */
-declare function mergeThemes(baseTheme: CompleteChartTheme, overrideTheme: Partial<ChartTheme>): CompleteChartTheme;
-declare function mergeThemes(baseTheme: ChartTheme, overrideTheme: Partial<ChartTheme>): ChartTheme;
+export declare function mergeThemes(baseTheme: CompleteChartTheme, overrideTheme: Partial<ChartTheme>): CompleteChartTheme;
+export declare function mergeThemes(baseTheme: ChartTheme, overrideTheme: Partial<ChartTheme>): ChartTheme;
 //#endregion
 //#region src/utils/color-utils.d.ts
 /**
@@ -1739,13 +1752,13 @@ declare function mergeThemes(baseTheme: ChartTheme, overrideTheme: Partial<Chart
  * @param hex - The value to check
  * @return true if valid hex color format (e.g., '#ff0000')
  */
-declare const isValidHexColor: (hex: unknown) => hex is string;
+export declare const isValidHexColor: (hex: unknown) => hex is string;
 /**
  * Validate hex color format, throwing descriptive errors if invalid
  * @param  hex - The hex color string to validate
  * @throws {Error} if hex string is malformed
  */
-declare const validateHexColor: (hex: unknown) => void;
+export declare const validateHexColor: (hex: unknown) => void;
 /**
  * Convert hex color to rgba with specified opacity.
  * This is genuinely reusable across chart components.
@@ -1754,7 +1767,7 @@ declare const validateHexColor: (hex: unknown) => void;
  * @return The rgba color string (e.g., 'rgba(255, 0, 0, 0.5)')
  * @throws {Error} if hex string is malformed or alpha is not a valid number
  */
-declare const hexToRgba: (hex: string, alpha: number) => string;
+export declare const hexToRgba: (hex: string, alpha: number) => string;
 /**
  * Weighted Euclidean distance between two HSL colors.
  *
@@ -1763,14 +1776,14 @@ declare const hexToRgba: (hex: string, alpha: number) => string;
  * @param      hsl2 - second color in HSL format [h, s, l]
  * @return distance value (0-100+, lower means more similar)
  */
-declare const getColorDistance: (hsl1: [number, number, number], hsl2: [number, number, number]) => number;
+export declare const getColorDistance: (hsl1: [number, number, number], hsl2: [number, number, number]) => number;
 /**
  * Parse an HSL string like 'hsl(120, 50%, 50%)' into an HSL tuple.
  *
  * @param hslString - HSL color string
  * @return HSL tuple [h, s, l] or null if invalid
  */
-declare const parseHslString: (hslString: string) => [number, number, number] | null;
+export declare const parseHslString: (hslString: string) => [number, number, number] | null;
 /**
  * Normalize any CSS color value to a hex color string.
  * Handles hex, HSL, HSLA, RGB, RGBA, named CSS colors, and CSS variables.
@@ -1781,7 +1794,7 @@ declare const parseHslString: (hslString: string) => [number, number, number] |
  * @param _depth     - Internal recursion depth counter to prevent infinite loops
  * @return hex color string, or the original value if conversion fails
  */
-declare const normalizeColorToHex: (color: string, element?: HTMLElement | null, resolveCss?: (value: string, el?: HTMLElement | null) => string | null, _depth?: number) => string;
+export declare const normalizeColorToHex: (color: string, element?: HTMLElement | null, resolveCss?: (value: string, el?: HTMLElement | null) => string | null, _depth?: number) => string;
 /**
  * Lighten a hex color by blending it with white.
  * Useful for creating color gradients or lighter variants.
@@ -1791,7 +1804,7 @@ declare const normalizeColorToHex: (color: string, element?: HTMLElement | null,
  * @return Lightened hex color string (e.g., '#cce4ef')
  * @throws {Error} if hex string is malformed
  */
-declare const lightenHexColor: (hex: string, blend: number) => string;
+export declare const lightenHexColor: (hex: string, blend: number) => string;
 /**
  * Blend one hex color toward another, per-channel in sRGB.
  *
@@ -1801,7 +1814,7 @@ declare const lightenHexColor: (hex: string, blend: number) => string;
  * @return Blended hex color string
  * @throws {Error} if either hex string is malformed
  */
-declare const mixHexColors: (fromHex: string, toHex: string, blend: number) => string;
+export declare const mixHexColors: (fromHex: string, toHex: string, blend: number) => string;
 /**
  * WCAG relative luminance of a hex color (0 = black, 1 = white).
  *
@@ -1809,7 +1822,7 @@ declare const mixHexColors: (fromHex: string, toHex: string, blend: number) => s
  * @return Relative luminance in the range [0, 1]
  * @throws {Error} if hex string is malformed
  */
-declare const relativeLuminance: (hex: string) => number;
+export declare const relativeLuminance: (hex: string) => number;
 /**
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
@@ -1818,7 +1831,7 @@ declare const relativeLuminance: (hex: string) => number;
  * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
-declare const prefersLightText: (backgroundHex: string) => boolean;
+export declare const prefersLightText: (backgroundHex: string) => boolean;
 //#endregion
 //#region src/utils/resolve-css-var.d.ts
 /**
@@ -1833,7 +1846,7 @@ declare const prefersLightText: (backgroundHex: string) => boolean;
  * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)
  * @return The resolved value, fallback value, or null if unresolvable
  */
-declare const resolveCssVariable: (value: string, element?: HTMLElement | null) => string | null;
+export declare const resolveCssVariable: (value: string, element?: HTMLElement | null) => string | null;
 //#endregion
 //#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.d.ts
 /**
@@ -1849,7 +1862,7 @@ declare const resolveCssVariable: (value: string, element?: HTMLElement | null)
  * @param root0.legendLabels.comparison - Label for comparison period data
  * @return Array of legend items for the leaderboard chart
  */
-declare function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison, withOverlayLabel, legendLabels }: {
+export declare function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison, withOverlayLabel, legendLabels }: {
   data: LeaderboardEntry[];
   primaryColor?: string;
   secondaryColor?: string;
@@ -1962,10 +1975,6 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
-  /**
-   * Accessible name of the chart. Defaults to a localized "Pie chart".
-   */
-  ariaLabel?: string;
 }
 type PieChartBaseProps = Optional<PieChartProps, 'size'>;
 type PieChartComponent = ChartComponentWithComposition<PieChartBaseProps>;
@@ -2032,10 +2041,6 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
-  /**
-   * Accessible name of the chart. Defaults to a localized "Semi-circle chart".
-   */
-  ariaLabel?: string;
 }
 type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
 type PieSemiCircleChartComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps>;
@@ -2213,7 +2218,7 @@ type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip
  * @param props.renderContainer - Deprecated; render the content alone when false.
  * @return The tooltip.
  */
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
+export declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
 //#endregion
 //#region src/components/tooltip/xy-chart-tooltip.d.ts
 type FlattenedTooltipData = {
@@ -2244,9 +2249,9 @@ interface XYChartTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, '
    */
   mode?: 'individual' | 'group';
 }
-declare const XYChartTooltip: React.FC<XYChartTooltipProps>;
+export declare const XYChartTooltip: React.FC<XYChartTooltipProps>;
 /** @deprecated Use `XYChartTooltip`. */
-declare const AccessibleTooltip: import("react").FC<XYChartTooltipProps>;
+export declare const AccessibleTooltip: import("react").FC<XYChartTooltipProps>;
 //#endregion
 //#region src/components/tooltip/tooltip-box.d.ts
 type TooltipBoxProps = HTMLAttributes<HTMLDivElement> & {
@@ -2261,7 +2266,7 @@ type TooltipBoxProps = HTMLAttributes<HTMLDivElement> & {
  * @param ref            - Forwarded to the box element.
  * @return The tooltip box.
  */
-declare const TooltipBox: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+export declare const TooltipBox: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
   /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
   unstyled?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;
@@ -2306,7 +2311,7 @@ type TrendIndicatorProps = {
  * @param {TrendIndicatorProps} props - Component props
  * @return {JSX.Element} The rendered trend indicator
  */
-declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
+export declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {
@@ -2349,7 +2354,7 @@ interface GlobalChartsContextValue {
 }
 //#endregion
 //#region src/providers/chart-context/global-charts-provider.d.ts
-declare const GlobalChartsContext: import("react").Context<GlobalChartsContextValue>;
+export declare const GlobalChartsContext: import("react").Context<GlobalChartsContextValue>;
 interface GlobalChartsProviderProps {
   children: ReactNode;
   theme?: Partial<ChartTheme>;
@@ -2364,13 +2369,13 @@ interface GlobalChartsProviderProps {
    */
   timeZone?: string;
 }
-declare const GlobalChartsProvider: FC<GlobalChartsProviderProps>;
+export declare const GlobalChartsProvider: FC<GlobalChartsProviderProps>;
 //#endregion
 //#region src/providers/chart-context/hooks/use-global-charts-context.d.ts
-declare const useGlobalChartsContext: () => GlobalChartsContextValue;
+export declare const useGlobalChartsContext: () => GlobalChartsContextValue;
 //#endregion
 //#region src/providers/chart-context/hooks/use-chart-registration.d.ts
-declare const useChartRegistration: ({ chartId, legendItems, chartType, isDataValid, metadata }: {
+export declare const useChartRegistration: ({ chartId, legendItems, chartType, isDataValid, metadata }: {
   chartId: string;
   legendItems: BaseLegendItem[];
   chartType: ChartType;
@@ -2384,7 +2389,7 @@ declare const useChartRegistration: ({ chartId, legendItems, chartType, isDataVa
  *
  * @return The global chart theme
  */
-declare const useGlobalChartsTheme: () => CompleteChartTheme;
+export declare const useGlobalChartsTheme: () => CompleteChartTheme;
 //#endregion
 //#region src/providers/chart-context/hooks/use-chart-formatting.d.ts
 /**
@@ -2396,7 +2401,7 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
  *
  * @return The host's formatting context.
  */
-declare const useChartFormatting: () => ChartFormatting;
+export declare const useChartFormatting: () => ChartFormatting;
 //#endregion
 //#region src/providers/chart-context/themes.d.ts
 /**
@@ -2413,7 +2418,7 @@ declare const defaultTheme: CompleteChartTheme;
  *
  * @return {HTMLElement | null} The nearest chart scope element, or `null`.
  */
-declare const useChartScopeElement: () => HTMLElement | null;
+export declare const useChartScopeElement: () => HTMLElement | null;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, TooltipBox, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, XYChartTooltip, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type ComparisonItemLabel, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, type TrendIndicatorProps, type XyChartTooltipProps, defaultTheme };
 //# sourceMappingURL=index.d.cts.map