@galaxy-io/dls 1.3.5 → 1.3.6

package/dist/charts/BarChart.js

@@ -1,10 +1,11 @@
 import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { SKELETON_BAR_GROUPS } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { getBarLegendItems } from "./barChartLegend.js";
 import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath } from "./ChartPrimitives.js";
+import { ChartBarPath, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -42,9 +43,29 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		valueFormatter,
 		valueUnit
 	]);
+	/**
+	* The data actually rendered: the caller's, or the skeleton's while loading.
+	*
+	* Loading replaces the chart wholesale with ghost bars pushed through the
+	* real geometry pipeline, so the skeleton gets the true radii and spacing.
+	* The cast is safe because nothing derived from skeleton data ever surfaces:
+	* labels are hidden, targets are off, the legend shows stubs, and the
+	* accessible name says "loading" instead of counting.
+	*/
+	const displayGroups = useMemo(() => isLoading ? SKELETON_BAR_GROUPS.map((values, groupIndex) => ({
+		label: `skeleton-${groupIndex}`,
+		bars: values.map((value, barIndex) => ({
+			metric: `skeleton-${barIndex}`,
+			components: [{
+				key: "skeleton",
+				label: "",
+				value
+			}]
+		}))
+	})) : groups, [isLoading, groups]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
+		rawDomain: useMemo(() => getBarValueDomain(displayGroups, normalization), [displayGroups, normalization]),
 		valueDomain,
 		width,
 		height,
@@ -69,10 +90,10 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	* takes its metric's colour. Applying the metric colour to a stack would
 	* paint every segment identically.
 	*/
-	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
-	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors]);
+	const isStacked = useMemo(() => displayGroups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [displayGroups]);
+	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => isLoading ? colors.placeholder : barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors, isLoading]);
 	const geometry = useMemo(() => buildBarChartGeometry({
-		groups,
+		groups: displayGroups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -80,7 +101,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	}), [
-		groups,
+		displayGroups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -88,7 +109,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	]);
-	const isEmpty = groups.length === 0;
+	const isEmpty = displayGroups.length === 0;
 	const legendItems = useMemo(() => getBarLegendItems({
 		isStacked,
 		series,
@@ -104,8 +125,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
@@ -140,6 +160,14 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
+	const marks = geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+		d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
+		fill: rect.color,
+		"data-state": interaction.getMarkState({
+			categoryIndex: rect.groupIndex,
+			seriesKey: isStacked ? rect.componentKey : rect.metric
+		})
+	}, rect.id));
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -158,15 +186,17 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			marginLeft: dimensions.margin.left,
 			formatter: formatAxisValue,
 			showGrid,
+			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
-			labels: groups.map((group) => group.label),
+			labels: displayGroups.map((group) => group.label),
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
+			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -179,14 +209,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		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,
-			"data-state": interaction.getMarkState({
-				categoryIndex: rect.groupIndex,
-				seriesKey: isStacked ? rect.componentKey : rect.metric
-			})
-		}, rect.id))
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 //#endregion

package/dist/charts/ChartAxis.d.ts

@@ -22,6 +22,13 @@ interface ChartValueAxisProps {
     plotHeight: number;
     formatter: ChartValueFormatter;
     showGrid?: boolean;
+    /**
+     * Render the tick labels and title.
+     *
+     * Off while the chart is loading: the grid keeps the plot's structure, but
+     * numbers derived from placeholder data would read as data.
+     */
+    showLabels?: boolean;
     /**
      * Rotated title in the left gutter.
      *
@@ -30,7 +37,7 @@ interface ChartValueAxisProps {
      */
     title?: string;
 }
-export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
+export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, showLabels, title, }: ChartValueAxisProps) => import("react").JSX.Element;
 interface ChartCategoryAxisProps {
     labels: string[];
     /** Left edge of each category's slot, in plot coordinates. */
@@ -42,6 +49,8 @@ interface ChartCategoryAxisProps {
     plotHeight: number;
     formatter: ChartLabelFormatter;
     mode?: ChartCategoryLabelMode;
+    /** Render the labels and title. Off while loading — see the value axis. */
+    showLabels?: boolean;
     /**
      * Title below the tick labels.
      *
@@ -49,5 +58,5 @@ interface ChartCategoryAxisProps {
      */
     title?: string;
 }
-export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
+export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, showLabels, title, }: ChartCategoryAxisProps) => import("react").JSX.Element | null;
 export {};

package/dist/charts/ChartAxis.js

@@ -6,7 +6,7 @@ import { getCategoryLabelStride } from "./chartScales.js";
 import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
+var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, showLabels = true, title }) => {
 	const titleBand = title ? 26 : 0;
 	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
 	return /* @__PURE__ */ jsxs("g", {
@@ -18,7 +18,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 				x2: plotWidth + 12,
 				y1: 0,
 				y2: 0
-			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+			}), showLabels && labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -marginLeft + titleBand,
 				y: -20 / 2,
 				width: labelWidth,
@@ -37,7 +37,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 					})
 				})
 			})]
