@galaxy-io/dls 2.3.1 → 2.4.0

package/dist/{three → brand/internal}/galaxyLogomark3DScene.d.ts

@@ -8,9 +8,7 @@ export interface GalaxyLogomark3DSceneOptions {
     isAutoRotate: boolean;
     /** Drag to orbit (no zoom, no pan). */
     isInteractive: boolean;
-    /** Double flip on random axes when the pointer enters. */
-    isHoverable: boolean;
-    /** Auto-rotation rate in rad/s; the flip lasts `0.5 / speed` s. */
+    /** Auto-rotation rate in rad/s. */
     speed: number;
 }
 /** @internal A mounted scene. */

package/dist/{three → brand/internal}/galaxyLogomark3DScene.js

@@ -1,22 +1,48 @@
-import galaxy_logomark_default from "./assets/galaxy-logomark.js";
-import { ACESFilmicToneMapping, AmbientLight, Box3, DirectionalLight, Group, MathUtils, Mesh, MeshPhysicalMaterial, PMREMGenerator, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import galaxy_logomark_default from "../assets/galaxy-logomark.js";
+import { ACESFilmicToneMapping, AmbientLight, Box3, Color, DirectionalLight, Group, MathUtils, Mesh, MeshPhysicalMaterial, PMREMGenerator, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
 import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
-//#region src/three/galaxyLogomark3DScene.ts
+//#region src/brand/internal/galaxyLogomark3DScene.ts
 /**
 * @internal The three.js scene behind `GalaxyLogomark3D`; not documented API. The component loads
-* this module with a dynamic `import()` after mount, so three.js and the ~2.4 MB model stay out of
-* every other module's graph and out of build-time evaluation. A port of the 1.x
-* react-three-fiber scene with its default look: one glossy physical material, the simple
-* three-light rig, a procedural `RoomEnvironment` (no CDN fetch), drag-to-orbit only.
+* this module with a dynamic `import()` after mount, so three.js and the ~2.4 MB model
+* (`src/brand/assets/galaxy-logomark.obj`, imported as text) stay out of every other module's
+* graph and out of build-time evaluation. A port of the 1.x react-three-fiber scene with its
+* default look: one glossy physical material, the simple three-light rig, a procedural
+* `RoomEnvironment` (no CDN fetch), drag-to-orbit only.
 */
 /** The 1.x mesh scale: the resting mark spans ≈ 76% of the canvas at the 1.x camera. */
 var MESH_SCALE = .088;
-/** Reflection strength of the room environment on the material (1.x default, tuned in Storybook). */
-var ENV_MAP_INTENSITY = 1.5;
-/** Ease-out-quart, the 1.x flip curve. */
-var easeOutQuart = (progress) => 1 - (1 - progress) ** 4;
+/**
+* Reflection strength and sheen of the material, by the color's lightness. The 1.x values
+* (`envMapIntensity` 1.5, `sheen` 1) were tuned on the white mark, where the white diffuse
+* dominates and the room reflections read as a soft gloss. On a black mark the diffuse is gone and
+* the same reflections read as a mirror, so a dark color takes a fraction of them and the two
+* marks carry the same amount of shine (a dark mark is also a little rougher, so its highlights
+* spread like the white one's instead of pooling into mirror spots); colors in between interpolate
+* on relative luminance.
+*/
+var LIGHT_MATERIAL = {
+	envMapIntensity: 1.5,
+	sheen: 1,
+	roughness: 0
+};
+var DARK_MATERIAL = {
+	envMapIntensity: .3,
+	sheen: .2,
+	roughness: .4
+};
+/** Reflection, sheen and roughness for a color, from its relative luminance (three's linear-sRGB channels). */
+function materialTuning(hex) {
+	const { r, g, b } = new Color(hex);
+	const luminance = MathUtils.clamp(.2126 * r + .7152 * g + .0722 * b, 0, 1);
+	return {
+		envMapIntensity: MathUtils.lerp(DARK_MATERIAL.envMapIntensity, LIGHT_MATERIAL.envMapIntensity, luminance),
+		sheen: MathUtils.lerp(DARK_MATERIAL.sheen, LIGHT_MATERIAL.sheen, luminance),
+		roughness: MathUtils.lerp(DARK_MATERIAL.roughness, LIGHT_MATERIAL.roughness, luminance)
+	};
+}
 /** Eases an angle 10% of the way to rest by the shortest way, snapping to 0 once invisible. */
 var settle = (angle) => {
 	const next = MathUtils.lerp(wrapAngle(angle), 0, .1);
@@ -24,8 +50,6 @@ var settle = (angle) => {
 };
 /** The same angle in [-π, π). */
 var wrapAngle = (angle) => MathUtils.euclideanModulo(angle + Math.PI, Math.PI * 2) - Math.PI;
-/** -1, 0 or 1. */
-var randomAxis = () => Math.floor(Math.random() * 3) - 1;
 /**
 * @internal Renders the Galaxy logomark into `canvas` and keeps it moving until `dispose()`.
 * Calls `onFirstFrame` once, after the first frame is drawn.
@@ -60,15 +84,13 @@ function mountGalaxyLogomark3DScene(canvas, options, onFirstFrame) {
 		color: current.color,
 		sheenColor: current.color,
 		metalness: 0,
-		roughness: 0,
 		transmission: 0,
 		thickness: 0,
 		ior: 1,
 		clearcoat: 0,
 		clearcoatRoughness: 0,
-		sheen: 1,
 		sheenRoughness: 0,
-		envMapIntensity: ENV_MAP_INTENSITY
+		...materialTuning(current.color)
 	});
 	const model = new OBJLoader().parse(galaxy_logomark_default);
 	model.traverse((child) => {
@@ -91,44 +113,14 @@ function mountGalaxyLogomark3DScene(canvas, options, onFirstFrame) {
 	if (!current.isInteractive) setInteractive(false);
 	const startTime = performance.now();
 	const elapsedSeconds = () => (performance.now() - startTime) / 1e3;
-	let flipStart = null;
-	let flipAxes = {
-		x: 0,
-		y: 1,
-		z: 0
-	};
-	const onPointerEnter = () => {
-		if (!current.isHoverable) return;
-		let axes = {
-			x: randomAxis(),
-			y: randomAxis(),
-			z: randomAxis()
-		};
-		while (axes.x === 0 && axes.y === 0 && axes.z === 0) axes = {
-			x: randomAxis(),
-			y: randomAxis(),
-			z: randomAxis()
-		};
-		flipAxes = axes;
-		flipStart = elapsedSeconds();
-	};
-	canvas.addEventListener("pointerenter", onPointerEnter);
 	let hasDrawn = false;
 	let frame = 0;
 	const tick = () => {
 		frame = requestAnimationFrame(tick);
-		const elapsed = elapsedSeconds();
-		const flipDuration = .5 / current.speed;
 		const { rotation } = group;
-		if (flipStart !== null && elapsed - flipStart < flipDuration) {
-			const turn = easeOutQuart((elapsed - flipStart) / flipDuration) * Math.PI * 4;
-			rotation.set(turn * flipAxes.x, turn * flipAxes.y, turn * flipAxes.z);
-		} else {
-			flipStart = null;
-			rotation.x = settle(rotation.x);
-			rotation.z = settle(rotation.z);
-			rotation.y = current.isAutoRotate ? elapsed * current.speed : settle(rotation.y);
-		}
+		rotation.x = settle(rotation.x);
+		rotation.z = settle(rotation.z);
+		rotation.y = current.isAutoRotate ? elapsedSeconds() * current.speed : settle(rotation.y);
 		renderer.render(scene, camera);
 		if (!hasDrawn) {
 			hasDrawn = true;
@@ -142,13 +134,16 @@ function mountGalaxyLogomark3DScene(canvas, options, onFirstFrame) {
 			if (next.color !== current.color) {
 				material.color.set(next.color);
 				material.sheenColor.set(next.color);
+				const tuning = materialTuning(next.color);
+				material.envMapIntensity = tuning.envMapIntensity;
+				material.sheen = tuning.sheen;
+				material.roughness = tuning.roughness;
 			}
 			if (next.isInteractive !== current.isInteractive) setInteractive(next.isInteractive);
 			current = next;
 		},
 		dispose() {
 			cancelAnimationFrame(frame);
-			canvas.removeEventListener("pointerenter", onPointerEnter);
 			controls.dispose();
 			model.traverse((child) => {
 				if (child instanceof Mesh) child.geometry.dispose();

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

@@ -0,0 +1,13 @@
+/**
+ * @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-filament-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 GalaxyFilamentWordmarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyFilamentWordmarkSvg;
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+export declare const GALAXY_FILAMENT_WORDMARK_VIEW_BOX: {
+    readonly width: 4513;
+    readonly height: 1200;
+};

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

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/brand/internal/svg/GalaxyFilamentWordmarkSvg.tsx
+/**
+* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-filament-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 GalaxyFilamentWordmarkSvg = forwardRef(function GalaxyFilamentWordmarkSvg(props, ref) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 4513 1200",
+		fill: "currentColor",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M181.814 1141.98L159.701 1200L0 985.717L292.377 210.999L363.136 151.659H701.801L660.525 253.856H517.432L468.053 385.708H617.534L579.697 487.246H429.725L181.814 1141.98ZM720.432 336.273L766.622 212.318H1005.44L958.942 336.273H720.432ZM505.694 910.552L701.758 384.404H941.065L745.001 910.552H505.694ZM825.912 910.552L1109.45 151.659L1131.06 92.978L1290.77 307.262L1065.71 910.552H825.912ZM1452.44 720.004L1419.51 808.356H1510.91L1544.32 720.004H1452.44ZM1582.16 617.808L1630.81 487.259H1539.41L1510.41 563.743H1271.11L1316.32 443.085L1359.56 384.404H1864.71L1886.33 443.085L1711.4 910.552H1185.61L1163.99 851.872L1250.96 617.808H1582.16ZM2016.67 910.552H1788.05L1983.62 385.063H2742.33L2763.95 443.085L2590 910.552H2361.38L2519.61 487.259H2457.44L2299.21 910.552H2082.28L2240.01 487.259H2173.91L2016.67 910.552ZM2998.33 664.621L2943.8 808.356H3034.7L3075 703.522H3314.3L3258.29 852.531L3215.04 910.552H2709.9L2688.27 852.531L2840.6 443.085L2883.84 385.063H3388.99L3410.62 443.085L3330.03 665.281H3090.23V664.621H2998.33ZM3128.07 563.083L3155.09 487.259H3063.2L3035.68 563.083H3128.07ZM3553.12 910.552H3313.32L3508.9 385.063H4033.2L4054.83 443.085L3880.38 910.552H3640.59L3798.81 487.259H3710.36L3553.12 910.552ZM4120.38 481.326L4158.22 379.788L4243.72 149.681L4265.34 91L4425.04 304.625L4397.53 379.788H4513L4470.74 481.326H4359.69L4237.83 808.356H4343.2L4299.17 910.552H4197.24H4003.92L3980.82 854.51L4120.38 481.326Z" })
+	});
+});
+GalaxyFilamentWordmarkSvg.displayName = "GalaxyFilamentWordmarkSvg";
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+var GALAXY_FILAMENT_WORDMARK_VIEW_BOX = {
+	width: 4513,
+	height: 1200
+};
+//#endregion
+export { GALAXY_FILAMENT_WORDMARK_VIEW_BOX, GalaxyFilamentWordmarkSvg as default };

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

@@ -0,0 +1,13 @@
+/**
+ * @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-logomark.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 GalaxyLogomarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyLogomarkSvg;
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+export declare const GALAXY_LOGOMARK_VIEW_BOX: {
+    readonly width: 1080;
+    readonly height: 1080;
+};

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

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/internal/svg/GalaxyLogomarkSvg.tsx
+/**
+* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-logomark.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 GalaxyLogomarkSvg = forwardRef(function GalaxyLogomarkSvg(props, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 1080 1080",
+		fill: "currentColor",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M239.88,479.75c132.27,0,239.88-107.61,239.88-239.88S372.14,0,239.88,0,0,107.61,0,239.88s107.61,239.88,239.88,239.88" }),
+			/* @__PURE__ */ jsx("path", { d: "M840.12,600.25c-132.27,0-239.88,107.61-239.88,239.88s107.61,239.88,239.88,239.88,239.88-107.61,239.88-239.88-107.61-239.88-239.88-239.88" }),
+			/* @__PURE__ */ jsx("path", { d: "M473.59,894.23c27.96-103.95.03-195.9,112.41-308.28,112.37-112.38,204.13-84.39,308.07-112.32,8.08-1.87,16.02-4.15,23.77-6.81.07-.02.13-.04.19-.06h.01c94.13-32.43,161.95-121.88,161.95-226.88C1080,107.61,972.39,0,840.12,0,735.12,0,645.68,67.82,613.25,161.95h-.01c-.03.1-.05.18-.08.26-2.65,7.72-4.92,15.61-6.78,23.67-27.93,103.9-.72,196.5-112.24,308.02-111.53,111.52-204.35,84.54-308.26,112.48-8.06,1.86-15.95,4.13-23.67,6.78-.08.02-.16.05-.25.08h-.01C67.82,645.68,0,735.13,0,840.13,0,972.39,107.61,1079.99,239.88,1079.99c105,0,194.46-67.82,226.88-161.95,0,0,0,0,0,0,0-.02,0-.04.01-.06,1.66-4.8,3.16-9.67,4.51-14.6.83-3.02,1.59-6.07,2.3-9.14" })
+		]
+	});
+});
+GalaxyLogomarkSvg.displayName = "GalaxyLogomarkSvg";
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+var GALAXY_LOGOMARK_VIEW_BOX = {
+	width: 1080,
+	height: 1080
+};
+//#endregion
+export { GALAXY_LOGOMARK_VIEW_BOX, GalaxyLogomarkSvg as default };

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

