@galaxy-io/dls 1.4.9 → 1.4.11

package/dist/accordion/Accordion.d.ts

@@ -1,29 +1,46 @@
 import React, { type PropsWithChildren } from "react";
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+/** Surface treatment of the accordion shell. */
 export declare enum AccordionVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
+/** Header density — drives header padding and text size. */
 export declare enum AccordionSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface AccordionProps {
+    /** @default AccordionVariant.PRIMARY */
     variant?: AccordionVariant;
+    /** @default AccordionSize.MEDIUM */
     size?: AccordionSize;
+    /** Phosphor icon *component* shown before the header. */
     icon?: PhosphorIcon;
+    /** Header text. Always visible; clicking it toggles the panel. */
     header: string;
+    /** Secondary line under the header. */
     subheader?: string;
+    /** Trailing content in the header — a count, a badge, a status. */
     metric?: React.ReactNode;
+    /** A number is px. */
     borderRadius?: number | string;
+    /** Inset for the body. @default "12px" */
     padding?: string | number;
+    /** Starting state in uncontrolled mode. Ignored once `isOpen` is passed. */
     isOpenInitial?: boolean;
-    /** Controlled mode: external open state */
+    /** Controlled open state. Pass it together with `onToggle`. */
     isOpen?: boolean;
-    /** Controlled mode: callback when toggle is clicked */
+    /** Called when the header is clicked. Required for controlled mode. */
     onToggle?: () => void;
 }
