@galaxy-io/dls 1.4.11 → 1.4.13

package/dist/charts/BarChart.d.ts

@@ -13,6 +13,9 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TComponentKey>>[];
     /** @default BarChartNormalization.NONE */
     normalization?: BarChartNormalization;
+    /** Tint the active category's full band, marking the hover position even
+     * where there is no data. @default true */
+    showCursor?: boolean;
 };
 /**
  * Bar chart with a three-level data model.
@@ -21,5 +24,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -1,10 +1,10 @@
-import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { BarChartNormalization, ChartKind, ChartMarkState, ChartTargetShape } from "./types.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { getBarLegendItems } from "./barChartLegend.js";
 import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath } from "./ChartPrimitives.js";
+import { ChartBarPath, ChartCursorBand } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -106,9 +106,11 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
 		categoryKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		categoryMuteState: ChartMarkState.DIMMED,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
+	const activeBand = interaction.activeIndex === null ? null : geometry.bands[interaction.activeIndex] ?? null;
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
 		const group = groups[index];
@@ -142,7 +144,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -182,14 +184,19 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		showLegend,
 		legendItems,
 		legendMaxItems,
-		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+		children: [showCursor && activeBand && /* @__PURE__ */ jsx(ChartCursorBand, {
+			x: activeBand.x,
+			y: activeBand.y,
+			width: activeBand.width,
+			height: activeBand.height
+		}), geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
 			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
 			fill: rect.color,
 			"data-state": interaction.getMarkState({
 				categoryIndex: rect.groupIndex,
 				seriesKey: isStacked ? rect.componentKey : rect.metric
 			})
-		}, rect.id))
+		}, rect.id))]
 	});
 };
 //#endregion

package/dist/charts/ChartCategoryTargets.d.ts

@@ -7,21 +7,13 @@ import type { ChartInteraction } from "./useChartInteraction";
  * roles and no tab stops — the plot is `role="img"` and its accessible story is
  * the frame's label and description, while pointer users get the tooltip.
  *
- * A category with nothing to show gets no target at all: hovering an all-zero
- * bar group or an all-null line column must not open a tooltip with a heading
- * and no rows, so the empty stretch of plot is simply not hoverable.
+ * Every category is hoverable, including one with nothing to show: the cursor
+ * still marks where the pointer is over an empty stretch of axis, and the
+ * tooltip opens with a "No data" body so the hover always gets an answer.
  */
 interface ChartCategoryTargetsProps {
     targets: ChartCategoryTarget[];
     interaction: ChartInteraction;
-    /**
-     * Category indices whose tooltip would have no rows.
-     *
-     * Skipped entirely rather than rendered inert, so the pointer falls through
-     * to nothing. Indexing is unaffected: `targets.map` still passes the true
-     * category index for every target that does render.
-     */
-    inertIndices?: ReadonlySet<number>;
 }
