@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/charts/heatmapGeometry.js

@@ -13,6 +13,22 @@ import { CHART_PALETTE_TO_HUE_MAP } from "./chartPalette.js";
 */
 /** @internal Cell corner radius: `radius.sm`. */
 var HEATMAP_CELL_RADIUS = Number.parseFloat(RADIUS.sm);
+/**
+* @internal The placeholder grid a loading heatmap draws when it has no rows or columns yet: a
+* week of hours (7 × 24), the shape most Galaxy heatmaps take, so the frame holds its final
+* proportions and reads as a heatmap while data loads.
+*/
+var HEATMAP_LOADING_GRID = {
+	columns: 24,
+	rows: 7
+};
+/** @internal The loading grid's column and row keys: positional, never shown (no axes). */
+function heatmapLoadingAxes() {
+	return {
+		columns: Array.from({ length: HEATMAP_LOADING_GRID.columns }, (_, index) => `c${index}`),
+		rows: Array.from({ length: HEATMAP_LOADING_GRID.rows }, (_, index) => `r${index}`)
+	};
+}
 /** @internal Number of ramp steps. */
 var HEATMAP_STEP_COUNT = 5;
 /** @internal The aspect-ratio fallback is clamped to these, so cells stay near-square. */
@@ -152,4 +168,4 @@ function buildHeatmapGeometry({ cells, columns, rows, domain, plotWidth, plotHei
 	return geometry;
 }
 //#endregion
-export { HEATMAP_CELL_RADIUS, HEATMAP_MAX_ASPECT_RATIO, HEATMAP_MIN_ASPECT_RATIO, HEATMAP_STEP_COUNT, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels, getHeatmapStep };
+export { HEATMAP_CELL_RADIUS, HEATMAP_LOADING_GRID, HEATMAP_MAX_ASPECT_RATIO, HEATMAP_MIN_ASPECT_RATIO, HEATMAP_STEP_COUNT, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels, getHeatmapStep, heatmapLoadingAxes };

package/dist/chips/Chip.d.ts

@@ -15,8 +15,8 @@ export declare enum ChipSize {
     X_LARGE = "X_LARGE"
 }
 /**
- * Color role (Constitution V-A color set; meaning only): tints the fill, the text and the border
- * together. Categories take `color` instead.
+ * Color role (AGENTS.md "Variant": color set, meaning only): tints the fill, the text and the
+ * border together. Categories take `color` instead.
  */
 export declare enum ChipVariant {
     /** `background.primary` fill, `text.primary`. */

package/dist/chips/Chip.js

@@ -1,6 +1,7 @@
 import Skeleton, { SkeletonSize, SkeletonVariant } from "../feedback/Skeleton.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip from "../tooltip/Tooltip.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 /* empty css               */
@@ -45,8 +46,8 @@ var ChipSize = /* @__PURE__ */ function(ChipSize) {
 	return ChipSize;
 }({});
 /**
-* Color role (Constitution V-A color set; meaning only): tints the fill, the text and the border
-* together. Categories take `color` instead.
+* Color role (AGENTS.md "Variant": color set, meaning only): tints the fill, the text and the
+* border together. Categories take `color` instead.
 */
 var ChipVariant = /* @__PURE__ */ function(ChipVariant) {
 	/** `background.primary` fill, `text.primary`. */
@@ -150,36 +151,19 @@ var CHIP_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Chip-WARNING-wmla4eg",
 	["ERROR"]: "gx-Chip-ERROR-ey90mc4"
 };
-/** Categorical `color`: the family's text, fill and border, as a status variant renders. */
-var CHIP_COLOR_TO_CSS_MAP = {
-	success: "gx-Chip-success-s1buqu4j",
-	warning: "gx-Chip-warning-w1xofe8u",
-	error: "gx-Chip-error-elle9kf",
-	red: "gx-Chip-red-rvehr9v",
-	orange: "gx-Chip-orange-o6qjmz2",
-	amber: "gx-Chip-amber-atd4jog",
-	yellow: "gx-Chip-yellow-yvlk44e",
-	lime: "gx-Chip-lime-l1pq316v",
-	green: "gx-Chip-green-gm0lqld",
-	emerald: "gx-Chip-emerald-eyyt7c0",
-	teal: "gx-Chip-teal-t11ah2de",
-	cyan: "gx-Chip-cyan-czbiez9",
-	sky: "gx-Chip-sky-s9o9u3v",
-	blue: "gx-Chip-blue-b1ec95in",
-	indigo: "gx-Chip-indigo-iptfyqj",
-	violet: "gx-Chip-violet-v1fzme42",
-	purple: "gx-Chip-purple-piztats",
-	fuchsia: "gx-Chip-fuchsia-f1g78mhs",
-	pink: "gx-Chip-pink-p1t4qqih",
-	rose: "gx-Chip-rose-r1na9n10"
-};
+/**
+* Categorical `color`: the family's text, fill and border, as a status variant renders. Reads the
+* shared `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families
+* are written once (`styles/internal/roleColor`).
+*/
+var CHIP_COLOR_CSS = "gx-Chip-CHIP_COLOR_CSS-c1buqu4j";
 /** `hex`: declared after the variant and color maps so it wins over them. */
-var HEX_CSS = "gx-Chip-HEX_CSS-hy859dk";
-var HAS_BORDER_CSS = "gx-Chip-HAS_BORDER_CSS-htyaijm";
+var HEX_CSS = "gx-Chip-HEX_CSS-h1xofe8u";
+var HAS_BORDER_CSS = "gx-Chip-HAS_BORDER_CSS-hlle9kf";
 /** Declared after `HAS_BORDER_CSS`, so selection wins. */
-var SELECTED_CSS = "gx-Chip-SELECTED_CSS-s94m49k";
-var PILL_CSS = "gx-Chip-PILL_CSS-p10jj8uz";
-/** Label and count type step per rung (Constitution III-A.4). */
+var SELECTED_CSS = "gx-Chip-SELECTED_CSS-svehr9v";
+var PILL_CSS = "gx-Chip-PILL_CSS-p6qjmz2";
+/** Label and count type step per rung (AGENTS.md "Control rungs"). */
 var CHIP_SIZE_TO_TEXT_SIZE_MAP = {
 	["X_SMALL"]: TextSize.CAPTION,
 	["SMALL"]: TextSize.BODY_SM,
@@ -337,7 +321,7 @@ var Chip = forwardRef(function Chip({ label, icon, leading, hasDot = false, coun
 		...rootRest,
 		ref,
 		id,
-		className: cx(CHIP_SIZE_TO_CSS_MAP[size], hasColor ? CHIP_COLOR_TO_CSS_MAP[color] : CHIP_VARIANT_TO_CSS_MAP[shownVariant], hasHex && HEX_CSS, hasBorder && HAS_BORDER_CSS, isSelected === true && SELECTED_CSS, isPill && PILL_CSS, className),
+		className: cx(CHIP_SIZE_TO_CSS_MAP[size], hasColor ? cx(ROLE_COLOR_TO_CSS_MAP[color], CHIP_COLOR_CSS) : CHIP_VARIANT_TO_CSS_MAP[shownVariant], hasHex && HEX_CSS, hasBorder && HAS_BORDER_CSS, isSelected === true && SELECTED_CSS, isPill && PILL_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/drawer/Drawer.d.ts

@@ -3,7 +3,7 @@ import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 import { Side } from "../theme/enums.js";
 /**
  * Panel width (`LEFT` / `RIGHT`) or height (`TOP` / `BOTTOM`). Canonical rung names
- * (Constitution V); the values are lengths, not control heights.
+ * (AGENTS.md "Size"); the values are lengths, not control heights.
  */
 export declare enum DrawerSize {
     /** 400px wide / 240px tall. */
@@ -60,7 +60,7 @@ interface DrawerBaseProps extends AriaAttributes {
      * @default true
      */
     isDismissable?: boolean;
-    /** Controlled open state. When set, Drawer calls `onOpenChange` and lets the caller decide. */
+    /** Controlled open state. When set, Drawer calls `onOpenChange` and lets the caller decide. While it closes, the panel keeps the `children` and slots it had when `isOpen` turned false, so pass the open record as a prop with no hook to retain it. */
     isOpen?: boolean;
     /**
      * Initial open state while uncontrolled.

package/dist/drawer/Drawer.js

@@ -49,7 +49,7 @@ import { AnimatePresence, motion } from "framer-motion";
 */
 /**
 * Panel width (`LEFT` / `RIGHT`) or height (`TOP` / `BOTTOM`). Canonical rung names
-* (Constitution V); the values are lengths, not control heights.
+* (AGENTS.md "Size"); the values are lengths, not control heights.
 */
 var DrawerSize = /* @__PURE__ */ function(DrawerSize) {
 	/** 400px wide / 240px tall. */

package/dist/editor/CodeEditor.d.ts

@@ -15,7 +15,7 @@
  */
 import type { Extension } from "@codemirror/state";
 import { type AriaAttributes, type CSSProperties } from "react";
-/** Resting fill of the editor frame (Constitution V-A surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
+/** Resting fill of the editor frame (AGENTS.md "Variant": surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
 export declare enum CodeEditorVariant {
     /** `background.base`. */
     BASE = "BASE",

package/dist/editor/CodeEditor.js

@@ -15,7 +15,7 @@ import { tags } from "@lezer/highlight";
 import { createTheme } from "@uiw/codemirror-themes";
 import CodeMirror from "@uiw/react-codemirror";
 //#region src/editor/CodeEditor.tsx
-/** Resting fill of the editor frame (Constitution V-A surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
+/** Resting fill of the editor frame (AGENTS.md "Variant": surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
 var CodeEditorVariant = /* @__PURE__ */ function(CodeEditorVariant) {
 	/** `background.base`. */
 	CodeEditorVariant["BASE"] = "BASE";
@@ -259,6 +259,7 @@ function getEditorViewTheme() {
 			lineHeight: t.font.mono.height.body_lg,
 			letterSpacing: t.font.mono.spacing.body_md
 		},
+		".cm-scroller:focus": { outline: "none" },
 		".cm-content": { padding: `${t.space[8]} 0` },
 		".cm-line": { padding: `0 ${t.space[12]}` },
 		".cm-gutters": {

package/dist/feedback/Alert.d.ts

@@ -1,6 +1,7 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-/** Severity (Constitution V-A color set, subset; Alert is listed in that column). */
+import type { RoleColor } from "../theme/tokens/types.js";
+/** Severity (AGENTS.md "Variant": color set, subset). */
 export declare enum AlertVariant {
     /** Neutral note: `background.secondary` surface, `InfoIcon` in `text.secondary`. The default. */
     PRIMARY = "PRIMARY",
@@ -11,19 +12,15 @@ export declare enum AlertVariant {
     /** Broken, blocked: error surface, `WarningCircleIcon`, `role="alert"`. */
     ERROR = "ERROR"
 }
-export interface AlertProps extends AriaAttributes {
-    /**
-     * Severity: sets the surface tint, the border, the icon and the ARIA role.
-     * @default AlertVariant.PRIMARY
-     */
-    variant?: AlertVariant;
+/** Every Alert prop except the color axis (`variant` or `color`). */
+interface AlertBaseProps extends AriaAttributes {
     /** Short headline ("Schema drift detected"). Medium weight; above the body inline, before it in a banner. */
     header?: string;
     /** The message. Rendered in a `Text`, so inline `Span`, `Code` and `Link` inherit its size and color. */
     children?: ReactNode;
     /**
-     * Replaces the variant's default icon. Pass the component (`PlugsIcon`), not an element.
-     * @default the variant's icon
+     * Replaces the default icon. Pass the component (`PlugsIcon`), not an element.
+     * @default the variant's icon, or `InfoIcon` with `color`
      */
     icon?: PhosphorIcon;
     /** The way out: one `ButtonVariant.PRIMARY` button at `ButtonSize.SMALL`, any second action `TERTIARY`. A row under the body inline; trailing in a banner. */
@@ -44,6 +41,36 @@ export interface AlertProps extends AriaAttributes {
     /** Inline style on the root `<div>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
+/** An alert colored by severity (`variant`), or the default `PRIMARY`. */
+interface AlertVariantProps {
+    /**
+     * Severity: sets the surface tint, the border, the icon and the ARIA role. Not with `color`.
+     * @default AlertVariant.PRIMARY
+     */
+    variant?: AlertVariant;
+    /**
+     * Categorical palette family (`"yellow"`) or a status name used as data: the family's surface,
+     * hairline and icon color, `role="status"`, announced as a "Note". For a notice tied to a
+     * category the page already shows; never a generic "info" tone. Not with `variant`.
+     */
+    color?: undefined;
+}
+/** An alert colored by category (`color`). */
+interface AlertColorProps {
+    /**
+     * Severity: sets the surface tint, the border, the icon and the ARIA role. Not with `color`.
+     * @default AlertVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"yellow"`) or a status name used as data: the family's surface,
+     * hairline and icon color, `role="status"`, announced as a "Note". For a notice tied to a
+     * category the page already shows; never a generic "info" tone. Not with `variant`.
+     */
+    color: RoleColor;
+}
+/** Alert props. An alert with both `variant` and `color` is a type error. */
+export type AlertProps = AlertBaseProps & (AlertVariantProps | AlertColorProps);
 /** A tinted, bordered message with a severity icon, optional header, actions and dismiss. */
 declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Alert;

package/dist/feedback/Alert.js

@@ -1,4 +1,5 @@
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 /* empty css                */
@@ -21,11 +22,17 @@ import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon, XIcon } from
 * A live region announces content that arrives after it is in the DOM, so mount the Alert when
 * the condition becomes true rather than rendering it hidden and revealing it.
 *
+* `color` ties a notice to a category the page already shows (a schedule banner in the schedule's
+* yellow): the surface is `background.<color>` and `border.<color>` through the shared
+* `--gx-role-*` variables, the icon is `Icon color` (default `InfoIcon`), the role is `status` and
+* the icon's accessible name is "Note". It is not an "info" tone: neutral news stays `PRIMARY`.
+* `variant` and `color` are exclusive by type (the Chip union).
+*
 * Inline it is a rounded panel; `isBanner` makes it a full-width strip across the top of a page
 * or panel (square corners, bottom hairline only, one line). No motion of its own: wrap it in
 * `Fade` (or the app's own height animation) for an animated dismiss.
 */
-/** Severity (Constitution V-A color set, subset; Alert is listed in that column). */
+/** Severity (AGENTS.md "Variant": color set, subset). */
 var AlertVariant = /* @__PURE__ */ function(AlertVariant) {
 	/** Neutral note: `background.secondary` surface, `InfoIcon` in `text.secondary`. The default. */
 	AlertVariant["PRIMARY"] = "PRIMARY";
@@ -80,6 +87,8 @@ var ALERT_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Alert-WARNING-w6btz5r",
 	["ERROR"]: "gx-Alert-ERROR-e1rogvwo"
 };
+/** Categorical `color`: the family's surface and hairline, read from the shared role variables. */
+var COLOR_CSS = "gx-Alert-COLOR_CSS-cr7k6o5";
 /** Default glyph per severity. `ERROR` differs in shape from `WARNING`, so severity is never color-only. */
 var ALERT_VARIANT_TO_ICON_MAP = {
 	["PRIMARY"]: InfoIcon,
@@ -108,14 +117,17 @@ var ALERT_VARIANT_TO_SEVERITY_LABEL_MAP = {
 	["WARNING"]: "Warning",
 	["ERROR"]: "Error"
 };
+/** The icon's accessible name with `color`: a category is a note, never a severity. */
+var COLOR_SEVERITY_LABEL = "Note";
 /** Banner: square corners, bottom hairline only, centered one-line row. */
-var BANNER_CSS = "gx-Alert-BANNER_CSS-br7k6o5";
+var BANNER_CSS = "gx-Alert-BANNER_CSS-b11mdnwt";
 /** Banner: the header and body read as one line, wrapping when narrow. */
-var BANNER_CONTENT_CSS = "gx-Alert-BANNER_CONTENT_CSS-b11mdnwt";
+var BANNER_CONTENT_CSS = "gx-Alert-BANNER_CONTENT_CSS-by507ww";
 /** Banner: the actions trail and never shrink. */
-var BANNER_ACTIONS_CSS = "gx-Alert-BANNER_ACTIONS_CSS-by507ww";
+var BANNER_ACTIONS_CSS = "gx-Alert-BANNER_ACTIONS_CSS-b1imlr6o";
 /** A tinted, bordered message with a severity icon, optional header, actions and dismiss. */
-var Alert = forwardRef(function Alert({ variant = "PRIMARY", header, children, icon, actions, onDismiss, isBanner = false, id, className, style, ...rest }, ref) {
+var Alert = forwardRef(function Alert({ variant = "PRIMARY", color, header, children, icon, actions, onDismiss, isBanner = false, id, className, style, ...rest }, ref) {
+	const hasColor = color !== void 0;
 	const hasHeader = header !== void 0 && header !== "";
 	const hasBody = children !== void 0 && children !== null && children !== false;
 	const actionsRow = actions !== void 0 && actions !== null && actions !== false && /* @__PURE__ */ jsx(Actions, {
@@ -123,14 +135,20 @@ var Alert = forwardRef(function Alert({ variant = "PRIMARY", header, children, i
 		children: actions
 	});
 	return /* @__PURE__ */ jsxs(Root, {
-		role: ALERT_VARIANT_TO_ROLE_MAP[variant],
+		role: hasColor ? "status" : ALERT_VARIANT_TO_ROLE_MAP[variant],
 		...rest,
 		ref,
 		id,
-		className: cx(ALERT_VARIANT_TO_CSS_MAP[variant], isBanner && BANNER_CSS, className),
+		className: cx(hasColor ? cx(ROLE_COLOR_TO_CSS_MAP[color], COLOR_CSS) : ALERT_VARIANT_TO_CSS_MAP[variant], isBanner && BANNER_CSS, className),
 		style,
 		children: [
-			/* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(Icon, {
+			/* @__PURE__ */ jsx(IconSlot, { children: hasColor ? /* @__PURE__ */ jsx(Icon, {
+				component: icon ?? InfoIcon,
+				size: 16,
+				weight: IconWeight.FILL,
+				color,
+				ariaLabel: COLOR_SEVERITY_LABEL
+			}) : /* @__PURE__ */ jsx(Icon, {
 				component: icon ?? ALERT_VARIANT_TO_ICON_MAP[variant],
 				size: 16,
 				weight: IconWeight.FILL,

package/dist/feedback/ProgressBar.d.ts

@@ -13,7 +13,10 @@ export declare enum ProgressBarSize {
     /** 8px track, body_lg label. */
     X_LARGE = "X_LARGE"
 }
-/** Fill color (Constitution V-A color set, subset; the same members as `ProgressCircleVariant`). */
+/**
+ * Fill color (AGENTS.md "Variant": color set, subset; the same members as
+ * `ProgressCircleVariant`).
+ */
 export declare enum ProgressBarVariant {
     /** `text.primary`. The default. */
     PRIMARY = "PRIMARY",

package/dist/feedback/ProgressBar.js

@@ -1,4 +1,5 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import { formatPercent } from "../utils/format.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
@@ -34,7 +35,10 @@ var ProgressBarSize = /* @__PURE__ */ function(ProgressBarSize) {
 	ProgressBarSize["X_LARGE"] = "X_LARGE";
 	return ProgressBarSize;
 }({});
-/** Fill color (Constitution V-A color set, subset; the same members as `ProgressCircleVariant`). */
+/**
+* Fill color (AGENTS.md "Variant": color set, subset; the same members as
+* `ProgressCircleVariant`).
+*/
 var ProgressBarVariant = /* @__PURE__ */ function(ProgressBarVariant) {
 	/** `text.primary`. The default. */
 	ProgressBarVariant["PRIMARY"] = "PRIMARY";
@@ -95,36 +99,19 @@ var PROGRESS_BAR_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-ProgressBar-WARNING-w1w2olvo",
 	["ERROR"]: "gx-ProgressBar-ERROR-e1qre8wf"
 };
-/** Categorical `color`: `mark.<family>` on the root, the way a status variant renders. */
-var PROGRESS_BAR_COLOR_TO_CSS_MAP = {
-	success: "gx-ProgressBar-success-seiy0oi",
-	warning: "gx-ProgressBar-warning-w1epzlep",
-	error: "gx-ProgressBar-error-easg8k0",
-	red: "gx-ProgressBar-red-r1kkinrj",
-	orange: "gx-ProgressBar-orange-ocvje08",
-	amber: "gx-ProgressBar-amber-ab5j54q",
-	yellow: "gx-ProgressBar-yellow-ylbvi15",
-	lime: "gx-ProgressBar-lime-lwaqggx",
-	green: "gx-ProgressBar-green-g6fb74o",
-	emerald: "gx-ProgressBar-emerald-e13m8tjk",
-	teal: "gx-ProgressBar-teal-t195062s",
-	cyan: "gx-ProgressBar-cyan-c1tjg1hb",
-	sky: "gx-ProgressBar-sky-s1hc7niq",
-	blue: "gx-ProgressBar-blue-b31v6jj",
-	indigo: "gx-ProgressBar-indigo-i1idth2y",
-	violet: "gx-ProgressBar-violet-vsz64tr",
-	purple: "gx-ProgressBar-purple-p121jrhu",
-	fuchsia: "gx-ProgressBar-fuchsia-foqk5ch",
-	pink: "gx-ProgressBar-pink-p1luqk3n",
-	rose: "gx-ProgressBar-rose-r1hbdj3k"
-};
+/**
+* Categorical `color`: `mark.<family>` on the root, the way a status variant renders. Reads the
+* shared `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families
+* are written once (`styles/internal/roleColor`).
+*/
+var PROGRESS_BAR_COLOR_CSS = "gx-ProgressBar-PROGRESS_BAR_COLOR_CSS-peiy0oi";
 /** Track thickness and the gap between the label line and the track. */
 var PROGRESS_BAR_SIZE_TO_CSS_MAP = {
-	["X_SMALL"]: "gx-ProgressBar-X_SMALL-x17skgql",
-	["SMALL"]: "gx-ProgressBar-SMALL-s1i0eise",
-	["MEDIUM"]: "gx-ProgressBar-MEDIUM-mnhve48",
-	["LARGE"]: "gx-ProgressBar-LARGE-l1p1szbl",
-	["X_LARGE"]: "gx-ProgressBar-X_LARGE-xu0asu0"
+	["X_SMALL"]: "gx-ProgressBar-X_SMALL-x1epzlep",
+	["SMALL"]: "gx-ProgressBar-SMALL-sasg8k0",
+	["MEDIUM"]: "gx-ProgressBar-MEDIUM-m1kkinrj",
+	["LARGE"]: "gx-ProgressBar-LARGE-lcvje08",
+	["X_LARGE"]: "gx-ProgressBar-X_LARGE-xb5j54q"
 };
 /** The label and value are the rung's text step (the ProgressCircle table). */
 var PROGRESS_BAR_SIZE_TO_TEXT_SIZE_MAP = {
@@ -158,7 +145,7 @@ var ProgressBar = forwardRef(function ProgressBar({ value, isIndeterminate = fal
 		"aria-valuetext": isIndeterminate ? void 0 : rest["aria-valuetext"] ?? percentText,
 		"aria-label": hasLabel ? rest["aria-label"] : ariaLabel ?? rest["aria-label"],
 		"aria-labelledby": hasLabel ? labelId : rest["aria-labelledby"],
-		className: cx(color !== void 0 ? PROGRESS_BAR_COLOR_TO_CSS_MAP[color] : PROGRESS_BAR_VARIANT_TO_CSS_MAP[variant], PROGRESS_BAR_SIZE_TO_CSS_MAP[size], className),
+		className: cx(color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], PROGRESS_BAR_COLOR_CSS) : PROGRESS_BAR_VARIANT_TO_CSS_MAP[variant], PROGRESS_BAR_SIZE_TO_CSS_MAP[size], className),
 		style: {
 			...variables,
 			...style

package/dist/feedback/ProgressCircle.d.ts

@@ -13,7 +13,7 @@ export declare enum ProgressCircleSize {
     /** 40px rung: 16px ring, body_lg label. */
     X_LARGE = "X_LARGE"
 }
-/** Arc color (Constitution V-A color set, subset; the same members as `ProgressBarVariant`). */
+/** Arc color (AGENTS.md "Variant": color set, subset; the same members as `ProgressBarVariant`). */
 export declare enum ProgressCircleVariant {
     /** `text.primary`. The default. */
     PRIMARY = "PRIMARY",

package/dist/feedback/ProgressCircle.js

@@ -1,4 +1,5 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 import { formatPercent } from "../utils/format.js";
 /* empty css                         */
 import { styled } from "@linaria/react";
@@ -34,7 +35,7 @@ var ProgressCircleSize = /* @__PURE__ */ function(ProgressCircleSize) {
 	ProgressCircleSize["X_LARGE"] = "X_LARGE";
 	return ProgressCircleSize;
 }({});
-/** Arc color (Constitution V-A color set, subset; the same members as `ProgressBarVariant`). */
+/** Arc color (AGENTS.md "Variant": color set, subset; the same members as `ProgressBarVariant`). */
 var ProgressCircleVariant = /* @__PURE__ */ function(ProgressCircleVariant) {
 	/** `text.primary`. The default. */
 	ProgressCircleVariant["PRIMARY"] = "PRIMARY";
@@ -82,36 +83,19 @@ var PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-ProgressCircle-WARNING-w1ii09vl",
 	["ERROR"]: "gx-ProgressCircle-ERROR-e149xl4a"
 };
-/** Categorical `color`: `mark.<family>` on the root, the way a status variant renders. */
-var PROGRESS_CIRCLE_COLOR_TO_CSS_MAP = {
-	success: "gx-ProgressCircle-success-s5wr4fy",
-	warning: "gx-ProgressCircle-warning-w3cpdk8",
-	error: "gx-ProgressCircle-error-e3bcytf",
-	red: "gx-ProgressCircle-red-r1b1indu",
-	orange: "gx-ProgressCircle-orange-os32e8h",
-	amber: "gx-ProgressCircle-amber-a1z891t",
-	yellow: "gx-ProgressCircle-yellow-y169l71b",
-	lime: "gx-ProgressCircle-lime-l7wy6jh",
-	green: "gx-ProgressCircle-green-gid9v1r",
-	emerald: "gx-ProgressCircle-emerald-ephjv2k",
-	teal: "gx-ProgressCircle-teal-t14y8mwv",
-	cyan: "gx-ProgressCircle-cyan-c1gpmklw",
-	sky: "gx-ProgressCircle-sky-s15o8mw",
-	blue: "gx-ProgressCircle-blue-b865hhm",
-	indigo: "gx-ProgressCircle-indigo-i1lkh9dd",
-	violet: "gx-ProgressCircle-violet-v4a8qsx",
-	purple: "gx-ProgressCircle-purple-pzljd4b",
-	fuchsia: "gx-ProgressCircle-fuchsia-foz9zwb",
-	pink: "gx-ProgressCircle-pink-pi0gudm",
-	rose: "gx-ProgressCircle-rose-r1tg3t7s"
-};
+/**
+* Categorical `color`: `mark.<family>` on the root, the way a status variant renders. Reads the
+* shared `--gx-role-*` variables `ROLE_COLOR_TO_CSS_MAP` sets per family, so the twenty families
+* are written once (`styles/internal/roleColor`).
+*/
+var PROGRESS_CIRCLE_COLOR_CSS = "gx-ProgressCircle-PROGRESS_CIRCLE_COLOR_CSS-p5wr4fy";
 /** Ring box, root height (the rung's text line height) and gap: the Spinner table. */
 var PROGRESS_CIRCLE_SIZE_TO_CSS_MAP = {
-	["X_SMALL"]: "gx-ProgressCircle-X_SMALL-x1tizbqg",
-	["SMALL"]: "gx-ProgressCircle-SMALL-suuqsnf",
-	["MEDIUM"]: "gx-ProgressCircle-MEDIUM-mrsjl86",
-	["LARGE"]: "gx-ProgressCircle-LARGE-lzwqtuj",
-	["X_LARGE"]: "gx-ProgressCircle-X_LARGE-x1omzhlm"
+	["X_SMALL"]: "gx-ProgressCircle-X_SMALL-x3cpdk8",
+	["SMALL"]: "gx-ProgressCircle-SMALL-s3bcytf",
+	["MEDIUM"]: "gx-ProgressCircle-MEDIUM-m1b1indu",
+	["LARGE"]: "gx-ProgressCircle-LARGE-ls32e8h",
+	["X_LARGE"]: "gx-ProgressCircle-X_LARGE-x1z891t"
 };
 /** The label and value are the rung's text step (the ProgressBar table). */
 var PROGRESS_CIRCLE_SIZE_TO_TEXT_SIZE_MAP = {
@@ -144,7 +128,7 @@ var ProgressCircle = forwardRef(function ProgressCircle({ value, shouldShowValue
 		"aria-valuetext": rest["aria-valuetext"] ?? percentText,
 		"aria-label": hasLabel ? rest["aria-label"] : ariaLabel ?? rest["aria-label"],
 		"aria-labelledby": hasLabel ? labelId : rest["aria-labelledby"],
-		className: cx(color !== void 0 ? PROGRESS_CIRCLE_COLOR_TO_CSS_MAP[color] : PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP[variant], PROGRESS_CIRCLE_SIZE_TO_CSS_MAP[size], className),
+		className: cx(color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], PROGRESS_CIRCLE_COLOR_CSS) : PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP[variant], PROGRESS_CIRCLE_SIZE_TO_CSS_MAP[size], className),
 		style: {
 			...variables,
 			...style

package/dist/hooks/useEndReached.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Calls `onEndReached` when the end of a growing list comes within reach, for infinite scrolling.
+ * The caller renders a zero-size sentinel after its last item and attaches the returned ref; the
+ * hook observes it with an `IntersectionObserver` whose bottom margin is `marginPx`.
+ *
+ * The sentinel is zero-height on purpose: a 1px sentinel inside a scroll container makes it
+ * overflow by a pixel, which traps the wheel at the end of the list (AGENTS.md "Scrolling is the
+ * browser's"). Render it as `<div ref={ref} />` with no size of its own.
+ *
+ * The root is `scrollRef` when that element overflows, otherwise the viewport, so a list in an
+ * unbounded parent pages on page scroll. It is armed only while `isEnabled` (pause it while a page
+ * loads or after an error), re-armed when `itemCount` changes, and calls `onEndReached` at most
+ * once per `itemCount`: a list with no next page adds no items, so it is not called again. Without
+ * `IntersectionObserver` it falls back to a passive `scroll` listener. Nothing runs at module scope.
+ *
+ * The tables (InfiniteTable, VirtualizedInfiniteTable, InfiniteSpreadsheet) page through it; use it
+ * for an app list that is not a table.
+ */
+import { type RefObject } from "react";
+/** Options for `useEndReached`. */
+export interface UseEndReachedOptions {
+    /** Called when the end comes within reach; `undefined` observes nothing (no next page to load). */
+    onEndReached: (() => void) | undefined;
+    /** `false` while a page loads or after an error: paging pauses until it is `true` again. */
+    isEnabled: boolean;
+    /** Items loaded so far. A change re-arms the observer; the callback fires at most once per count. */
+    itemCount: number;
+    /**
+     * The list's own scroll container. Omitted (or not overflowing), the viewport is the root.
+     * @default the viewport
+     */
+    scrollRef?: RefObject<HTMLElement | null>;
+    /**
+     * How far below the visible area the end counts as reached, in px.
+     * @default 500
+     */
+    marginPx?: number;
+}
+/** Observes a zero-size sentinel after the last item and calls `onEndReached`; returns the sentinel's ref. */
+export declare function useEndReached<TElement extends Element = HTMLDivElement>({ onEndReached, isEnabled, itemCount, scrollRef, marginPx, }: UseEndReachedOptions): RefObject<TElement | null>;

package/dist/hooks/useEndReached.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react";
+//#region src/hooks/useEndReached.ts
+/**
+* Calls `onEndReached` when the end of a growing list comes within reach, for infinite scrolling.
+* The caller renders a zero-size sentinel after its last item and attaches the returned ref; the
+* hook observes it with an `IntersectionObserver` whose bottom margin is `marginPx`.
+*
+* The sentinel is zero-height on purpose: a 1px sentinel inside a scroll container makes it
+* overflow by a pixel, which traps the wheel at the end of the list (AGENTS.md "Scrolling is the
+* browser's"). Render it as `<div ref={ref} />` with no size of its own.
+*
+* The root is `scrollRef` when that element overflows, otherwise the viewport, so a list in an
+* unbounded parent pages on page scroll. It is armed only while `isEnabled` (pause it while a page
+* loads or after an error), re-armed when `itemCount` changes, and calls `onEndReached` at most
+* once per `itemCount`: a list with no next page adds no items, so it is not called again. Without
+* `IntersectionObserver` it falls back to a passive `scroll` listener. Nothing runs at module scope.
+*
+* The tables (InfiniteTable, VirtualizedInfiniteTable, InfiniteSpreadsheet) page through it; use it
+* for an app list that is not a table.
+*/
+/** How far below the visible area the end counts as reached by default: the tables' 500px. */
+var DEFAULT_MARGIN_PX = 500;
+/** Observes a zero-size sentinel after the last item and calls `onEndReached`; returns the sentinel's ref. */
+function useEndReached({ onEndReached, isEnabled, itemCount, scrollRef, marginPx = DEFAULT_MARGIN_PX }) {
+	const sentinelRef = useRef(null);
+	const onEndReachedRef = useRef(onEndReached);
+	onEndReachedRef.current = onEndReached;
+	const calledForCountRef = useRef(null);
+	const hasHandler = onEndReached !== void 0;
+	useEffect(() => {
+		const scroll = scrollRef?.current ?? null;
+		const sentinel = sentinelRef.current;
+		if (!hasHandler || !isEnabled || sentinel === null) return;
+		if (calledForCountRef.current === itemCount) return;
+		const reach = () => {
+			if (calledForCountRef.current === itemCount) return;
+			calledForCountRef.current = itemCount;
+			onEndReachedRef.current?.();
+		};
+		const scrollRoot = scroll !== null && scroll.scrollHeight > scroll.clientHeight ? scroll : null;
+		if (typeof IntersectionObserver === "undefined") {
+			const target = scrollRoot ?? window;
+			const check = () => {
+				const bottom = scrollRoot?.getBoundingClientRect().bottom ?? window.innerHeight;
+				if (sentinel.getBoundingClientRect().top - bottom < marginPx) reach();
+			};
+			check();
+			target.addEventListener("scroll", check, { passive: true });
+			return () => target.removeEventListener("scroll", check);
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) reach();
+		}, {
+			root: scrollRoot,
+			rootMargin: `0px 0px ${marginPx}px 0px`
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		scrollRef,
+		hasHandler,
+		isEnabled,
+		itemCount,
+		marginPx
+	]);
+	return sentinelRef;
+}
+//#endregion
+export { useEndReached };