@galaxy-io/dls 1.4.3 → 1.4.4

package/dist/charts/BarChart.d.ts

@@ -21,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, }: 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, legendMaxItems, 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 as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -179,6 +179,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
+		legendMaxItems,
 		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
 			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
 			fill: rect.color,

package/dist/charts/ChartFrame.d.ts

@@ -99,6 +99,8 @@ export interface ChartFrameProps {
     contentWhenEmpty?: ReactNode;
     showLegend?: boolean;
     legendItems: ChartLegendItem[];
+    /** Inline cap; the rest collapse behind "+N more". See {@link BaseChartProps.legendMaxItems}. */
+    legendMaxItems?: number;
     /** Where the legend sits. RIGHT stacks it beside the plot, vertically centred. */
     legendPlacement?: ChartLegendPlacement;
     /**
@@ -108,5 +110,5 @@ export interface ChartFrameProps {
      */
     legendInset?: number;
 }
-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;
+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, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -9,7 +9,7 @@ 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, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
+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, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
 	const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
@@ -121,6 +121,8 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 			items: legendItems,
 			inset: legendInset ?? (legendRight ? 16 : margin.left),
 			vertical: legendRight,
+			verticalExtent: legendRight ? height : void 0,
+			maxItems: legendMaxItems,
 			hoveredKey: interaction.hoveredSeriesKey,
 			onItemEnter: interaction.onSeriesEnter,
 			onItemLeave: interaction.onSeriesLeave

package/dist/charts/ChartLegend.d.ts