-declare const ChartCategoryTargets: ({ targets, interaction, inertIndices, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+declare const ChartCategoryTargets: ({ targets, interaction }: ChartCategoryTargetsProps) => import("react").JSX.Element;
 export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -3,8 +3,7 @@ import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
 import { match } from "ts-pattern";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/charts/ChartCategoryTargets.tsx
-var ChartCategoryTargets = ({ targets, interaction, inertIndices }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
-	if (inertIndices?.has(index)) return null;
+var ChartCategoryTargets = ({ targets, interaction }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
 	const shared = {
 		onMouseEnter: () => interaction.onCategoryEnter(index),
 		onMouseLeave: () => interaction.onCategoryLeave()

package/dist/charts/ChartFrame.d.ts

@@ -70,10 +70,9 @@ export interface ChartFrameProps {
     /**
      * Builds one category's tooltip, in plot coordinates.
      *
-     * Taken as a function rather than a finished model because the frame needs it
-     * twice: once for the category under the pointer, and once per category to
-     * decide which categories are inert. Deriving both from the same builder is
-     * what makes "no tooltip rows" and "not hoverable" the same fact.
+     * A rowless model means "no data here": the category stays hoverable and
+     * the built-in tooltip renders it with a "No data" body. A custom
+     * {@link tooltipRenderer} never receives a rowless model.
      *
      * Must be stable; memoize it at the call site.
      */

package/dist/charts/ChartFrame.js

@@ -23,11 +23,18 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* same situation, which is the drift this removes.
 	*/
 	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
-	const tooltipModel = useMemo(() => noTooltip || !interaction.hasLocalHover || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
+	const tooltipModel = useMemo(() => {
+		if (noTooltip || !interaction.showTooltip || interaction.activeIndex === null) return null;
+		const model = buildCategoryTooltip(interaction.activeIndex);
+		if (model === null) return null;
+		if (model.rows.length === 0 && tooltipRenderer !== void 0) return null;
+		return model;
+	}, [
 		noTooltip,
 		buildCategoryTooltip,
 		interaction.activeIndex,
-		interaction.hasLocalHover
+		interaction.showTooltip,
+		tooltipRenderer
 	]);
 	/**
 	* Plot space → container space, applied once, here.
@@ -48,22 +55,6 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 		margin.left,
 		margin.top
 	]);
-	/**
-	* Categories whose tooltip would have no rows.
-	*
-	* Decided here — from the same builder that feeds the visible tooltip — so
-	* "no data at this X" means exactly one thing in every chart: an all-zero
-	* bar group and an all-null line column both produce a rowless model, and
-	* neither should be hoverable. Their targets are simply not rendered.
-	*/
-	const inertIndices = useMemo(() => {
-		const inert = /* @__PURE__ */ new Set();
-		(categoryTargets ?? []).forEach((_, index) => {
-			const model = buildCategoryTooltip(index);
-			if (!model || model.rows.length === 0) inert.add(index);
-		});
-		return inert;
-	}, [categoryTargets, buildCategoryTooltip]);
 	const hasTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
 	const legendRight = legendPlacement === ChartLegendPlacement.RIGHT;
 	return /* @__PURE__ */ jsxs(ChartRoot, {
@@ -96,8 +87,7 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 								transform: categoryTargetsTransform,
 								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
-									interaction,
-									inertIndices
+									interaction
 								})
 							})
 						]

package/dist/charts/ChartLegend.js

@@ -2,7 +2,6 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
-import "./constants.js";
 import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -38,14 +37,13 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		const rendered = Array.from(measure.children);
 		const trigger = rendered.pop();
 		if (!trigger) return;
-		const gap = vertical ? 8 : 16;
 		const available = vertical ? verticalExtent || Number.POSITIVE_INFINITY : row.clientWidth - inset;
 		const sizeOf = (el) => {
 			const rect = el.getBoundingClientRect();
 			return Math.ceil(vertical ? rect.height : rect.width);
 		};
 		const sizes = rendered.map(sizeOf);
-		if (sizes.reduce((sum, size, i) => sum + size + (i > 0 ? gap : 0), 0) <= available) {
+		if (sizes.reduce((sum, size) => sum + size, 0) <= available) {
 			setFitCount(sizes.length);
 			return;
 		}
@@ -53,8 +51,8 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		let used = 0;
 		let count = 0;
 		for (const [i, size] of sizes.entries()) {
-			used += size + (i > 0 ? gap : 0);
-			if (used + gap + triggerSize > available) break;
+			used += size;
+			if (used + triggerSize > available) break;
 			count = i + 1;
 		}
 		setFitCount(Math.max(1, count));
@@ -80,7 +78,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 	if (items.length === 0) return null;
 	const isInteractive = Boolean(onItemEnter);
 	const activeKey = hoveredKey;
-	const renderItem = (item) => {
+	const renderItem = (item, verticalPadding) => {
 		const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
 		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Circle, {
 			size: 8,
@@ -90,11 +88,13 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 			children: item.label
 		})] });
 		if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+			$vertical: verticalPadding,
 			"data-state": state,
 			children: content
 		}, item.key);
 		return /* @__PURE__ */ jsx(ChartLegendItemButton, {
 			type: "button",
+			$vertical: verticalPadding,
 			"data-state": state,
 			onMouseEnter: () => onItemEnter?.(item.key),
 			onMouseLeave: () => onItemLeave?.(),
@@ -124,26 +124,33 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 				ref: measureRef,
 				$vertical: vertical,
 				"aria-hidden": "true",
-				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, { children: [/* @__PURE__ */ jsx(Circle, {
-					size: 8,
-					hex: item.color
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					children: item.label
-				})] }, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, { children: /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					variant: TextVariant.SECONDARY,
-					children: `+${items.length - 1} more`
-				}) })]
+				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
+					$vertical: vertical,
+					children: [/* @__PURE__ */ jsx(Circle, {
+						size: 8,
+						hex: item.color
+					}), /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						children: item.label
+					})]
+				}, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+					$vertical: vertical,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						variant: TextVariant.SECONDARY,
+						children: `+${items.length - 1} more`
+					})
+				})]
 			}),