-		}, tick)), title && /* @__PURE__ */ jsx("g", {
+		}, tick)), showLabels && title && /* @__PURE__ */ jsx("g", {
 			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
 			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -plotHeight / 2,
@@ -61,7 +61,8 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 		})]
 	});
 };
-var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
+var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, showLabels = true, title }) => {
+	if (!showLabels) return null;
 	const formatted = labels.map(formatter);
 	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
 	const labelWidth = step * stride;

package/dist/charts/ChartFrame.js

@@ -22,7 +22,8 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* showing three. The two charts previously counted different things for the
 	* same situation, which is the drift this removes.
 	*/
-	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
+	const kindLabel = match(kind).with(ChartKind.PIE, () => "Pie").with(ChartKind.BAR, () => "Bar").with(ChartKind.LINE, () => "Line").exhaustive();
+	const resolvedAriaLabel = ariaLabel ?? (isLoading ? `${kindLabel} chart, loading` : match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive());
 	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
 		noTooltip,
 		buildCategoryTooltip,
@@ -121,6 +122,7 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 			items: legendItems,
 			inset: legendInset ?? (legendRight ? 16 : margin.left),
 			vertical: legendRight,
+			isLoading,
 			hoveredKey: interaction.hoveredSeriesKey,
 			onItemEnter: interaction.onSeriesEnter,
 			onItemLeave: interaction.onSeriesLeave

package/dist/charts/ChartLegend.d.ts

@@ -7,6 +7,14 @@ interface ChartLegendProps {
     hoveredKey?: string | null;
     /** Stack entries in a column — the side-placed layout. */
     vertical?: boolean;
+    /**
+     * Render shimmer stubs instead of items.
+     *
+     * Keeps the legend's space reserved while the chart shows its skeleton, so
+     * data arriving doesn't shift the layout — which matters most beside a pie,
+     * where the legend's width decides the plot box's.
+     */
+    isLoading?: 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.
@@ -25,5 +33,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, vertical, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
+declare const ChartLegend: ({ items, inset, hoveredKey, vertical, isLoading, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -1,10 +1,21 @@
 import Text, { TextSize } from "../text/Text.js";
+import TextShimmer from "../text/TextShimmer.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";
 //#region src/charts/ChartLegend.tsx
 /**
+* Stub label widths in px, staggered so the placeholder reads as a legend
+* rather than a repeated block. Three entries: enough to hold a legend's
+* space without promising a series count.
+*/
+var SKELETON_LABEL_WIDTHS = [
+	40,
+	56,
+	48
+];
+/**
 * Legend for the chart components.
 *
 * Hovering or focusing an entry isolates its series; leaving releases it.
@@ -15,7 +26,22 @@ 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, vertical = false, onItemEnter, onItemLeave }) => {
+var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, isLoading = false, onItemEnter, onItemLeave }) => {
+	if (isLoading) return /* @__PURE__ */ jsx(ChartLegendRow, {
+		$inset: inset,
+		$vertical: vertical,
+		"data-active": "false",
+		children: SKELETON_LABEL_WIDTHS.map((labelWidth, index) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
+			"data-state": ChartMarkState.ACTIVE,
+			children: [/* @__PURE__ */ jsx(TextShimmer, {
+				height: 8,
+				width: 8
+			}), /* @__PURE__ */ jsx(TextShimmer, {
+				height: 10,
+				width: labelWidth
+			})]
+		}, index))
+	});
 	if (items.length === 0) return null;
 	const isInteractive = Boolean(onItemEnter);
 	const activeKey = hoveredKey;

package/dist/charts/ChartPrimitives.d.ts

@@ -55,6 +55,19 @@ 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>>;
+/**
+ * Wraps the marks while the chart is loading.
+ *
+ * Only motion lives here — the slow pulse shared with `TextShimmer` and
+ * `AvatarShimmer`, so a loading chart breathes in step with every other
+ * skeleton on the page. Colour arrives through the series resolver like any
+ * other mark colour, which is what lets bars and arcs ghost by `fill` and
+ * lines by `stroke` without per-shape CSS here.
+ *
+ * Under reduced motion the pulse pins at its midpoint rather than sitting at
+ * full strength, so the chart still reads as a placeholder and not as data.
+ */
+export declare const ChartSkeletonGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
 /**
  * Per-category hit target, rendered above the marks.
  *

package/dist/charts/ChartPrimitives.js

@@ -138,6 +138,23 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
+* Wraps the marks while the chart is loading.
+*
+* Only motion lives here — the slow pulse shared with `TextShimmer` and
+* `AvatarShimmer`, so a loading chart breathes in step with every other
+* skeleton on the page. Colour arrives through the series resolver like any
+* other mark colour, which is what lets bars and arcs ghost by `fill` and
+* lines by `stroke` without per-shape CSS here.
+*
+* Under reduced motion the pulse pins at its midpoint rather than sitting at
+* full strength, so the chart still reads as a placeholder and not as data.
+*/
+var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
+	name: "ChartSkeletonGroup",
+	class: "c1wvzvu4",
+	propsAsIs: true
+});
+/**
 * Per-category hit target, rendered above the marks.
 *
 * Hit testing the full column rather than the bars themselves means a two-pixel
@@ -150,7 +167,7 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c1wvzvu4",
+	class: "c17guewt",
 	propsAsIs: true
 });
 /**
@@ -163,7 +180,7 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
-	class: "c17guewt",
+	class: "cblgiyf",
 	propsAsIs: true
 });
 /**
@@ -171,24 +188,24 @@ var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp15 = () => ({ theme }) => theme.color.border.primary;
+var _exp16 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "cblgiyf",
+	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "cblgiyf-0": [_exp15()] }
+	vars: { "c1lr03cc-0": [_exp16()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp16 = () => ({ theme }) => theme.color.border.secondary;
+var _exp17 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "c1lr03cc",
+	class: "cizy1s8",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp16()] }
+	vars: { "cizy1s8-0": [_exp17()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "cizy1s8",
+	class: "c1ukq11d",
 	propsAsIs: true
 });
 /**
@@ -198,21 +215,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp17 = () => ({ $x }) => `${$x}px`;
-var _exp18 = () => ({ $y }) => `${$y}px`;
-var _exp21 = () => ({ theme }) => theme.color.border.primary;
-var _exp22 = () => ({ theme }) => theme.color.background.primary;
-var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp18 = () => ({ $x }) => `${$x}px`;
+var _exp19 = () => ({ $y }) => `${$y}px`;
+var _exp22 = () => ({ theme }) => theme.color.border.primary;
+var _exp23 = () => ({ theme }) => theme.color.background.primary;
+var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "c1ukq11d",
+	class: "cwcko2m",
 	propsAsIs: false,
 	vars: {
-		"c1ukq11d-0": [_exp17()],
-		"c1ukq11d-1": [_exp18()],
-		"c1ukq11d-2": [_exp21()],
-		"c1ukq11d-3": [_exp22()],
-		"c1ukq11d-4": [_exp23()]
+		"cwcko2m-0": [_exp18()],
+		"cwcko2m-1": [_exp19()],
+		"cwcko2m-2": [_exp22()],
+		"cwcko2m-3": [_exp23()],
+		"cwcko2m-4": [_exp24()]
 	}
 }));
 /**
@@ -223,32 +240,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "cwcko2m",
+	class: "cqwhvyz",
 	propsAsIs: false,
 	vars: {
-		"cwcko2m-0": [_exp27()],
-		"cwcko2m-1": [_exp28()],
-		"cwcko2m-2": [_exp30()]
+		"cqwhvyz-0": [_exp28()],
+		"cqwhvyz-1": [_exp29()],
+		"cqwhvyz-2": [_exp31()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp31 = () => ({ theme }) => theme.color.border.primary;
-var _exp32 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp32 = () => ({ theme }) => theme.color.border.primary;
+var _exp33 = () => ({ theme }) => theme.color.background.tertiary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cqwhvyz",
+	class: "c1iaray",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp31()],
-		"cqwhvyz-1": [_exp32()]
+		"c1iaray-0": [_exp32()],
+		"c1iaray-1": [_exp33()]
 	}
 }));
 /**
@@ -260,23 +277,23 @@ 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 _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 ? "column" : "row";
+var _exp35 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
+var _exp36 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp37 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
+var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp39 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1iaray",
+	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp33()],
-		"c1iaray-1": [_exp34()],
-		"c1iaray-2": [_exp35()],
-		"c1iaray-3": [_exp36()],
-		"c1iaray-4": [_exp37()],
-		"c1iaray-5": [_exp38()]
+		"cz6jod1-0": [_exp34()],
+		"cz6jod1-1": [_exp35()],
+		"cz6jod1-2": [_exp36()],
+		"cz6jod1-3": [_exp37()],
+		"cz6jod1-4": [_exp38()],
+		"cz6jod1-5": [_exp39()]
 	}
 });
 /**
@@ -293,14 +310,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cz6jod1",
+	class: "c1de5mqk",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "c1de5mqk",
+	class: "cjirv6a",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, 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, ChartSkeletonGroup, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.js

@@ -34,6 +34,7 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
 				variant: TextVariant.TERTIARY,
+				isEllipsis: true,
 				children: displayed.label
 			}), /* @__PURE__ */ jsx(FlexWrapper, {
 				direction: FlexDirection.COLUMN,
@@ -47,6 +48,7 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
 						alignItems: AlignItems.CENTER,
 						gap: 6,
+						minWidth: 0,
 						children: [/* @__PURE__ */ jsx(FlexItem, {
 							shrink: 0,
 							children: /* @__PURE__ */ jsx(Circle, {
@@ -58,10 +60,13 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 							isEllipsis: true,
 							children: row.label
 						})]
-					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						weight: TextWeight.MEDIUM,
-						children: row.formattedValue
+					}), /* @__PURE__ */ jsx(FlexItem, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							weight: TextWeight.MEDIUM,
+							children: row.formattedValue
+						})
 					})]
 				}, row.key))
 			})]