@@ -7,6 +7,20 @@ interface ChartLegendProps {
     hoveredKey?: string | null;
     /** Stack entries in a column — the side-placed layout. */
     vertical?: boolean;
+    /**
+     * Plot box height in px — the vertical legend's fit extent. Height needs to
+     * arrive as a number because, unlike width, a percentage of the root's
+     * auto height is indefinite and computes to nothing. Absent (or 0, the
+     * unmeasured plot) there is no height constraint and every entry renders.
+     */
+    verticalExtent?: number;
+    /**
+     * Stricter cap on inline entries, on top of the automatic fit. The legend
+     * already collapses whatever won't fit inside the plot's extent — width for
+     * the horizontal layout, height for the side-placed one — behind the
+     * "+N more" trigger; this only lowers that number further.
+     */
+    maxItems?: number;
     /**
      * Supplying these makes the legend interactive. Omit them and it renders as
      * inert text, with no button semantics for a screen reader to announce.
@@ -19,11 +33,19 @@ interface ChartLegendProps {
  *
  * Hovering or focusing an entry isolates its series; leaving releases it.
  *
+ * The legend never outgrows the plot. A horizontal legend holds exactly one
+ * line of the plot's width; a side-placed legend holds one column of the
+ * plot's height. Entries that would not fit collapse behind a "+N more"
+ * trigger whose tooltip lists them — still hoverable, so a collapsed series
+ * isolates exactly like a visible one. The fit is measured, not guessed: a
+ * hidden copy of every entry is laid out unconstrained, and the visible count
+ * is however many real sizes fit beside the trigger.
+ *
  * Deliberately *not* a visibility toggle: hiding a series would have to rescale
  * the value axis to stay honest — otherwise the remaining bars sit mysteriously
  * short — and that belongs with the geometry layer rather than bolted on here.
  * Isolation only changes opacity, so the domain is untouched and the numbers
  * keep meaning what they did.
  */
-declare const ChartLegend: ({ items, inset, hoveredKey, vertical, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
+declare const ChartLegend: ({ items, inset, hoveredKey, vertical, verticalExtent, maxItems, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -1,51 +1,162 @@
-import Text, { TextSize } from "../text/Text.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
-import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow } from "./ChartPrimitives.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./constants.js";
+import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
 /**
 * Legend for the chart components.
 *
 * Hovering or focusing an entry isolates its series; leaving releases it.
 *
+* The legend never outgrows the plot. A horizontal legend holds exactly one
+* line of the plot's width; a side-placed legend holds one column of the
+* plot's height. Entries that would not fit collapse behind a "+N more"
+* trigger whose tooltip lists them — still hoverable, so a collapsed series
+* isolates exactly like a visible one. The fit is measured, not guessed: a
+* hidden copy of every entry is laid out unconstrained, and the visible count
+* is however many real sizes fit beside the trigger.
+*
 * Deliberately *not* a visibility toggle: hiding a series would have to rescale
 * the value axis to stay honest — otherwise the remaining bars sit mysteriously
 * short — and that belongs with the geometry layer rather than bolted on here.
 * Isolation only changes opacity, so the domain is untouched and the numbers
 * keep meaning what they did.
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, onItemEnter, onItemLeave }) => {
+var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, verticalExtent, maxItems, onItemEnter, onItemLeave }) => {
+	const rowRef = useRef(null);
+	const measureRef = useRef(null);
+	/** How many entries fit inline. `null` until the first measurement lands. */
+	const [fitCount, setFitCount] = useState(null);
+	const recompute = useCallback(() => {
+		const row = rowRef.current;
+		const measure = measureRef.current;
+		if (!row || !measure) return;
+		const rendered = Array.from(measure.children);
+		const trigger = rendered.pop();
+		if (!trigger) return;
+		const gap = vertical ? 8 : 16;
+		const available = vertical ? verticalExtent || Number.POSITIVE_INFINITY : row.clientWidth - inset;
+		const sizeOf = (el) => {
+			const rect = el.getBoundingClientRect();
+			return Math.ceil(vertical ? rect.height : rect.width);
+		};
+		const sizes = rendered.map(sizeOf);
+		if (sizes.reduce((sum, size, i) => sum + size + (i > 0 ? gap : 0), 0) <= available) {
+			setFitCount(sizes.length);
+			return;
+		}
+		const triggerSize = sizeOf(trigger);
+		let used = 0;
+		let count = 0;
+		for (const [i, size] of sizes.entries()) {
+			used += size + (i > 0 ? gap : 0);
+			if (used + gap + triggerSize > available) break;
+			count = i + 1;
+		}
+		setFitCount(Math.max(1, count));
+	}, [
+		inset,
+		vertical,
+		verticalExtent
+	]);
+	useLayoutEffect(() => {
+		recompute();
+	}, [
+		recompute,
+		items,
+		maxItems
+	]);
+	useLayoutEffect(() => {
+		const row = rowRef.current;
+		if (!row) return;
+		const observer = new ResizeObserver(() => recompute());
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, [recompute]);
 	if (items.length === 0) return null;
 	const isInteractive = Boolean(onItemEnter);
 	const activeKey = hoveredKey;
-	return /* @__PURE__ */ jsx(ChartLegendRow, {
+	const renderItem = (item) => {
+		const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Circle, {
+			size: 8,
+			hex: item.color
+		}), /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			children: item.label
+		})] });
+		if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+			"data-state": state,
+			children: content
+		}, item.key);
+		return /* @__PURE__ */ jsx(ChartLegendItemButton, {
+			type: "button",
+			"data-state": state,
+			onMouseEnter: () => onItemEnter?.(item.key),
+			onMouseLeave: () => onItemLeave?.(),
+			onFocus: () => onItemEnter?.(item.key),
+			onBlur: () => onItemLeave?.(),
+			children: content
+		}, item.key);
+	};
+	const capFromProp = maxItems === void 0 ? items.length : Math.max(1, maxItems);
+	const capFromFit = fitCount === null ? items.length : fitCount;
+	const inlineItems = items.slice(0, Math.min(capFromProp, capFromFit));
+	const overflowItems = items.slice(inlineItems.length);
+	/**
+	* The trigger holds full strength while a *collapsed* series is engaged — the
+	* one visual cue that the isolated series lives behind it — and recedes with
+	* the other entries when a visible one is.
+	*/
+	const isOverflowEngaged = activeKey !== null && overflowItems.some((item) => item.key === activeKey);
+	const triggerState = activeKey === null || isOverflowEngaged ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+	return /* @__PURE__ */ jsxs(ChartLegendRow, {
+		ref: rowRef,
 		$inset: inset,
 		$vertical: vertical,
+		$extent: verticalExtent,
 		"data-active": activeKey !== null ? "true" : "false",
-		children: items.map((item) => {
-			const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
-			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Circle, {
-				size: 8,
-				hex: item.color
-			}), /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				children: item.label
-			})] });
-			if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
-				"data-state": state,
-				children: content
-			}, item.key);
-			return /* @__PURE__ */ jsx(ChartLegendItemButton, {
-				type: "button",
-				"data-state": state,
-				onMouseEnter: () => onItemEnter?.(item.key),
-				onMouseLeave: () => onItemLeave?.(),
-				onFocus: () => onItemEnter?.(item.key),
-				onBlur: () => onItemLeave?.(),
-				children: content
-			}, item.key);
-		})
+		children: [
+			/* @__PURE__ */ jsxs(ChartLegendMeasure, {
+				ref: measureRef,
+				$vertical: vertical,
+				"aria-hidden": "true",
+				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, { children: [/* @__PURE__ */ jsx(Circle, {
+					size: 8,
+					hex: item.color
+				}), /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					children: item.label
+				})] }, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, { children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: TextVariant.SECONDARY,
+					children: `+${items.length - 1} more`
+				}) })]
+			}),
+			inlineItems.map(renderItem),
+			overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+				isInteractive: true,
+				position: vertical ? TooltipPosition.RIGHT : TooltipPosition.TOP,
+				variant: TooltipVariant.TERTIARY,
+				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, {
+					"data-active": activeKey !== null ? "true" : "false",
+					children: overflowItems.map(renderItem)
+				}),
+				children: /* @__PURE__ */ jsx(ChartLegendItemButton, {
+					type: "button",
+					"data-state": triggerState,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						variant: TextVariant.SECONDARY,
+						children: `+${overflowItems.length} more`
+					})
+				})
+			})
+		]
 	});
 };
 //#endregion

