@galaxy-io/dls 2.9.0 → 2.10.1

package/dist/navigation/Tabs.js

@@ -17,7 +17,7 @@ import { CaretDownIcon } from "@phosphor-icons/react";
 * Switches between peer views of one place: Canvas / History / Settings of a pipeline, Overview /
 * Logs of a run. A row (or a column) of labelled tabs marks the selected one and either renders
 * the selected item's `panel` beside it or, when the items are links (`href` + a router `as`),
-* navigates. Each tab can show an icon and a count `Chip`. `UNDERLINE` is the page-level mode (a
+* navigates. Each tab can show a leading mark (a connector logo), an icon and a count `Chip`. `UNDERLINE` is the page-level mode (a
 * hairline with a `text.primary` indicator under the selected tab); `PILL` is a quieter second level (the
 * selected tab is a filled pill). Horizontal tabs that do not fit collapse into a "More" menu at
 * the end of the row, so the row never wraps or scrolls. `inset` pads the row (or column) from its
@@ -37,7 +37,7 @@ import { CaretDownIcon } from "@phosphor-icons/react";
 * SSR: every tab renders on the server (clipped while unmeasured); measurement and the
 * `ResizeObserver` start in an effect. Nothing touches `window` or `document` at module scope.
 */
-/** Mode (Constitution V-A local mode set: Tabs UNDERLINE / PILL; declared in scripts/lint-dls.ts MODE_SETS). */
+/** Mode (AGENTS.md "Variant": a declared mode set, Tabs UNDERLINE / PILL; listed in scripts/lint-dls.ts MODE_SETS). */
 var TabsVariant = /* @__PURE__ */ function(TabsVariant) {
 	/** Tabs on a hairline; the selected tab has a `text.primary` indicator on the edge facing the panel. The default. */
 	TabsVariant["UNDERLINE"] = "UNDERLINE";
@@ -97,30 +97,39 @@ var Tab = /*#__PURE__*/ styled("button")({
 	class: "gx-Tabs-Tab-t1ynoa32",
 	propsAsIs: false
 });
+/**
+* A tab's `leading` node, in the icon's slot and gap: centered on the tab, kept at its own size
+* (never stretched, squeezed or clipped), so only the label truncates.
+*/
+var LeadingSlot = /*#__PURE__*/ styled("span")({
+	name: "LeadingSlot",
+	class: "gx-Tabs-LeadingSlot-l1ecacuu",
+	propsAsIs: false
+});
 /** Controls after the tabs (or under the column). */
 var Actions = /*#__PURE__*/ styled("div")({
 	name: "Actions",
-	class: "gx-Tabs-Actions-a1ecacuu",
+	class: "gx-Tabs-Actions-a1hrazk9",
 	propsAsIs: false
 });
 /** The selected panel tab's content. */
 var Panel = /*#__PURE__*/ styled("div")({
 	name: "Panel",
-	class: "gx-Tabs-Panel-p1hrazk9",
+	class: "gx-Tabs-Panel-p1r67x9f",
 	propsAsIs: false
 });
 var TABS_ORIENTATION_TO_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1r67x9f",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o2dkvh9"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o2dkvh9",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-os6iug3"
 };
 /** Horizontal `fillWidth`: the row spans its parent and every tab takes an equal share. */
-var FILL_WIDTH_CSS = "gx-Tabs-FILL_WIDTH_CSS-fs6iug3";
+var FILL_WIDTH_CSS = "gx-Tabs-FILL_WIDTH_CSS-fvxftzj";
 /** Vertical `fillWidth`: a column with no panel beside it spans its parent, so the hairline sits on the parent's edge. */
-var VERTICAL_FILL_WIDTH_CSS = "gx-Tabs-VERTICAL_FILL_WIDTH_CSS-vvxftzj";
+var VERTICAL_FILL_WIDTH_CSS = "gx-Tabs-VERTICAL_FILL_WIDTH_CSS-vduyhd6";
 /** The bar's `inset` is padding on the bar itself, so the `UNDERLINE` hairline (drawn on the bar's edge) spans it. */
 var TABS_ORIENTATION_TO_BAR_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oduyhd6",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oux4b2d"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oux4b2d",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6lhzlg"
 };
 /**
 * The hairline on the edge facing the panel (`UNDERLINE` only). A horizontal row draws it as an
@@ -131,52 +140,54 @@ var TABS_ORIENTATION_TO_BAR_CSS_MAP = {
 */
 var TABS_VARIANT_TO_BAR_CSS_MAP = {
 	["UNDERLINE"]: {
-		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o6lhzlg",
-		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-otj50wv"
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-otj50wv",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1wa4rz3"
 	},
 	["PILL"]: {
-		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1wa4rz3",
-		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o19ax5w1"
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o19ax5w1",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6on29c"
 	}
 };
 var TABS_ORIENTATION_TO_LIST_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o6on29c",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1cleozi"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1cleozi",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-ofzxznm"
 };
 /** While unmeasured (server, first paint, after items change): every tab renders, clipped. */
