@galaxy-io/dls 1.5.10 → 1.5.12

package/dist/charts/BarChart.d.ts

@@ -1,5 +1,5 @@
 import { BarChartNormalization } from "./types";
-import type { BarChartGroupDatum, BaseCartesianChartProps, ChartSeriesStyles, ChartSize } from "./types";
+import type { BarChartGroupDatum, BaseCartesianChartProps, ChartSelectionEvent, ChartSelectionInput, ChartSeriesStyles, ChartSize } from "./types";
 export type BarChartProps<TMetric extends string, TComponentKey extends string = string> = BaseCartesianChartProps & ChartSize & {
     /**
      * Presentation for every metric, keyed by metric.
@@ -16,6 +16,30 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     /** Tint the active category's full band, marking the hover position even
      * where there is no data. @default true */
     showCursor?: boolean;
+    /**
+     * Fires when a bar segment or a category is clicked. Supplying it is what
+     * makes the plot clickable.
+     *
+     * A click resolves to the finest thing under the pointer: a segment reports
+     * its own key and value, while the gutters, the plot above a short bar and
+     * the hairline seams between segments fall back to the category alone.
+     *
+     * `seriesKey` follows the same rule the legend and the mute axis do —
+     * components when the chart is stacked, metrics when it is not — so all
+     * three always name the same dimension.
+     */
+    onSelect?: (event: ChartSelectionEvent<NoInfer<TMetric> | NoInfer<TComponentKey>>) => void;
+    /**
+     * Which marks read as selected. Matching bars hold full strength, the rest
+     * recede, and each selected category takes a persistent band — the hover
+     * tint one step firmer, held rather than previewed.
+     *
+     * Presentational and never written by the chart: the state belongs to
+     * whatever the selection is filtering, so the two cannot drift apart. Feed
+     * an {@link onSelect} event straight back, or describe a broader set —
+     * `{ seriesKey: "failed" }` selects every failure on the axis.
+     */
+    selection?: ChartSelectionInput<NoInfer<TMetric> | NoInfer<TComponentKey>>;
 };
 /**
  * Bar chart with a three-level data model.
@@ -24,5 +48,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, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, 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, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -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, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -107,6 +107,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		seriesKeys: legendKeys,
 		categoryKeys,
 		categoryMuteState: ChartMarkState.DIMMED,
+		selection,
 		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
@@ -144,6 +145,47 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
+	/**
+	* One clickable target per drawn rectangle, over the bands.
+	*
+	* The rects already carry everything a click needs, so the target is exactly
+	* the mark — no inflation to make a thin segment easier to hit. Growing one
+	* would overlap the neighbour whose edge the geometry snapped to the same
+	* pixel, and a segment too small to hit still lands on the band beneath and
+	* selects its category, which is the honest answer for a sliver.
+	*/
+	const markTargets = useMemo(() => geometry.rects.map((rect) => ({
+		key: rect.id,
+		categoryIndex: rect.groupIndex,
+		shape: ChartTargetShape.RECT,
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height
+	})), [geometry.rects]);
+	const handleCategorySelect = useCallback((index) => {
+		const group = groups[index];
+		if (!group || !onSelect) return;
+		onSelect({
+			categoryIndex: index,
+			categoryKey: group.label
+		});
+	}, [groups, onSelect]);
+	const handleMarkSelect = useCallback((index) => {
+		const rect = geometry.rects[index];
+		if (!rect || !onSelect) return;
+		onSelect({
+			categoryIndex: rect.groupIndex,
+			categoryKey: groups[rect.groupIndex]?.label ?? rect.metric,
+			seriesKey: isStacked ? rect.componentKey : rect.metric,
+			value: rect.value
+		});
+	}, [
+		geometry.rects,
+		groups,
+		isStacked,
+		onSelect
+	]);
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -178,6 +220,9 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		tooltipRenderer,
 		tooltipMaxItems,
 		categoryTargets,
+		markTargets,
+		onCategorySelect: onSelect && handleCategorySelect,
+		onMarkSelect: onSelect && handleMarkSelect,
 		anchorHalfWidth: categoryStep / 2,
 		isEmpty,
 		isLoading,
@@ -185,19 +230,29 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		showLegend,
 		legendItems,
 		legendMaxItems,
-		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))]
+		children: [
+			geometry.bands.filter((band) => interaction.selectedCategoryIndices.has(band.groupIndex)).map((band) => /* @__PURE__ */ jsx(ChartCursorBand, {
+				x: band.x,
+				y: band.y,
+				width: band.width,
+				height: band.height,
+				"data-selected": "true"
+			}, `selected:${band.groupIndex}`)),
+			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))
+		]
 	});
 };
 //#endregion

package/dist/charts/ChartCategoryTargets.d.ts

@@ -1,7 +1,7 @@
 import type { ChartCategoryTarget } from "./types";
 import type { ChartInteraction } from "./useChartInteraction";
 /**
- * The hover layer: one transparent target per category, above the marks.
+ * The base hit layer: one transparent target per category, above the marks.
  *
  * Shared by all three charts so hit testing is spelled once. Targets carry no
  * roles and no tab stops — the plot is `role="img"` and its accessible story is
@@ -10,10 +10,19 @@ import type { ChartInteraction } from "./useChartInteraction";
  * 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.
+ *
+ * **Only `onMouseEnter` lives here; leaving is the target group's job.** Per-target
+ * leave handlers fire on every crossing *within* the plot, so the state fell to
+ * null and back on each one — a wasted render between neighbouring bands, and a
+ * visible flicker once the mark layer above added a second boundary inside a
+ * single category. The group's leave fires exactly once, when the pointer
+ * actually leaves the plot.
  */
 interface ChartCategoryTargetsProps {
     targets: ChartCategoryTarget[];
     interaction: ChartInteraction;
+    /** Supplying this makes the category clickable, cursor included. */
+    onSelect?: (categoryIndex: number) => void;
 }
