@galaxy-io/dls 2.9.0 → 2.10.1

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 };

package/dist/icons/Icon.d.ts

@@ -1,7 +1,7 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-import type { Hex } from "../theme/tokens/types.js";
-/** Color role of the icon (color set, Constitution V-A). Resolves to `color.text.*`. */
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
+/** Color role of the icon (AGENTS.md "Variant": color set). Resolves to `color.text.*`. */
 export declare enum IconVariant {
     /** `text.primary`. The default. */
     PRIMARY = "PRIMARY",
@@ -35,7 +35,8 @@ export declare enum IconWeight {
     /** Stroke over a 20% fill. */
     DUOTONE = "DUOTONE"
 }
-export interface IconProps extends AriaAttributes {
+/** Every Icon prop except the color axis (`variant` or `color`). */
+interface IconBaseProps extends AriaAttributes {
     /** Phosphor icon *component*: pass `PlusIcon`, not `<PlusIcon />`. */
     component: PhosphorIcon;
     /**
@@ -48,11 +49,6 @@ export interface IconProps extends AriaAttributes {
      * @default IconWeight.REGULAR
      */
     weight?: IconWeight;
-    /**
-     * Color role. `INHERIT` follows the parent's color (used inside Button).
-     * @default IconVariant.PRIMARY
-     */
-    variant?: IconVariant;
     /** Raw color override that bypasses `variant`. Discouraged: prefer a `variant`. */
     hex?: Hex;
     /** Accessible name. Set it when the icon carries meaning on its own; when absent the icon is `aria-hidden`. */
@@ -73,6 +69,38 @@ export interface IconProps extends AriaAttributes {
     /** Inline style on the `<svg>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
+/** An icon colored by meaning (`variant`), or the default `PRIMARY`. */
+interface IconVariantProps {
+    /**
+     * Color role. `INHERIT` follows the parent's color (used inside Button). Not with `color`.
+     * @default IconVariant.PRIMARY
+     */
+    variant?: IconVariant;
+    /**
+     * Categorical palette family (`"blue"`, `"yellow"`, …) or a status role as a string
+     * (`"success"`): the family's `text.<color>`. For a glyph that names a category the page
+     * already shows (a run status map, a source type); a status that is meaning takes `variant`.
+     * Not with `variant`.
+     */
+    color?: undefined;
+}
+/** An icon colored by category (`color`). */
+interface IconColorProps {
+    /**
+     * Color role. `INHERIT` follows the parent's color (used inside Button). Not with `color`.
+     * @default IconVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"yellow"`, …) or a status role as a string
+     * (`"success"`): the family's `text.<color>`. For a glyph that names a category the page
+     * already shows (a run status map, a source type); a status that is meaning takes `variant`.
+     * Not with `variant`.
+     */
+    color: RoleColor;
+}
+/** Icon props. An icon with both `variant` and `color` is a type error. */
+export type IconProps = IconBaseProps & (IconVariantProps | IconColorProps);
 /** Wraps a Phosphor icon so its color, weight and motion come from the DLS. Never render a Phosphor icon bare. */
 declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default Icon;