package/dist/charts/ChartPrimitives.d.ts

@@ -213,7 +213,30 @@ 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;
+    /** Plot box height in px — the side legend's fit extent. */
+    $extent?: number;
 }>;
+/**
+ * Invisible copy of every legend entry plus a worst-case trigger, laid out
+ * unconstrained along the legend's own axis so the fit computation can read
+ * real sizes.
+ *
+ * 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".
+ */
+export declare const ChartLegendMeasure: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $vertical?: boolean;
+}>;
+/**
+ * Column of legend entries collapsed behind the "+N more" trigger, rendered as
+ * the body of an interactive tooltip.
+ *
+ * Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
+ * gets a bounded popover rather than one taller than the plot. Carries its own
+ * `data-active` delay-cancel rule: the tooltip content mounts outside
+ * {@link ChartLegendRow}, where the row's selector cannot reach it.
+ */
+export declare const ChartLegendOverflowList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 /**
  * One legend entry, when the legend is interactive.
  *

package/dist/charts/ChartPrimitives.js

@@ -1,4 +1,5 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
+import "./constants.js";
 /* empty css                          */
 import { styled } from "@linaria/react";
 //#region src/charts/ChartPrimitives.tsx
@@ -287,11 +288,14 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
 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 _exp34 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp35 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
+var _exp36 = () => ({ $vertical }) => $vertical ? `8px` : `16px`;
+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 ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
 	class: "cjirv6a",
@@ -302,10 +306,48 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 		"cjirv6a-2": [_exp35()],
 		"cjirv6a-3": [_exp36()],
 		"cjirv6a-4": [_exp37()],
