@galaxy-io/dls 1.4.11 → 1.4.12

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,14 @@ 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
+ * frame's rowless guard is what keeps a heading-only tooltip from opening
+ * there.
  */
 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 — the
+     * cursor should still mark the pointer over an empty stretch of axis — but
+     * no tooltip opens.
      *
      * Must be stable; memoize it at the call site.
      */

package/dist/charts/ChartFrame.js

@@ -23,11 +23,15 @@ 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);
+		return model === null || model.rows.length === 0 ? null : model;
+	}, [
 		noTooltip,
 		buildCategoryTooltip,
 		interaction.activeIndex,
-		interaction.hasLocalHover
+		interaction.showTooltip
 	]);
 	/**
 	* Plot space → container space, applied once, here.
@@ -48,22 +52,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 +84,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/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;

package/dist/charts/DashboardProvider.js

@@ -2,31 +2,7 @@ import { createContext, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/charts/DashboardProvider.tsx
 var DashboardContext = createContext(null);
-/**
-* Shares the hovered category between the cartesian charts inside it.
-*
-* 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).
-*
-* Scope, deliberately narrow:
-* - Only the category axis syncs. Legend (series) hover stays local.
-* - PieChart never participates — it has no category axis.
-* - There is no per-chart opt-out prop. The opt-out is rendering the chart
-*   outside the provider, and nesting a second provider isolates a subset —
-*   charts sync with their nearest ancestor.
-*
-* Renders no DOM and holds no layout opinion — unlike `OverlayProvider` it is
-* not a page-root singleton, and several can coexist on a page.
-*
-* Plain context state is the right transport here: entries change at category
-* granularity (once per hit band crossed, not per mousemove), so a sweep
-* across a chart re-renders the group a handful of times. No subscription or
-* selector machinery is warranted.
-*/
-var DashboardProvider = ({ children }) => {
+var DashboardProvider = ({ sharedTooltip = false, children }) => {
 	const [activeEntry, setActiveEntry] = useState(null);
 	const setActive = useCallback((entry) => {
 		setActiveEntry((prev) => prev !== null && prev.sourceId === entry.sourceId && prev.categoryKey === entry.categoryKey ? prev : entry);
@@ -37,11 +13,13 @@ var DashboardProvider = ({ children }) => {
 	const contextValue = useMemo(() => ({
 		activeEntry,
 		setActive,
-		clearActive
+		clearActive,
+		sharedTooltip
 	}), [
 		activeEntry,
 		setActive,
-		clearActive
+		clearActive,
+		sharedTooltip
 	]);
 	return /* @__PURE__ */ jsx(DashboardContext.Provider, {
 		value: contextValue,

package/dist/charts/LineChart.js

@@ -69,7 +69,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
 		categoryKeys: geometry.categories,
-		disabled: noTooltip || isLoading || isEmpty,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];

package/dist/charts/PieChart.js

@@ -76,7 +76,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {

package/dist/charts/constants.d.ts

@@ -181,6 +181,14 @@ export declare const CHART_TRANSITION_MS = 100;
  */
 export declare const CHART_MARK_OPACITY_ACTIVE = 1;
 export declare const CHART_MARK_OPACITY_MUTED = 0.1;
+/**
+ * The whisper tier, for `ChartMarkState.DIMMED`.
+ *
+ * Deliberately far gentler than MUTED: it is used where another affordance —
+ * BarChart's cursor band — already marks the hovered category, so the
+ * off-category marks only need to step back, not disappear.
+ */
+export declare const CHART_MARK_OPACITY_DIMMED = 0.4;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -190,15 +198,17 @@ export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
 /**
- * Gap in px between entries in a horizontal legend.
+ * Spacing in px between entries in a horizontal legend.
  *
- * Also the number the fit computation adds between measured entries, so the
- * CSS and the arithmetic cannot disagree — which is what makes the collapse
- * exact rather than "usually right".
+ * Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+ * is dead space between hover targets, and sweeping across it drops the series
+ * isolation between every pair of entries. Because the padding lives inside
+ * the entries, measured entry sizes already include the spacing and the fit
+ * computation needs no separate gap term.
  */
 export declare const CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
- * {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+ * {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 export declare const CHART_LEGEND_VERTICAL_GAP = 8;
 /**
  * Ceiling on the collapsed-legend popover's height, in px.

package/dist/charts/constants.js

@@ -191,6 +191,14 @@ var CHART_TRANSITION_MS = 100;
 */
 var CHART_MARK_OPACITY_ACTIVE = 1;
 var CHART_MARK_OPACITY_MUTED = .1;
+/**
+* The whisper tier, for `ChartMarkState.DIMMED`.
+*
+* Deliberately far gentler than MUTED: it is used where another affordance —
+* BarChart's cursor band — already marks the hovered category, so the
+* off-category marks only need to step back, not disappear.
+*/
+var CHART_MARK_OPACITY_DIMMED = .4;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -200,15 +208,17 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
-* Gap in px between entries in a horizontal legend.
+* Spacing in px between entries in a horizontal legend.
 *
-* Also the number the fit computation adds between measured entries, so the
-* CSS and the arithmetic cannot disagree — which is what makes the collapse
-* exact rather than "usually right".
+* Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+* is dead space between hover targets, and sweeping across it drops the series
+* isolation between every pair of entries. Because the padding lives inside
+* the entries, measured entry sizes already include the spacing and the fit
+* computation needs no separate gap term.
 */
 var CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
-* {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+* {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 var CHART_LEGEND_VERTICAL_GAP = 8;
 /**
 * Ceiling on the collapsed-legend popover's height, in px.
@@ -266,4 +276,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/types.d.ts

@@ -153,8 +153,16 @@ export declare enum ChartCategoryLabelMode {
 export declare enum ChartMarkState {
     /** Full strength — the default, and the hovered category. */
     ACTIVE = "active",
-    /** Softened, for categories other than the hovered one. */
-    MUTED = "muted"
+    /** Softened, for marks outside the engaged series or category. */
+    MUTED = "muted",
+    /**
+     * Barely softened — a whisper of {@link MUTED}.
+     *
+     * Used where another affordance already carries the emphasis and strong
+     * muting would be a second, louder voice: BarChart's category axis dims
+     * like this because the cursor band is the highlight.
+     */
+    DIMMED = "dimmed"
 }
 /** Which pair of a rectangle's corners carries the radius. */
 export declare enum BarCorners {

package/dist/charts/types.js

@@ -115,8 +115,16 @@ var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 var ChartMarkState = /* @__PURE__ */ function(ChartMarkState) {
 	/** Full strength — the default, and the hovered category. */
 	ChartMarkState["ACTIVE"] = "active";
-	/** Softened, for categories other than the hovered one. */
+	/** Softened, for marks outside the engaged series or category. */
 	ChartMarkState["MUTED"] = "muted";
+	/**
+	* Barely softened — a whisper of {@link MUTED}.
+	*
+	* Used where another affordance already carries the emphasis and strong
+	* muting would be a second, louder voice: BarChart's category axis dims
+	* like this because the cursor band is the highlight.
+	*/
+	ChartMarkState["DIMMED"] = "dimmed";
 	return ChartMarkState;
 }({});
 /** Which pair of a rectangle's corners carries the radius. */

package/dist/charts/useChartInteraction.d.ts

@@ -11,11 +11,12 @@ import { ChartMarkState } from "./types";
  *
  * Plus one read-only source: inside a `DashboardProvider`, a chart that
  * supplies {@link UseChartInteractionOptions.categoryKeys} follows the category
- * hovered in a sibling chart, matched by raw label. Following emphasizes — it
- * never opens the tooltip, which is what {@link ChartInteraction.hasLocalHover}
- * distinguishes. The series axis deliberately does not sync: series keys are
- * chart-local vocabulary, and isolating "Delivered" in a chart that happens to
- * share the name would correlate nothing.
+ * hovered in a sibling chart, matched by raw label. Following emphasizes; it
+ * opens the tooltip only when the provider opts in via `sharedTooltip`, which
+ * is what {@link ChartInteraction.showTooltip} folds together. The series axis
+ * deliberately does not sync: series keys are chart-local vocabulary, and
+ * isolating "Delivered" in a chart that happens to share the name would
+ * correlate nothing.
  *
  * Deliberately no click layer. Clicking used to pin the hover so it survived
  * the pointer leaving, and it read as the chart getting stuck — the emphasis
@@ -33,12 +34,21 @@ interface UseChartInteractionOptions {
      * two charts formatting the same label differently must still match.
      */
     categoryKeys?: string[];
+    /**
+     * How marks outside the active category recede. Defaults to
+     * {@link ChartMarkState.MUTED}; BarChart passes
+     * {@link ChartMarkState.DIMMED} because its cursor band already carries the
+     * category highlight and strong muting on top of it would shout. Only the
+     * category axis softens — series (legend) isolation always mutes fully,
+     * since there the muting *is* the affordance.
+     */
+    categoryMuteState?: ChartMarkState;
     /** Suppress all interaction — used while loading and when the tooltip is off. */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * Render every mark muted, whatever the two axes say.
      *
-     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
+     * Distinct from {@link isDisabled}, which suppresses *input*. Loading suppresses
      * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
      * rather than left to each mark, because the alternative is the same
      * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
@@ -59,11 +69,11 @@ export interface ChartInteraction {
      */
     activeIndex: number | null;
     /**
-     * True when {@link activeIndex} comes from this chart's own pointer rather
-     * than a synced sibling. Gates the tooltip: only the chart under the pointer
-     * opens one.
+     * True when this chart should present its tooltip for {@link activeIndex}:
+     * its own pointer hover always, a synced sibling's only when the
+     * `DashboardProvider` opts in via `sharedTooltip`.
      */
-    hasLocalHover: boolean;
+    showTooltip: boolean;
     hoveredSeriesKey: string | null;
     /**
      * Emphasis for one mark, composed from both axes.
@@ -82,5 +92,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState, isDisabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -2,7 +2,7 @@ import { ChartMarkState } from "./types.js";
 import { DashboardContext } from "./DashboardProvider.js";
 import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled = false, isLoading = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const sync = useContext(DashboardContext);
@@ -60,14 +60,15 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 		categoryKeys
 	]);
 	const effectiveIndex = safeHovered ?? followedIndex;
+	const showTooltip = safeHovered !== null || followedIndex !== null && (sync?.sharedTooltip ?? false);
 	const onCategoryEnter = useCallback((categoryIndex) => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(categoryIndex);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onCategoryLeave = useCallback(() => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(null);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onSeriesEnter = useCallback((seriesKey) => {
 		setHoveredSeriesKey(seriesKey);
 	}, []);
@@ -76,15 +77,19 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
 		if (isLoading) return ChartMarkState.MUTED;
-		return categoryIndex !== void 0 && effectiveIndex !== null && categoryIndex !== effectiveIndex || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
+		const categoryMuted = categoryIndex !== void 0 && effectiveIndex !== null && categoryIndex !== effectiveIndex;
+		if (seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries) return ChartMarkState.MUTED;
+		if (categoryMuted) return categoryMuteState;
+		return ChartMarkState.ACTIVE;
 	}, [
 		isLoading,
 		effectiveIndex,
-		safeHoveredSeries
+		safeHoveredSeries,
+		categoryMuteState
 	]);
 	return useMemo(() => ({
 		activeIndex: effectiveIndex,
-		hasLocalHover: safeHovered !== null,
+		showTooltip,
 		hoveredSeriesKey: safeHoveredSeries,
 		getMarkState,
 		onCategoryEnter,
@@ -93,7 +98,7 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 		onSeriesLeave
 	}), [
 		effectiveIndex,
-		safeHovered,
+		showTooltip,
 		safeHoveredSeries,
 		getMarkState,
 		onCategoryEnter,

package/dist/styles.css

@@ -24,27 +24,28 @@
 .c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:var(--c1hcga6s-1);-ms-flex-direction:var(--c1hcga6s-1);flex-direction:var(--c1hcga6s-1);-webkit-align-items:var(--c1hcga6s-2);-webkit-box-align:var(--c1hcga6s-2);-ms-flex-align:var(--c1hcga6s-2);align-items:var(--c1hcga6s-2);-webkit-box-pack:var(--c1hcga6s-3);-ms-flex-pack:var(--c1hcga6s-3);-webkit-justify-content:var(--c1hcga6s-3);justify-content:var(--c1hcga6s-3);width:var(--c1hcga6s-4);min-width:0;height:var(--c1hcga6s-5);min-height:0;}
 .c1fvbgkp{position:relative;width:var(--c1fvbgkp-0);min-width:0;aspect-ratio:var(--c1fvbgkp-1);height:var(--c1fvbgkp-2);-webkit-flex:var(--c1fvbgkp-3);-ms-flex:var(--c1fvbgkp-3);flex:var(--c1fvbgkp-3);min-height:var(--c1fvbgkp-4);}
 .c10uj5yt{display:block;overflow:visible;}
-.cyuty3o{opacity:1;}.cyuty3o[data-state="muted"]{opacity:0.1;}
-.c1ob2op2{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;}.c1ob2op2[data-state="muted"]{opacity:0.1;}
-.c8c506o{stroke:none;pointer-events:none;opacity:1;}.c8c506o[data-state="muted"]{opacity:0.1;}
-.ceqlpek{pointer-events:none;opacity:1;}.ceqlpek[data-state="muted"]{opacity:0.1;}
-.c1fcbddl{opacity:1;}.c1fcbddl[data-state="muted"]{opacity:0.1;}
+.cyuty3o{opacity:1;}.cyuty3o[data-state="muted"]{opacity:0.1;}.cyuty3o[data-state="dimmed"]{opacity:0.4;}
+.c1ob2op2{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;}.c1ob2op2[data-state="muted"]{opacity:0.1;}.c1ob2op2[data-state="dimmed"]{opacity:0.4;}
+.c8c506o{stroke:none;pointer-events:none;opacity:1;}.c8c506o[data-state="muted"]{opacity:0.1;}.c8c506o[data-state="dimmed"]{opacity:0.4;}
+.ceqlpek{pointer-events:none;opacity:1;}.ceqlpek[data-state="muted"]{opacity:0.1;}.ceqlpek[data-state="dimmed"]{opacity:0.4;}
+.c1fcbddl{opacity:1;}.c1fcbddl[data-state="muted"]{opacity:0.1;}.c1fcbddl[data-state="dimmed"]{opacity:0.4;}
 .cpcxr59{fill:transparent;outline:none;}
 .c1wvzvu4{fill:transparent;outline:none;}
 .c17guewt{stroke:var(--c17guewt-0);shape-rendering:crispEdges;}
 .cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}
-.c1lr03cc{overflow:visible;pointer-events:none;}
-.cizy1s8{position:absolute;z-index:10;pointer-events:none;left:var(--cizy1s8-0);top:var(--cizy1s8-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--cizy1s8-2);border-radius:6px;background-color:var(--cizy1s8-3);opacity:var(--cizy1s8-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.cizy1s8{-webkit-transition:none;transition:none;}}
-.c1ukq11d{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
-.cwcko2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
-.cqwhvyz{text-align:right;white-space:nowrap;}
-.c1iaray{position:absolute;left:var(--c1iaray-0);top:var(--c1iaray-1);width:var(--c1iaray-2);height:var(--c1iaray-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
-.cz6jod1{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--cz6jod1-0);border-radius:6px;background-color:var(--cz6jod1-1);pointer-events:none;text-align:center;}
-.c1de5mqk{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1de5mqk-0);-ms-flex-direction:var(--c1de5mqk-0);flex-direction:var(--c1de5mqk-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1de5mqk-1);-webkit-box-align:var(--c1de5mqk-1);-ms-flex-align:var(--c1de5mqk-1);align-items:var(--c1de5mqk-1);-webkit-box-pack:var(--c1de5mqk-2);-ms-flex-pack:var(--c1de5mqk-2);-webkit-justify-content:var(--c1de5mqk-2);justify-content:var(--c1de5mqk-2);gap:var(--c1de5mqk-3);width:var(--c1de5mqk-4);min-width:var(--c1de5mqk-5);height:var(--c1de5mqk-6);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--c1de5mqk-7);padding-left:var(--c1de5mqk-8);}
-.cjirv6a{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);gap:var(--cjirv6a-2);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
-.c1armna5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:8px;max-height:208px;overflow-y:auto;}
-.cgd77rv{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.cgd77rv[data-state="muted"]{opacity:0.1;}.cgd77rv:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
-.cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;}.cutidpi[data-state="muted"]{opacity:0.1;}
+.c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}
+.cizy1s8{overflow:visible;pointer-events:none;}
+.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
+.cwcko2m{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
+.cqwhvyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
+.c1iaray{text-align:right;white-space:nowrap;}
+.cz6jod1{position:absolute;left:var(--cz6jod1-0);top:var(--cz6jod1-1);width:var(--cz6jod1-2);height:var(--cz6jod1-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
+.c1de5mqk{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--c1de5mqk-0);border-radius:6px;background-color:var(--c1de5mqk-1);pointer-events:none;text-align:center;}
+.cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);width:var(--cjirv6a-3);min-width:var(--cjirv6a-4);height:var(--cjirv6a-5);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-6);padding-left:var(--cjirv6a-7);}
+.c1armna5{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1armna5-0);-ms-flex-direction:var(--c1armna5-0);flex-direction:var(--c1armna5-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1armna5-1);-webkit-box-align:var(--c1armna5-1);-ms-flex-align:var(--c1armna5-1);align-items:var(--c1armna5-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
+.cgd77rv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
+.cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--cutidpi-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.cutidpi[data-state="muted"]{opacity:0.1;}.cutidpi[data-state="dimmed"]{opacity:0.4;}.cutidpi:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--ccpczg-0);opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
 .tbnx4ok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .tjda4tq{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:var(--tjda4tq-0);background-color:var(--tjda4tq-1);border:var(--tjda4tq-2);border-radius:5px;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",