-			inlineItems.map(renderItem),
+			inlineItems.map((item) => renderItem(item, vertical)),
 			overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
 				isInteractive: true,
 				position: vertical ? TooltipPosition.RIGHT : TooltipPosition.TOP,
 				variant: TooltipVariant.TERTIARY,
-				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, { children: overflowItems.map(renderItem) }),
+				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, { children: overflowItems.map((item) => renderItem(item, true)) }),
 				children: /* @__PURE__ */ jsx(ChartLegendItemButton, {
 					type: "button",
+					$vertical: vertical,
 					"data-state": triggerState,
 					children: /* @__PURE__ */ jsx(Text, {
 						size: TextSize.BODY_SM,

package/dist/charts/ChartPrimitives.d.ts

@@ -111,6 +111,29 @@ export declare const ChartCursorLine: import("react").ComponentType<Pick<import(
 } & {
     as?: React.ElementType;
 }>, {}>;
+/**
+ * Full-height tint over the hovered category's band on a bar chart — the bar
+ * counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
+ * wide filled marks; a quiet band behind them marks the same position without
+ * touching them. 8% of the foreground, so it survives both themes.
+ */
+export declare const ChartCursorBand: import("react").ComponentType<Pick<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGProps<SVGRectElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGProps<SVGRectElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
 export declare const ChartAxisLabelBox: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGForeignObjectElement> & Record<never, unknown>>;
 /**
  * Positioned from coordinates already clamped to the chart box.
@@ -235,7 +258,18 @@ export declare const ChartLegendOverflowList: import("@linaria/react").StyledCom
  *
  * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
  * with the series it names.
+ *
+ * The trailing padding is the inter-entry spacing — deliberately padding on
+ * the entry rather than a gap on the container, so the hover surfaces of
+ * adjacent entries touch and a sweep hands the isolation directly from one
+ * series to the next. Trailing only, so the first entry stays flush with the
+ * plot's left edge (or the column's top).
  */
-export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-/** The same row, when the legend is inert — no button semantics to announce. */
-export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    $vertical?: boolean;
+}>;
+/** The same row, when the legend is inert — no button semantics to announce.
+ * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
+export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $vertical?: boolean;
+}>;

package/dist/charts/ChartPrimitives.js

@@ -176,9 +176,22 @@ var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	propsAsIs: true,
 	vars: { "cblgiyf-0": [_exp16()] }
 }));
+/**
+* Full-height tint over the hovered category's band on a bar chart — the bar
+* counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
+* wide filled marks; a quiet band behind them marks the same position without
+* touching them. 8% of the foreground, so it survives both themes.
+*/
+var _exp17 = () => ({ theme }) => theme.color.opacity.bw8Alt;
+var ChartCursorBand = withTheme(/*#__PURE__*/ styled("rect")({
+	name: "ChartCursorBand",
+	class: "c1lr03cc",
+	propsAsIs: true,
+	vars: { "c1lr03cc-0": [_exp17()] }
+}));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "c1lr03cc",
+	class: "cizy1s8",
 	propsAsIs: true
 });
 /**
@@ -188,21 +201,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp17 = () => ({ $x }) => `${$x}px`;
-var _exp18 = () => ({ $y }) => `${$y}px`;
-var _exp21 = () => ({ theme }) => theme.color.border.primary;
-var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp18 = () => ({ $x }) => `${$x}px`;
+var _exp19 = () => ({ $y }) => `${$y}px`;
+var _exp22 = () => ({ theme }) => theme.color.border.primary;
+var _exp23 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "cizy1s8",
+	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"cizy1s8-0": [_exp17()],
-		"cizy1s8-1": [_exp18()],
-		"cizy1s8-2": [_exp21()],
-		"cizy1s8-3": [_exp22()],
-		"cizy1s8-4": [_exp23()]
+		"c1ukq11d-0": [_exp18()],
+		"c1ukq11d-1": [_exp19()],
+		"c1ukq11d-2": [_exp22()],
+		"c1ukq11d-3": [_exp23()],
+		"c1ukq11d-4": [_exp24()]
 	}
 }));
 /**
@@ -216,19 +229,19 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 */
 var ChartTooltipGrid = /*#__PURE__*/ styled("div")({
 	name: "ChartTooltipGrid",
-	class: "c1ukq11d",
+	class: "cwcko2m",
 	propsAsIs: false
 });
 /** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
 var ChartTooltipLabelCell = /*#__PURE__*/ styled("div")({
 	name: "ChartTooltipLabelCell",
-	class: "cwcko2m",
+	class: "cqwhvyz",
 	propsAsIs: false
 });
 /** Right-aligned and never wrapped — the value always shows in full. */
 var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
 	name: "ChartTooltipValueCell",
-	class: "cqwhvyz",
+	class: "c1iaray",
 	propsAsIs: false
 });
 /**
@@ -239,41 +252,40 @@ var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "c1iaray",
+	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp27()],
-		"c1iaray-1": [_exp28()],
-		"c1iaray-2": [_exp30()]
+		"cz6jod1-0": [_exp28()],
+		"cz6jod1-1": [_exp29()],
+		"cz6jod1-2": [_exp31()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp31 = () => ({ theme }) => theme.color.border.primary;
-var _exp32 = () => ({ theme }) => theme.color.background.primary;
+var _exp32 = () => ({ theme }) => theme.color.border.primary;
+var _exp33 = () => ({ theme }) => theme.color.background.primary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cz6jod1",
+	class: "c1de5mqk",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp31()],
-		"cz6jod1-1": [_exp32()]
+		"c1de5mqk-0": [_exp32()],
+		"c1de5mqk-1": [_exp33()]
 	}
 }));
 /**
 * Aligns the legend under the plot rather than the value-axis gutter.
 */