-		"cjirv6a-5": [_exp38()]
+		"cjirv6a-5": [_exp38()],
+		"cjirv6a-6": [_exp39()],
+		"cjirv6a-7": [_exp40()],
+		"cjirv6a-8": [_exp41()]
 	}
 });
 /**
+* Invisible copy of every legend entry plus a worst-case trigger, laid out
+* unconstrained along the legend's own axis so the fit computation can read
+* real sizes.
+*
+* 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 ? `8px` : `16px`;
+var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendMeasure",
+	class: "c1armna5",
+	propsAsIs: false,
+	vars: {
+		"c1armna5-0": [_exp42()],
+		"c1armna5-1": [_exp43()],
+		"c1armna5-2": [_exp44()]
+	}
+});
+/**
+* Column of legend entries collapsed behind the "+N more" trigger, rendered as
+* the body of an interactive tooltip.
+*
+* Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
+* gets a bounded popover rather than one taller than the plot. Carries its own
+* `data-active` delay-cancel rule: the tooltip content mounts outside
+* {@link ChartLegendRow}, where the row's selector cannot reach it.
+*/
+var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendOverflowList",
+	class: "cgd77rv",
+	propsAsIs: false
+});
+/**
 * One legend entry, when the legend is interactive.
 *
 * A real `<button>` rather than a styled div so it sits in the tab order:
@@ -319,14 +361,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "c1armna5",
+	class: "cutidpi",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "cgd77rv",
+	class: "ccpczg",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/LineChart.d.ts

@@ -34,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, }: 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, legendMaxItems, 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 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, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+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, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -142,6 +142,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
+		legendMaxItems,
 		children: [
 			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
 				d: linePath.areaPath,

package/dist/charts/PieChart.d.ts

@@ -40,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, }: 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, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;

package/dist/charts/PieChart.js

@@ -19,12 +19,12 @@ 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 }) => {
+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, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
 		containerRef,
-		width,
+		width: showLegend && width !== void 0 && height !== void 0 ? Math.min(width, height) : width,
 		height,
 		fillWidth,
 		fillHeight,
@@ -133,6 +133,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
+		legendMaxItems,
 		legendPlacement: ChartLegendPlacement.RIGHT,
 		plotOverlay: showCenter && !isEmpty ? /* @__PURE__ */ jsx(ChartDonutCenter, {
 			centerX: dimensions.margin.left + geometry.centerX,

package/dist/charts/constants.d.ts

@@ -203,6 +203,25 @@ export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
+/**
+ * Gap in px between entries in a horizontal legend.
+ *
+ * Also the number the fit computation adds between measured entries, so the
+ * CSS and the arithmetic cannot disagree — which is what makes the collapse
+ * exact rather than "usually right".
+ */
+export declare const CHART_LEGEND_COLUMN_GAP = 16;
+/** Gap in px between entries in a vertical legend. Same contract as
+ * {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+export declare const CHART_LEGEND_VERTICAL_GAP = 8;
+/**
+ * Ceiling on the collapsed-legend popover's height, in px.
+ *
+ * Roughly eight entries. Past that the list scrolls rather than growing into a
+ * popover taller than the chart it annotates — the cap on *visible* entries is
+ * the caller's `legendMaxItems`; this one only bounds the overflow list itself.
+ */
+export declare const CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -214,6 +214,25 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
+* Gap in px between entries in a horizontal legend.
+*
+* Also the number the fit computation adds between measured entries, so the
+* CSS and the arithmetic cannot disagree — which is what makes the collapse
+* exact rather than "usually right".
+*/
+var CHART_LEGEND_COLUMN_GAP = 16;
+/** Gap in px between entries in a vertical legend. Same contract as
+* {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+var CHART_LEGEND_VERTICAL_GAP = 8;
+/**
+* Ceiling on the collapsed-legend popover's height, in px.
+*
+* Roughly eight entries. Past that the list scrolls rather than growing into a
+* popover taller than the chart it annotates — the cap on *visible* entries is
+* the caller's `legendMaxItems`; this one only bounds the overflow list itself.
+*/
+var CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
+/**
 * Approximate width of one CAPTION-size character.
 *
 * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -261,4 +280,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_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 };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_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

@@ -435,6 +435,16 @@ export interface BaseChartProps {
     noTooltip?: boolean;
     /** Show the legend beneath the plot. */
     showLegend?: boolean;
+    /**
+     * Stricter cap on inline legend entries, on top of the automatic fit. The
+     * legend never outgrows the plot: a horizontal legend holds one line of the
+     * plot's width, a side-placed legend one column of the plot's height, and
+     * entries that would not fit collapse behind a "+N more" trigger whose
+     * tooltip lists them — still hoverable, so a collapsed series isolates
+     * exactly like a visible one. This prop only lowers the inline count
+     * further.
+     */
+    legendMaxItems?: number;
     /** Render the loading treatment instead of the data. */
     isLoading?: boolean;
     /** Shown when there is nothing to plot. Defaults to a centred "No data". */

package/dist/styles.css

@@ -41,10 +41,14 @@
 .c1iaray{text-align:right;white-space:nowrap;}
 .cz6jod1{position:absolute;left:var(--cz6jod1-0);top:var(--cz6jod1-1);width:var(--cz6jod1-2);height:var(--cz6jod1-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
 .c1de5mqk{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--c1de5mqk-0);border-radius:6px;background-color:var(--c1de5mqk-1);pointer-events:none;text-align:center;}
-.cjirv6a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:var(--cjirv6a-1);-webkit-flex-wrap:var(--cjirv6a-1);-ms-flex-wrap:var(--cjirv6a-1);flex-wrap:var(--cjirv6a-1);-webkit-align-items:var(--cjirv6a-2);-webkit-box-align:var(--cjirv6a-2);-ms-flex-align:var(--cjirv6a-2);align-items:var(--cjirv6a-2);gap:var(--cjirv6a-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-4);padding-left:var(--cjirv6a-5);}.cjirv6a[data-active="true"]>*{transition-delay:0ms;}
-.c1armna5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1armna5[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1armna5{-webkit-transition:none;transition:none;}}.c1armna5:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
-.cgd77rv{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cgd77rv[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cgd77rv{-webkit-transition:none;transition:none;}}
+.cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);gap:var(--cjirv6a-3);width:var(--cjirv6a-4);min-width:var(--cjirv6a-5);height:var(--cjirv6a-6);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-7);padding-left:var(--cjirv6a-8);}.cjirv6a[data-active="true"] [data-state]{transition-delay:0ms;}
+.c1armna5{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1armna5-0);-ms-flex-direction:var(--c1armna5-0);flex-direction:var(--c1armna5-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1armna5-1);-webkit-box-align:var(--c1armna5-1);-ms-flex-align:var(--c1armna5-1);align-items:var(--c1armna5-1);gap:var(--c1armna5-2);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
+.cgd77rv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:8px;max-height:208px;overflow-y:auto;}.cgd77rv[data-active="true"] [data-state]{transition-delay:0ms;}
+.cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cutidpi[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cutidpi{-webkit-transition:none;transition:none;}}.cutidpi:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.ccpczg[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.ccpczg{-webkit-transition:none;transition:none;}}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
+.tbnx4ok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.tjda4tq{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:var(--tjda4tq-0);background-color:var(--tjda4tq-1);border:var(--tjda4tq-2);border-radius:5px;}
 .s1yc7aow{position:relative;height:var(--s1yc7aow-0);width:100%;background-color:var(--s1yc7aow-1);border:0.5px solid var(--s1yc7aow-2);border-radius:4px;overflow:hidden;}
 .p1sc05jm{position:absolute;top:0;left:0;height:100%;width:var(--p1sc05jm-0);background-color:var(--p1sc05jm-1);-webkit-animation:var(--p1sc05jm-2);animation:var(--p1sc05jm-2);-webkit-transition:width 0.075s ease-in-out;transition:width 0.075s ease-in-out;}@-webkit-keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}@keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}
 .slaxlp8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;min-width:140px;background-color:var(--slaxlp8-0);padding:12px 16px;border:0.5px solid var(--slaxlp8-1);border-radius:5px;}