-declare const ChartCategoryTargets: ({ targets, interaction }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+declare const ChartCategoryTargets: ({ targets, interaction, onSelect }: ChartCategoryTargetsProps) => import("react").JSX.Element;
 export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -3,10 +3,11 @@ 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 }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+var ChartCategoryTargets = ({ targets, interaction, onSelect }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
 	const shared = {
 		onMouseEnter: () => interaction.onCategoryEnter(index),
-		onMouseLeave: () => interaction.onCategoryLeave()
+		onClick: onSelect === void 0 ? void 0 : () => onSelect(index),
+		"data-clickable": onSelect === void 0 ? void 0 : "true"
 	};
 	return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
 		x: rect.x,

package/dist/charts/ChartFrame.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { ChartKind, ChartLegendPlacement } from "./types";
-import type { ChartCategoryTarget, ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
+import type { ChartCategoryTarget, ChartLegendItem, ChartMarkTarget, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
 import type { ChartDimensions } from "./useChartDimensions";
 import type { ChartInteraction } from "./useChartInteraction";
 import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
@@ -87,8 +87,25 @@ export interface ChartFrameProps {
      * plot passes.
      */
     categoryTargets?: ChartCategoryTarget[];
-    /** Applied to the target layer. Radial charts pass their centre translate. */
+    /**
+     * One target per rendered mark, painted over {@link categoryTargets} so a
+     * click can name a segment rather than only its column. Omitted by the charts
+     * whose marks are not separately clickable — see `ChartMarkTargets`.
+     */
+    markTargets?: ChartMarkTarget[];
+    /** Applied to both target layers. Radial charts pass their centre translate. */
     categoryTargetsTransform?: string;
+    /**
+     * Click on a category, by index. Supplying it is what makes the plot
+     * clickable at all — the cursor and the mark layer's handler both follow it.
+     *
+     * Index-based, because building the event needs the chart's own geometry and
+     * vocabulary. The frame knows neither, exactly as with
+     * {@link buildCategoryTooltip}.
+     */
+    onCategorySelect?: (categoryIndex: number) => void;
+    /** Click on one mark, by its index in {@link markTargets}. */
+    onMarkSelect?: (markIndex: number) => void;
     /** Half a category's width, so the tooltip sits beside the marks. */
     anchorHalfWidth?: number;
     /** Radial charts pass their centre, in plot coordinates. */
@@ -111,5 +128,5 @@ export interface ChartFrameProps {
      */
     legendInset?: number;
 }
-declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, markTargets, categoryTargetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -4,12 +4,13 @@ import { ChartPlotBox, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
 import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
+import ChartMarkTargets from "./ChartMarkTargets.js";
 import ChartTooltip from "./ChartTooltip.js";
 import { match } from "ts-pattern";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartFrame.tsx
-var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, markTargets, categoryTargetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
 	const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
@@ -83,12 +84,18 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 						children: [
 							axes,
 							/* @__PURE__ */ jsx("g", { children }),
-							hasTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
+							hasTargets && categoryTargets && /* @__PURE__ */ jsxs("g", {
 								transform: categoryTargetsTransform,
-								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
+								onMouseLeave: interaction.onCategoryLeave,
+								children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
-									interaction
-								})
+									interaction,
+									onSelect: onCategorySelect
+								}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
+									targets: markTargets,
+									interaction,
+									onSelect: onMarkSelect
+								})]
 							})
 						]
 					})]

package/dist/charts/ChartMarkTargets.d.ts

@@ -0,0 +1,30 @@
+import type { ChartMarkTarget } from "./types";
+import type { ChartInteraction } from "./useChartInteraction";
+/**
+ * The mark hit layer: one transparent target per rendered mark, above the
+ * category targets.
+ *
+ * Exists so a click can name a single segment — the red block of the 00:00 bar
+ * — where the category layer beneath can only name the column. Rendered by the
+ * charts that have marks worth distinguishing: BarChart does, LineChart has no
+ * segments to hit, and PieChart's category targets already *are* its arcs.
+ *
+ * **Hover is not refined here.** Each target reports its own category on enter,
+ * exactly as the band underneath would, so the tooltip reads the same index
+ * whichever layer the pointer is over and holds still while crossing a stack.
+ * The banded hover is deliberate — it makes a two-pixel segment as easy to
+ * hover as a two-hundred-pixel one — and this layer only adds a finer *click*.
+ *
+ * Anything the marks do not cover falls through to the category target: the
+ * gutters, the plot above a short bar, and the hairline gaps between stack
+ * segments. That is the documented fallback, and it is why a segment too small
+ * to hit still selects something sensible.
+ */
+interface ChartMarkTargetsProps {
+    targets: ChartMarkTarget[];
+    interaction: ChartInteraction;
+    /** Supplying this makes the marks clickable, cursor included. */
+    onSelect?: (markIndex: number) => void;
+}
+declare const ChartMarkTargets: ({ targets, interaction, onSelect }: ChartMarkTargetsProps) => import("react").JSX.Element;
+export default ChartMarkTargets;