-var _exp33 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp34 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp35 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
-var _exp36 = () => ({ $vertical }) => $vertical ? `8px` : `16px`;
+var _exp34 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp35 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp36 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
 var _exp37 = () => ({ $vertical }) => $vertical ? "auto" : "0";
 var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "100%";
 var _exp39 = () => ({ $vertical, $extent }) => $vertical && $extent ? `${$extent}px` : "auto";
@@ -281,18 +293,17 @@ var _exp40 = () => ({ $vertical }) => $vertical ? "0" : "10px";
 var _exp41 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1de5mqk",
+	class: "cjirv6a",
 	propsAsIs: false,
 	vars: {
-		"c1de5mqk-0": [_exp33()],
-		"c1de5mqk-1": [_exp34()],
-		"c1de5mqk-2": [_exp35()],
-		"c1de5mqk-3": [_exp36()],
-		"c1de5mqk-4": [_exp37()],
-		"c1de5mqk-5": [_exp38()],
-		"c1de5mqk-6": [_exp39()],
-		"c1de5mqk-7": [_exp40()],
-		"c1de5mqk-8": [_exp41()]
+		"cjirv6a-0": [_exp34()],
+		"cjirv6a-1": [_exp35()],
+		"cjirv6a-2": [_exp36()],
+		"cjirv6a-3": [_exp37()],
+		"cjirv6a-4": [_exp38()],
+		"cjirv6a-5": [_exp39()],
+		"cjirv6a-6": [_exp40()],
+		"cjirv6a-7": [_exp41()]
 	}
 });
 /**
@@ -305,15 +316,13 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var _exp42 = () => ({ $vertical }) => $vertical ? "column" : "row";
 var _exp43 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp44 = () => ({ $vertical }) => $vertical ? `8px` : `16px`;
 var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendMeasure",
-	class: "cjirv6a",
+	class: "c1armna5",
 	propsAsIs: false,
 	vars: {
-		"cjirv6a-0": [_exp42()],
-		"cjirv6a-1": [_exp43()],
-		"cjirv6a-2": [_exp44()]
+		"c1armna5-0": [_exp42()],
+		"c1armna5-1": [_exp43()]
 	}
 });
 /**
@@ -325,7 +334,7 @@ var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendOverflowList",
-	class: "c1armna5",
+	class: "cgd77rv",
 	propsAsIs: false
 });
 /**
@@ -339,17 +348,28 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 *
 * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
 * with the series it names.
+*
+* The trailing padding is the inter-entry spacing — deliberately padding on
+* the entry rather than a gap on the container, so the hover surfaces of
+* adjacent entries touch and a sweep hands the isolation directly from one
+* series to the next. Trailing only, so the first entry stays flush with the
+* plot's left edge (or the column's top).
 */