package/dist/charts/LineChart.js

@@ -1,10 +1,10 @@
 import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
-import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS, SKELETON_LINE_SERIES } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
-import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
+import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -21,9 +21,27 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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);
+	/**
+	* The data actually rendered: the caller's, or ghost lines while loading.
+	*
+	* Loading replaces the chart wholesale with skeleton data pushed through the
+	* real geometry pipeline — offset lines drawn with their area fills, so the
+	* placeholder has the layered depth of a real multi-series chart. The cast is
+	* safe because nothing derived from it ever surfaces: labels are hidden,
+	* targets are off, the legend shows stubs, and the accessible name says
+	* "loading" instead of counting.
+	*/
+	const displayLines = useMemo(() => isLoading ? SKELETON_LINE_SERIES.map((values, lineIndex) => ({
+		metric: `skeleton-${lineIndex}`,
+		showArea: true,
+		points: values.map((value, index) => ({
+			x: `skeleton-${index}`,
+			y: value
+		}))
+	})) : lines, [isLoading, lines]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
+		rawDomain: useMemo(() => getLineValueDomain(displayLines), [displayLines]),
 		valueDomain,
 		width,
 		height,
@@ -38,10 +56,10 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryAxisTitle
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
+	const resolveColor = useCallback(({ metric }) => isLoading ? colors.placeholder : colors.resolve(metric), [colors, isLoading]);
 	const geometry = useMemo(() => buildLineChartGeometry({
-		lines,
-		categories,
+		lines: displayLines,
+		categories: isLoading ? void 0 : categories,
 		plotWidth,
 		plotHeight,
 		curve,
@@ -49,7 +67,8 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	}), [
-		lines,
+		displayLines,
+		isLoading,
 		categories,
 		plotWidth,
 		plotHeight,
@@ -58,7 +77,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	]);
-	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
+	const isEmpty = geometry.categories.length === 0 || displayLines.length === 0;
 	const legendItems = useMemo(() => colors.keys.map((metric) => ({
 		key: metric,
 		label: series[metric].label,
@@ -68,8 +87,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {
@@ -103,7 +121,42 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	return /* @__PURE__ */ jsxs(ChartFrame, {
+	const marks = /* @__PURE__ */ jsxs(Fragment, { children: [
+		geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
+			d: linePath.areaPath,
+			fill: linePath.color,
+			fillOpacity: LINE_AREA_OPACITY,
+			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+		}, `${linePath.id}:area`) : null),
+		showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+			x1: activeColumn.x,
+			x2: activeColumn.x,
+			y1: 0,
+			y2: plotHeight
+		}),
+		geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
+			d: linePath.path,
+			stroke: linePath.color,
+			strokeWidth: linePath.strokeWidth,
+			strokeDasharray: linePath.dashArray,
+			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+		}, linePath.id)),
+		geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+			cx: point.x,
+			cy: point.y,
+			r: LINE_POINT_RADIUS,
+			fill: point.color,
+			"data-state": interaction.getMarkState({ seriesKey: point.metric })
+		}, `${point.id}:isolated`)),
+		activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+			cx: point.x,
+			cy: point.y,
+			r: LINE_POINT_RADIUS,
+			fill: point.color,
+			"data-state": interaction.getMarkState({ seriesKey: point.metric })
+		}, point.id))
+	] });
+	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -121,6 +174,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			marginLeft: dimensions.margin.left,
 			formatter: formatValue,
 			showGrid,
