@galaxy-io/dls 2.7.0 → 2.8.1

package/dist/brand/GalaxyAlchemyWordmark.d.ts

@@ -0,0 +1,31 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyAlchemyWordmarkProps extends AriaAttributes {
+    /**
+     * Height of the wordmark in px, descender included. The width follows the aspect ratio
+     * (≈ 2.77 × height).
+     * @default 20
+     */
+    size?: number;
+    /**
+     * For a wordmark on an inverted fill (`text.primary`): paints `background.base`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Accessible name. Pass `""` to make it decorative (`aria-hidden`) when the name is already in
+     * the surrounding text.
+     * @default Alchemy
+     */
+    ariaLabel?: string;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`. */
+    style?: CSSProperties;
+}
+/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+declare const GalaxyAlchemyWordmark: import("react").ForwardRefExoticComponent<GalaxyAlchemyWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyAlchemyWordmark;

package/dist/brand/GalaxyAlchemyWordmark.js

@@ -0,0 +1,38 @@
+import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyAlchemyWordmarkSvg, { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX } from "./internal/svg/GalaxyAlchemyWordmarkSvg.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyAlchemyWordmark.tsx
+/**
+* Alchemy's product wordmark: the word "alchemy" in a heavy connected script, as one inline SVG.
+* It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS variables,
+* and is SSR-safe.
+*
+* The artwork is `src/brand/assets/galaxy-alchemy-wordmark.svg`, compiled by `pnpm assets` into
+* the private `GalaxyAlchemyWordmarkSvg`; the aspect ratio comes from its
+* `GALAXY_ALCHEMY_WORDMARK_VIEW_BOX`.
+*/
+/** Width ÷ height of the artwork, from its viewBox. */
+var GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO = GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.width / GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.height;
+/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+var GalaxyAlchemyWordmark = forwardRef(function GalaxyAlchemyWordmark({ size = 20, isInverse = false, ariaLabel = "Alchemy", id, className, style, ...rest }, ref) {
+	const aria = brandMarkAriaProps(ariaLabel);
+	return /* @__PURE__ */ jsx(GalaxyAlchemyWordmarkSvg, {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		width: size * GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO,
+		height: size,
+		fill: "currentColor",
+		focusable: "false",
+		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
+		style
+	});
+});
+GalaxyAlchemyWordmark.displayName = "GalaxyAlchemyWordmark";
+//#endregion
+export { GalaxyAlchemyWordmark as default };

package/dist/brand/brandMark.js

@@ -1,8 +1,9 @@
 /* empty css                    */
 //#region src/brand/brandMark.ts
 /**
-* @internal Shared by the five brand components (`GalaxyLogomark`, `GalaxyWordmark`,
-* `GalaxyFilamentWordmark`, `GalaxyLogomarkAnimation`, `GalaxyLogomark3D`); not documented API.
+* @internal Shared by the six brand components (`GalaxyLogomark`, `GalaxyWordmark`,
+* `GalaxyFilamentWordmark`, `GalaxyAlchemyWordmark`, `GalaxyLogomarkAnimation`,
+* `GalaxyLogomark3D`); not documented API.
 *
 * The marks are one inline SVG painted with `fill="currentColor"`, so their color is CSS: exactly
 * one of the color classes below sets `color` on the mark. One class never overrides another, so

package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
+ * Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
+ * root has no size; the public mark that renders this sets both.
+ */
+import { type SVGProps } from "react";
+declare const GalaxyAlchemyWordmarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyAlchemyWordmarkSvg;
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+export declare const GALAXY_ALCHEMY_WORDMARK_VIEW_BOX: {
+    readonly width: 697;
+    readonly height: 252;
+};

package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/brand/internal/svg/GalaxyAlchemyWordmarkSvg.tsx
+/**
+* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
+* Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
+* root has no size; the public mark that renders this sets both.
+*/
+var GalaxyAlchemyWordmarkSvg = forwardRef(function GalaxyAlchemyWordmarkSvg(props, ref) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 697 252",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M46.56 188.16C-1.52588e-05 184.08 16.8 64.5601 70.56 77.28C75.6 78.48 81.36 83.04 84.24 91.92C93.12 67.92 122.16 72.96 126.24 82.8C115.92 94.8 115.2 124.56 116.4 138C118.32 157.2 128.64 142.8 132.96 117.36C133.68 113.52 143.28 114.48 142.32 119.28C136.8 147.36 130.8 187.92 109.68 187.92C82.8 187.92 83.52 152.16 83.52 140.88C83.52 139.92 82.08 139.92 82.08 140.88C78.96 158.16 72.96 190.56 46.56 188.16ZM71.76 93.6C61.2 94.3199 52.32 140.16 58.56 145.44C66 151.44 79.2 92.88 71.76 93.6ZM198.219 37.2C170.859 38.64 167.259 107.28 169.419 138C170.859 157.2 179.259 142.8 183.099 117.36C183.579 113.52 194.139 114.48 193.179 119.28C188.139 147.36 186.699 186.72 162.219 187.92C135.099 189.36 129.819 150.48 130.539 111.12C131.019 78.48 134.619 45.84 139.419 33.84C151.179 3.35999 196.539 8.40002 198.219 37.2ZM213.855 186.96C190.335 183.84 177.135 156.24 179.055 129.36C180.975 103.2 197.775 77.76 224.655 75.6C254.175 73.4399 260.895 101.28 257.055 114.96C250.095 139.92 218.655 135.6 222.015 110.16C223.215 101.52 229.935 95.28 236.895 96.72C235.935 90.24 229.455 91.2 226.575 93.36C211.695 104.16 214.335 138.72 230.175 143.04C246.975 147.36 260.175 126.24 261.855 117.6C262.575 113.52 271.935 115.44 271.215 119.52C267.615 137.04 253.455 192.48 213.855 186.96ZM325.474 38.16C304.834 43.4401 297.154 71.76 294.514 104.16C294.274 104.64 294.994 104.88 295.234 104.16C303.154 83.04 315.634 74.88 329.074 76.5601C342.994 78.24 351.634 87.12 353.314 98.16C355.954 118.8 345.394 146.64 353.554 148.32C357.634 149.04 363.394 135.36 366.514 117.36C367.234 113.52 376.834 114.48 375.874 119.28C370.354 147.36 362.434 186.96 340.114 187.92C288.994 190.32 323.074 103.92 317.794 100.32C307.714 93.12 298.834 148.08 302.914 177.36C304.834 192.72 263.314 194.88 262.354 180C260.434 149.28 256.114 71.28 267.154 36.96C279.394 0 326.674 7.91998 325.474 38.16ZM401.691 188.16C374.811 187.2 360.891 155.52 362.811 127.68C364.731 101.04 380.811 75.6 406.971 75.36C424.491 75.12 440.091 88.5601 434.571 114.48C430.011 137.52 410.571 144.96 402.411 132.72C401.931 132 401.211 131.28 401.451 132.24C401.691 142.56 410.811 149.76 418.251 149.28C429.051 148.56 436.731 135.84 440.331 117.84C441.051 114.72 449.211 115.92 448.731 119.28C446.091 144.24 435.291 189.6 401.691 188.16ZM412.011 91.2C405.771 94.08 400.971 116.16 403.611 118.56C409.371 123.6 420.651 86.88 412.011 91.2ZM473.587 104.16C481.267 81.6 493.987 76.08 507.427 76.5601C519.667 76.8 527.587 84.72 530.707 93.6C544.148 67.6801 580.388 73.4399 583.747 98.16C586.388 118.8 575.828 146.64 584.227 148.32C588.068 149.04 593.828 135.36 596.948 117.36C597.667 113.52 607.268 114.48 606.307 119.28C600.787 147.36 593.107 186.96 570.547 187.92C519.427 190.32 553.508 103.92 548.227 100.32C538.147 93.12 528.787 140.64 534.547 175.92C536.707 190.56 494.227 196.32 492.547 177.36C488.707 130.32 502.387 104.4 497.107 101.52C486.547 95.04 475.027 141.36 480.547 176.64C483.188 192 444.067 195.6 440.707 180.96C437.347 164.64 435.667 119.52 441.427 84.96C442.147 70.8 477.908 72 475.987 89.28C475.027 94.8 473.347 97.92 472.867 104.16C472.867 104.64 473.587 104.88 473.587 104.16ZM694.247 82.8C667.847 100.8 696.887 160.08 686.567 208.32C681.287 232.56 659.447 251.76 633.287 247.68C613.367 244.56 597.527 224.64 603.527 200.88C611.207 213.12 629.927 215.76 640.487 201.36C650.327 187.92 655.847 160.32 651.767 137.28C651.527 136.56 650.327 136.8 650.087 137.52C647.927 155.28 640.967 190.56 614.327 188.16C578.807 185.04 588.407 122.4 604.967 80.64C609.767 68.4 642.887 74.88 635.927 91.4399C627.527 111.36 621.047 140.88 626.567 145.44C628.967 147.36 631.847 142.32 634.727 134.88C642.167 114.24 642.887 77.52 670.727 74.16C680.807 72.72 691.367 75.84 694.247 82.8Z",
+			fill: "currentColor"
+		})
+	});
+});
+GalaxyAlchemyWordmarkSvg.displayName = "GalaxyAlchemyWordmarkSvg";
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+var GALAXY_ALCHEMY_WORDMARK_VIEW_BOX = {
+	width: 697,
+	height: 252
+};
+//#endregion
+export { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX, GalaxyAlchemyWordmarkSvg as default };

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`. */