@@ -85,8 +89,6 @@
 .ixmrsxd{position:relative;width:var(--ixmrsxd-0);}
 .l8jap54{position:absolute;left:var(--l8jap54-0);top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:none;}
 .t16cwjje{position:absolute;right:var(--t16cwjje-0);top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;cursor:var(--t16cwjje-1);}
-.tbnx4ok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.tjda4tq{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:var(--tjda4tq-0);background-color:var(--tjda4tq-1);border:var(--tjda4tq-2);border-radius:5px;}
 .s1902pw9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;padding:var(--s1902pw9-0);height:var(--s1902pw9-1);width:var(--s1902pw9-2);cursor:var(--s1902pw9-3);opacity:var(--s1902pw9-4);background:var(--s1902pw9-5);border:0.5px solid var(--s1902pw9-6);border-radius:5px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1902pw9:hover{border-color:var(--s1902pw9-7);}
 .c179xo5d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
 .d60emtx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:36px;height:36px;border:none;border-radius:4px;cursor:var(--d60emtx-0);opacity:var(--d60emtx-1);background-color:var(--d60emtx-2);border:var(--d60emtx-3);-webkit-transition:all 0.075s ease-in-out;transition:all 0.075s ease-in-out;}.d60emtx:hover:not(:disabled){background-color:var(--d60emtx-4);}.d60emtx:focus{outline:none;}