@@ -0,0 +1,13 @@
+/**
+ * @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-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 GalaxyWordmarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyWordmarkSvg;
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+export declare const GALAXY_WORDMARK_VIEW_BOX: {
+    readonly width: 1080;
+    readonly height: 355.84;
+};

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

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/internal/svg/GalaxyWordmarkSvg.tsx
+/**
+* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-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 GalaxyWordmarkSvg = forwardRef(function GalaxyWordmarkSvg(props, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 1080 355.84",
+		fill: "currentColor",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", { d: "M55.16,176.18c0,40.12,20.28,53.2,46.88,53.2s46.01-13.08,46.01-53.2-19.41-53.2-46.01-53.2-46.88,13.08-46.88,53.2M98.34,355.84c-63.01,0-98.34-22.68-98.34-74.13h61.05c-.87,25.95,15.26,30.96,40.99,30.96s45.35-6.98,45.35-37.72v-17.66c-11.56,11.34-28.56,18.97-50.58,18.97C37.5,276.26,0,243.55,0,176.18s38.81-102.26,90.92-102.26c22.68,0,42.3,8.94,56.47,22.02v-18.53h55.6v197.54c0,58.22-37.29,80.89-104.66,80.89" }), /* @__PURE__ */ jsx("path", { d: "M300.69,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M346.69,255.11c-15.26,15.7-32.71,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z" })] }),
+			/* @__PURE__ */ jsx("rect", {
+				x: 419.1,
+				width: 55.6,
+				height: 274.95
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M572.39,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M618.39,255.11c-15.26,15.7-32.7,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z" }),
+			/* @__PURE__ */ jsx("polygon", { points: "776.09 221.75 739.25 274.95 672.53 274.95 742.3 176.61 673.62 77.4 740.12 77.4 776.75 131.26 813.38 77.4 879.01 77.4 809.24 176.39 878.57 274.95 812.29 274.95 776.09 221.75" }),
+			/* @__PURE__ */ jsx("path", { d: "M1080,77.4l-82.85,226.98c-10.25,27.91-20.93,51.46-52.55,51.46-13.08,0-27.47-3.05-41.43-7.2v-50.37l10.03,3.05c20.06,6.11,29,1.31,34.01-12.65l5.45-15.26-75.44-196.02h60.83l41.21,120.58,42.74-120.58h58Z" })
+		]
+	});
+});
+GalaxyWordmarkSvg.displayName = "GalaxyWordmarkSvg";
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+var GALAXY_WORDMARK_VIEW_BOX = {
+	width: 1080,
+	height: 355.84
+};
+//#endregion
+export { GALAXY_WORDMARK_VIEW_BOX, GalaxyWordmarkSvg as default };