+			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: geometry.categories,
@@ -130,6 +184,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
+			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -142,41 +197,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: [
-			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
-				d: linePath.areaPath,
-				fill: linePath.color,
-				fillOpacity: LINE_AREA_OPACITY,
-				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-			}, `${linePath.id}:area`) : null),
-			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
-				x1: activeColumn.x,
-				x2: activeColumn.x,
-				y1: 0,
-				y2: plotHeight
-			}),
-			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
-				d: linePath.path,
-				stroke: linePath.color,
-				strokeWidth: linePath.strokeWidth,
-				strokeDasharray: linePath.dashArray,
-				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-			}, linePath.id)),
-			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-				cx: point.x,
-				cy: point.y,
-				r: LINE_POINT_RADIUS,
-				fill: point.color,
-				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, `${point.id}:isolated`)),
-			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-				cx: point.x,
-				cy: point.y,
-				r: LINE_POINT_RADIUS,
-				fill: point.color,
-				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, point.id))
-		]
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 //#endregion

package/dist/charts/PieChart.js

@@ -1,13 +1,13 @@
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
-import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
+import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE, SKELETON_PIE_VALUES } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
+import { ChartArcPath, ChartCenterBox, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -40,9 +40,23 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	});
 	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
 	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
+	/**
+	* The slices actually rendered: the caller's, or three ghost arcs while
+	* loading, pushed through the real geometry so the skeleton donut gets the
+	* true pad angles and corner radii. The cast is safe because nothing derived
+	* from skeleton data ever surfaces: targets are off, the legend shows stubs,
+	* and the accessible name says "loading" instead of counting slices.
+	*/
+	const displaySlices = useMemo(() => isLoading ? SKELETON_PIE_VALUES.map((value, index) => ({
+		key: `skeleton-${index}`,
+		value
+	})) : slices, [isLoading, slices]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => {
+		if (isLoading) return colors.placeholder;
+		return sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit);
+	}, [colors, isLoading]);
 	const geometry = useMemo(() => buildPieChartGeometry({
-		slices,
+		slices: displaySlices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -54,7 +68,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		getSliceColor,
 		getSliceLabel
 	}), [
-		slices,
+		displaySlices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -76,8 +90,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const chartArc = geometry.arcs[index];
@@ -110,7 +123,18 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		shape: ChartTargetShape.PATH,
 		d: chartArc.path
 	})), [geometry.arcs]);