@@ -141,7 +143,7 @@
 .c1kvxq2r{position:absolute;inset:0;z-index:10;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;background-color:var(--c1kvxq2r-0);border:1.5px solid var(--c1kvxq2r-1);border-radius:4px;}
 .cz6gl36{width:100%;height:12px;border-radius:4px;background-color:var(--cz6gl36-0);-webkit-animation:spreadsheetSkeletonPulse-cz6gl36 1.4s ease-in-out infinite;animation:spreadsheetSkeletonPulse-cz6gl36 1.4s ease-in-out infinite;}@-webkit-keyframes spreadsheetSkeletonPulse-cz6gl36{0%,100%{opacity:1;}50%{opacity:0.4;}}@keyframes spreadsheetSkeletonPulse-cz6gl36{0%,100%{opacity:1;}50%{opacity:0.4;}}@media (prefers-reduced-motion: reduce){.cz6gl36{-webkit-animation:none;animation:none;}}
 .tldpbjd{width:var(--tldpbjd-0);height:var(--tldpbjd-1);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;overflow:hidden;}
-.t1ltwowk{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;position:relative;min-height:0;overflow-anchor:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--t1ltwowk-0);}
+.t1ltwowk{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;position:relative;min-height:0;overflow-anchor:none;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--t1ltwowk-0);}
 .sfoers7{width:100%;min-width:var(--sfoers7-0);border-collapse:separate;border-spacing:0;table-layout:fixed;}
 .tmoy46{display:table-header-group;position:-webkit-sticky;position:sticky;top:0px;z-index:20;}
 .tyata5l{display:block;position:relative;height:var(--tyata5l-0);}
@@ -162,7 +164,7 @@
 .e11cd6rt{display:block;width:100%;padding:0;box-sizing:border-box;background-color:var(--e11cd6rt-0);border-bottom:var(--e11cd6rt-1);}
 .eg2e964{position:-webkit-sticky;position:sticky;left:0;width:var(--eg2e964-0);display:-ms-grid;display:grid;-ms-grid-columns:var(--eg2e964-1);grid-template-columns:var(--eg2e964-1);box-sizing:border-box;}
 .e1s9jmet{background-color:var(--e1s9jmet-0);border-right:0.5px solid var(--e1s9jmet-1);}
-.e1yjhd51{min-width:0;width:100%;border-top:0.5px solid var(--e1yjhd51-0);box-sizing:border-box;overscroll-behavior:auto;}
+.e1yjhd51{min-width:0;width:100%;border-top:0.5px solid var(--e1yjhd51-0);box-sizing:border-box;}
 .s10i74tu{font-weight:var(--s10i74tu-0);}
 .sdpyy92{font-family:var(--sdpyy92-0);font-weight:var(--sdpyy92-1);font-size:var(--sdpyy92-2);border:0.5px solid var(--sdpyy92-3);border-radius:4px;padding:2px 4px;background-color:var(--sdpyy92-4);}
 .et5f6jm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}

package/package.json

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