@galaxy-io/dls 1.3.4 → 1.3.5

package/dist/charts/ChartPrimitives.js

@@ -34,10 +34,20 @@ import { styled } from "@linaria/react";
 * `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.
 */
 var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp3 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var _exp2 = () => ({ $legendRight }) => $legendRight ? "row" : "column";
+var _exp3 = () => ({ $legendRight }) => $legendRight ? "center" : "stretch";
+var _exp4 = () => ({ $legendRight }) => $legendRight ? "center" : "normal";
+var _exp5 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
 var ChartRoot = /*#__PURE__*/ styled("div")({
 	name: "ChartRoot",
 	class: "c1hcga6s",
@@ -45,7 +55,10 @@ var ChartRoot = /*#__PURE__*/ styled("div")({
 	vars: {
 		"c1hcga6s-0": [_exp()],
 		"c1hcga6s-1": [_exp2()],
-		"c1hcga6s-2": [_exp3()]
+		"c1hcga6s-2": [_exp3()],
+		"c1hcga6s-3": [_exp4()],
+		"c1hcga6s-4": [_exp5()],
+		"c1hcga6s-5": [_exp6()]
 	}
 });
 /**
@@ -64,19 +77,21 @@ var ChartRoot = /*#__PURE__*/ styled("div")({
 * `min-height: 0` is required with it: a flex item's automatic minimum size is
 * its content, which would let the SVG hold the box open above its track.
 */
-var _exp4 = () => ({ $reservedAspectRatio }) => $reservedAspectRatio ?? "auto";
-var _exp5 = () => ({ $reservedHeight }) => $reservedHeight ? `${$reservedHeight}px` : "auto";
-var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "1 1 0%" : "0 1 auto";
-var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
+var _exp7 = () => ({ $legendRight }) => $legendRight ? "auto" : "100%";
+var _exp8 = () => ({ $reservedAspectRatio, $squareFromHeight }) => $squareFromHeight ? "1" : $reservedAspectRatio ?? "auto";
+var _exp9 = () => ({ $reservedHeight, $fillHeight, $legendRight }) => $fillHeight && $legendRight ? "100%" : $reservedHeight ? `${$reservedHeight}px` : "auto";
+var _exp0 = () => ({ $fillHeight, $legendRight, $squareFromHeight }) => $legendRight ? $squareFromHeight ? "0 1 auto" : "1 1 auto" : $fillHeight ? "1 1 0%" : "0 1 auto";
+var _exp1 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
 var ChartPlotBox = /*#__PURE__*/ styled("div")({
 	name: "ChartPlotBox",
 	class: "c1fvbgkp",
 	propsAsIs: false,
 	vars: {
-		"c1fvbgkp-0": [_exp4()],
-		"c1fvbgkp-1": [_exp5()],
-		"c1fvbgkp-2": [_exp6()],
-		"c1fvbgkp-3": [_exp7()]
+		"c1fvbgkp-0": [_exp7()],
+		"c1fvbgkp-1": [_exp8()],
+		"c1fvbgkp-2": [_exp9()],
+		"c1fvbgkp-3": [_exp0()],
+		"c1fvbgkp-4": [_exp1()]
 	}
 });
 /**
@@ -123,40 +138,19 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
-* 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.
-*/
-var _exp11 = () => ({ theme }) => theme.color.border.selected;
-var ChartCategoryTargetLayer = withTheme(/*#__PURE__*/ styled("g")({
-	name: "ChartCategoryTargetLayer",
-	class: "c1wvzvu4",
-	propsAsIs: true,
-	vars: { "c1wvzvu4-0": [_exp11()] }
-}));
-/**
-* Shared by both target shapes.
-*
-* The ring is a `stroke`, not an `outline`: `outline` on SVG elements is a late
-* arrival in WebKit and `outline-offset` behaves inconsistently across engines,
-* while a stroke on a transparent shape is universally supported — and it
-* traces a pie arc, which a rectangular outline could not.
-*/
-/**
 * Per-category hit target, rendered above the marks.
 *
 * 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
 * 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.
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c17guewt",
+	class: "c1wvzvu4",
 	propsAsIs: true
 });
 /**
@@ -164,18 +158,12 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 *
 * 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.
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
-	class: "cblgiyf",
-	propsAsIs: true
-});
-/** Full-plot backdrop; clicking it clears a pinned category. */
-var ChartBackdrop = /*#__PURE__*/ styled("rect")({
-	name: "ChartBackdrop",
-	class: "c1lr03cc",
+	class: "c17guewt",
 	propsAsIs: true
 });
 /**
@@ -183,24 +171,24 @@ var ChartBackdrop = /*#__PURE__*/ styled("rect")({
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp14 = () => ({ theme }) => theme.color.border.primary;
+var _exp15 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "cizy1s8",
+	class: "cblgiyf",
 	propsAsIs: true,
-	vars: { "cizy1s8-0": [_exp14()] }
+	vars: { "cblgiyf-0": [_exp15()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp15 = () => ({ theme }) => theme.color.border.secondary;
+var _exp16 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "c1ukq11d",
+	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "c1ukq11d-0": [_exp15()] }
+	vars: { "c1lr03cc-0": [_exp16()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "cwcko2m",
+	class: "cizy1s8",
 	propsAsIs: true
 });
 /**
@@ -210,21 +198,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 _exp16 = () => ({ $x }) => `${$x}px`;
-var _exp17 = () => ({ $y }) => `${$y}px`;
-var _exp20 = () => ({ theme }) => theme.color.border.primary;
-var _exp21 = () => ({ theme }) => theme.color.background.primary;
-var _exp22 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp17 = () => ({ $x }) => `${$x}px`;
+var _exp18 = () => ({ $y }) => `${$y}px`;
+var _exp21 = () => ({ theme }) => theme.color.border.primary;
+var _exp22 = () => ({ theme }) => theme.color.background.primary;
+var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "cqwhvyz",
+	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp16()],
-		"cqwhvyz-1": [_exp17()],
-		"cqwhvyz-2": [_exp20()],
-		"cqwhvyz-3": [_exp21()],
-		"cqwhvyz-4": [_exp22()]
+		"c1ukq11d-0": [_exp17()],
+		"c1ukq11d-1": [_exp18()],
+		"c1ukq11d-2": [_exp21()],
+		"c1ukq11d-3": [_exp22()],
+		"c1ukq11d-4": [_exp23()]
 	}
 }));
 /**
@@ -235,32 +223,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp26 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp27 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp29 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "c1iaray",
+	class: "cwcko2m",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp26()],
-		"c1iaray-1": [_exp27()],
-		"c1iaray-2": [_exp29()]
+		"cwcko2m-0": [_exp27()],
+		"cwcko2m-1": [_exp28()],
+		"cwcko2m-2": [_exp30()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp30 = () => ({ theme }) => theme.color.border.primary;
-var _exp31 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp31 = () => ({ theme }) => theme.color.border.primary;
+var _exp32 = () => ({ theme }) => theme.color.background.tertiary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cz6jod1",
+	class: "cqwhvyz",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp30()],
-		"cz6jod1-1": [_exp31()]
+		"cqwhvyz-0": [_exp31()],
+		"cqwhvyz-1": [_exp32()]
 	}
 }));
 /**
@@ -272,34 +260,47 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * the marks dim instantly while their legend entries sit through the full
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp32 = () => ({ $inset }) => `${$inset}px`;
+var _exp33 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp34 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
+var _exp35 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp36 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
+var _exp37 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp38 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1de5mqk",
+	class: "c1iaray",
 	propsAsIs: false,
-	vars: { "c1de5mqk-0": [_exp32()] }
+	vars: {
+		"c1iaray-0": [_exp33()],
+		"c1iaray-1": [_exp34()],
+		"c1iaray-2": [_exp35()],
+		"c1iaray-3": [_exp36()],
+		"c1iaray-4": [_exp37()],
+		"c1iaray-5": [_exp38()]
+	}
 });
 /**
 * 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.
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cjirv6a",
+	class: "cz6jod1",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "c1armna5",
+	class: "c1de5mqk",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCategoryTargetLayer, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };

package/dist/charts/LineChart.d.ts

@@ -25,12 +25,6 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
     strokeWidth?: number;
     /** Draw a vertical rule at the active category. @default true */
     showCursor?: boolean;
-    /**
-     * Notified when a category is pinned or unpinned by a click.
-     *
-     * The index is a position on the category axis.
-     */
-    onPinnedChange?: (categoryIndex: number | null) => void;
 };
 /**
  * Line chart over a categorical x-axis.
@@ -40,5 +34,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, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: LineChartProps<TMetric>) => import("react").JSX.Element;
+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, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -18,7 +18,7 @@ import { Fragment, 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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
+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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -69,8 +69,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {

package/dist/charts/PieChart.d.ts

@@ -32,13 +32,6 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
      * Ignored when `innerRadiusRatio` is 0.
      */
     centerContent?: ReactNode;
-    /**
-     * Notified when a slice is pinned or unpinned by a click.
-     *
-     * The index is a position in the *rendered* arcs, which excludes folded
-     * slices and may include the aggregated bucket.
-     */
-    onPinnedChange?: (sliceIndex: number | null) => void;
 };
 /**
  * Pie and donut chart.
@@ -47,5 +40,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, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: 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, valueUnit, valueFormatter, labelFormatter, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;

package/dist/charts/PieChart.js

@@ -1,5 +1,5 @@
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { ChartKind, ChartTargetShape } from "./types.js";
+import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
 import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
+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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
@@ -77,8 +77,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
 		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const chartArc = geometry.arcs[index];
@@ -101,28 +100,10 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		formatLabel
 	]);
 	/**
-	* A slice reads better than the generic "label: row, row" sentence.
-	*
-	* The frame's default would render "Enterprise: 42.1% of total 1,240", which
-	* puts the share where a reader expects the value.
-	*/
-	const describeCategory = useCallback((index) => {
-		const chartArc = geometry.arcs[index];
-		if (!chartArc) return "";
-		const share = `${Math.round(chartArc.share * 1e3) / 10}% of total`;
-		return `${formatLabel(chartArc.label)}, ${formatValue(chartArc.value)}, ${share}`;
-	}, [
-		geometry.arcs,
-		formatValue,
-		formatLabel
-	]);
-	/**
 	* Targets reuse each arc's own `d`, drawn again transparent above the marks.
 	*
-	* The arcs themselves stop being interactive: hit testing, focus and the
-	* focus ring then work identically on all three charts, instead of the pie
-	* attaching handlers permanently and toggling `data-interactive` while the
-	* cartesian charts rendered their targets away.
+	* The arcs themselves stay pure marks: hit testing then works identically on
+	* all three charts, instead of the pie hit-testing its visible arcs directly.
 	*/
 	const categoryTargets = useMemo(() => geometry.arcs.map((chartArc) => ({
 		key: chartArc.id,
@@ -145,8 +126,6 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		tooltipRenderer,
 		categoryTargets,
 		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-		wrapCategoryNavigation: true,
-		describeCategory,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
 		isEmpty,
@@ -154,7 +133,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		legendInset: 0,
+		legendPlacement: ChartLegendPlacement.RIGHT,
 		plotOverlay: showCenter && !isEmpty ? /* @__PURE__ */ jsx(ChartDonutCenter, {
 			centerX: dimensions.margin.left + geometry.centerX,
 			centerY: dimensions.margin.top + geometry.centerY,

package/dist/charts/chartFormat.d.ts

@@ -1,5 +1,5 @@
 import { ChartValueUnit } from "./types";
-import type { ChartLabelFormatter, ChartPlotTooltipModel, ChartValueFormatter } from "./types";
+import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
 /**
  * Format a value with a built-in unit.
  *
@@ -17,11 +17,3 @@ export declare function formatChartValue(value: number, unit: ChartValueUnit): s
 export declare function resolveValueFormatter(valueFormatter?: ChartValueFormatter, unit?: ChartValueUnit): ChartValueFormatter;
 /** Pick the effective label formatter, defaulting to identity. */
 export declare function resolveLabelFormatter(labelFormatter?: ChartLabelFormatter): ChartLabelFormatter;
-/**
- * Flatten a tooltip model into one sentence, for a screen reader.
- *
- * Derived from the tooltip rather than written separately so the two cannot
- * drift: whatever a sighted reader sees on hover is what a keyboard reader
- * hears on focus, by construction.
- */
-export declare function describeTooltipModel(model: ChartPlotTooltipModel): string;

package/dist/charts/chartFormat.js

@@ -55,17 +55,5 @@ function resolveValueFormatter(valueFormatter, unit) {
 function resolveLabelFormatter(labelFormatter) {
 	return labelFormatter ?? ((label) => label);
 }
-/**
-* Flatten a tooltip model into one sentence, for a screen reader.
-*
-* Derived from the tooltip rather than written separately so the two cannot
-* drift: whatever a sighted reader sees on hover is what a keyboard reader
-* hears on focus, by construction.
-*/
-function describeTooltipModel(model) {
-	if (model.rows.length === 0) return model.label;
-	const rows = model.rows.map((row) => `${row.label} ${row.formattedValue}`).join(", ");
-	return `${model.label}: ${rows}`;
-}
 //#endregion
-export { describeTooltipModel, formatChartValue, resolveLabelFormatter, resolveValueFormatter };
+export { formatChartValue, resolveLabelFormatter, resolveValueFormatter };

package/dist/charts/constants.d.ts

@@ -185,27 +185,24 @@ export declare const CHART_RESTORE_DELAY_MS = 200;
  *
  * The grammar is inherited from the reference charts and is the opposite of the
  * obvious one: hovering does not brighten the hovered mark, it *softens*
- * everything else. `MUTED` applies to marks outside the hovered category;
- * `FADED` to marks outside a *pinned* one.
+ * everything else. `MUTED` applies to marks outside the hovered category or
+ * series.
  *
  * The step down from ACTIVE is deliberately steep. These are large filled areas
  * — bars and arcs — and a filled shape still reads as present at an opacity
  * where a hairline would have vanished, so a timid step barely registers as a
  * highlight at all.
- *
- * Keep `FADED` below `MUTED`, or pinning becomes visually indistinguishable
- * from hovering — the pin exists to say "I am holding this one", which only
- * reads if the rest recede further than they do on hover.
  */
 export declare const CHART_MARK_OPACITY_ACTIVE = 1;
 export declare const CHART_MARK_OPACITY_MUTED = 0.1;
-export declare const CHART_MARK_OPACITY_FADED = 0.04;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
 export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
 /** Maximum width of the tooltip, in px. */
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
+/** Gap in px between the plot box and a side-placed legend. */
+export declare const CHART_LEGEND_SIDE_GAP = 16;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -195,27 +195,24 @@ var CHART_RESTORE_DELAY_MS = 200;
 *
 * The grammar is inherited from the reference charts and is the opposite of the
 * obvious one: hovering does not brighten the hovered mark, it *softens*
-* everything else. `MUTED` applies to marks outside the hovered category;
-* `FADED` to marks outside a *pinned* one.
+* everything else. `MUTED` applies to marks outside the hovered category or
+* series.
 *
 * The step down from ACTIVE is deliberately steep. These are large filled areas
 * — bars and arcs — and a filled shape still reads as present at an opacity
 * where a hairline would have vanished, so a timid step barely registers as a
 * highlight at all.
-*
-* Keep `FADED` below `MUTED`, or pinning becomes visually indistinguishable
-* from hovering — the pin exists to say "I am holding this one", which only
-* reads if the rest recede further than they do on hover.
 */
 var CHART_MARK_OPACITY_ACTIVE = 1;
 var CHART_MARK_OPACITY_MUTED = .1;
-var CHART_MARK_OPACITY_FADED = .04;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
 var CHART_TOOLTIP_MIN_WIDTH = 168;
 /** Maximum width of the tooltip, in px. */
 var CHART_TOOLTIP_MAX_WIDTH = 320;
+/** Gap in px between the plot box and a side-placed legend. */
+var CHART_LEGEND_SIDE_GAP = 16;
 /**
 * Approximate width of one CAPTION-size character.
 *
@@ -264,4 +261,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_FADED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/types.d.ts

@@ -120,6 +120,18 @@ export declare enum ChartKind {
     LINE = "LINE",
     PIE = "PIE"
 }
+/**
+ * Where the legend sits relative to the plot.
+ *
+ * Its own enum rather than a branch on {@link ChartKind}, which promises to be
+ * nothing but a label for the accessible name.
+ */
+export declare enum ChartLegendPlacement {
+    /** Beneath the plot, wrapping — the cartesian layout. */
+    BOTTOM = "BOTTOM",
+    /** Beside the plot, stacked, vertically centred on it — the pie layout. */
+    RIGHT = "RIGHT"
+}
 /** How the category axis copes when labels outgrow their slots. */
 export declare enum ChartCategoryLabelMode {
     /** Render every label that fits; otherwise show every nth. The default. */
@@ -139,12 +151,10 @@ export declare enum ChartCategoryLabelMode {
  * DOM and trigger a React warning.
  */
 export declare enum ChartMarkState {
-    /** Full strength — the default, and the hovered or pinned category. */
+    /** Full strength — the default, and the hovered category. */
     ACTIVE = "active",
     /** Softened, for categories other than the hovered one. */
-    MUTED = "muted",
-    /** Furthest back, for categories outside a pinned one. */
-    FADED = "faded"
+    MUTED = "muted"
 }
 /** Which pair of a rectangle's corners carries the radius. */
 export declare enum BarCorners {

package/dist/charts/types.js

@@ -80,6 +80,19 @@ var ChartKind = /* @__PURE__ */ function(ChartKind) {
 	ChartKind["PIE"] = "PIE";
 	return ChartKind;
 }({});
+/**
+* Where the legend sits relative to the plot.
+*
+* Its own enum rather than a branch on {@link ChartKind}, which promises to be
+* nothing but a label for the accessible name.
+*/
+var ChartLegendPlacement = /* @__PURE__ */ function(ChartLegendPlacement) {
+	/** Beneath the plot, wrapping — the cartesian layout. */
+	ChartLegendPlacement["BOTTOM"] = "BOTTOM";
+	/** Beside the plot, stacked, vertically centred on it — the pie layout. */
+	ChartLegendPlacement["RIGHT"] = "RIGHT";
+	return ChartLegendPlacement;
+}({});
 /** How the category axis copes when labels outgrow their slots. */
 var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 	/** Render every label that fits; otherwise show every nth. The default. */
@@ -100,12 +113,10 @@ var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 * DOM and trigger a React warning.
 */
 var ChartMarkState = /* @__PURE__ */ function(ChartMarkState) {
-	/** Full strength — the default, and the hovered or pinned category. */
+	/** Full strength — the default, and the hovered category. */
 	ChartMarkState["ACTIVE"] = "active";
 	/** Softened, for categories other than the hovered one. */
 	ChartMarkState["MUTED"] = "muted";
-	/** Furthest back, for categories outside a pinned one. */
-	ChartMarkState["FADED"] = "faded";
 	return ChartMarkState;
 }({});
 /** Which pair of a rectangle's corners carries the radius. */
@@ -152,4 +163,4 @@ var ChartTargetShape = /* @__PURE__ */ function(ChartTargetShape) {
 	return ChartTargetShape;
 }({});
 //#endregion
-export { BarChartNormalization, BarCorners, ChartCategoryLabelMode, ChartKind, ChartMarkState, ChartPalette, ChartTargetShape, ChartValueUnit, LineChartCurve };
+export { BarChartNormalization, BarCorners, ChartCategoryLabelMode, ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartTargetShape, ChartValueUnit, LineChartCurve };