-	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
+	const showCenter = centerContent && !isLoading && (innerRadiusRatio ?? .62) > 0;
+	const marks = /* @__PURE__ */ jsx("g", {
+		transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+		children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
+			d: chartArc.path,
+			fill: chartArc.color,
+			"data-state": interaction.getMarkState({
+				categoryIndex: index,
+				seriesKey: chartArc.id
+			})
+		}, chartArc.id))
+	});
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -140,17 +164,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 			diameter: geometry.innerRadius * 2,
 			children: centerContent
 		}) : null,
-		children: /* @__PURE__ */ jsx("g", {
-			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
-				d: chartArc.path,
-				fill: chartArc.color,
-				"data-state": interaction.getMarkState({
-					categoryIndex: index,
-					seriesKey: chartArc.id
-				})
-			}, chartArc.id))
-		})
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 /** Positions arbitrary content inside the donut hole. */

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;
+/**
+ * Ghost bar heights, one inner array per group — three bars each, so the
+ * skeleton reads as the grouped chart it usually stands in for rather than a
+ * sparse row of lone bars.
+ */
+export declare const SKELETON_BAR_GROUPS: number[][];
+/**
+ * Ghost lines, one inner array per line, offset from each other and drawn with
+ * their area fills so the skeleton has the layered depth of a real multi-series
+ * chart instead of a single bare stroke.
+ */
+export declare const SKELETON_LINE_SERIES: number[][];
+/** Ghost donut shares — three arcs, halving. */
+export declare const SKELETON_PIE_VALUES: number[];
+/**
+ * Skeleton pulse period, matching the cadence of `TextShimmer` and
+ * `AvatarShimmer` so charts load in step with everything else on the page.
+ */
+export declare const CHART_SKELETON_PULSE_MS = 2500;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -214,6 +214,83 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
+* Ghost bar heights, one inner array per group — three bars each, so the
+* skeleton reads as the grouped chart it usually stands in for rather than a
+* sparse row of lone bars.
+*/
+var SKELETON_BAR_GROUPS = [
+	[
+		65,
+		45,
+		25
+	],
+	[
+		80,
+		55,
+		30
+	],
+	[
+		45,
+		70,
+		35
+	],
+	[
+		70,
+		50,
+		40
+	],
+	[
+		55,
+		75,
+		30
+	]
+];
+/**
+* Ghost lines, one inner array per line, offset from each other and drawn with
+* their area fills so the skeleton has the layered depth of a real multi-series
+* chart instead of a single bare stroke.
+*/
+var SKELETON_LINE_SERIES = [
+	[
+		30,
+		55,
+		45,
+		70,
+		60,
+		85,
+		75
+	],
+	[
+		20,
+		35,
+		50,
+		40,
+		60,
+		55,
+		70
+	],
+	[
+		10,
+		25,
+		20,
+		35,
+		30,
+		45,
+		40
+	]
+];
+/** Ghost donut shares — three arcs, halving. */
+var SKELETON_PIE_VALUES = [
+	5,
+	3,
+	2
+];
+/**
+* Skeleton pulse period, matching the cadence of `TextShimmer` and
+* `AvatarShimmer` so charts load in step with everything else on the page.
+*/
+var CHART_SKELETON_PULSE_MS = 2500;
+/**
 * Approximate width of one CAPTION-size character.
 *
 * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -261,4 +338,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_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_SKELETON_PULSE_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, SKELETON_BAR_GROUPS, SKELETON_LINE_SERIES, SKELETON_PIE_VALUES, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/useChartInteraction.d.ts

@@ -25,16 +25,6 @@ interface UseChartInteractionOptions {
     seriesKeys?: string[];
     /** Suppress all interaction — used while loading and when the tooltip is off. */
     disabled?: boolean;