package/dist/charts/ChartMarkTargets.js

@@ -0,0 +1,24 @@
+import { ChartTargetShape } from "./types.js";
+import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
+import { match } from "ts-pattern";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/charts/ChartMarkTargets.tsx
+var ChartMarkTargets = ({ targets, interaction, onSelect }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+	const shared = {
+		onMouseEnter: () => interaction.onCategoryEnter(target.categoryIndex),
+		onClick: onSelect === void 0 ? void 0 : () => onSelect(index),
+		"data-clickable": onSelect === void 0 ? void 0 : "true"
+	};
+	return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height,
+		...shared
+	}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
+		d: path.d,
+		...shared
+	}, path.key)).exhaustive();
+}) });
+//#endregion
+export { ChartMarkTargets as default };

package/dist/charts/ChartPrimitives.d.ts

@@ -51,15 +51,19 @@ export declare const ChartAreaPath: import("@linaria/react").StyledComponent<imp
 export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
 export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 /**
- * Per-category hit target, rendered above the marks.
+ * Hit target, rendered above the marks. Used for both layers — one per category
+ * beneath, one per mark above.
  *
  * Hit testing the full column rather than the bars themselves means a two-pixel
  * bar is as easy to hover as a two-hundred-pixel one, and crossing between
- * segments inside a category fires no events at all — so the tooltip holds
+ * segments inside a category changes nothing the tooltip reads — so it holds
  * still instead of chasing each segment.
  *
- * No cursor and no focus treatment: the target only previews on hover, and a
- * pointer cursor would promise a click that does nothing.
+ * The pointer cursor is conditional because the promise is: it appears only
+ * where a click actually reports something, and a chart with no `onSelect`
+ * keeps the default cursor rather than advertising an interaction it does not
+ * have. No focus treatment either — the plot is `role="img"` and its marks are
+ * not in the accessibility tree, so there is nothing here to focus yet.
  */
 export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**
@@ -93,7 +97,14 @@ export declare const ChartGridLine: import("react").ComponentType<Pick<import("r
 } & {
     as?: React.ElementType;
 }>, {}>;
-/** Vertical rule marking the hovered category on a line chart. */
+/**
+ * Vertical rule marking the hovered category on a line chart.
+ *
+ * `data-selected` steps it up the same neutral ramp rather than introducing a
+ * hue: a selection is the *same* mark held rather than previewed, and a colour
+ * change would read as a different kind of thing. The state is an attribute
+ * rather than a `$` prop for the reason at the top of this file.
+ */
 export declare const ChartCursorLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
     theme: import("../theme").Theme;
 } & {
@@ -115,7 +126,11 @@ export declare const ChartCursorLine: import("react").ComponentType<Pick<import(
  * 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.
+ * touching them.
+ *
+ * 4% of the foreground, so it survives both themes. Deliberately fainter than
+ * the line chart's rule: a band is a large area where a rule is a hairline, and
+ * the same value that reads as quiet on one shouts on the other.
  */
 export declare const ChartCursorBand: import("react").ComponentType<Pick<import("react").SVGProps<SVGRectElement> & {
     theme: import("../theme").Theme;

package/dist/charts/ChartPrimitives.js

@@ -128,15 +128,19 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
-* Per-category hit target, rendered above the marks.
+* Hit target, rendered above the marks. Used for both layers — one per category
+* beneath, one per mark above.
 *
 * Hit testing the full column rather than the bars themselves means a two-pixel
 * bar is as easy to hover as a two-hundred-pixel one, and crossing between
-* segments inside a category fires no events at all — so the tooltip holds
+* segments inside a category changes nothing the tooltip reads — so it holds
 * still instead of chasing each segment.
 *
-* No cursor and no focus treatment: the target only previews on hover, and a
-* pointer cursor would promise a click that does nothing.
+* The pointer cursor is conditional because the promise is: it appears only
+* where a click actually reports something, and a chart with no `onSelect`
+* keeps the default cursor rather than advertising an interaction it does not
+* have. No focus treatment either — the plot is `role="img"` and its marks are
+* not in the accessibility tree, so there is nothing here to focus yet.
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
@@ -168,26 +172,45 @@ var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	propsAsIs: true,
 	vars: { "c17guewt-0": [_exp15()] }
 }));
-/** Vertical rule marking the hovered category on a line chart. */
+/**
+* Vertical rule marking the hovered category on a line chart.
+*
+* `data-selected` steps it up the same neutral ramp rather than introducing a
+* hue: a selection is the *same* mark held rather than previewed, and a colour
+* change would read as a different kind of thing. The state is an attribute
+* rather than a `$` prop for the reason at the top of this file.
+*/
 var _exp16 = () => ({ theme }) => theme.color.border.secondary;
+var _exp17 = () => ({ theme }) => theme.color.opacity.bw32Alt;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
 	class: "cblgiyf",
 	propsAsIs: true,
-	vars: { "cblgiyf-0": [_exp16()] }
+	vars: {
+		"cblgiyf-0": [_exp16()],
+		"cblgiyf-1": [_exp17()]
+	}
 }));
 /**
 * 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.
+* touching them.
+*
+* 4% of the foreground, so it survives both themes. Deliberately fainter than
+* the line chart's rule: a band is a large area where a rule is a hairline, and
+* the same value that reads as quiet on one shouts on the other.
 */
