@galaxy-io/dls 2.7.0 → 2.8.0

package/dist/charts/BarChart.js

@@ -274,7 +274,7 @@ function BarChartInner(props, ref) {
 				y: activeBand.y,
 				width: activeBand.width,
 				height: activeBand.height,
-				className: "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-c1iaray"
+				className: "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-cz6jod1"
 			}),
 			geometry.rects.map((rect) => /* @__PURE__ */ jsx("path", {
 				d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),

package/dist/charts/BigNumber.d.ts

@@ -0,0 +1,66 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Tile fill (Constitution V surface set: containers). */
+export declare enum BigNumberVariant {
+    /** The canvas fill, `background.base`. */
+    BASE = "BASE",
+    /** A panel fill, `background.primary`. The default (1.x). */
+    PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/**
+ * Which slot of a `BigNumberGroup` a tile sits in.
+ * @internal
+ */
+export declare enum BigNumberGroupSlot {
+    /** The lead tiles on the left, on the frame's own surface: no fill, no border. */
+    PRIMARY = "PRIMARY",
+    /** The scrolling strip on the right: bordered by default, the tile's own fill. */
+    SECONDARY = "SECONDARY"
+}
+/**
+ * The slot a tile renders in; `null` outside a `BigNumberGroup`. Set by `BigNumberGroup` around
+ * each of its two slots.
+ * @internal
+ */
+export declare const BigNumberGroupContext: import("react").Context<BigNumberGroupSlot | null>;
+export interface BigNumberProps extends AriaAttributes {
+    /** What the number means. Small, tertiary, one line above the value. */
+    label: string;
+    /** The headline figure. A string or number renders as `body_lg` medium with tabular numerals; pass a node for a value with a unit or a custom treatment. */
+    value: ReactNode;
+    /** One short line under the value: the comparison or context ("+4% vs last week"). */
+    description?: string;
+    /** Pinned 8px after the number, vertically centered, however wide the tile: a status `Square`, a small `Icon`, a unit. */
+    suffix?: ReactNode;
+    /** At the far end of the value row, vertically centered: a `Sparkline`, a `Chip`, a delta. */
+    trailing?: ReactNode;
+    /**
+     * Surface fill of the tile. Ignored in a `BigNumberGroup`'s primary slot, which draws no fill.
+     * @default BigNumberVariant.PRIMARY
+     */
+    variant?: BigNumberVariant;
+    /**
+     * Adds the 1px hairline. Use it for tiles on a page; leave it off inside an already-bordered container. In a `BigNumberGroup`'s strip it defaults to `true`.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Replaces `value` with a `Skeleton` line and hides `description`, `suffix` and `trailing`; the label stays. Sets `aria-busy`.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** DOM id on the root. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A KPI tile: label, headline value, optional description, suffix mark and trailing trend. */
+declare const BigNumber: import("react").ForwardRefExoticComponent<BigNumberProps & import("react").RefAttributes<HTMLElement>>;
+export default BigNumber;

package/dist/charts/{StatChart.js → BigNumber.js}

@@ -5,41 +5,64 @@ import Flex, { AlignItems, FlexDirection } from "../layout/Flex.js";
 import Box, { BoxVariant } from "../layout/Box.js";
 import FlexItem from "../layout/FlexItem.js";
 /* empty css                    */
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
-//#region src/charts/StatChart.tsx
+//#region src/charts/BigNumber.tsx
 /**
-* StatChart is the KPI tile: one number with its label, on a quiet surface, sized so a row of them
+* BigNumber is the KPI tile: one number with its label, on a quiet surface, sized so a row of them
 * lines up. A `label` ("Active users"), a `value` ("1,284"), an optional `description` under the
-* value ("+4% vs last week") and an optional `trailing` slot at the end of the value row for a
+* value ("+4% vs last week"), an optional `suffix` pinned 8px after the number (a status `Square`,
+* a small `Icon`, a unit) and an optional `trailing` slot at the far end of the value row for a
 * `Sparkline` or a `Chip`. The tile is a `Box`: `variant` picks its surface step and `hasBorder`
 * adds the hairline. `isLoading` swaps the value for a `Skeleton` line of the same height.
 *
+* Inside a `BigNumberGroup` the tile takes its slot's defaults through `BigNumberGroupContext`: in
+* the primary slot no fill and no border (the frame's own surface), in the strip a hairline. An
+* explicit `hasBorder` always wins.
+*
 * It draws no chart itself and imports no chart code (no d3). It is not a card with a header and
-* actions (`Widget`) and not a list of label/value pairs (`DescriptionList`).
+* actions (`Widget`) and not a list of label/value pairs (`DescriptionList`). Renamed from 1.x
+* `StatChart`.
 */
 /** Tile fill (Constitution V surface set: containers). */
-var StatChartVariant = /* @__PURE__ */ function(StatChartVariant) {
+var BigNumberVariant = /* @__PURE__ */ function(BigNumberVariant) {
 	/** The canvas fill, `background.base`. */
-	StatChartVariant["BASE"] = "BASE";
+	BigNumberVariant["BASE"] = "BASE";
 	/** A panel fill, `background.primary`. The default (1.x). */
-	StatChartVariant["PRIMARY"] = "PRIMARY";
+	BigNumberVariant["PRIMARY"] = "PRIMARY";
 	/** A raised fill, `background.secondary`. */
-	StatChartVariant["SECONDARY"] = "SECONDARY";
+	BigNumberVariant["SECONDARY"] = "SECONDARY";
 	/** The most elevated fill, `background.tertiary`. */
-	StatChartVariant["TERTIARY"] = "TERTIARY";
-	return StatChartVariant;
+	BigNumberVariant["TERTIARY"] = "TERTIARY";
+	return BigNumberVariant;
+}({});
+/**
+* Which slot of a `BigNumberGroup` a tile sits in.
+* @internal
+*/
+var BigNumberGroupSlot = /* @__PURE__ */ function(BigNumberGroupSlot) {
+	/** The lead tiles on the left, on the frame's own surface: no fill, no border. */
+	BigNumberGroupSlot["PRIMARY"] = "PRIMARY";
+	/** The scrolling strip on the right: bordered by default, the tile's own fill. */
+	BigNumberGroupSlot["SECONDARY"] = "SECONDARY";
+	return BigNumberGroupSlot;
 }({});
+/**
+* The slot a tile renders in; `null` outside a `BigNumberGroup`. Set by `BigNumberGroup` around
+* each of its two slots.
+* @internal
+*/
+var BigNumberGroupContext = createContext(null);
 /** Identity by member name: `Box` owns the fill and the hairline. */
-var STAT_CHART_VARIANT_TO_BOX_VARIANT_MAP = {
+var BIG_NUMBER_VARIANT_TO_BOX_VARIANT_MAP = {
 	["BASE"]: BoxVariant.BASE,
 	["PRIMARY"]: BoxVariant.PRIMARY,
 	["SECONDARY"]: BoxVariant.SECONDARY,
 	["TERTIARY"]: BoxVariant.TERTIARY
 };
 /** Tiles in a `Flex` row keep their width; in a `Grid` they stretch to the track (1.x). */
-var ROOT_CSS = "gx-StatChart-ROOT_CSS-rlaxlp8";
+var ROOT_CSS = "gx-BigNumber-ROOT_CSS-r1lifffw";
 /** A string or number as the headline figure; a node as given. */
 function renderValue(value) {
 	if (typeof value === "string" || typeof value === "number") return /* @__PURE__ */ jsx(Text, {
@@ -51,15 +74,17 @@ function renderValue(value) {
 	});
 	return value;
 }
-/** A KPI tile: label, headline value, optional description and trailing trend. */
-var StatChart = forwardRef(function StatChart({ label, value, description, trailing, variant = "PRIMARY", hasBorder = false, isLoading = false, id, className, style, ...rest }, ref) {
+/** A KPI tile: label, headline value, optional description, suffix mark and trailing trend. */
+var BigNumber = forwardRef(function BigNumber({ label, value, description, suffix, trailing, variant = "PRIMARY", hasBorder, isLoading = false, id, className, style, ...rest }, ref) {
+	const slot = useContext(BigNumberGroupContext);
+	const isPrimarySlot = slot === "PRIMARY";
 	return /* @__PURE__ */ jsx(Box, {
 		...rest,
 		...isLoading ? { "aria-busy": true } : {},
 		ref,
 		...id === void 0 ? {} : { id },
-		variant: STAT_CHART_VARIANT_TO_BOX_VARIANT_MAP[variant],
-		hasBorder,
+		...isPrimarySlot ? {} : { variant: BIG_NUMBER_VARIANT_TO_BOX_VARIANT_MAP[variant] },
+		hasBorder: hasBorder ?? slot === "SECONDARY",
 		radius: Radius.LG,
 		padding: [12, 16],
 		minWidth: 140,
@@ -88,7 +113,19 @@ var StatChart = forwardRef(function StatChart({ label, value, description, trail
 					children: [/* @__PURE__ */ jsx(FlexItem, {
 						grow: 1,
 						minWidth: 0,
-						children: renderValue(value)
+						children: suffix === void 0 || suffix === null || suffix === false ? renderValue(value) : /* @__PURE__ */ jsxs(Flex, {
+							alignItems: AlignItems.CENTER,
+							gap: 8,
+							minWidth: 0,
+							children: [/* @__PURE__ */ jsx(FlexItem, {
+								minWidth: 0,
+								children: renderValue(value)
+							}), /* @__PURE__ */ jsx(Flex, {
+								alignItems: AlignItems.CENTER,
+								shrink: 0,
+								children: suffix
+							})]
+						})
 					}), trailing]
 				}), description ? /* @__PURE__ */ jsx(Text, {
 					size: TextSize.BODY_SM,
@@ -100,6 +137,6 @@ var StatChart = forwardRef(function StatChart({ label, value, description, trail
 		})
 	});
 });
-StatChart.displayName = "StatChart";
+BigNumber.displayName = "BigNumber";
 //#endregion
-export { StatChartVariant, StatChart as default };
+export { BigNumberGroupContext, BigNumberGroupSlot, BigNumberVariant, BigNumber as default };

package/dist/charts/BigNumberGroup.d.ts

@@ -0,0 +1,51 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Frame fill (surface set: containers). Leave `variant` unset for no fill. */
+export declare enum BigNumberGroupVariant {
+    /** The canvas fill, `background.base`. */
+    BASE = "BASE",
+    /** A panel fill, `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+export interface BigNumberGroupProps extends AriaAttributes {
+    /** The strip's `BigNumber` tiles, right of `primary`. Bordered by default; each keeps its own `variant`. */
+    children?: ReactNode;
+    /** One or more lead `BigNumber` tiles on the left, on the frame's own surface with no fill and no border. */
+    primary?: ReactNode;
+    /**
+     * Surface fill of the frame. Unset draws no fill: the parent shows through.
+     * @default undefined (no fill)
+     */
+    variant?: BigNumberGroupVariant;
+    /**
+     * Adds the 1px hairline around the frame. Leave it off inside an already-bordered container (a `Widget`).
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Span the parent's width; the primary tiles take the spare width and the strip sits at the far end. Off: the frame hugs its tiles.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * Fade the strip toward each edge that has more tiles beyond it.
+     * @default false
+     */
+    hasFadeEdges?: boolean;
+    /** Names the scrolling strip (`role="region"`), announced when it takes focus. */
+    ariaLabel?: string;
+    /** DOM id on the root. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A row of KPI tiles: lead tiles on the left, a sideways-scrolling strip of the rest on the right. */
+declare const BigNumberGroup: import("react").ForwardRefExoticComponent<BigNumberGroupProps & import("react").RefAttributes<HTMLElement>>;
+export default BigNumberGroup;

package/dist/charts/BigNumberGroup.js

@@ -0,0 +1,112 @@
+import { Radius } from "../theme/enums.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import Box, { BoxVariant } from "../layout/Box.js";
+import ScrollArea from "../layout/ScrollArea.js";
+import FlexItem from "../layout/FlexItem.js";
+import { BigNumberGroupContext, BigNumberGroupSlot } from "./BigNumber.js";
+/* empty css                         */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/charts/BigNumberGroup.tsx
+/**
+* BigNumberGroup is a row of `BigNumber` tiles in one frame: the lead figure on the left and the
+* breakdown in a strip on the right that scrolls sideways when the row is wider than its parent
+* (the Filament observability summary). `primary` holds one or more tiles on the frame's own
+* surface, borderless; `children` are the strip's tiles, bordered by default and filled with
+* whatever `variant` each was given (`TERTIARY` reads raised). The slots set those defaults through
+* `BigNumberGroupContext`; an explicit `hasBorder` on a tile always wins.
+*
+* The frame is a `Box` (radius `lg`, overflow hidden): `variant` picks its surface step and
+* `hasBorder` adds the hairline. It hugs its tiles by default, so the strip only scrolls when the
+* parent is narrower than the row; `fillWidth` spans the parent and gives the spare width to the
+* primary tiles, pushing the strip to the far end. `hasFadeEdges` fades the strip toward each edge
+* with more tiles beyond it. An overflowing strip is a tab stop (arrow keys scroll it); a strip
+* that fits is not.
+*
+* Not a grid of equal cards (`Grid` of bordered `BigNumber`s), not a card with a header (`Widget`).
+*/
+/** Frame fill (surface set: containers). Leave `variant` unset for no fill. */
+var BigNumberGroupVariant = /* @__PURE__ */ function(BigNumberGroupVariant) {
+	/** The canvas fill, `background.base`. */
+	BigNumberGroupVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. */
+	BigNumberGroupVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
+	BigNumberGroupVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. */
+	BigNumberGroupVariant["TERTIARY"] = "TERTIARY";
+	return BigNumberGroupVariant;
+}({});
+/** Identity by member name: `Box` owns the fill and the hairline. */
+var BIG_NUMBER_GROUP_VARIANT_TO_BOX_VARIANT_MAP = {
+	["BASE"]: BoxVariant.BASE,
+	["PRIMARY"]: BoxVariant.PRIMARY,
+	["SECONDARY"]: BoxVariant.SECONDARY,
+	["TERTIARY"]: BoxVariant.TERTIARY
+};
+/** Hugging: as wide as the tiles, never wider than the parent (then the strip scrolls). */
+var HUG_CSS = "gx-BigNumberGroup-HUG_CSS-h10zwtj7";
+/** A row of KPI tiles: lead tiles on the left, a sideways-scrolling strip of the rest on the right. */
+var BigNumberGroup = forwardRef(function BigNumberGroup({ children, primary, variant, hasBorder = false, fillWidth = false, hasFadeEdges = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const hasPrimary = primary !== void 0 && primary !== null && primary !== false;
+	return /* @__PURE__ */ jsx(Box, {
+		...rest,
+		ref,
+		...id === void 0 ? {} : { id },
+		...variant === void 0 ? {} : { variant: BIG_NUMBER_GROUP_VARIANT_TO_BOX_VARIANT_MAP[variant] },
+		hasBorder,
+		radius: Radius.LG,
+		overflow: "hidden",
+		fillWidth,
+		className: cx(!fillWidth && HUG_CSS, className),
+		...style === void 0 ? {} : { style },
+		children: /* @__PURE__ */ jsxs(Flex, {
+			alignItems: AlignItems.CENTER,
+			gap: 16,
+			padding: [
+				0,
+				0,
+				0,
+				12
+			],
+			children: [hasPrimary ? /* @__PURE__ */ jsx(FlexItem, {
+				grow: 1,
+				shrink: 0,
+				children: /* @__PURE__ */ jsx(Flex, {
+					gap: 12,
+					padding: [12, 0],
+					children: /* @__PURE__ */ jsx(BigNumberGroupContext.Provider, {
+						value: BigNumberGroupSlot.PRIMARY,
+						children: primary
+					})
+				})
+			}) : null, /* @__PURE__ */ jsx(FlexItem, {
+				grow: 0,
+				shrink: 1,
+				minWidth: 0,
+				children: /* @__PURE__ */ jsx(ScrollArea, {
+					canScrollHorizontally: true,
+					hasFadeEdges,
+					...ariaLabel === void 0 ? {} : { ariaLabel },
+					children: /* @__PURE__ */ jsx(Flex, {
+						gap: 12,
+						padding: [
+							12,
+							12,
+							12,
+							0
+						],
+						children: /* @__PURE__ */ jsx(BigNumberGroupContext.Provider, {
+							value: BigNumberGroupSlot.SECONDARY,
+							children
+						})
+					})
+				})
+			})]
+		})
+	});
+});
+BigNumberGroup.displayName = "BigNumberGroup";
+//#endregion
+export { BigNumberGroupVariant, BigNumberGroup as default };

package/dist/charts/ChartCategoryTargets.js

@@ -12,7 +12,7 @@ import { cx } from "@linaria/core";
 */
 /** @internal The category hit layer. */
 function ChartCategoryTargets({ targets, onEnter, onLeave, onSelect }) {
-	const className = cx(CHART_HIT_TARGET_CSS, onSelect && "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-cjirv6a");
+	const className = cx(CHART_HIT_TARGET_CSS, onSelect && "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-c1armna5");
 	return /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
 		const handlers = {
 			onMouseEnter: () => onEnter(index),

package/dist/charts/ChartFrame.js

@@ -1,4 +1,3 @@
-import Skeleton, { SkeletonVariant } from "../feedback/Skeleton.js";
 import { ChartKind, ChartLegendPlacement } from "./types.js";
 import { CHART_LEGEND_FILTER_EXTENT, CHART_LEGEND_SIDE_GAP } from "./constants.js";
 import Chip, { ChipSize } from "../chips/Chip.js";
@@ -18,8 +17,9 @@ import { FunnelSimpleIcon } from "@phosphor-icons/react";
 /**
 * @internal The shell every chart renders into: the root (sizing, legend placement, passthrough),
 * the measured plot box (one tab stop when interactive), the SVG and its inset translate, axes,
-* marks, hit targets, the in-chart tooltip, the empty and loading overlays, the live region and
-* the legend. On a filterable chart dismissible filter chips follow the legend entries while
+* marks, hit targets, the in-chart tooltip, the empty overlay, the loading pulse (the whole plot
+* fades in and out while the legend holds, so a loading chart still reads as a chart), the live
+* region and the legend. On a filterable chart dismissible filter chips follow the legend entries while
 * something is pinned. One pin shows a chip per part ("06:00" and "Failed" for one segment): a
 * chip's × drops that part and keeps the other. Several pins collapse into one "3 filters" chip
 * (the list in its tooltip) whose × clears them all. It knows nothing about scales or geometry: axes and marks arrive as nodes, and every
@@ -58,8 +58,12 @@ var Overlay = /*#__PURE__*/ styled("div")({
 	class: "gx-ChartFrame-Overlay-o1itt7vl",
 	propsAsIs: false
 });
-/** A standalone `Skeleton RECT` that takes the whole plot box. */
-var LOADING_SKELETON_CSS = "gx-ChartFrame-LOADING_SKELETON_CSS-l1oi7u1q";
+/**
+* The loading pulse on the plot box: axes, marks and the plot overlay fade together, 1 → 0.25 → 1
+* on the Skeleton's 2.4s curve, while the legend holds. Under `REDUCED_MOTION` the plot rests at
+* half strength instead. The keyframes are global, so the name is `gx-` prefixed.
+*/
+var PLOT_LOADING_CSS = "gx-ChartFrame-PLOT_LOADING_CSS-p1oi7u1q";
 /**
 * A chart's own legend (Heatmap's steps) with the filter chip after it. Both carry the legend's 12px
 * top padding and center on each other, so the chip centers on the legend's text line.
@@ -209,7 +213,6 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 		role: "img",
 		"aria-label": resolvedAriaLabel
 	};
-	const isSkeleton = isLoading && isEmpty;
 	const isSideLegend = legendPlacement === ChartLegendPlacement.RIGHT;
 	const categoryLabel = (key) => formatCategoryKey?.(key) ?? key;
 	const seriesLabel = (key) => legendItems.find((item) => item.key === key)?.label ?? key;
@@ -244,7 +247,7 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 		tooltip: part.key === "all" ? interaction.selection.map(describePin).join(", ") : "",
 		onDismiss: () => handleFilterDismiss(part.rest)
 	}, part.key));
-	const legendNode = !hasLegend || isSkeleton ? null : legend ?? /* @__PURE__ */ jsx(ChartLegend, {
+	const legendNode = !hasLegend ? null : legend ?? /* @__PURE__ */ jsx(ChartLegend, {
 		items: legendItems,
 		placement: legendPlacement,
 		swatch,
@@ -275,9 +278,9 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 			...plotAriaRest,
 			...plotA11yProps,
 			ref: plotRef,
-			className: cx(isInteractive && PLOT_INTERACTIVE_CSS, plotClassName),
+			className: cx(isInteractive && PLOT_INTERACTIVE_CSS, isLoading && PLOT_LOADING_CSS, plotClassName),
 			children: [
-				isMeasured && !isSkeleton && /* @__PURE__ */ jsx(ChartSvg, {
+				isMeasured && /* @__PURE__ */ jsx(ChartSvg, {
 					"aria-hidden": "true",
 					width,
 					height,
@@ -303,17 +306,13 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 						]
 					})
 				}),
-				isMeasured && !isSkeleton && plotOverlay,
+				isMeasured && plotOverlay,
 				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(EmptyState, {
 					size: EmptyStateSize.SMALL,
 					header: placeholder,
 					role: "status"
 				}) }),
-				isSkeleton && /* @__PURE__ */ jsx(Skeleton, {
-					variant: SkeletonVariant.RECT,
-					className: LOADING_SKELETON_CSS
-				}),
-				isMeasured && hasTooltip && !isSkeleton && /* @__PURE__ */ jsx(ChartTooltip, {
+				isMeasured && hasTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
 					model: tooltipModel,
 					containerWidth: width,
 					containerHeight: height,

package/dist/charts/ChartPrimitives.d.ts

@@ -13,6 +13,11 @@ export declare const CHART_AREA_STACKED_CSS: import("@linaria/core").LinariaClas
 export declare const CHART_BAR_CSS: import("@linaria/core").LinariaClassName;
 /** @internal A pie arc. */
 export declare const CHART_ARC_CSS: import("@linaria/core").LinariaClassName;
+/**
+ * @internal The track a loading pie with no slices draws at its radii: the grid hairline bent into
+ * a ring, so the pulse has the shape of the chart it is about to be.
+ */
+export declare const CHART_PIE_TRACK_CSS: import("@linaria/core").LinariaClassName;
 /** @internal A point dot, haloed by the canvas so it reads over the line. */
 export declare const CHART_POINT_CSS: import("@linaria/core").LinariaClassName;
 /** @internal A filled heatmap cell: its ramp step arrives as `--gx-chart-mark-color`. */

package/dist/charts/ChartPrimitives.js

@@ -24,36 +24,41 @@ var CHART_AREA_STACKED_CSS = "gx-ChartPrimitives-CHART_AREA_STACKED_CSS-c1ob2op2
 var CHART_BAR_CSS = "gx-ChartPrimitives-CHART_BAR_CSS-c8c506o";
 /** @internal A pie arc. */
 var CHART_ARC_CSS = "gx-ChartPrimitives-CHART_ARC_CSS-ceqlpek";
+/**
+* @internal The track a loading pie with no slices draws at its radii: the grid hairline bent into
+* a ring, so the pulse has the shape of the chart it is about to be.
+*/
+var CHART_PIE_TRACK_CSS = "gx-ChartPrimitives-CHART_PIE_TRACK_CSS-c1fcbddl";
 /** @internal A point dot, haloed by the canvas so it reads over the line. */
-var CHART_POINT_CSS = "gx-ChartPrimitives-CHART_POINT_CSS-c1fcbddl";
+var CHART_POINT_CSS = "gx-ChartPrimitives-CHART_POINT_CSS-cpcxr59";
 /** @internal A filled heatmap cell: its ramp step arrives as `--gx-chart-mark-color`. */
-var HEATMAP_CELL_CSS = "gx-ChartPrimitives-HEATMAP_CELL_CSS-hpcxr59";
+var HEATMAP_CELL_CSS = "gx-ChartPrimitives-HEATMAP_CELL_CSS-h1wvzvu4";
 /** @internal An empty heatmap cell (no reading): a hairline outline, distinct from the lowest step. */
-var HEATMAP_EMPTY_CELL_CSS = "gx-ChartPrimitives-HEATMAP_EMPTY_CELL_CSS-h1wvzvu4";
+var HEATMAP_EMPTY_CELL_CSS = "gx-ChartPrimitives-HEATMAP_EMPTY_CELL_CSS-h17guewt";
 /** @internal The engaged heatmap cell: an outline, so the rest keep their color for comparison. */
-var HEATMAP_ACTIVE_CELL_CSS = "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-h17guewt";
+var HEATMAP_ACTIVE_CELL_CSS = "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-hblgiyf";
 /** @internal Emphasis of a mark. No transition: emphasis is feedback and snaps. */
 var CHART_MARK_STATE_TO_CSS_MAP = {
-	[ChartMarkState.ACTIVE]: "gx-ChartPrimitives-ChartMarkState_ACTIVE-cblgiyf",
-	[ChartMarkState.MUTED]: "gx-ChartPrimitives-ChartMarkState_MUTED-c1lr03cc",
-	[ChartMarkState.DIMMED]: "gx-ChartPrimitives-ChartMarkState_DIMMED-cizy1s8"
+	[ChartMarkState.ACTIVE]: "gx-ChartPrimitives-ChartMarkState_ACTIVE-c1lr03cc",
+	[ChartMarkState.MUTED]: "gx-ChartPrimitives-ChartMarkState_MUTED-cizy1s8",
+	[ChartMarkState.DIMMED]: "gx-ChartPrimitives-ChartMarkState_DIMMED-c1ukq11d"
 };
 /** @internal A value grid hairline, drawn at every tick including zero. */
-var CHART_GRID_LINE_CSS = "gx-ChartPrimitives-CHART_GRID_LINE_CSS-c1ukq11d";
+var CHART_GRID_LINE_CSS = "gx-ChartPrimitives-CHART_GRID_LINE_CSS-cwcko2m";
 /** @internal The rule at the engaged category (LineChart, AreaChart): one crisp pixel column. */
-var CHART_CURSOR_LINE_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cwcko2m";
+var CHART_CURSOR_LINE_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cqwhvyz";
 /** @internal The rule held at a selected category: one step firmer on the same neutral ramp. */
-var CHART_CURSOR_LINE_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_SELECTED_CSS-cqwhvyz";
+var CHART_CURSOR_LINE_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_SELECTED_CSS-c1iaray";
 /** @internal The band behind the engaged category (BarChart). */
-var CHART_CURSOR_BAND_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-c1iaray";
+var CHART_CURSOR_BAND_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-cz6jod1";
 /** @internal The band held at a selected category. */
-var CHART_CURSOR_BAND_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_SELECTED_CSS-cz6jod1";
+var CHART_CURSOR_BAND_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_SELECTED_CSS-c1de5mqk";
 /** @internal A transparent hit target above the marks. */
-var CHART_HIT_TARGET_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CSS-c1de5mqk";
+var CHART_HIT_TARGET_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CSS-cjirv6a";
 /** @internal A hit target that reports a click (`onSelect` set). */
-var CHART_HIT_TARGET_CLICKABLE_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-cjirv6a";
+var CHART_HIT_TARGET_CLICKABLE_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-c1armna5";
 /** @internal A `foreignObject` holding an axis label (`Text`). */
-var CHART_AXIS_LABEL_BOX_CSS = "gx-ChartPrimitives-CHART_AXIS_LABEL_BOX_CSS-c1armna5";
+var CHART_AXIS_LABEL_BOX_CSS = "gx-ChartPrimitives-CHART_AXIS_LABEL_BOX_CSS-cgd77rv";
 /**
 * @internal A target's `mouseleave`: calls `onLeave` only when the pointer left the target layers,
 * not when it crossed into a neighbouring target, so the engaged category never flickers through
@@ -62,8 +67,8 @@ var CHART_AXIS_LABEL_BOX_CSS = "gx-ChartPrimitives-CHART_AXIS_LABEL_BOX_CSS-c1ar
 function leaveUnlessTarget(event, onLeave) {
 	const next = event.relatedTarget;
 	const layers = event.currentTarget.parentElement;
-	if (next instanceof Element && layers?.contains(next) && next.classList.contains("gx-ChartPrimitives-CHART_HIT_TARGET_CSS-c1de5mqk")) return;
+	if (next instanceof Element && layers?.contains(next) && next.classList.contains("gx-ChartPrimitives-CHART_HIT_TARGET_CSS-cjirv6a")) return;
 	onLeave();
 }
 //#endregion
-export { CHART_ARC_CSS, CHART_AREA_CSS, CHART_AREA_OVERLAP_CSS, CHART_AREA_STACKED_CSS, CHART_AXIS_LABEL_BOX_CSS, CHART_BAR_CSS, CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS, CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS, CHART_GRID_LINE_CSS, CHART_HIT_TARGET_CLICKABLE_CSS, CHART_HIT_TARGET_CSS, CHART_LINE_CSS, CHART_LINE_DASHED_CSS, CHART_MARK_STATE_TO_CSS_MAP, CHART_POINT_CSS, HEATMAP_ACTIVE_CELL_CSS, HEATMAP_CELL_CSS, HEATMAP_EMPTY_CELL_CSS, leaveUnlessTarget };
+export { CHART_ARC_CSS, CHART_AREA_CSS, CHART_AREA_OVERLAP_CSS, CHART_AREA_STACKED_CSS, CHART_AXIS_LABEL_BOX_CSS, CHART_BAR_CSS, CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS, CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS, CHART_GRID_LINE_CSS, CHART_HIT_TARGET_CLICKABLE_CSS, CHART_HIT_TARGET_CSS, CHART_LINE_CSS, CHART_LINE_DASHED_CSS, CHART_MARK_STATE_TO_CSS_MAP, CHART_PIE_TRACK_CSS, CHART_POINT_CSS, HEATMAP_ACTIVE_CELL_CSS, HEATMAP_CELL_CSS, HEATMAP_EMPTY_CELL_CSS, leaveUnlessTarget };

package/dist/charts/Heatmap.js

@@ -288,14 +288,14 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 				categoryIndex: index,
 				seriesKey: cell.row
 			});
-			if (state === ChartMarkState.MUTED && !isLoading) state = ChartMarkState.DIMMED;
+			if (state === ChartMarkState.MUTED) state = ChartMarkState.DIMMED;
 			return /* @__PURE__ */ jsx("rect", {
 				x: cell.x,
 				y: cell.y,
 				width: cell.width,
 				height: cell.height,
 				rx: HEATMAP_CELL_RADIUS,
-				className: cx(cell.step === null ? HEATMAP_EMPTY_CELL_CSS : HEATMAP_CELL_CSS, interaction.activeIndex === index && "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-h17guewt", CHART_MARK_STATE_TO_CSS_MAP[state]),
+				className: cx(cell.step === null ? HEATMAP_EMPTY_CELL_CSS : HEATMAP_CELL_CSS, interaction.activeIndex === index && "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-hblgiyf", CHART_MARK_STATE_TO_CSS_MAP[state]),
 				style: cell.step === null ? void 0 : { "--gx-chart-mark-color": stepColor(cell) }
 			}, cell.id);
 		})

package/dist/charts/LineChart.js

@@ -238,7 +238,7 @@ function LineChartRootInner(props, ref) {
 				x2: activeColumn.x,
 				y1: 0,
 				y2: plotHeight,
-				className: "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cwcko2m"
+				className: "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cqwhvyz"
 			}),
 			!isEmpty && geometry.paths.map((path) => /* @__PURE__ */ jsx("path", {
 				d: path.path,

package/dist/charts/PieChart.js

@@ -13,7 +13,7 @@ import { PIE_MIN_SLICE_SHARE, buildPieChartGeometry, resolvePieChartSlices } fro
 /* empty css                   */
 import { styled } from "@linaria/react";
 import { forwardRef, useCallback, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 //#region src/charts/PieChart.tsx
 /**
@@ -191,16 +191,22 @@ function PieChartInner(props, ref) {
 		legendItems,
 		legendPlacement: ChartLegendPlacement.RIGHT,
 		swatch,
-		children: /* @__PURE__ */ jsx("g", {
+		children: /* @__PURE__ */ jsxs("g", {
 			transform: centerTransform,
-			children: geometry.arcs.map((item, index) => /* @__PURE__ */ jsx("path", {
+			children: [isLoading && isEmpty && geometry.outerRadius > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+				r: geometry.outerRadius,
+				className: "gx-ChartPrimitives-CHART_PIE_TRACK_CSS-c1fcbddl"
+			}), geometry.innerRadius > 0 && /* @__PURE__ */ jsx("circle", {
+				r: geometry.innerRadius,
+				className: "gx-ChartPrimitives-CHART_PIE_TRACK_CSS-c1fcbddl"
+			})] }), geometry.arcs.map((item, index) => /* @__PURE__ */ jsx("path", {
 				d: item.path,
 				className: cx(CHART_ARC_CSS, CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({
 					categoryIndex: index,
 					seriesKey: item.id
 				})]),
 				style: { "--gx-chart-mark-color": item.color.color }
-			}, item.id))
+			}, item.id))]
 		})
 	});
 }

package/dist/charts/Sparkline.js

@@ -9,7 +9,7 @@ import { cx } from "@linaria/core";
 //#region src/charts/Sparkline.tsx
 /**
 * Sparkline is a word-sized trend: a tiny line or row of bars with no axes, legend, tooltip or
-* interaction, set beside the number it summarizes in a table cell, a list row, a `StatChart` or a
+* interaction, set beside the number it summarizes in a table cell, a list row, a `BigNumber` or a
 * sentence. It shows shape (rising, falling, spiky), not values; a chart to read values from is
 * `LineChart` / `BarChart`.
 *

package/dist/charts/types.d.ts

@@ -284,7 +284,7 @@ export interface BaseChartProps<TKey extends string> extends AriaAttributes {
     /** Replaces the tooltip body; positioning stays with the chart. Never called with empty rows. */
     renderTooltip?: ChartTooltipRenderer;
     /**
-     * With no data yet, a `Skeleton` fills the plot; with data, marks recede and interaction pauses until it clears. Sets `aria-busy`.
+     * The plot (axes and marks) pulses between opaque and faint while the legend holds; interaction pauses until it clears. Sets `aria-busy`.
      * @default false
      */
     isLoading?: boolean;

package/dist/charts/useChartInteraction.js

@@ -173,7 +173,6 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGr
 		categoryKeys
 	]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
-		if (isLoading) return ChartMarkState.MUTED;
 		if (seriesKey !== void 0 && safeHoveredSeries !== null) return seriesKey === safeHoveredSeries ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
 		if (!matchesSelection({
 			categoryIndex,
@@ -182,7 +181,6 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGr
 		if (hasSelection) return ChartMarkState.ACTIVE;
 		return categoryIndex !== void 0 && activeIndex !== null && categoryIndex !== activeIndex ? categoryMuteState : ChartMarkState.ACTIVE;
 	}, [
-		isLoading,
 		matchesSelection,
 		safeHoveredSeries,
 		hasSelection,