+/**
+ * A collapsible section with a persistent header.
+ *
+ * Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
+ * `isOpen` *and* `onToggle` together to drive it from outside instead.
+ */
 declare const Accordion: ({ children, variant, size, icon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
 export default Accordion;

package/dist/accordion/Accordion.js

@@ -13,12 +13,14 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 //#region src/accordion/Accordion.tsx
+/** Surface treatment of the accordion shell. */
 var AccordionVariant = /* @__PURE__ */ function(AccordionVariant) {
 	AccordionVariant["PRIMARY"] = "PRIMARY";
 	AccordionVariant["SECONDARY"] = "SECONDARY";
 	AccordionVariant["TERTIARY"] = "TERTIARY";
 	return AccordionVariant;
 }({});
+/** Header density — drives header padding and text size. */
 var AccordionSize = /* @__PURE__ */ function(AccordionSize) {
 	AccordionSize["SMALL"] = "SMALL";
 	AccordionSize["MEDIUM"] = "MEDIUM";
@@ -65,6 +67,12 @@ var AccordionContentInner = withTheme(/*#__PURE__*/ styled("div")({
 	class: "a1f5gwwu",
 	propsAsIs: false
 }));
+/**
+* A collapsible section with a persistent header.
+*
+* Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
+* `isOpen` *and* `onToggle` together to drive it from outside instead.
+*/
 var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
 	const [internalIsOpen, setInternalIsOpen] = useState(isOpenInitial);
 	const isControlled = controlledIsOpen !== void 0;

package/dist/avatar/Avatar.d.ts

@@ -1,9 +1,18 @@
 export interface AvatarProps {
+    /** Image URL. Falls back to the generated pattern when null or missing. */
     img?: string | null;
+    /** Render the shimmer placeholder instead. */
     isLoading?: boolean;
+    /** Square size in px. @default 16 */
     size?: number;
+    /** Override the generated pattern's color. */
     hex?: string;
+    /** Input to the generated pattern — same seed always yields the same avatar. */
     seed?: string;
 }
+/**
+ * A user or entity avatar. Falls back to a dot pattern derived from `seed` when
+ * there's no image, so the same user is always recognizable without one.
+ */
 declare const Avatar: ({ img, isLoading, size, hex, seed }: AvatarProps) => import("react").JSX.Element;
 export default Avatar;

package/dist/avatar/Avatar.js

@@ -51,6 +51,10 @@ var seededRandom = (seed) => {
 		return hash / 2147483647;
 	};
 };
+/**
+* A user or entity avatar. Falls back to a dot pattern derived from `seed` when
+* there's no image, so the same user is always recognizable without one.
+*/
 var Avatar = ({ img, isLoading, size = 16, hex, seed }) => {
 	const { theme } = useGalaxyTheme();
 	const [failedSrc, setFailedSrc] = useState(null);

package/dist/avatar/AvatarShimmer.d.ts

@@ -1,4 +1,5 @@
 export interface AvatarShimmerProps {
+    /** Square size in px. Match the `Avatar` it stands in for. @default 16 */
     size?: number;
 }
 export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
@@ -24,5 +25,6 @@ export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<imp
 } & {
     as?: React.ElementType;
 }>, {}>;
+/** Loading placeholder for an `Avatar`. `Avatar` renders it itself when `isLoading`. */
 declare const AvatarShimmer: ({ size }: AvatarShimmerProps) => import("react").JSX.Element;
 export default AvatarShimmer;

package/dist/avatar/AvatarShimmer.js

@@ -14,6 +14,7 @@ var StyledAvatarShimmer = withTheme(/*#__PURE__*/ styled("div")({
 		"s1o6ak6r-1": [_exp3(), "px"]
 	}
 }));
+/** Loading placeholder for an `Avatar`. `Avatar` renders it itself when `isLoading`. */
 var AvatarShimmer = ({ size }) => {
 	return /* @__PURE__ */ jsx(StyledAvatarShimmer, { $size: size });
 };

package/dist/backgrounds/CellGridBackground.d.ts

@@ -1,13 +1,24 @@
 import type { ReactNode } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface CellGridBackgroundProps {
+export interface CellGridBackgroundProps {
+    /** Side length of one cell in px. @default 24 */
     cellSize?: number;
+    /** Line width in px. @default 1 */
     strokeWidth?: number;
+    /** Grid line color. @default theme.color.border.primary */
     lineColor?: string;
+    /** Surface behind the grid. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Line opacity, 0–1. @default 0.5 */
     lineOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
     children?: ReactNode;
 }
+/**
+ * Ruled graph-paper surface. Centers its children; the pattern is an inline SVG
+ * data URI, so it costs no request. Unlike the dot and cross grids it has no
+ * `borderRadius` prop — wrap it if you need clipped corners.
+ */
 declare const CellGridBackground: ({ cellSize, strokeWidth, lineColor, backgroundColor, lineOpacity, fillContainer, children, }: CellGridBackgroundProps) => import("react").JSX.Element;
 export default CellGridBackground;

package/dist/backgrounds/CellGridBackground.js

@@ -25,6 +25,11 @@ var generateCellSvg = (cellSize, strokeWidth, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Ruled graph-paper surface. Centers its children; the pattern is an inline SVG
+* data URI, so it costs no request. Unlike the dot and cross grids it has no
+* `borderRadius` prop — wrap it if you need clipped corners.
+*/
 var CellGridBackground = ({ cellSize = 24, strokeWidth = 1, lineColor, backgroundColor, lineOpacity = .5, fillContainer = true, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledCellGridBackground, {

package/dist/backgrounds/CrossGridBackground.d.ts

@@ -1,14 +1,26 @@
 import type { PropsWithChildren } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface CrossGridBackgroundProps {
+export interface CrossGridBackgroundProps {
+    /** Arm length of each cross in px. @default 8 */
     crossSize?: number;
+    /** Grid pitch in px — the distance between cross centers. @default 24 */
     spacing?: number;
+    /** Stroke width of each arm in px. @default 1 */
     strokeWidth?: number;
+    /** Cross color. @default theme.color.border.primary */
     crossColor?: string;
+    /** Surface behind the crosses. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Cross opacity, 0–1. @default 0.5 */
     crossOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
+    /** A number is px. @default 0 */
     borderRadius?: string | number;
 }
+/**
+ * Grid surface marked with small crosses at each intersection. Centers its
+ * children; the pattern is an inline SVG data URI, so it costs no request.
+ */
 declare const CrossGridBackground: ({ crossSize, spacing, strokeWidth, crossColor, backgroundColor, crossOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<CrossGridBackgroundProps>) => import("react").JSX.Element;
 export default CrossGridBackground;

package/dist/backgrounds/CrossGridBackground.js

@@ -30,6 +30,10 @@ var generateCrossSvg = (crossSize, spacing, strokeWidth, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Grid surface marked with small crosses at each intersection. Centers its
+* children; the pattern is an inline SVG data URI, so it costs no request.
+*/
 var CrossGridBackground = ({ crossSize = 8, spacing = 24, strokeWidth = 1, crossColor, backgroundColor, crossOpacity = .5, fillContainer = true, borderRadius, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledCrossGridBackground, {

package/dist/backgrounds/DotGridBackground.d.ts

@@ -1,13 +1,24 @@
 import type { PropsWithChildren } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface DotGridBackgroundProps {
+export interface DotGridBackgroundProps {
+    /** Dot diameter in px. @default 3 */
     dotSize?: number;
+    /** Grid pitch in px — the distance between dot centers. @default 24 */
     spacing?: number;
+    /** Dot color. @default theme.color.border.primary */
     dotColor?: string;
+    /** Surface behind the dots. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Dot opacity, 0–1. @default 0.5 */
     dotOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
+    /** A number is px. @default 0 */
     borderRadius?: string | number;
 }
+/**
+ * Dotted grid surface. Centers its children and paints the pattern as an inline
+ * SVG data URI, so it costs no network request and scales with `spacing`.
+ */
 declare const DotGridBackground: ({ dotSize, spacing, dotColor, backgroundColor, dotOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<DotGridBackgroundProps>) => import("react").JSX.Element;
 export default DotGridBackground;

package/dist/backgrounds/DotGridBackground.js

@@ -28,6 +28,10 @@ var generateDotSvg = (size, dotSize, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Dotted grid surface. Centers its children and paints the pattern as an inline
+* SVG data URI, so it costs no network request and scales with `spacing`.
+*/
 var DotGridBackground = ({ dotSize = 3, spacing = 24, dotColor, backgroundColor, dotOpacity = .5, fillContainer = true, borderRadius, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledDotGridBackground, {

package/dist/badge/Badge.d.ts

@@ -1,3 +1,4 @@
+/** Badge color. Signals what the count *means* — errors, warnings, neutral totals. */
 export declare enum BadgeVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -14,17 +15,28 @@ export declare enum BadgeVariant {
     PURPLE = "PURPLE",
     TEAL = "TEAL"
 }
+/** Badge height. Match the control it annotates. */
 export declare enum BadgeSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface BadgeProps {
+    /** The number shown. A count of 0 renders nothing at all. */
     count: number;
+    /** @default BadgeVariant.PRIMARY */
     variant?: BadgeVariant;
+    /** @default BadgeSize.MEDIUM */
     size?: BadgeSize;
+    /** Counts above this show as "N+". @default 99 */
     max?: number;
+    /** Also flips the cursor to `pointer`. */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
+/**
+ * A numeric count pill — unread items, pending actions.
+ *
+ * Renders `null` when `count` is 0, so you don't need to guard it yourself.
+ */
 declare const Badge: ({ count, variant, size, max, onClick, }: BadgeProps) => import("react").JSX.Element | null;
 export default Badge;

package/dist/badge/Badge.js

@@ -5,6 +5,7 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx } from "react/jsx-runtime";
 //#region src/badge/Badge.tsx
+/** Badge color. Signals what the count *means* — errors, warnings, neutral totals. */
 var BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
 	BadgeVariant["PRIMARY"] = "PRIMARY";
 	BadgeVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -22,6 +23,7 @@ var BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
 	BadgeVariant["TEAL"] = "TEAL";
 	return BadgeVariant;
 }({});
+/** Badge height. Match the control it annotates. */
 var BadgeSize = /* @__PURE__ */ function(BadgeSize) {
 	BadgeSize["SMALL"] = "SMALL";
 	BadgeSize["MEDIUM"] = "MEDIUM";
@@ -73,6 +75,11 @@ var StyledBadge = withTheme(/*#__PURE__*/ styled("div")({
 		"s6s20zd-3": [_exp5()]
 	}
 }));
+/**
+* A numeric count pill — unread items, pending actions.
+*
+* Renders `null` when `count` is 0, so you don't need to guard it yourself.
+*/
 var Badge = ({ count, variant = "PRIMARY", size = "MEDIUM", max = 99, onClick }) => {
 	if (count === 0) return null;
 	const displayValue = count > max ? `${max}+` : count;

package/dist/beacons/Beacon.d.ts

@@ -1,8 +1,10 @@
+/** Dot diameter. */
 export declare enum BeaconSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/** Dot color — the status being signalled. Also colors the pulse ring. */
 export declare enum BeaconVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
@@ -21,23 +23,15 @@ export declare enum BeaconVariant {
     DISABLED = "DISABLED"
 }
 export interface BeaconProps {
-    /**
-     * The size of the Beacon.
-     */
+    /** @default BeaconSize.MEDIUM */
     size?: BeaconSize;
-    /**
-     * The color of the Beacon.
-     */
+    /** @default BeaconVariant.BASE */
     variant?: BeaconVariant;
-    /**
-     * The speed of the pulse animation in seconds.
-     * @default 2
-     */
+    /** Duration of one pulse cycle in seconds. @default 2 */
     speed?: number;
-    /**
-     * Whether to show the pulse animation.
-     */
+    /** Add an expanding ring around the dot. Off means a static dot. */
     isPulse?: boolean;
 }
+/** A status dot, optionally pulsing. Live connections, unread state, health. */
 declare const Beacon: ({ variant, size, speed, isPulse, }: BeaconProps) => import("react").JSX.Element;
 export default Beacon;

package/dist/beacons/Beacon.js

@@ -4,12 +4,14 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/beacons/Beacon.tsx
+/** Dot diameter. */
 var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
 	BeaconSize["SMALL"] = "SMALL";
 	BeaconSize["MEDIUM"] = "MEDIUM";
 	BeaconSize["LARGE"] = "LARGE";
 	return BeaconSize;
 }({});
+/** Dot color — the status being signalled. Also colors the pulse ring. */
 var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
 	BeaconVariant["BASE"] = "BASE";
 	BeaconVariant["PRIMARY"] = "PRIMARY";
@@ -57,6 +59,7 @@ var BeaconDot = withTheme(/*#__PURE__*/ styled("span")({
 	propsAsIs: false,
 	vars: { "bv9nmr4-0": [_exp5()] }
 }));
+/** A status dot, optionally pulsing. Live connections, unread state, health. */
 var Beacon = ({ variant = "BASE", size = "MEDIUM", speed, isPulse }) => /* @__PURE__ */ jsxs(BeaconWrapper, {
 	$size: size,
 	children: [isPulse && /* @__PURE__ */ jsx(BeaconPulse, {

package/dist/buttons/Button.d.ts

@@ -1,17 +1,26 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 export interface ButtonProps {
+    /** Button text. Omit for an icon-only button and set `ariaLabel` instead. */
     label?: string;
+    /** Phosphor icon *component* — pass `PlusIcon`, not `<PlusIcon />`. */
     icon?: PhosphorIcon;
+    /** @default ButtonVariant.PRIMARY */
     variant?: ButtonVariant;
+    /** @default ButtonSize.MEDIUM */
     size?: ButtonSize;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Blocks `onClick` and disables the button. Renders no spinner. */
     isLoading?: boolean;
     isDisabled?: boolean;
+    /** Render the icon after the label instead of before. */
     isIconTrailing?: boolean;
+    /** Use the icon's filled weight instead of bold. */
     isIconFilled?: boolean;
+    /** Truncate a long label with an ellipsis instead of growing the button. */
     isEllipsis?: boolean;
+    /** Stretch to the parent's width. */
     fillWidth?: boolean;
     cursor?: React.CSSProperties["cursor"];
     /** Accessible name — required when the button renders an icon with no label. */
@@ -20,6 +29,7 @@ export interface ButtonProps {
     ariaControls?: string;
     ariaHasPopup?: boolean;
 }
+/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
 export declare enum ButtonVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -28,10 +38,18 @@ export declare enum ButtonVariant {
     SUCCESS = "SUCCESS",
     ERROR = "ERROR"
 }
+/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
 export declare enum ButtonSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/**
+ * The standard action control. Renders a label, an icon, or both.
+ *
+ * `isLoading` and `isDisabled` behave identically at the DOM level — both set
+ * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
+ * a spinner; render your own indicator alongside if you need one.
+ */
 declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
 export default Button;

package/dist/buttons/Button.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
@@ -9,6 +9,7 @@ import { match } from "ts-pattern";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/buttons/Button.tsx
+/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["PRIMARY"] = "PRIMARY";
 	ButtonVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -18,6 +19,7 @@ var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["ERROR"] = "ERROR";
 	return ButtonVariant;
 }({});
+/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
 var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
 	ButtonSize["SMALL"] = "SMALL";
 	ButtonSize["MEDIUM"] = "MEDIUM";
@@ -98,6 +100,13 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 	["MEDIUM"]: 14,
 	["LARGE"]: 16
 };
+/**
+* The standard action control. Renders a label, an icon, or both.
+*
+* `isLoading` and `isDisabled` behave identically at the DOM level — both set
+* `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
+* a spinner; render your own indicator alongside if you need one.
+*/
 var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
 	const { activeTheme } = useGalaxyTheme();
 	const handleClick = useCallback((e) => {

package/dist/charts/BarChart.js

@@ -101,9 +101,11 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		colors
 	]);
 	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const categoryKeys = useMemo(() => groups.map((group) => group.label), [groups]);
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
+		categoryKeys,
 		disabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
@@ -160,7 +162,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			showGrid,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
-			labels: groups.map((group) => group.label),
+			labels: categoryKeys,
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,

package/dist/charts/ChartFrame.js

@@ -1,6 +1,6 @@
 import { ChartKind, ChartLegendPlacement } from "./types.js";
 import "./constants.js";
-import { ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import { ChartPlotBox, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
 import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
@@ -23,10 +23,11 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* same situation, which is the drift this removes.
 	*/
 	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
-	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
+	const tooltipModel = useMemo(() => noTooltip || !interaction.hasLocalHover || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
 		noTooltip,
 		buildCategoryTooltip,
-		interaction.activeIndex
+		interaction.activeIndex,
+		interaction.hasLocalHover
 	]);
 	/**
 	* Plot space → container space, applied once, here.
@@ -90,10 +91,7 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 						transform: `translate(${margin.left}, ${margin.top})`,
 						children: [
 							axes,
-							/* @__PURE__ */ jsx(ChartPlotGroup, {
-								"data-active": interaction.isEngaged ? "true" : "false",
-								children
-							}),
+							/* @__PURE__ */ jsx("g", { children }),
 							hasTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
 								transform: categoryTargetsTransform,
 								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {

package/dist/charts/ChartLegend.js

@@ -119,7 +119,6 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		$inset: inset,
 		$vertical: vertical,
 		$extent: verticalExtent,
-		"data-active": activeKey !== null ? "true" : "false",
 		children: [
 			/* @__PURE__ */ jsxs(ChartLegendMeasure, {
 				ref: measureRef,
@@ -142,10 +141,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 				isInteractive: true,
 				position: vertical ? TooltipPosition.RIGHT : TooltipPosition.TOP,
 				variant: TooltipVariant.TERTIARY,
-				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, {
-					"data-active": activeKey !== null ? "true" : "false",
-					children: overflowItems.map(renderItem)
-				}),
+				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, { children: overflowItems.map(renderItem) }),
 				children: /* @__PURE__ */ jsx(ChartLegendItemButton, {
 					type: "button",
 					"data-state": triggerState,

package/dist/charts/ChartPrimitives.d.ts

@@ -45,11 +45,6 @@ export declare const ChartPlotBox: import("@linaria/react").StyledComponent<impo
  * the plot rather than being clipped by the root SVG.
  */
 export declare const ChartSvg: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
-/**
- * Cancels the restore delay for every mark beneath it while a category is
- * engaged. See {@link markState}.
- */
-export declare const ChartPlotGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
 export declare const ChartBarPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartLinePath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
@@ -203,12 +198,6 @@ export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<impor
 }>, {}>;
 /**
  * Aligns the legend under the plot rather than the value-axis gutter.
- *
- * Also cancels the restore delay for its entries while the legend is dimming,
- * exactly as {@link ChartPlotGroup} does for the marks. The legend renders
- * *outside* the SVG, so the plot group's selector cannot reach it — without this
- * the marks dim instantly while their legend entries sit through the full
- * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
  */
 export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $inset: number;
@@ -232,9 +221,7 @@ export declare const ChartLegendMeasure: import("@linaria/react").StyledComponen
  * the body of an interactive tooltip.
  *
  * Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
- * gets a bounded popover rather than one taller than the plot. Carries its own
- * `data-active` delay-cancel rule: the tooltip content mounts outside
- * {@link ChartLegendRow}, where the row's selector cannot reach it.
+ * gets a bounded popover rather than one taller than the plot.
  */
 export declare const ChartLegendOverflowList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 /**