-var _exp17 = () => ({ theme }) => theme.color.opacity.bw8Alt;
+var _exp18 = () => ({ theme }) => theme.color.opacity.b4Alt;
+var _exp19 = () => ({ theme }) => theme.color.opacity.bw8Alt;
 var ChartCursorBand = withTheme(/*#__PURE__*/ styled("rect")({
 	name: "ChartCursorBand",
 	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp17()] }
+	vars: {
+		"c1lr03cc-0": [_exp18()],
+		"c1lr03cc-1": [_exp19()]
+	}
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
@@ -201,21 +224,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 _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 _exp20 = () => ({ $x }) => `${$x}px`;
+var _exp21 = () => ({ $y }) => `${$y}px`;
+var _exp24 = () => ({ theme }) => theme.color.border.primary;
+var _exp25 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp26 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
 	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"c1ukq11d-0": [_exp18()],
-		"c1ukq11d-1": [_exp19()],
-		"c1ukq11d-2": [_exp22()],
-		"c1ukq11d-3": [_exp23()],
-		"c1ukq11d-4": [_exp24()]
+		"c1ukq11d-0": [_exp20()],
+		"c1ukq11d-1": [_exp21()],
+		"c1ukq11d-2": [_exp24()],
+		"c1ukq11d-3": [_exp25()],
+		"c1ukq11d-4": [_exp26()]
 	}
 }));
 /**
@@ -252,58 +275,58 @@ var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp30 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp31 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp33 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
 	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp28()],
-		"cz6jod1-1": [_exp29()],
-		"cz6jod1-2": [_exp31()]
+		"cz6jod1-0": [_exp30()],
+		"cz6jod1-1": [_exp31()],
+		"cz6jod1-2": [_exp33()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp32 = () => ({ theme }) => theme.color.border.primary;
-var _exp33 = () => ({ theme }) => theme.color.background.primary;
+var _exp34 = () => ({ theme }) => theme.color.border.primary;
+var _exp35 = () => ({ theme }) => theme.color.background.primary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
 	class: "c1de5mqk",
 	propsAsIs: false,
 	vars: {
-		"c1de5mqk-0": [_exp32()],
-		"c1de5mqk-1": [_exp33()]
+		"c1de5mqk-0": [_exp34()],
+		"c1de5mqk-1": [_exp35()]
 	}
 }));
 /**
 * Aligns the legend under the plot rather than the value-axis gutter.
 */
-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";
-var _exp40 = () => ({ $vertical }) => $vertical ? "0" : "10px";
-var _exp41 = () => ({ $inset }) => `${$inset}px`;
+var _exp36 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp37 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp38 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
+var _exp39 = () => ({ $vertical }) => $vertical ? "auto" : "0";
+var _exp40 = () => ({ $vertical }) => $vertical ? "0" : "100%";
+var _exp41 = () => ({ $vertical, $extent }) => $vertical && $extent ? `${$extent}px` : "auto";
+var _exp42 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp43 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
 	class: "cjirv6a",
 	propsAsIs: false,
 	vars: {
-		"cjirv6a-0": [_exp34()],
-		"cjirv6a-1": [_exp35()],
-		"cjirv6a-2": [_exp36()],
-		"cjirv6a-3": [_exp37()],
-		"cjirv6a-4": [_exp38()],
-		"cjirv6a-5": [_exp39()],
-		"cjirv6a-6": [_exp40()],
-		"cjirv6a-7": [_exp41()]
+		"cjirv6a-0": [_exp36()],
+		"cjirv6a-1": [_exp37()],
+		"cjirv6a-2": [_exp38()],
+		"cjirv6a-3": [_exp39()],
+		"cjirv6a-4": [_exp40()],
+		"cjirv6a-5": [_exp41()],
+		"cjirv6a-6": [_exp42()],
+		"cjirv6a-7": [_exp43()]
 	}
 });
 /**
@@ -333,15 +356,15 @@ var ChartLegendMeasureClip = /*#__PURE__*/ styled("div")({
 * Absolute and hidden: it must not affect the row's layout, and measuring live
 * entries instead would conflate "what fits" with "what is currently shown".
 */
-var _exp42 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp43 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp44 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp45 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
 var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendMeasure",
 	class: "cgd77rv",
 	propsAsIs: false,
 	vars: {
-		"cgd77rv-0": [_exp42()],
-		"cgd77rv-1": [_exp43()]
+		"cgd77rv-0": [_exp44()],
+		"cgd77rv-1": [_exp45()]
 	}
 });
 /**
@@ -374,21 +397,21 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 * series to the next. Trailing only, so the first entry stays flush with the
 * plot's left edge (or the column's top).
 */
-var _exp46 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
+var _exp48 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
 	class: "ccpczg",
 	propsAsIs: false,