-    /**
-     * Render every mark muted, whatever the two axes say.
-     *
-     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
-     * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
-     * rather than left to each mark, because the alternative is the same
-     * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
-     * which is exactly how one of them came to be missing it.
-     */
-    isLoading?: boolean;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -65,5 +55,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,7 +1,7 @@
 import { ChartMarkState } from "./types.js";
 import { useCallback, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
@@ -21,13 +21,8 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLo
 		setHoveredSeriesKey(null);
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
-		if (isLoading) return ChartMarkState.MUTED;
 		return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
-	}, [
-		isLoading,
-		safeHovered,
-		safeHoveredSeries
-	]);
+	}, [safeHovered, safeHoveredSeries]);
 	return useMemo(() => ({
 		activeIndex: safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,

package/dist/charts/useSeriesColorResolver.d.ts

@@ -33,5 +33,12 @@ export interface SeriesColorResolver<TKey extends string> {
      * imply it is.
      */
     neutral: string;
+    /**
+     * Ghost colour for skeleton marks while the chart is loading.
+     *
+     * The same token the shimmer components use, so the loading vocabulary is
+     * one colour everywhere.
+     */
+    placeholder: string;
 }
 export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -15,7 +15,8 @@ function useSeriesColorResolver(series) {
 		keys,
 		resolve,
 		resolveByIndex,
-		neutral: theme.color.text.tertiary
+		neutral: theme.color.text.tertiary,
+		placeholder: theme.color.border.primary
 	}), [
 		keys,
 		resolve,

package/dist/styles.css

@@ -32,29 +32,30 @@
 .ceqlpek{stroke:none;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.ceqlpek[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.ceqlpek{-webkit-transition:none;transition:none;}}
 .c1fcbddl{pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1fcbddl[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1fcbddl{-webkit-transition:none;transition:none;}}
 .cpcxr59{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cpcxr59[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cpcxr59{-webkit-transition:none;transition:none;}}
-.c1wvzvu4{fill:transparent;outline:none;}
+.c1wvzvu4{pointer-events:none;-webkit-animation:chartSkeletonPulse-c1wvzvu4 2500ms cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:chartSkeletonPulse-c1wvzvu4 2500ms cubic-bezier(0.4, 0, 0.6, 1) infinite;}@-webkit-keyframes chartSkeletonPulse-c1wvzvu4{0%,100%{opacity:0.75;}50%{opacity:0.25;}}@keyframes chartSkeletonPulse-c1wvzvu4{0%,100%{opacity:0.75;}50%{opacity:0.25;}}@media (prefers-reduced-motion: reduce){.c1wvzvu4{-webkit-animation:none;animation:none;opacity:0.5;}}
 .c17guewt{fill:transparent;outline:none;}
-.cblgiyf{stroke:var(--cblgiyf-0);shape-rendering:crispEdges;}
-.c1lr03cc{stroke:var(--c1lr03cc-0);pointer-events:none;}
-.cizy1s8{overflow:visible;pointer-events:none;}
-.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
-.cwcko2m{position:absolute;left:var(--cwcko2m-0);top:var(--cwcko2m-1);width:var(--cwcko2m-2);height:var(--cwcko2m-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;}
-.cqwhvyz{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:12px;border:0.5px solid var(--cqwhvyz-0);border-radius:6px;background-color:var(--cqwhvyz-1);pointer-events:none;text-align:center;}
-.c1iaray{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1iaray-0);-ms-flex-direction:var(--c1iaray-0);flex-direction:var(--c1iaray-0);-webkit-box-flex-wrap:var(--c1iaray-1);-webkit-flex-wrap:var(--c1iaray-1);-ms-flex-wrap:var(--c1iaray-1);flex-wrap:var(--c1iaray-1);-webkit-align-items:var(--c1iaray-2);-webkit-box-align:var(--c1iaray-2);-ms-flex-align:var(--c1iaray-2);align-items:var(--c1iaray-2);gap:var(--c1iaray-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--c1iaray-4);padding-left:var(--c1iaray-5);}.c1iaray[data-active="true"]>*{transition-delay:0ms;}
-.cz6jod1{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;}.cz6jod1[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cz6jod1{-webkit-transition:none;transition:none;}}.cz6jod1:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
-.c1de5mqk{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;}.c1de5mqk[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1de5mqk{-webkit-transition:none;transition:none;}}
+.cblgiyf{fill:transparent;outline:none;}
+.c1lr03cc{stroke:var(--c1lr03cc-0);shape-rendering:crispEdges;}
+.cizy1s8{stroke:var(--cizy1s8-0);pointer-events:none;}
+.c1ukq11d{overflow:visible;pointer-events:none;}
+.cwcko2m{position:absolute;z-index:10;pointer-events:none;left:var(--cwcko2m-0);top:var(--cwcko2m-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--cwcko2m-2);border-radius:6px;background-color:var(--cwcko2m-3);opacity:var(--cwcko2m-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.cwcko2m{-webkit-transition:none;transition:none;}}
+.cqwhvyz{position:absolute;left:var(--cqwhvyz-0);top:var(--cqwhvyz-1);width:var(--cqwhvyz-2);height:var(--cqwhvyz-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;}
+.c1iaray{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:12px;border:0.5px solid var(--c1iaray-0);border-radius:6px;background-color:var(--c1iaray-1);pointer-events:none;text-align:center;}
+.cz6jod1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cz6jod1-0);-ms-flex-direction:var(--cz6jod1-0);flex-direction:var(--cz6jod1-0);-webkit-box-flex-wrap:var(--cz6jod1-1);-webkit-flex-wrap:var(--cz6jod1-1);-ms-flex-wrap:var(--cz6jod1-1);flex-wrap:var(--cz6jod1-1);-webkit-align-items:var(--cz6jod1-2);-webkit-box-align:var(--cz6jod1-2);-ms-flex-align:var(--cz6jod1-2);align-items:var(--cz6jod1-2);gap:var(--cz6jod1-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cz6jod1-4);padding-left:var(--cz6jod1-5);}.cz6jod1[data-active="true"]>*{transition-delay:0ms;}
+.c1de5mqk{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;}.c1de5mqk[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1de5mqk{-webkit-transition:none;transition:none;}}.c1de5mqk:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.cjirv6a{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;}.cjirv6a[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cjirv6a{-webkit-transition:none;transition:none;}}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
-.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;}
-.shdcix9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:4px;-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;box-sizing:border-box;min-width:16px;cursor:var(--shdcix9-0);-webkit-transition:border-color 0.1s ease-out;transition:border-color 0.1s ease-out;height:var(--shdcix9-1);padding:var(--shdcix9-2);background-color:var(--shdcix9-3);border:0.5px solid var(--shdcix9-4);border-radius:var(--shdcix9-5);}
-.szfsuud{margin-left:0.5px;}.szfsuud>span{display:inline-block;-webkit-animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;-webkit-animation-play-state:var(--szfsuud-1);animation-play-state:var(--szfsuud-1);}.szfsuud>span:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}.szfsuud>span:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.szfsuud>span:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}@keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}
 .s1p67zkf{display:inline-block;background:linear-gradient(
     90deg,
     var(--s1p67zkf-0) 0%,
     var(--s1p67zkf-0) 75%,
     var(--s1p67zkf-0) 100%
   );-webkit-background-size:200% 100%;background-size:200% 100%;-webkit-animation:shimmer-s1p67zkf 2.5s infinite,pulse-s1p67zkf 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:shimmer-s1p67zkf 2.5s infinite,pulse-s1p67zkf 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;height:var(--s1p67zkf-1);width:var(--s1p67zkf-2);border-radius:var(--s1p67zkf-3);}@-webkit-keyframes shimmer-s1p67zkf{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@keyframes shimmer-s1p67zkf{0%{-webkit-background-position:-250% 0;background-position:-250% 0;}100%{-webkit-background-position:150% 0;background-position:150% 0;}}@-webkit-keyframes pulse-s1p67zkf{0%,100%{opacity:0.75;}50%{opacity:0.25;}}@keyframes pulse-s1p67zkf{0%,100%{opacity:0.75;}50%{opacity:0.25;}}
+.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;}
+.shdcix9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:4px;-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;box-sizing:border-box;min-width:16px;cursor:var(--shdcix9-0);-webkit-transition:border-color 0.1s ease-out;transition:border-color 0.1s ease-out;height:var(--shdcix9-1);padding:var(--shdcix9-2);background-color:var(--shdcix9-3);border:0.5px solid var(--shdcix9-4);border-radius:var(--shdcix9-5);}
+.szfsuud{margin-left:0.5px;}.szfsuud>span{display:inline-block;-webkit-animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;-webkit-animation-play-state:var(--szfsuud-1);animation-play-state:var(--szfsuud-1);}.szfsuud>span:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}.szfsuud>span:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.szfsuud>span:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}@keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}
 .s40bxfr{display:-ms-grid;display:grid;box-sizing:border-box;-ms-grid-columns:var(--s40bxfr-0);grid-template-columns:var(--s40bxfr-0);-ms-grid-rows:var(--s40bxfr-1);grid-template-rows:var(--s40bxfr-1);gap:var(--s40bxfr-2);row-gap:var(--s40bxfr-3);-webkit-column-gap:var(--s40bxfr-4);column-gap:var(--s40bxfr-4);-webkit-align-items:var(--s40bxfr-5);-webkit-box-align:var(--s40bxfr-5);-ms-flex-align:var(--s40bxfr-5);align-items:var(--s40bxfr-5);justify-items:var(--s40bxfr-6);-webkit-align-content:var(--s40bxfr-7);-ms-flex-line-pack:var(--s40bxfr-7);align-content:var(--s40bxfr-7);-webkit-box-pack:var(--s40bxfr-8);-ms-flex-pack:var(--s40bxfr-8);-webkit-justify-content:var(--s40bxfr-8);justify-content:var(--s40bxfr-8);width:var(--s40bxfr-9);height:var(--s40bxfr-10);min-width:var(--s40bxfr-11);max-width:var(--s40bxfr-12);min-height:var(--s40bxfr-13);max-height:var(--s40bxfr-14);overflow:var(--s40bxfr-15);padding:var(--s40bxfr-16);margin:var(--s40bxfr-17);}
 .s2h3guw{margin:var(--s2h3guw-0);margin-top:var(--s2h3guw-1);margin-right:var(--s2h3guw-2);margin-bottom:var(--s2h3guw-3);margin-left:var(--s2h3guw-4);width:var(--s2h3guw-5);height:var(--s2h3guw-6);}
 .sck44b4{position:var(--sck44b4-0);min-width:var(--sck44b4-1);width:var(--sck44b4-2);height:var(--sck44b4-3);overflow:var(--sck44b4-4);padding:var(--sck44b4-5);overscroll-behavior:auto;top:var(--sck44b4-6);right:var(--sck44b4-7);bottom:var(--sck44b4-8);left:var(--sck44b4-9);}