package/dist/charts/BarChart.js

@@ -1,10 +1,9 @@
 import { Orientation } from "../theme/enums.js";
-import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartTargetShape } from "./types.js";
+import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartSwatch, ChartTargetShape } from "./types.js";
 import { CHART_BAR_CSS, CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS, CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
 import "./constants.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { resolveChartSeriesColor } from "./chartPalette.js";
-import { ChartLegendSwatch } from "./ChartLegend.js";
 import { ChartFrame } from "./ChartFrame.js";
 import { formatChartValue, resolveValueFormatter } from "./chartFormat.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
@@ -49,7 +48,7 @@ function visualOrder(components) {
 	return [...indexed].sort((a, b) => rank(a) - rank(b) || a.index - b.index).map(({ component }) => component);
 }
 function BarChartInner(props, ref) {
-	const { series, groups, normalization = "NONE", minSegmentLength = 0, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
+	const { series, groups, normalization = "NONE", minSegmentLength = 0, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, swatch = ChartSwatch.SQUARE, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const axisValueFormatter = normalization === "PERCENT" && valueFormatter === void 0 ? PERCENT_AXIS_FORMATTER : valueFormatter;
@@ -261,8 +260,7 @@ function BarChartInner(props, ref) {
 		formatCategoryKey: formatLabel,
 		legendItems,
 		legendPlacement: ChartLegendPlacement.BOTTOM,
-		legendSwatch: ChartLegendSwatch.SQUARE,
-		tooltipSwatch: ChartLegendSwatch.SQUARE,
+		swatch,
 		children: [
 			geometry.bands.filter((band) => interaction.selectedCategoryIndices.has(band.groupIndex)).map((band) => /* @__PURE__ */ jsx("rect", {
 				x: band.x,

package/dist/charts/ChartFrame.d.ts

@@ -1,6 +1,5 @@
 import { type CSSProperties, type ForwardedRef, type ReactNode, type RefObject } from "react";
-import { type ChartLegendSwatch } from "./ChartLegend.js";
-import { type ChartCategoryTarget, ChartKind, type ChartLegendItem, ChartLegendPlacement, type ChartMarkTarget, type ChartPlotTooltipModel, type ChartTooltipRenderer } from "./types.js";
+import { type ChartCategoryTarget, ChartKind, type ChartLegendItem, ChartLegendPlacement, type ChartMarkTarget, type ChartPlotTooltipModel, type ChartSwatch, type ChartTooltipRenderer } from "./types.js";
 import type { ChartDimensions } from "./useChartDimensions.js";
 import type { ChartInteraction } from "./useChartInteraction.js";
 import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
@@ -70,10 +69,8 @@ export interface ChartFrameProps {
     legendItems: ChartLegendItem[];
     /** Legend placement. */
     legendPlacement: ChartLegendPlacement;
-    /** Legend swatch shape. */
-    legendSwatch: ChartLegendSwatch;
-    /** Tooltip row swatch shape. Defaults to `CIRCLE` (BarChart passes `SQUARE`). */
-    tooltipSwatch?: ChartLegendSwatch | undefined;
+    /** The `swatch` prop, resolved: legend entries and tooltip rows share it. */
+    swatch: ChartSwatch;
     /** A chart's own legend in place of the series legend (Heatmap's step legend). */
     legend?: ReactNode;
     /** Names a raw category key in the filter chip (the chart's `labelFormatter`). @default the key */
@@ -84,4 +81,4 @@ export interface ChartFrameProps {
     style?: CSSProperties | undefined;
 }
 /** @internal The chart shell. */
-export declare function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, formatCategoryKey, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, swatch, legend, formatCategoryKey, }: ChartFrameProps): import("react").JSX.Element;

package/dist/charts/ChartFrame.js

@@ -61,7 +61,7 @@ var Overlay = /*#__PURE__*/ styled("div")({
 /** A standalone `Skeleton RECT` that takes the whole plot box. */
 var LOADING_SKELETON_CSS = "gx-ChartFrame-LOADING_SKELETON_CSS-l1oi7u1q";
 /**
-* A chart's own legend (Heatmap's steps) with the filter chip after it. Both carry the legend's 8px
+* 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.
 */
 var CustomLegendBar = /*#__PURE__*/ styled("div")({
@@ -70,7 +70,7 @@ var CustomLegendBar = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 /**
-* The chips after a chart's own legend. Its height (the 8px top padding and a 20px chip) is kept
+* The chips after a chart's own legend. Its height (the 12px top padding and a 20px chip) is kept
 * while nothing is pinned, so the plot above never moves when a chip appears.
 */
 var CustomFilterSlot = /*#__PURE__*/ styled("div")({
@@ -109,7 +109,7 @@ var NAVIGATION_KEYS = new Set([
 	"End"
 ]);
 /** @internal The chart shell. */
-function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, formatCategoryKey }) {
+function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, swatch, legend, formatCategoryKey }) {
 	const { width, height, insets, isMeasured } = dimensions;
 	const [announcement, setAnnouncement] = useState("");
 	const { rootPassthrough, plotAria } = useMemo(() => {
@@ -247,7 +247,7 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 	const legendNode = !hasLegend || isSkeleton ? null : legend ?? /* @__PURE__ */ jsx(ChartLegend, {
 		items: legendItems,
 		placement: legendPlacement,
-		swatch: legendSwatch,
+		swatch,
 		inset: isSideLegend ? CHART_LEGEND_SIDE_GAP : insets.left,
 		extent: isSideLegend ? Math.max(0, height - (interaction.isFilterable ? CHART_LEGEND_FILTER_EXTENT : 0)) : 0,
 		isFixedExtent: !interaction.isFilterable,
@@ -321,7 +321,7 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + insets.left,
 					verticalAlign,
 					renderTooltip,
-					swatch: tooltipSwatch
+					swatch
 				}),
 				/* @__PURE__ */ jsx(LiveRegion, {
 					"aria-live": "polite",

package/dist/charts/ChartLegend.d.ts

@@ -1,12 +1,5 @@
 import { type ReactNode } from "react";
-import { type ChartLegendItem, ChartLegendPlacement, ChartMarkState } from "./types.js";
-/** @internal Swatch shape: a dot for line series, a square for filled series. */
-export declare enum ChartLegendSwatch {
-    /** `Circle SMALL`: line series. */
-    CIRCLE = "CIRCLE",
-    /** `Square SMALL`: area, bar, arc and heatmap series. */
-    SQUARE = "SQUARE"
-}
+import { type ChartLegendItem, ChartLegendPlacement, ChartMarkState, ChartSwatch } from "./types.js";
 /** @internal Props of `ChartLegend`. */
 export interface ChartLegendProps {
     /** Entries in series order. */
@@ -14,7 +7,7 @@ export interface ChartLegendProps {
     /** Line (BOTTOM) or column (RIGHT). */
     placement: ChartLegendPlacement;
     /** Swatch shape. */
-    swatch: ChartLegendSwatch;
+    swatch: ChartSwatch;
     /** BOTTOM: left padding that aligns the legend with the plot. */
     inset: number;
     /** RIGHT: the plot height the column fits into (0 = unconstrained). */

package/dist/charts/ChartLegend.js

@@ -3,7 +3,7 @@ import { Placement } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Flex, { AlignItems } from "../layout/Flex.js";
 import Tooltip from "../tooltip/Tooltip.js";
-import { ChartLegendPlacement, ChartMarkState, ChartPalette } from "./types.js";
+import { ChartLegendPlacement, ChartMarkState, ChartPalette, ChartSwatch } from "./types.js";
 import { CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
 import "./constants.js";
 import { isAdditiveEvent } from "./chartSelection.js";
@@ -32,14 +32,6 @@ import { cx } from "@linaria/core";
 * padding on each entry (trailing in a row, split above and below in a column so the column
 * centers), not a flex gap, so sweeping across entries never drops the isolation. Isolation changes opacity only; it never rescales the axis.
 */
-/** @internal Swatch shape: a dot for line series, a square for filled series. */
-var ChartLegendSwatch = /* @__PURE__ */ function(ChartLegendSwatch) {
-	/** `Circle SMALL`: line series. */
-	ChartLegendSwatch["CIRCLE"] = "CIRCLE";
-	/** `Square SMALL`: area, bar, arc and heatmap series. */
-	ChartLegendSwatch["SQUARE"] = "SQUARE";
-	return ChartLegendSwatch;
-}({});
 /**
 * A swatch takes its slot's mark color (`CHART_PALETTE_TO_COLOR_MAP`) through `currentColor`, so
 * the legend always matches the marks (the hue slots that stand in for the old neutrals included).
@@ -61,7 +53,7 @@ var List = /*#__PURE__*/ styled("ul")({
 	class: "gx-ChartLegend-List-l1lgbp5d",
 	propsAsIs: false
 });
-/** Legend placement → list layout. BOTTOM aligns the first entry with the plot's left edge. */
+/** Legend placement → list layout. BOTTOM sits 12px under the plot and aligns the first entry with its left edge. */
 var CHART_LEGEND_PLACEMENT_TO_LIST_CSS_MAP = {
 	[ChartLegendPlacement.BOTTOM]: "gx-ChartLegend-ChartLegendPlacement_BOTTOM-c681qv5",
 	[ChartLegendPlacement.RIGHT]: "gx-ChartLegend-ChartLegendPlacement_RIGHT-c1l24ron"
@@ -108,7 +100,7 @@ var OverflowList = /*#__PURE__*/ styled("ul")({
 function Swatch({ item, swatch }) {
 	return /* @__PURE__ */ jsx(SwatchColor, {
 		style: { "--gx-chart-mark-color": item.hex ?? CHART_PALETTE_TO_COLOR_MAP[item.palette ?? ChartPalette.TERTIARY] },
-		children: swatch === "CIRCLE" ? /* @__PURE__ */ jsx(Circle, {
+		children: swatch === ChartSwatch.CIRCLE ? /* @__PURE__ */ jsx(Circle, {
 			size: CircleSize.SMALL,
 			variant: CircleVariant.INHERIT
 		}) : /* @__PURE__ */ jsx(Square, {
@@ -281,4 +273,4 @@ function ChartLegend({ items, placement, swatch, inset, extent = 0, isFixedExten
 	})] });
 }
 //#endregion
-export { ChartLegend, ChartLegendSwatch };
+export { ChartLegend };

package/dist/charts/ChartTooltip.d.ts

@@ -1,5 +1,4 @@
-import { ChartLegendSwatch } from "./ChartLegend.js";
-import type { ChartTooltipModel, ChartTooltipRenderer } from "./types.js";
+import { ChartSwatch, type ChartTooltipModel, type ChartTooltipRenderer } from "./types.js";
 import { type ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 /** @internal Props of `ChartTooltip`. */
 export interface ChartTooltipProps {
@@ -18,7 +17,7 @@ export interface ChartTooltipProps {
     /** Replaces the body. */
     renderTooltip?: ChartTooltipRenderer | undefined;
     /** Row swatch shape, matching the chart's legend. Defaults to `CIRCLE`. */
-    swatch?: ChartLegendSwatch | undefined;
+    swatch?: ChartSwatch | undefined;
 }
 /** @internal The chart tooltip body and positioner. */
 export declare function ChartTooltip({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderTooltip, swatch, }: ChartTooltipProps): import("react").JSX.Element;

package/dist/charts/ChartTooltip.js

@@ -1,9 +1,9 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Flex, { AlignItems, FlexDirection } from "../layout/Flex.js";
+import { ChartSwatch } from "./types.js";
 import "./constants.js";
 import Circle, { CircleSize } from "../shapes/Circle.js";
 import Square, { SquareSize } from "../shapes/Square.js";
-import { ChartLegendSwatch } from "./ChartLegend.js";
 import Grid, { GridAlignItems } from "../layout/Grid.js";
 import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
 /* empty css                       */
@@ -32,7 +32,7 @@ function Row({ row, swatch }) {
 		alignItems: AlignItems.CENTER,
 		gap: 8,
 		minWidth: 0,
-		children: [swatch === ChartLegendSwatch.SQUARE ? /* @__PURE__ */ jsx(Square, {
+		children: [swatch === ChartSwatch.SQUARE ? /* @__PURE__ */ jsx(Square, {
 			size: SquareSize.SMALL,
 			hex: row.color
 		}) : /* @__PURE__ */ jsx(Circle, {
@@ -52,7 +52,7 @@ function Row({ row, swatch }) {
 	})] });
 }
 /** @internal The chart tooltip body and positioner. */
-function ChartTooltip({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderTooltip, swatch = ChartLegendSwatch.CIRCLE }) {
+function ChartTooltip({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderTooltip, swatch = ChartSwatch.CIRCLE }) {
 	const [retained, setRetained] = useState(model);
 	if (model !== null && model !== retained) setRetained(model);
 	const displayed = model ?? retained;

package/dist/charts/Heatmap.js

@@ -2,13 +2,12 @@ import { Orientation } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { t } from "../theme/tokens/t.js";
 import Flex, { AlignItems } from "../layout/Flex.js";
-import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartTargetShape } from "./types.js";
+import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartSwatch, ChartTargetShape } from "./types.js";
 import { CHART_MARK_STATE_TO_CSS_MAP, HEATMAP_CELL_CSS, HEATMAP_EMPTY_CELL_CSS } from "./ChartPrimitives.js";
 import { PLOT_INSET_BOTTOM, PLOT_INSET_RIGHT, PLOT_INSET_TOP } from "./constants.js";
 import { clamp } from "./chartScales.js";
 import { ChartCategoryAxis } from "./ChartAxis.js";
 import Square, { SquareSize, SquareVariant } from "../shapes/Square.js";
-import { ChartLegendSwatch } from "./ChartLegend.js";
 import { ChartFrame } from "./ChartFrame.js";
 import { formatChartValue } from "./chartFormat.js";
 import { useChartDimensions } from "./useChartDimensions.js";
@@ -99,7 +98,7 @@ function HeatmapLegend({ ramp, min, max, hasEmpty, inset }) {
 }
 /** A grid of cells colored by value along one hue's token ramp. */
 var Heatmap = forwardRef(function Heatmap(props, ref) {
-	const { cells, columns: explicitColumns, rows: explicitRows, color = ChartPalette.PURPLE, labelFormatter, valueDomain, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
+	const { cells, columns: explicitColumns, rows: explicitRows, color = ChartPalette.PURPLE, labelFormatter, valueDomain, valueFormatter, hasLegend = true, swatch = ChartSwatch.SQUARE, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const { formatValue, formatLabel } = useChartFormatters(valueFormatter, labelFormatter);
 	const { columns, rows } = useMemo(() => getHeatmapLabels(cells, explicitColumns, explicitRows), [
@@ -276,7 +275,7 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		hasLegend,
 		legendItems: [],
 		legendPlacement: ChartLegendPlacement.BOTTOM,
-		legendSwatch: ChartLegendSwatch.SQUARE,
+		swatch,
 		legend: isEmpty ? null : /* @__PURE__ */ jsx(HeatmapLegend, {
 			ramp,
 			min: formatValue(domain[0]),

package/dist/charts/LineChart.d.ts

@@ -47,7 +47,7 @@ export interface LineChartRootProps<TMetric extends string> extends LineChartOwn
     fill: LineChartFill;
     /** Stack the series in array order (AreaChart): top edges are running totals. */
     isStacked: boolean;
-    /** Which chart (default name and legend swatch). */
+    /** Which chart (default name and swatch). */
     kind: ChartKind;
 }
 /** @internal The generic signature of `LineChartRoot` (docgen reads an arrow function). */

package/dist/charts/LineChart.js

@@ -1,9 +1,8 @@
 import { Orientation } from "../theme/enums.js";
-import { ChartCurve, ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
+import { ChartCurve, ChartKind, ChartLegendPlacement, ChartSwatch, ChartTargetShape } from "./types.js";
 import { CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS, CHART_MARK_STATE_TO_CSS_MAP, CHART_POINT_CSS } from "./ChartPrimitives.js";
 import { LINE_POINT_RADIUS } from "./constants.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
-import { ChartLegendSwatch } from "./ChartLegend.js";
 import { ChartFrame } from "./ChartFrame.js";
 import { formatChartValue } from "./chartFormat.js";
 import { buildLineChartGeometry, getLineValueDomain, getStackedLineValueDomain, hasNoReadings } from "./lineChartGeometry.js";
@@ -41,7 +40,7 @@ var DEFAULT_PLACEHOLDER = "No data available";
 * components, no public mode prop (the `MenuRoot` precedent).
 */
 function LineChartRootInner(props, ref) {
-	const { series, lines, categories, curve = ChartCurve.SMOOTH, fill, isStacked, kind, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
+	const { series, lines, categories, curve = ChartCurve.SMOOTH, fill, isStacked, kind, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, swatch = kind === ChartKind.AREA ? ChartSwatch.SQUARE : ChartSwatch.CIRCLE, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -219,7 +218,7 @@ function LineChartRootInner(props, ref) {
 		formatCategoryKey: formatLabel,
 		legendItems,
 		legendPlacement: ChartLegendPlacement.BOTTOM,
-		legendSwatch: kind === ChartKind.AREA ? ChartLegendSwatch.SQUARE : ChartLegendSwatch.CIRCLE,
+		swatch,
 		children: [
 			!isEmpty && geometry.paths.map((path) => path.areaPath ? /* @__PURE__ */ jsx("path", {
 				d: path.areaPath,

package/dist/charts/PieChart.js

@@ -1,8 +1,7 @@
 import Text, { TextSize, TextWeight } from "../text/Text.js";
-import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
+import { ChartKind, ChartLegendPlacement, ChartSwatch, ChartTargetShape } from "./types.js";
 import { CHART_ARC_CSS, CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
 import { RADIAL_PLOT_INSET } from "./constants.js";
-import { ChartLegendSwatch } from "./ChartLegend.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { ChartFrame } from "./ChartFrame.js";
 import { formatNumber, formatPercent } from "../utils/format.js";
@@ -47,7 +46,7 @@ var CenterBox = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 function PieChartInner(props, ref) {
-	const { series, slices, isSolid = false, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel = DEFAULT_AGGREGATED_LABEL, children, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
+	const { series, slices, isSolid = false, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel = DEFAULT_AGGREGATED_LABEL, children, valueFormatter, hasLegend = true, swatch = ChartSwatch.SQUARE, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions(plotRef, PLOT_INSETS);
@@ -190,7 +189,7 @@ function PieChartInner(props, ref) {
 		hasLegend,
 		legendItems,
 		legendPlacement: ChartLegendPlacement.RIGHT,
-		legendSwatch: ChartLegendSwatch.SQUARE,
+		swatch,
 		children: /* @__PURE__ */ jsx("g", {
 			transform: centerTransform,
 			children: geometry.arcs.map((item, index) => /* @__PURE__ */ jsx("path", {