-	vars: { "ccpczg-0": [_exp46()] }
+	vars: { "ccpczg-0": [_exp48()] }
 });
 /** The same row, when the legend is inert — no button semantics to announce.
 * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
-var _exp48 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
+var _exp50 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
 	class: "c2re25h",
 	propsAsIs: false,
-	vars: { "c2re25h-0": [_exp48()] }
+	vars: { "c2re25h-0": [_exp50()] }
 });
 //#endregion
 export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/LineChart.d.ts

@@ -1,5 +1,5 @@
 import { LineChartCurve } from "./types";
-import type { BaseCartesianChartProps, ChartSeriesStyles, ChartSize, LineChartLineDatum } from "./types";
+import type { BaseCartesianChartProps, ChartSelectionEvent, ChartSelectionInput, ChartSeriesStyles, ChartSize, LineChartLineDatum } from "./types";
 export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & ChartSize & {
     /**
      * Presentation for every metric, keyed by metric.
@@ -25,6 +25,25 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
     strokeWidth?: number;
     /** Draw a vertical rule at the active category. @default true */
     showCursor?: boolean;
+    /**
+     * Fires when a category is clicked. Supplying it is what makes the plot
+     * clickable.
+     *
+     * Always the category, never a single line: hit testing is per column here,
+     * and a line has no segment to land on — the reading at a category belongs
+     * to every line at once, which is exactly what the tooltip reports. Use
+     * `seriesKey` in {@link selection} to narrow to one line.
+     */
+    onSelect?: (event: ChartSelectionEvent<NoInfer<TMetric>>) => void;
+    /**
+     * Which marks read as selected. Matching lines hold full strength, the rest
+     * recede, and each selected category keeps a persistent cursor with its
+     * dots — the hover rule one step firmer, held rather than previewed.
+     *
+     * Presentational and never written by the chart: the state belongs to
+     * whatever the selection is filtering, so the two cannot drift apart.
+     */
+    selection?: ChartSelectionInput<NoInfer<TMetric>>;
 };
 /**
  * Line chart over a categorical x-axis.
@@ -34,5 +53,5 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
  * what a reader wants, and it avoids the proximity search a
  * nearest-point-to-cursor model needs.
  */
-declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
+declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -18,7 +18,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * what a reader wants, and it avoids the proximity search a
 * nearest-point-to-cursor model needs.
 */
-var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -69,6 +69,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
 		categoryKeys: geometry.categories,
+		selection,
 		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
@@ -104,6 +105,22 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
+	const handleCategorySelect = useCallback((index) => {
+		const category = geometry.categories[index];
+		if (category === void 0 || !onSelect) return;
+		onSelect({
+			categoryIndex: index,
+			categoryKey: category
+		});
+	}, [geometry.categories, onSelect]);
+	/**
+	* Columns the selection names, resolved once.
+	*
+	* These get the cursor and the dots permanently — the same treatment hovering
+	* gives, one step firmer on the same neutral ramp, which is the whole
+	* difference the held stroke has to communicate.
+	*/
+	const selectedColumns = useMemo(() => geometry.columns.filter((column) => interaction.selectedCategoryIndices.has(column.categoryIndex)), [geometry.columns, interaction.selectedCategoryIndices]);
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -138,6 +155,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		tooltipRenderer,
 		tooltipMaxItems,
 		categoryTargets,
+		onCategorySelect: onSelect && handleCategorySelect,
 		anchorHalfWidth: geometry.step / 2,
 		isEmpty,
 		isLoading,
@@ -152,6 +170,13 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 				fillOpacity: LINE_AREA_OPACITY,
 				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
 			}, `${linePath.id}:area`) : null),
+			selectedColumns.map((column) => /* @__PURE__ */ jsx(ChartCursorLine, {
+				x1: column.x,
+				x2: column.x,
+				y1: 0,
+				y2: plotHeight,
+				"data-selected": "true"
+			}, `selected:${column.categoryIndex}`)),
 			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
 				x1: activeColumn.x,
 				x2: activeColumn.x,
@@ -178,7 +203,14 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 				r: LINE_POINT_RADIUS,
 				fill: point.color,
 				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, point.id))
+			}, point.id)),
+			selectedColumns.filter((column) => column.categoryIndex !== activeColumn?.categoryIndex).flatMap((column) => column.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, `selected:${point.id}`)))
 		]
 	});
 };

package/dist/charts/PieChart.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import type { BaseChartProps, ChartSeriesStyles, ChartSize, PieChartSliceDatum } from "./types";
+import { AGGREGATED_SLICE_KEY } from "./constants";
+import type { BaseChartProps, ChartSelectionEvent, ChartSelectionInput, ChartSeriesStyles, ChartSize, PieChartSliceDatum } from "./types";
 export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize & {
     /**
      * Presentation for every slice, keyed by slice.
@@ -32,6 +33,26 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
      * Ignored when `innerRadiusRatio` is 0.
      */
     centerContent?: ReactNode;
+    /**
+     * Fires when a slice is clicked. Supplying it is what makes the plot
+     * clickable.
+     *
+     * `categoryKey` and `seriesKey` are always the same value here: a pie's
+     * category axis *is* its series axis, and the arcs are already its hit
+     * targets, so there is no coarser fallback to take. Clicking the folded
+     * bucket reports {@link AGGREGATED_SLICE_KEY}, which the key union says
+     * outright rather than widening to `string`.
+     */
+    onSelect?: (event: ChartSelectionEvent<NoInfer<TSlice> | typeof AGGREGATED_SLICE_KEY>) => void;
+    /**
+     * Which arcs read as selected. Matching arcs hold full strength and the
+     * rest recede — the lone lit slice is unambiguous, so there is no band or
+     * outline on top of it.
+     *
+     * Presentational and never written by the chart: the state belongs to
+     * whatever the selection is filtering, so the two cannot drift apart.
+     */
+    selection?: ChartSelectionInput<NoInfer<TSlice> | typeof AGGREGATED_SLICE_KEY>;
 };
 /**
  * Pie and donut chart.
@@ -40,5 +61,5 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
  * each arc is its own target. Small slices are folded into an "Other" bucket by
  * default, which keeps every remaining arc large enough to actually hit.
  */
-declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
+declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, onSelect, selection, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;

package/dist/charts/PieChart.js

@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 * each arc is its own target. Small slices are folded into an "Other" bucket by
 * default, which keeps every remaining arc large enough to actually hit.
 */
-var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, onSelect, selection, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
@@ -76,6 +76,9 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
+		categoryKeys: legendKeys,
+		enableGroupSync: false,
+		selection,
 		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
@@ -110,6 +113,17 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		shape: ChartTargetShape.PATH,
 		d: chartArc.path
 	})), [geometry.arcs]);
+	const handleCategorySelect = useCallback((index) => {
+		const chartArc = geometry.arcs[index];
+		if (!chartArc || !onSelect) return;
+		const key = chartArc.id;
+		onSelect({
+			categoryIndex: index,
+			categoryKey: chartArc.id,
+			seriesKey: key,
+			value: chartArc.value
+		});
+	}, [geometry.arcs, onSelect]);
 	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
@@ -126,6 +140,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		tooltipRenderer,
 		tooltipMaxItems,
 		categoryTargets,
+		onCategorySelect: onSelect && handleCategorySelect,
 		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,

package/dist/charts/chartTheme.js

@@ -13,7 +13,7 @@ import { match } from "ts-pattern";
 */
 /** Resolve a palette slot to a concrete color for the active theme. */
 function resolveChartPaletteColor(theme, palette) {
-	return match(palette).with(ChartPalette.PURPLE, () => theme.color.icon.purple).with(ChartPalette.PINK, () => theme.color.icon.pink).with(ChartPalette.BLUE, () => theme.color.icon.blue).with(ChartPalette.TEAL, () => theme.color.icon.teal).with(ChartPalette.LIME, () => theme.color.icon.lime).with(ChartPalette.ORANGE, () => theme.color.icon.orange).with(ChartPalette.YELLOW, () => theme.color.icon.yellow).with(ChartPalette.GREEN, () => theme.color.icon.success).with(ChartPalette.RED, () => theme.color.icon.error).exhaustive();
+	return match(palette).with(ChartPalette.PURPLE, () => theme.color.icon.purple).with(ChartPalette.PINK, () => theme.color.icon.pink).with(ChartPalette.BLUE, () => theme.color.icon.blue).with(ChartPalette.TEAL, () => theme.color.icon.teal).with(ChartPalette.LIME, () => theme.color.icon.lime).with(ChartPalette.ORANGE, () => theme.color.icon.orange).with(ChartPalette.YELLOW, () => theme.color.icon.yellow).with(ChartPalette.GREEN, () => theme.color.icon.success).with(ChartPalette.RED, () => theme.color.icon.error).with(ChartPalette.PRIMARY, () => theme.color.icon.primary).with(ChartPalette.SECONDARY, () => theme.color.icon.secondary).with(ChartPalette.TERTIARY, () => theme.color.icon.tertiary).with(ChartPalette.WARNING, () => theme.color.icon.warning).exhaustive();
 }
 /**
 * Resolve the color for a series, honoring an explicit slot and otherwise

package/dist/charts/types.d.ts

@@ -46,7 +46,11 @@ export declare enum ChartPalette {
     ORANGE = "ORANGE",
     YELLOW = "YELLOW",
     GREEN = "GREEN",
-    RED = "RED"
+    RED = "RED",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY",
+    WARNING = "WARNING"
 }
 /**
  * Built-in value formats. Supplies an `Intl`-based default for axis ticks,
@@ -358,6 +362,84 @@ export type ChartCategoryTarget = {
     shape: ChartTargetShape.PATH;
     d: string;
 };
+/**
+ * One rendered mark's own target, in plot coordinates.
+ *
+ * Drawn above the category targets and bound to *clicks* only. Hover stays
+ * per category — crossing between two segments of one stack re-enters the
+ * category the pointer already had, so the tooltip holds still. That banding is
+ * why a two-pixel segment is as easy to hover as a two-hundred-pixel one, and a
+ * click layer laid over it must not undo it.
+ *
+ * Unlike {@link ChartCategoryTarget}, array position says nothing about the
+ * category here, so each target names its own.
+ */
+export type ChartMarkTarget = {
+    key: string;
+    /** The category this mark sits in — its hover, and its selection event. */
+    categoryIndex: number;
+    shape: ChartTargetShape.RECT;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | {
+    key: string;
+    categoryIndex: number;
+    shape: ChartTargetShape.PATH;
+    d: string;
+};
+/**
+ * Which marks a chart's `selection` covers.
+ *
+ * A *descriptor* rather than a coordinate: a mark matches when every field
+ * present matches it, and a field the mark has no notion of never excludes it.
+ * One shape therefore spells every granularity without a mode flag —
+ *
+ * ```ts
+ * { categoryKey: "00:00" }                      // the whole 00:00 column
+ * { seriesKey: "failed" }                       // every failure, all columns
+ * { categoryKey: "00:00", seriesKey: "failed" } // one segment
+ * ```
+ *
+ * — and that last rule is what stops a category selection from muting a
+ * LineChart's strokes, which span every category and belong to none.
+ */
+export interface ChartSelection<TSeriesKey extends string = string> {
+    /**
+     * Raw category label, never `labelFormatter` output — the same vocabulary
+     * `ChartGroupProvider` matches on, for the same reason: two charts formatting
+     * one label differently must still agree on what it names.
+     */
+    categoryKey?: string;
+    /**
+     * Whatever this chart's legend names: components in a stacked bar, metrics in
+     * an unstacked one or a line chart, slices in a pie. The same key the mute
+     * axis uses, so a selection and the legend cannot describe different things.
+     */
+    seriesKey?: TSeriesKey;
+}
+/** One descriptor, several, or none. */
+export type ChartSelectionInput<TSeriesKey extends string = string> = ChartSelection<TSeriesKey> | ChartSelection<TSeriesKey>[] | null;
+/**
+ * What a click reports.
+ *
+ * Deliberately thin — no rows, no colors, no formatted strings. The caller
+ * already holds the data it passed in and can look the rest up by key, and a
+ * presentation-shaped payload is the kind that becomes load-bearing and then
+ * cannot be changed. The fields are exactly those a {@link ChartSelection} is
+ * built from, so feeding an event straight back as one is the common case.
+ */
+export interface ChartSelectionEvent<TSeriesKey extends string = string> {
+    categoryIndex: number;
+    /** Raw label, matching {@link ChartSelection.categoryKey}. */
+    categoryKey: string;
+    /** Absent when the click landed on empty plot rather than on a mark. */
+    seriesKey?: TSeriesKey;
+    /** The mark's own value, before any normalization. Absent whenever
+     * {@link seriesKey} is. */
+    value?: number;
+}
 /** One legend entry. */
 export interface ChartLegendItem {
     key: string;

package/dist/charts/types.js

@@ -47,6 +47,10 @@ var ChartPalette = /* @__PURE__ */ function(ChartPalette) {
 	ChartPalette["YELLOW"] = "YELLOW";
 	ChartPalette["GREEN"] = "GREEN";
 	ChartPalette["RED"] = "RED";
+	ChartPalette["PRIMARY"] = "PRIMARY";
+	ChartPalette["SECONDARY"] = "SECONDARY";
+	ChartPalette["TERTIARY"] = "TERTIARY";
+	ChartPalette["WARNING"] = "WARNING";
 	return ChartPalette;
 }({});
 /**

package/dist/charts/useChartInteraction.d.ts

@@ -1,4 +1,5 @@
 import { ChartMarkState } from "./types";
+import type { ChartSelectionInput } from "./types";
 /**
  * Hover interaction shared by every chart.
  *
@@ -18,9 +19,14 @@ import { ChartMarkState } from "./types";
  * 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
- * now always follows the pointer and releases with it.
+ * Plus one axis that is not hover at all: **selection**, supplied by the caller
+ * and never changed here. A selection is a commitment rather than a preview —
+ * it outranks both hover filters, and it releases only when the caller says so.
+ *
+ * Clicking deliberately does *not* pin the hover. That is what it used to do,
+ * with no effect outside the chart, and it read as the plot getting stuck. A
+ * click now only reports what was hit; whether anything lights up afterwards is
+ * the caller's `selection` to decide.
  */
 interface UseChartInteractionOptions {
     /** Number of hoverable categories. A shrinking count clears stale indices. */
@@ -28,12 +34,36 @@ interface UseChartInteractionOptions {
     /** Legend keys currently rendered. A key that disappears clears stale hover. */
     seriesKeys?: string[];
     /**
-     * Raw category labels, index-aligned with {@link categoryCount}. Supplying
-     * them opts the chart into `ChartGroupProvider` crosshair sync; omit (as
-     * PieChart does) to stay out. Raw labels, never `labelFormatter` output —
-     * two charts formatting the same label differently must still match.
+     * Raw category labels, index-aligned with {@link categoryCount}. Raw labels,
+     * never `labelFormatter` output — two charts formatting the same label
+     * differently must still match, and so must a caller's `selection`.
+     *
+     * Identity only. Opting into `ChartGroupProvider` sync is
+     * {@link enableGroupSync}, which used to be implied by supplying these — the
+     * two were split once selection needed the labels in a chart (PieChart) that
+     * must stay out of the sync group.
      */
     categoryKeys?: string[];
+    /**
+     * Follow a `ChartGroupProvider` sibling's hovered category. PieChart passes
+     * `false`: it has no category axis, so there is nothing to correlate.
+     * @default true
+     */
+    enableGroupSync?: boolean;
+    /**
+     * Marks the caller has selected. Matching marks hold full strength and the
+     * rest recede — the same "soften everything else" grammar the hover axes use,
+     * which is why selection needs no visual vocabulary of its own.
+     *
+     * Presentational and strictly read-only: this hook never writes it. The state
+     * lives with whatever the selection is filtering, so the chart and that thing
+     * cannot drift apart, and the DLS never has to pick toggle or multi-select
+     * semantics.
+     *
+     * Normalized here rather than by each chart, so "one, several, or none" is
+     * spelled once.
+     */
+    selection?: ChartSelectionInput;
     /**
      * How marks outside the active category recede. Defaults to
      * {@link ChartMarkState.MUTED}; BarChart passes
@@ -75,6 +105,15 @@ export interface ChartInteraction {
      */
     showTooltip: boolean;
     hoveredSeriesKey: string | null;
+    /**
+     * Categories a {@link UseChartInteractionOptions.selection} names outright.
+     *
+     * Drives the persistent cursor a cartesian chart draws at a selected
+     * category. A descriptor carrying only a `seriesKey` names no category and
+     * contributes nothing here — "every failure" should mute the other series,
+     * not band every column on the axis.
+     */
+    selectedCategoryIndices: ReadonlySet<number>;
     /**
      * Emphasis for one mark, composed from both axes.
      *
@@ -92,5 +131,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState, isDisabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync, selection, categoryMuteState, isDisabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -2,12 +2,15 @@ import { ChartMarkState } from "./types.js";
 import { ChartGroupContext } from "./ChartGroupProvider.js";
 import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
+/** Stable identity, so an absent selection never re-memoizes anything. */
+var NO_SELECTION = [];
+var NO_SELECTED_INDICES = /* @__PURE__ */ new Set();
+function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync = true, selection, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const sync = useContext(ChartGroupContext);
 	const syncId = useId();
-	const canSync = sync !== null && categoryKeys !== void 0;
+	const canSync = sync !== null && categoryKeys !== void 0 && enableGroupSync;
 	const setActive = sync?.setActive;
 	const clearActive = sync?.clearActive;
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
@@ -75,14 +78,72 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, category
 	const onSeriesLeave = useCallback(() => {
 		setHoveredSeriesKey(null);
 	}, []);
+	const selectionList = useMemo(() => {
+		if (selection === void 0 || selection === null) return NO_SELECTION;
+		if (!Array.isArray(selection)) return [selection];
+		return selection.length === 0 ? NO_SELECTION : selection;
+	}, [selection]);
+	const hasSelection = selectionList.length > 0;
+	/**
+	* Whether one mark falls inside the selection.
+	*
+	* A descriptor is a conjunction of the fields it *carries*: an absent field
+	* constrains nothing, and a field the mark itself has no notion of cannot
+	* exclude it. The second half is what keeps `{ categoryKey: "00:00" }` from
+	* muting every LineChart stroke — a stroke spans all the categories and is
+	* asked about none — while still muting the bars outside that column.
+	*
+	* Several descriptors union: a mark inside any of them is selected.
+	*/
+	const matchesSelection = useCallback(({ categoryIndex, seriesKey }) => {
+		if (!hasSelection) return true;
+		return selectionList.some((descriptor) => {
+			if (descriptor.categoryKey !== void 0 && categoryIndex !== void 0 && categoryKeys !== void 0 && categoryKeys[categoryIndex] !== descriptor.categoryKey) return false;
+			if (descriptor.seriesKey !== void 0 && seriesKey !== void 0 && seriesKey !== descriptor.seriesKey) return false;
+			return true;
+		});
+	}, [
+		hasSelection,
+		selectionList,
+		categoryKeys
+	]);
+	/**
+	* Resolved once rather than per mark: the cursor a cartesian chart draws at a
+	* selected category needs the set, and every mark would otherwise re-scan
+	* every descriptor.
+	*
+	* Deliberately not pruned when the data shrinks under it, unlike the hover
+	* indices above. A selection is the caller's state and describes what they
+	* asked for; a key that is momentarily absent from the data — mid-refetch,
+	* say — simply matches nothing until it returns.
+	*/
+	const selectedCategoryIndices = useMemo(() => {
+		if (!hasSelection || categoryKeys === void 0) return NO_SELECTED_INDICES;
+		const selectedKeys = new Set(selectionList.map((descriptor) => descriptor.categoryKey).filter((key) => key !== void 0));
+		if (selectedKeys.size === 0) return NO_SELECTED_INDICES;
+		const indices = /* @__PURE__ */ new Set();
+		categoryKeys.forEach((key, index) => {
+			if (selectedKeys.has(key)) indices.add(index);
+		});
+		return indices;
+	}, [
+		hasSelection,
+		selectionList,
+		categoryKeys
+	]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
 		if (isLoading) return ChartMarkState.MUTED;
+		if (!matchesSelection({
+			categoryIndex,
+			seriesKey
+		})) return ChartMarkState.MUTED;
 		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,
+		matchesSelection,
 		effectiveIndex,
 		safeHoveredSeries,
 		categoryMuteState
@@ -91,6 +152,7 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, category
 		activeIndex: effectiveIndex,
 		showTooltip,
 		hoveredSeriesKey: safeHoveredSeries,
+		selectedCategoryIndices,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,
@@ -100,6 +162,7 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, category
 		effectiveIndex,
 		showTooltip,
 		safeHoveredSeries,
+		selectedCategoryIndices,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,

package/dist/styles.css

@@ -33,11 +33,11 @@
 .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;}
+.cpcxr59{fill:transparent;outline:none;}.cpcxr59[data-clickable="true"]{cursor:pointer;}
+.c1wvzvu4{fill:transparent;outline:none;}.c1wvzvu4[data-clickable="true"]{cursor:pointer;}
 .c17guewt{stroke:var(--c17guewt-0);shape-rendering:crispEdges;}
-.cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}
-.c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}
+.cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}.cblgiyf[data-selected="true"]{stroke:var(--cblgiyf-1);}
+.c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}.c1lr03cc[data-selected="true"]{fill:var(--c1lr03cc-1);}
 .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:200px;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%;}

package/package.json

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