@@ -131,7 +132,7 @@
 .m1jgo9vf{position:relative;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:auto;}
 .hvnpu6g{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:120px;height:8px;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:ns-resize;z-index:10;border-radius:4px;background-color:var(--hvnpu6g-0);border:0.5px solid var(--hvnpu6g-1);cursor:ns-resize;}.hvnpu6g:hover{border-color:var(--hvnpu6g-2);background-color:var(--hvnpu6g-3);color:var(--hvnpu6g-4);}
 .v1ha5e5c{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:8px;height:100px;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:ew-resize;z-index:30;border-radius:4px;background-color:var(--v1ha5e5c-0);border:0.5px solid var(--v1ha5e5c-1);cursor:ew-resize;}.v1ha5e5c:hover{border-color:var(--v1ha5e5c-2);background-color:var(--v1ha5e5c-3);color:var(--v1ha5e5c-4);}
-.scx8lyz{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;background:var(--scx8lyz-0);border:0.5px solid var(--scx8lyz-1);border-radius:5px;padding:0 3px;height:28px;}
+.scx8lyz{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;background:var(--scx8lyz-0);border:0.5px solid var(--scx8lyz-1);border-radius:5px;padding:0 2px;height:28px;}
 .s1law64s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:3px 8px;background:var(--s1law64s-0);cursor:pointer;border:0.5px solid var(--s1law64s-1);border-radius:4px;}
 .m16ywplt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;cursor:pointer;background-color:transparent;}.m16ywplt:hover{background-color:var(--m16ywplt-0);}.m16ywplt:focus-visible{outline:none;border-color:var(--m16ywplt-1);}
 .a1wb3h41{position:-webkit-sticky;position:sticky;right:0;top:0;z-index:25;-webkit-flex:0 0 48px;-ms-flex:0 0 48px;flex:0 0 48px;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;background-color:var(--a1wb3h41-0);border-left:0.5px solid var(--a1wb3h41-1);border-bottom:0.5px solid var(--a1wb3h41-1);}

package/dist/switcher/Switcher.js

@@ -5,7 +5,7 @@ import { styled } from "@linaria/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/switcher/Switcher.tsx
 var _exp = () => ({ theme }) => theme.color.background.primary;
-var _exp2 = () => ({ theme }) => theme.color.border.primary;
+var _exp2 = () => ({ theme }) => theme.color.border.secondary;
 var StyledSwitcher = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledSwitcher",
 	class: "scx8lyz",
@@ -16,7 +16,7 @@ var StyledSwitcher = withTheme(/*#__PURE__*/ styled("div")({
 	}
 }));
 var _exp3 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.secondary : "transparent";
-var _exp4 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.primary : "transparent";
+var _exp4 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.tertiary : "transparent";
 var SwitcherItem = withTheme(/*#__PURE__*/ styled("div")({
 	name: "SwitcherItem",
 	class: "s1law64s",

package/package.json

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