@galaxy-io/dls 1.3.4 → 1.3.5

package/dist/accordion/Accordion.d.ts

@@ -14,7 +14,6 @@ export interface AccordionProps {
     variant?: AccordionVariant;
     size?: AccordionSize;
     icon?: PhosphorIcon;
-    isTrailingIcon?: boolean;
     header: string;
     subheader?: string;
     metric?: React.ReactNode;
@@ -26,5 +25,5 @@ export interface AccordionProps {
     /** Controlled mode: callback when toggle is clicked */
     onToggle?: () => void;
 }
-declare const Accordion: ({ children, variant, size, icon, isTrailingIcon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
+declare const Accordion: ({ children, variant, size, icon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
 export default Accordion;

package/dist/accordion/Accordion.js

@@ -65,7 +65,7 @@ var AccordionContentInner = withTheme(/*#__PURE__*/ styled("div")({
 	class: "a1f5gwwu",
 	propsAsIs: false
 }));
-var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, isTrailingIcon = false, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
+var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
 	const [internalIsOpen, setInternalIsOpen] = useState(isOpenInitial);
 	const isControlled = controlledIsOpen !== void 0;
 	const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
@@ -87,31 +87,23 @@ var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, isTrail
 				children: [/* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,
-					children: [
-						icon && !isTrailingIcon && /* @__PURE__ */ jsx(Icon, {
-							component: icon,
-							variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
-							size: 16
-						}),
-						/* @__PURE__ */ jsxs(FlexWrapper, {
-							direction: FlexDirection.COLUMN,
-							gap: 2,
-							children: [/* @__PURE__ */ jsx(Text, {
-								variant: isOpen ? TextVariant.PRIMARY : TextVariant.SECONDARY,
-								weight: TextWeight.MEDIUM,
-								children: header
-							}), subheader && /* @__PURE__ */ jsx(Text, {
-								size: TextSize.BODY_SM,
-								variant: isOpen ? TextVariant.SECONDARY : TextVariant.TERTIARY,
-								children: subheader
-							})]
-						}),
-						icon && isTrailingIcon && /* @__PURE__ */ jsx(Icon, {
-							component: icon,
-							variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
-							size: 16
-						})
-					]
+					children: [icon && /* @__PURE__ */ jsx(Icon, {
+						component: icon,
+						variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
+						size: 16
+					}), /* @__PURE__ */ jsxs(FlexWrapper, {
+						direction: FlexDirection.COLUMN,
+						gap: 2,
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: isOpen ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+							weight: TextWeight.MEDIUM,
+							children: header
+						}), subheader && /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							variant: isOpen ? TextVariant.SECONDARY : TextVariant.TERTIARY,
+							children: subheader
+						})]
+					})]
 				}), /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,

package/dist/charts/BarChart.d.ts

@@ -13,12 +13,6 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TComponentKey>>[];
     /** @default BarChartNormalization.NONE */
     normalization?: BarChartNormalization;