-var MEASURING_CSS = "gx-Tabs-MEASURING_CSS-mfzxznm";
+var MEASURING_CSS = "gx-Tabs-MEASURING_CSS-m10e4gpz";
 /** The overflow trigger copy that is only measured. */
-var MEASURING_TRIGGER_CSS = "gx-Tabs-MEASURING_TRIGGER_CSS-m10e4gpz";
+var MEASURING_TRIGGER_CSS = "gx-Tabs-MEASURING_TRIGGER_CSS-m1k4ei2n";
 /**
 * Height, padding and icon-label gap per rung (custom properties on `Bar`). `--gx-tabs-row-height`
 * is the horizontal `UNDERLINE` row's minimum: the label centered with 8 / 12 / 12px above and
 * below it, the 2px indicator drawn over the bottom of that space.
 */
 var TABS_SIZE_TO_CSS_MAP = {
-	["SMALL"]: "gx-Tabs-SMALL-s1k4ei2n",
-	["MEDIUM"]: "gx-Tabs-MEDIUM-m1fu2ke2",
-	["LARGE"]: "gx-Tabs-LARGE-l1q90ijz"
+	["SMALL"]: "gx-Tabs-SMALL-s1fu2ke2",
+	["MEDIUM"]: "gx-Tabs-MEDIUM-m1q90ijz",
+	["LARGE"]: "gx-Tabs-LARGE-l1xzvabb"
 };
 /** Shape per mode (every tab and the overflow trigger). */
 var TABS_VARIANT_TO_TAB_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1xzvabb",
-	["PILL"]: "gx-Tabs-PILL-pxgth9d"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uxgth9d",
+	["PILL"]: "gx-Tabs-PILL-p15kodi3"
 };
 /** Hover and press on an enabled, unselected tab (and the overflow trigger). */
 var TABS_VARIANT_TO_INTERACTIVE_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u15kodi3",
-	["PILL"]: "gx-Tabs-PILL-phu3rsh"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uhu3rsh",
+	["PILL"]: "gx-Tabs-PILL-p1nmauec"
 };
 var TABS_VARIANT_TO_SELECTED_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1nmauec",
-	["PILL"]: "gx-Tabs-PILL-p14ug43i"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u14ug43i",
+	["PILL"]: "gx-Tabs-PILL-p1qvds3x"
 };
 /** The `UNDERLINE` indicator's edge: always the one facing the panel, over the bar hairline. */
 var TABS_ORIENTATION_TO_INDICATOR_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1qvds3x",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oa8x8b6"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oa8x8b6",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o2u7szj"
 };