+var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cgd77rv",
-	propsAsIs: false
+	class: "cutidpi",
+	propsAsIs: false,
+	vars: { "cutidpi-0": [_exp45()] }
 });
-/** The same row, when the legend is inert — no button semantics to announce. */
+/** The same row, when the legend is inert — no button semantics to announce.
+* Carries the same trailing padding; see {@link ChartLegendItemButton}. */
+var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "cutidpi",
-	propsAsIs: false
+	class: "ccpczg",
+	propsAsIs: false,
+	vars: { "ccpczg-0": [_exp47()] }
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/ChartTooltip.js

@@ -36,7 +36,11 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 				variant: TextVariant.TERTIARY,
 				isEllipsis: true,
 				children: displayed.label
-			}), /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
+			}), displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				variant: TextVariant.SECONDARY,
+				children: "No data"
+			}) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
 				shrink: 0,
 				children: /* @__PURE__ */ jsx(Circle, {
 					size: 8,

package/dist/charts/DashboardProvider.d.ts

@@ -17,6 +17,8 @@ export interface DashboardContextValue {
     setActive: (entry: DashboardSyncEntry) => void;
     /** Clears only if the current entry belongs to `sourceId`. */
     clearActive: (sourceId: string) => void;
+    /** Followers open their own tooltip at the synced category. */
+    sharedTooltip: boolean;
 }
 export declare const DashboardContext: import("react").Context<DashboardContextValue | null>;
 /**
@@ -24,9 +26,13 @@ export declare const DashboardContext: import("react").Context<DashboardContextV
  *
  * Hovering a category in one chart shows the same category emphasized in every
  * sibling — matched by raw category label, so charts whose category sets only
- * partially overlap simply show nothing for the labels they lack. The tooltip
- * stays local to the chart under the pointer; siblings get the quiet emphasis
- * only (LineChart its cursor line and dots, BarChart its category muting).
+ * partially overlap simply show nothing for the labels they lack. By default
+ * the tooltip stays local to the chart under the pointer; siblings get the
+ * quiet emphasis only (LineChart its cursor line and dots, BarChart its band
+ * tint and gentle dim). `sharedTooltip` opts every synced chart into opening its
+ * own tooltip at the shared category — the tooltip anchors to the category's
+ * geometry, not the pointer, so a follower's opens exactly where a local
+ * hover's would.
  *
  * Scope, deliberately narrow:
  * - Only the category axis syncs. Legend (series) hover stays local.
@@ -43,5 +49,9 @@ export declare const DashboardContext: import("react").Context<DashboardContextV
  * across a chart re-renders the group a handful of times. No subscription or
  * selector machinery is warranted.
  */
-export declare const DashboardProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export interface DashboardProviderProps {
+    /** Every synced chart opens its own tooltip at the shared category. @default false */
+    sharedTooltip?: boolean;
+}
+export declare const DashboardProvider: ({ sharedTooltip, children, }: PropsWithChildren<DashboardProviderProps>) => import("react").JSX.Element;
 export default DashboardProvider;