-    /**
-     * Notified when a group is pinned or unpinned by a click.
-     *
-     * The index is a position in `groups`.
-     */
-    onPinnedChange?: (groupIndex: number | null) => void;
 };
 /**
  * Bar chart with a three-level data model.
@@ -27,5 +21,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, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: 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, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, 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, 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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -105,8 +105,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];

package/dist/charts/ChartCategoryTargets.d.ts

@@ -1,27 +1,27 @@
 import type { ChartCategoryTarget } from "./types";
 import type { ChartInteraction } from "./useChartInteraction";
 /**
- * The interactive layer: one focusable target per category, above the marks.
+ * The hover layer: one transparent target per category, above the marks.
  *
- * Shared by all three charts so pointer and keyboard behave identically. Before
- * this existed each chart spelled hit testing its own way — two rendered targets
- * conditionally, the pie attached handlers permanently and computed
- * `data-interactive` instead — and none of them was reachable by keyboard at
- * all.
+ * 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
+ * the frame's label and description, while pointer users get the tooltip.
  *
- * **Focus rides the existing hover channel.** `onFocus` calls
- * `onCategoryEnter` and `onBlur` calls `onCategoryLeave`, so the tooltip, the
- * cursor line, the legend dimming and every `getMarkState` light up for a
- * keyboard reader exactly as they do for a pointer — without
- * `useChartInteraction` growing a third state axis to keep in sync.
+ * 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.
  */
 interface ChartCategoryTargetsProps {
     targets: ChartCategoryTarget[];
     interaction: ChartInteraction;
-    /** Accessible name for one category. Derived from the tooltip, so they agree. */
-    getAriaLabel: (index: number) => string;
-    /** Arrow keys wrap at the ends. True for radial charts — a circle has no ends. */
-    wrap?: boolean;
+    /**
+     * 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, getAriaLabel, wrap, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+declare const ChartCategoryTargets: ({ targets, interaction, inertIndices, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
 export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -1,75 +1,24 @@
 import { ChartTargetShape } from "./types.js";
-import { clamp } from "./chartScales.js";
-import { ChartCategoryTargetLayer, ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
+import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
 import { match } from "ts-pattern";
-import { useCallback, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/charts/ChartCategoryTargets.tsx
-var ChartCategoryTargets = ({ targets, interaction, getAriaLabel, wrap = false }) => {
-	const [focusIndex, setFocusIndex] = useState(0);
-	const nodeRefs = useRef([]);
-	/**
-	* Roving tabindex, preferring whatever is pinned.
-	*
-	* Tabbing away and back returns to the category the reader was holding rather
-	* than to the start, which is the difference between the pin being a place
-	* you are and a thing that merely happened.
-	*/
-	const rovingIndex = clamp(interaction.pinnedIndex ?? focusIndex, 0, targets.length - 1);
-	const moveTo = useCallback((next) => {
-		const last = targets.length - 1;
-		const bounded = wrap ? (next % targets.length + targets.length) % targets.length : clamp(next, 0, last);
-		setFocusIndex(bounded);
-		nodeRefs.current[bounded]?.focus();
-	}, [targets.length, wrap]);
-	const onKeyDown = useCallback((event, index) => {
-		if (match(event.key).with("ArrowRight", "ArrowDown", () => moveTo(index + 1)).with("ArrowLeft", "ArrowUp", () => moveTo(index - 1)).with("Home", () => moveTo(0)).with("End", () => moveTo(targets.length - 1)).with("Enter", " ", () => interaction.onCategoryClick(index)).with("Escape", () => interaction.onBackdropClick()).otherwise(() => void 0) !== void 0 || [
-			"ArrowRight",
-			"ArrowDown",
-			"ArrowLeft",
-			"ArrowUp",
-			"Home",
-			"End",
-			"Enter",
-			" ",
-			"Escape"
-		].includes(event.key)) event.preventDefault();
-	}, [
-		moveTo,
-		interaction,
-		targets.length
-	]);
-	return /* @__PURE__ */ jsx(ChartCategoryTargetLayer, { children: targets.map((target, index) => {
-		const shared = {
-			tabIndex: index === rovingIndex ? 0 : -1,
-			role: "button",
-			"aria-label": getAriaLabel(index),
-			"aria-pressed": interaction.pinnedIndex === index,
-			"data-interactive": "true",
-			onFocus: () => interaction.onCategoryEnter(index),
-			onBlur: () => interaction.onCategoryLeave(),
-			onMouseEnter: () => interaction.onCategoryEnter(index),
-			onMouseLeave: () => interaction.onCategoryLeave(),
-			onClick: () => interaction.onCategoryClick(index),
-			onKeyDown: (event) => onKeyDown(event, index)
-		};
-		return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
-			ref: (node) => {
-				nodeRefs.current[index] = node;
-			},
-			x: rect.x,
-			y: rect.y,
-			width: rect.width,
-			height: rect.height,
-			...shared
-		}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
-			ref: (node) => {
-				nodeRefs.current[index] = node;
-			},
-			d: path.d,
-			...shared
-		}, path.key)).exhaustive();
-	}) });
-};
+var ChartCategoryTargets = ({ targets, interaction, inertIndices }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+	if (inertIndices?.has(index)) return null;
+	const shared = {
+		onMouseEnter: () => interaction.onCategoryEnter(index),
+		onMouseLeave: () => interaction.onCategoryLeave()
+	};
+	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 { ChartCategoryTargets as default };

package/dist/charts/ChartFrame.d.ts

@@ -1,13 +1,13 @@
 import type { ReactNode } from "react";
-import { ChartKind } from "./types";
+import { ChartKind, ChartLegendPlacement } from "./types";
 import type { ChartCategoryTarget, ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
 import type { ChartDimensions } from "./useChartDimensions";
 import type { ChartInteraction } from "./useChartInteraction";
 import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
 /**
  * The shell every chart renders into: measured root, reserved plot box, SVG and
- * its margin translate, the interactive plot group, the backdrop, the tooltip,
- * the empty state and the legend.
+ * its margin translate, the plot group, the hover targets, the tooltip, the
+ * empty state and the legend.
  *
  * **The frame owns the plot translate.** Marks are drawn inside a
  * `translate(margin.left, margin.top)` group, and every coordinate handed to
@@ -56,7 +56,7 @@ export interface ChartFrameProps {
      */
     axes?: ReactNode;
     /**
-     * Marks, drawn inside the plot group above the backdrop.
+     * Marks, drawn inside the plot group beneath the hover targets.
      *
      * Rendered only once measured, so no caller writes that guard. Note it is
      * still *evaluated* on the unmeasured pass — as is the geometry it maps over,
@@ -72,8 +72,8 @@ export interface ChartFrameProps {
      *
      * 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
-     * name it for a screen reader. Deriving both from the same builder is what
-     * makes the accessible name incapable of disagreeing with the tooltip.
+     * decide which categories are inert. Deriving both from the same builder is
+     * what makes "no tooltip rows" and "not hoverable" the same fact.
      *
      * Must be stable; memoize it at the call site.
      */
@@ -88,10 +88,6 @@ export interface ChartFrameProps {
     categoryTargets?: ChartCategoryTarget[];
     /** Applied to the target layer. Radial charts pass their centre translate. */
     categoryTargetsTransform?: string;
-    /** Arrow keys wrap at the ends. True for radial charts. */
-    wrapCategoryNavigation?: boolean;
-    /** Overrides the accessible name of a category, which defaults to its tooltip. */
-    describeCategory?: (index: number) => string;
     /** Half a category's width, so the tooltip sits beside the marks. */
     anchorHalfWidth?: number;
     /** Radial charts pass their centre, in plot coordinates. */
@@ -103,8 +99,14 @@ export interface ChartFrameProps {
     contentWhenEmpty?: ReactNode;
     showLegend?: boolean;
     legendItems: ChartLegendItem[];
-    /** Defaults to the left margin, aligning the legend with the plot, not the gutter. */
+    /** Where the legend sits. RIGHT stacks it beside the plot, vertically centred. */
+    legendPlacement?: ChartLegendPlacement;
+    /**
+     * BOTTOM: left padding, defaulting to the left margin so the legend aligns
+     * with the plot rather than the axis gutter. RIGHT: the gap between the plot
+     * box and the legend, defaulting to {@link CHART_LEGEND_SIDE_GAP}.
+     */
     legendInset?: number;
 }
-declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -1,16 +1,16 @@
-import { ChartKind } from "./types.js";
-import { describeTooltipModel } from "./chartFormat.js";
-import { ChartBackdrop, ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import { ChartKind, ChartLegendPlacement } from "./types.js";
+import "./constants.js";
+import { ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
 import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
 import ChartTooltip from "./ChartTooltip.js";
 import { match } from "ts-pattern";
-import { useCallback, useId, useMemo } from "react";
+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, categoryTargets, categoryTargetsTransform, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
-	const { width, height, plotWidth, plotHeight, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
+	const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
 	/**
@@ -48,41 +48,39 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 		margin.top
 	]);
 	/**
-	* Name each category from its own tooltip, unless the chart says otherwise.
+	* Categories whose tooltip would have no rows.
 	*
-	* Same builder as the visible tooltip, so the two cannot describe the chart
-	* differently.
+	* 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 nameCategory = useCallback((index) => {
-		if (describeCategory) return describeCategory(index);
-		const model = buildCategoryTooltip(index);
-		return model ? describeTooltipModel(model) : "";
-	}, [describeCategory, buildCategoryTooltip]);
-	/**
-	* Whether the marks are reachable at all.
-	*
-	* Drives the SVG's role, which is the real cost of keyboard access:
-	* `role="img"` prunes the whole subtree from the accessibility tree, so
-	* nothing inside it can ever be focused *and* announced. A chart with live
-	* targets therefore has to be a `group` — and everything that is not a target
-	* has to be explicitly hidden, since under `group` it would otherwise become
-	* traversable. When there is nothing to reach, `img` stays: it announces one
-	* summary rather than an empty group.
-	*/
-	const hasFocusableTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
+	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, {
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
+		$legendRight: legendRight,
 		children: [/* @__PURE__ */ jsxs(ChartPlotBox, {
 			ref: containerRef,
 			$reservedHeight: reservedHeight,
 			$reservedAspectRatio: reservedAspectRatio,
 			$fillHeight: fillHeight,
+			$legendRight: legendRight,
+			$squareFromHeight: legendRight && fillWidth && reservedAspectRatio === void 0,
 			children: [
 				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
 					width,
 					height,
-					role: hasFocusableTargets ? "group" : "img",
+					role: "img",
 					"aria-label": resolvedAriaLabel,
 					"aria-describedby": descriptionId,
 					children: [ariaDescription && /* @__PURE__ */ jsx("desc", {
@@ -92,25 +90,16 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 						transform: `translate(${margin.left}, ${margin.top})`,
 						children: [
 							axes,
-							/* @__PURE__ */ jsx("g", {
-								"aria-hidden": "true",
-								children: /* @__PURE__ */ jsxs(ChartPlotGroup, {
-									"data-active": interaction.isEngaged ? "true" : "false",
-									children: [/* @__PURE__ */ jsx(ChartBackdrop, {
-										width: plotWidth,
-										height: plotHeight,
-										"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
-										onClick: interaction.onBackdropClick
-									}), children]
-								})
+							/* @__PURE__ */ jsx(ChartPlotGroup, {
+								"data-active": interaction.isEngaged ? "true" : "false",
+								children
 							}),
-							hasFocusableTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
+							hasTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
 								transform: categoryTargetsTransform,
 								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
 									interaction,
-									getAriaLabel: nameCategory,
-									wrap: wrapCategoryNavigation
+									inertIndices
 								})
 							})
 						]
@@ -130,12 +119,11 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 			]
 		}), showLegend && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
-			inset: legendInset ?? margin.left,
+			inset: legendInset ?? (legendRight ? 16 : margin.left),
+			vertical: legendRight,
 			hoveredKey: interaction.hoveredSeriesKey,
-			pinnedKey: interaction.pinnedSeriesKey,
 			onItemEnter: interaction.onSeriesEnter,
-			onItemLeave: interaction.onSeriesLeave,
-			onItemClick: interaction.onSeriesClick
+			onItemLeave: interaction.onSeriesLeave
 		})]
 	});
 };

package/dist/charts/ChartLegend.d.ts

@@ -5,20 +5,19 @@ interface ChartLegendProps {
     inset: number;
     /** Series key currently hovered anywhere in the chart. */
     hoveredKey?: string | null;
-    /** Series key currently pinned. Drives `aria-pressed`. */
-    pinnedKey?: string | null;
+    /** Stack entries in a column — the side-placed layout. */
+    vertical?: boolean;
     /**
      * Supplying these makes the legend interactive. Omit them and it renders as
      * inert text, with no button semantics for a screen reader to announce.
      */
     onItemEnter?: (key: string) => void;
     onItemLeave?: () => void;
-    onItemClick?: (key: string) => void;
 }
 /**
  * Legend for the chart components.
  *
- * Hovering an entry isolates its series and clicking pins that isolation.
+ * Hovering or focusing an entry isolates its series; leaving releases it.
  *
  * Deliberately *not* a visibility toggle: hiding a series would have to rescale
  * the value axis to stay honest — otherwise the remaining bars sit mysteriously
@@ -26,5 +25,5 @@ interface ChartLegendProps {
  * Isolation only changes opacity, so the domain is untouched and the numbers
  * keep meaning what they did.
  */
-declare const ChartLegend: ({ items, inset, hoveredKey, pinnedKey, onItemEnter, onItemLeave, onItemClick, }: ChartLegendProps) => import("react").JSX.Element | null;
+declare const ChartLegend: ({ items, inset, hoveredKey, vertical, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -7,7 +7,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /**
 * Legend for the chart components.
 *
-* Hovering an entry isolates its series and clicking pins that isolation.
+* Hovering or focusing an entry isolates its series; leaving releases it.
 *
 * Deliberately *not* a visibility toggle: hiding a series would have to rescale
 * the value axis to stay honest — otherwise the remaining bars sit mysteriously
@@ -15,12 +15,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Isolation only changes opacity, so the domain is untouched and the numbers
 * keep meaning what they did.
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEnter, onItemLeave, onItemClick }) => {
+var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, onItemEnter, onItemLeave }) => {
 	if (items.length === 0) return null;
-	const isInteractive = Boolean(onItemEnter ?? onItemClick);
-	const activeKey = pinnedKey ?? hoveredKey;
+	const isInteractive = Boolean(onItemEnter);
+	const activeKey = hoveredKey;
 	return /* @__PURE__ */ jsx(ChartLegendRow, {
 		$inset: inset,
+		$vertical: vertical,
 		"data-active": activeKey !== null ? "true" : "false",
 		children: items.map((item) => {
 			const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
@@ -38,12 +39,10 @@ var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEn
 			return /* @__PURE__ */ jsx(ChartLegendItemButton, {
 				type: "button",
 				"data-state": state,
-				"aria-pressed": pinnedKey === item.key,
 				onMouseEnter: () => onItemEnter?.(item.key),
 				onMouseLeave: () => onItemLeave?.(),
 				onFocus: () => onItemEnter?.(item.key),
 				onBlur: () => onItemLeave?.(),
-				onClick: () => onItemClick?.(item.key),
 				children: content
 			}, item.key);
 		})

package/dist/charts/ChartPrimitives.d.ts

@@ -4,10 +4,18 @@
  * `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
  * flex row feeds its min-content width back into the ResizeObserver and the
  * measurement can oscillate.
+ *
+ * `$legendRight` rotates the layout: plot box and legend become a row with
+ * `align-items: center`, which is the whole of "the legend is vertically
+ * centred on the pie" — the pie is inscribed centred in its box, so centring
+ * the legend against the box centres it against the pie. It also holds in the
+ * other direction: a legend taller than the box centres the *pie* against the
+ * legend instead of pinning it to the top.
  */
 export declare const ChartRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $fillWidth?: boolean;
     $fillHeight?: boolean;
+    $legendRight?: boolean;
 }>;
 /**
  * Holds the plot, anchors the tooltip, and is the element that gets measured.
@@ -29,6 +37,8 @@ export declare const ChartPlotBox: import("@linaria/react").StyledComponent<impo
     $reservedHeight?: number;
     $reservedAspectRatio?: number;
     $fillHeight?: boolean;
+    $legendRight?: boolean;
+    $squareFromHeight?: boolean;
 }>;
 /**
  * `overflow: visible` lets a value label above a full-height bar paint outside
@@ -45,32 +55,6 @@ export declare const ChartLinePath: import("@linaria/react").StyledComponent<imp
 export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 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>>;
-/**
- * Wrapper for the category target layer.
- *
- * Exists to carry the focus-ring colour: the targets themselves are plain
- * `styled.x` because they receive refs (see the module note above), so they
- * cannot read the theme directly. Setting `color` here lets them use
- * `currentColor` and still take the token rather than inheriting whatever the
- * consumer's page happens to set.
- */
-export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pick<import("react").SVGProps<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").SVGProps<SVGGElement>> & {
-    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<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").SVGProps<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
 /**
  * Per-category hit target, rendered above the marks.
  *
@@ -78,6 +62,9 @@ export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pic
  * 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
  * 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.
  */
 export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**
@@ -85,12 +72,10 @@ export declare const ChartHitTarget: import("@linaria/react").StyledComponent<im
  *
  * A pie has no category axis to band, so its targets are the arc shapes
  * themselves — drawn again, transparent, above the marks. That keeps hit
- * testing and focus identical across all three charts instead of the pie
- * hit-testing its visible arcs directly.
+ * testing identical across all three charts instead of the pie hit-testing its
+ * visible arcs directly.
  */
 export declare const ChartHitTargetPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-/** Full-plot backdrop; clicking it clears a pinned category. */
-export declare const ChartBackdrop: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**
  * Solid hairline rather than a dashed rule, and drawn at every tick including
  * zero — the line under the bars is what makes them read as resting on a
@@ -213,14 +198,16 @@ export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<impor
  */
 export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $inset: number;
+    $vertical?: boolean;
 }>;
 /**
  * One legend entry, when the legend is interactive.
  *
- * A real `<button>` rather than a styled div: it is clickable, so it has to be
- * reachable and operable by keyboard. `aria-pressed` carries the pinned state —
- * the only thing here a screen reader can truthfully announce, since the plot
- * itself is `role="img"` and its marks are not in the accessibility tree.
+ * A real `<button>` rather than a styled div so it sits in the tab order:
+ * focusing an entry previews its series exactly as hovering does, which is the
+ * one keyboard affordance the charts keep — the plot itself is `role="img"` and
+ * its marks are not in the accessibility tree. Activating it does nothing;
+ * isolation follows the pointer or the focus and releases with it.
  *
  * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
  * with the series it names.