-var TAB_DISABLED_CSS = "gx-Tabs-TAB_DISABLED_CSS-t2u7szj";
+var TAB_DISABLED_CSS = "gx-Tabs-TAB_DISABLED_CSS-t15gyusk";
+/** A disabled tab's `leading`: `color` dims an icon or text, not a logo's own fills, so it fades with the label. */
+var LEADING_DISABLED_CSS = "gx-Tabs-LEADING_DISABLED_CSS-l1semd88";
 /** Tab icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
 var TABS_SIZE_TO_ICON_PX_MAP = {
 	["SMALL"]: 12,
@@ -228,7 +239,11 @@ var OverflowTrigger = forwardRef(function OverflowTrigger({ size, variant, class
 OverflowTrigger.displayName = "TabsOverflowTrigger";
 /** The parts of `items` that change a tab's width, plus the rung and mode. */
 function measurementSignature(items, size, variant) {
-	return `${size}\u0001${variant}\u0001${items.map((item) => `${item.id}\u0000${item.label}\u0000${item.count ?? ""}\u0000${item.icon === void 0 ? 0 : 1}`).join("
")}`;
+	return `${size}\u0001${variant}\u0001${items.map((item) => `${item.id}\u0000${item.label}\u0000${item.count ?? ""}\u0000${item.icon === void 0 ? 0 : 1}\u0000${hasNode(item.leading) ? 1 : 0}`).join("
")}`;
+}
+/** A slot holds something (not `undefined`, `null` or `false`). */
+function hasNode(node) {
+	return node !== void 0 && node !== null && node !== false;
 }
 /** A CSS length in px, or 0. */
 function pxOf(value) {
@@ -284,7 +299,7 @@ function TabsImpl(props, ref) {
 	const [measurement, setMeasurement] = useState(null);
 	const [available, setAvailable] = useState(null);
 	const isMeasuring = isOverflowMode && (measurement === null || measurement.signature !== signature);
-	const hasActions = actions !== void 0 && actions !== null && actions !== false;
+	const hasActions = hasNode(actions);
 	/** The row's width for tabs and the trigger: the bar minus its `inset` padding, `actions` and its gap. */
 	const readAvailable = useCallback(() => {
 		const bar = barRef.current;
@@ -399,6 +414,10 @@ function TabsImpl(props, ref) {
 		const isSelected = index === selectedIndex;
 		const isItemDisabled = item.isDisabled === true;
 		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			hasNode(item.leading) && /* @__PURE__ */ jsx(LeadingSlot, {
+				className: cx(isItemDisabled && LEADING_DISABLED_CSS),
+				children: item.leading
+			}),
 			item.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
 				component: item.icon,
 				size: TABS_SIZE_TO_ICON_PX_MAP[size],
@@ -519,6 +538,7 @@ function TabsImpl(props, ref) {
 						} };
 						return /* @__PURE__ */ jsx(MenuItem, {
 							label: item.label,
+							...hasNode(item.leading) ? { leading: item.leading } : {},
 							...item.icon === void 0 ? {} : { icon: item.icon },
 							...trailing === void 0 ? {} : { trailing },
 							isDisabled: item.isDisabled === true,

package/dist/navigation/Topbar.js

@@ -12,6 +12,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * spacing and the left / right split; everything inside is composed from other components. It
 * does not stick, route or collapse. In an app frame it sits above the page's scrolling region.
 *
+* It belongs to the standalone-app frame (Topbar + a `SidebarNav` with a `header`, whose 48px rows
+* meet on one hairline). A Galaxy module uses `AppFrame` + `PageLayout` instead, whose 64px title
+* row carries the page; the two frames are never mixed.
+*
 * Outside `main`, `article`, `aside`, `nav` and `section` the `<header>` is the page's `banner`
 * landmark, so use one Topbar per page. New in 2.0 (from the rafa prototype).
 */

package/dist/shapes/Circle.d.ts

@@ -13,7 +13,7 @@ export declare enum CircleSize {
     /** 12px, beside `body_lg` (20px line). */
     X_LARGE = "X_LARGE"
 }
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 export declare enum CircleVariant {
     /** `text.primary`. */
     PRIMARY = "PRIMARY",

package/dist/shapes/Circle.js

@@ -1,3 +1,4 @@
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -34,7 +35,7 @@ var CircleSize = /* @__PURE__ */ function(CircleSize) {
 	CircleSize["X_LARGE"] = "X_LARGE";
 	return CircleSize;
 }({});
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 var CircleVariant = /* @__PURE__ */ function(CircleVariant) {
 	/** `text.primary`. */
 	CircleVariant["PRIMARY"] = "PRIMARY";
@@ -82,31 +83,14 @@ var CIRCLE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Circle-WARNING-w1wd9i5w",
 	["ERROR"]: "gx-Circle-ERROR-e4bqin2"
 };
-/** Categorical `color`: `mark.<family>`, the way a status variant renders. */
-var CIRCLE_COLOR_TO_CSS_MAP = {
-	success: "gx-Circle-success-sisghat",
-	warning: "gx-Circle-warning-wrnyxi5",
-	error: "gx-Circle-error-emlehi9",
-	red: "gx-Circle-red-rx4zu59",
-	orange: "gx-Circle-orange-omm7dfa",
-	amber: "gx-Circle-amber-a15qmdzt",
-	yellow: "gx-Circle-yellow-y1p4fg4l",
-	lime: "gx-Circle-lime-l6eszpj",
-	green: "gx-Circle-green-g1kmyxwu",
-	emerald: "gx-Circle-emerald-er4sdq5",
-	teal: "gx-Circle-teal-tw9vccf",
-	cyan: "gx-Circle-cyan-c1rmact7",
-	sky: "gx-Circle-sky-syv0gwd",
-	blue: "gx-Circle-blue-bdx6kbq",
-	indigo: "gx-Circle-indigo-i1j11685",
-	violet: "gx-Circle-violet-vgz62lk",
-	purple: "gx-Circle-purple-pe429ux",
-	fuchsia: "gx-Circle-fuchsia-f1h7hg24",
-	pink: "gx-Circle-pink-po1cc6l",
-	rose: "gx-Circle-rose-r1ljyczc"
-};
+/**
+* Categorical `color`: `mark.<family>`, 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 CIRCLE_COLOR_CSS = "gx-Circle-CIRCLE_COLOR_CSS-cisghat";
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Circle-HEX_CSS-h18iedp";
+var HEX_CSS = "gx-Circle-HEX_CSS-hrnyxi5";
 /** A filled dot beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
 var Circle = forwardRef(function Circle({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
 	const variables = {};
@@ -119,7 +103,7 @@ var Circle = forwardRef(function Circle({ size = "MEDIUM", variant = "TERTIARY",
 		...rest,
 		ref,
 		id,
-		className: cx(CIRCLE_SIZE_TO_CSS_MAP[size], color !== void 0 ? CIRCLE_COLOR_TO_CSS_MAP[color] : CIRCLE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		className: cx(CIRCLE_SIZE_TO_CSS_MAP[size], color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], CIRCLE_COLOR_CSS) : CIRCLE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/shapes/Square.d.ts

@@ -13,7 +13,7 @@ export declare enum SquareSize {
     /** 12px, beside `body_lg` (20px line). */
     X_LARGE = "X_LARGE"
 }
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 export declare enum SquareVariant {
     /** `text.primary`. */
     PRIMARY = "PRIMARY",

package/dist/shapes/Square.js

@@ -1,3 +1,4 @@
+import { ROLE_COLOR_TO_CSS_MAP } from "../styles/internal/roleColor.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -34,7 +35,7 @@ var SquareSize = /* @__PURE__ */ function(SquareSize) {
 	SquareSize["X_LARGE"] = "X_LARGE";
 	return SquareSize;
 }({});
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 var SquareVariant = /* @__PURE__ */ function(SquareVariant) {
 	/** `text.primary`. */
 	SquareVariant["PRIMARY"] = "PRIMARY";
@@ -83,31 +84,14 @@ var SQUARE_VARIANT_TO_CSS_MAP = {
 	["WARNING"]: "gx-Square-WARNING-w1jcu9g9",
 	["ERROR"]: "gx-Square-ERROR-e1a9qgv5"
 };
-/** Categorical `color`: `mark.<family>`, the way a status variant renders. */
-var SQUARE_COLOR_TO_CSS_MAP = {
-	success: "gx-Square-success-s44keg",
-	warning: "gx-Square-warning-w1czb11g",
-	error: "gx-Square-error-e11m2avz",
-	red: "gx-Square-red-r1dycb8",
-	orange: "gx-Square-orange-o13w32o7",
-	amber: "gx-Square-amber-aflvbdc",
-	yellow: "gx-Square-yellow-y1wrg0mj",
-	lime: "gx-Square-lime-lbmrs5y",
-	green: "gx-Square-green-g1229390",
-	emerald: "gx-Square-emerald-eylmgp4",
-	teal: "gx-Square-teal-tgnvnom",
-	cyan: "gx-Square-cyan-cqzrj1i",
-	sky: "gx-Square-sky-sx1evfg",
-	blue: "gx-Square-blue-b1bh3ofr",
-	indigo: "gx-Square-indigo-i15n3xo4",
-	violet: "gx-Square-violet-v1qvour9",
-	purple: "gx-Square-purple-p1g6v6vx",
-	fuchsia: "gx-Square-fuchsia-f1u3b7de",
-	pink: "gx-Square-pink-pdedn2c",
-	rose: "gx-Square-rose-rod6x1x"
-};
+/**
+* Categorical `color`: `mark.<family>`, 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 SQUARE_COLOR_CSS = "gx-Square-SQUARE_COLOR_CSS-s44keg";
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Square-HEX_CSS-h1ah0bbe";
+var HEX_CSS = "gx-Square-HEX_CSS-h1czb11g";
 /** A filled square mark beside a label; its color is a role (`variant`), a category (`color`) or data (`hex`). */
 var Square = forwardRef(function Square({ size = "MEDIUM", variant = "TERTIARY", color, hex, ariaLabel, id, className, style, ...rest }, ref) {
 	const variables = {};
@@ -120,7 +104,7 @@ var Square = forwardRef(function Square({ size = "MEDIUM", variant = "TERTIARY",
 		...rest,
 		ref,
 		id,
-		className: cx(SQUARE_SIZE_TO_CSS_MAP[size], color !== void 0 ? SQUARE_COLOR_TO_CSS_MAP[color] : SQUARE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
+		className: cx(SQUARE_SIZE_TO_CSS_MAP[size], color !== void 0 ? cx(ROLE_COLOR_TO_CSS_MAP[color], SQUARE_COLOR_CSS) : SQUARE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, className),
 		style: {
 			...variables,
 			...style

package/dist/styles/internal/roleColor.d.ts

@@ -0,0 +1,3 @@
+import type { RoleColor } from "../../theme/tokens/types.js";
+/** Sets the four `--gx-role-*` variables per status and palette family. */
+export declare const ROLE_COLOR_TO_CSS_MAP: Record<RoleColor, string>;

package/dist/styles/internal/roleColor.js

@@ -0,0 +1,42 @@
+/* empty css                    */
+//#region src/styles/internal/roleColor.ts
+/**
+* @internal One role-color source for every `color?: RoleColor` prop. Each block sets four custom
+* properties for one status or palette family, and a component reads the ones it needs:
+*
+* - `--gx-role-text`: `text.<c>` (labels and icons; icons keep `text`, never `mark`);
+* - `--gx-role-fill`: `background.<c>` (a quiet tinted surface);
+* - `--gx-role-border`: `border.<c>` (its hairline);
+* - `--gx-role-mark`: `mark.<c>` (a filled shape with no text on it).
+*
+* Why variables rather than one `Record<RoleColor>` of declarations per component: the twenty
+* families are written once, a component keys `ROLE_COLOR_TO_CSS_MAP[color]` and adds one block
+* that maps the variables onto its own properties, and `hex` and disabled states keep overriding
+* by declaration order exactly as before. Private on purpose (an `internal/` module: built, never a
+* package export).
+*/
+/** Sets the four `--gx-role-*` variables per status and palette family. */
+var ROLE_COLOR_TO_CSS_MAP = {
+	success: "gx-roleColor-success-s1c8ieft",
+	warning: "gx-roleColor-warning-w100nkh0",
+	error: "gx-roleColor-error-e1nhco0",
+	red: "gx-roleColor-red-r16os4ey",
+	orange: "gx-roleColor-orange-oyt3k76",
+	amber: "gx-roleColor-amber-ail1y4f",
+	yellow: "gx-roleColor-yellow-y1bp9ddu",
+	lime: "gx-roleColor-lime-lb02nu3",
+	green: "gx-roleColor-green-gyvr8v1",
+	emerald: "gx-roleColor-emerald-e16fojs1",
+	teal: "gx-roleColor-teal-t1ik3gps",
+	cyan: "gx-roleColor-cyan-c1tqfkft",
+	sky: "gx-roleColor-sky-s1q7825m",
+	blue: "gx-roleColor-blue-bxyqpwq",
+	indigo: "gx-roleColor-indigo-i1rsw8me",
+	violet: "gx-roleColor-violet-v1l5oydn",
+	purple: "gx-roleColor-purple-p1k8sszd",
+	fuchsia: "gx-roleColor-fuchsia-f149phwe",
+	pink: "gx-roleColor-pink-p1fg2myf",
+	rose: "gx-roleColor-rose-r1ur3f9e"
+};
+//#endregion
+export { ROLE_COLOR_TO_CSS_MAP };

package/dist/styles/mixins.js

@@ -2,7 +2,7 @@ import { t } from "../theme/tokens/t.js";
 /* empty css                 */
 //#region src/styles/mixins.ts
 /**
-* Shared style mixins (Constitution IV.6). Each export is a CSS-text fragment (a plain string,
+* Shared style mixins (AGENTS.md "Mixins"). Each export is a CSS-text fragment (a plain string,
 * evaluated at build time by wyw): interpolate it inside a `styled` or `css` template instead of
 * re-declaring the rules. Never compose a mixin with `cx(...)`; it is not a class name.
 *