@galaxy-io/dls 2.4.1 → 2.5.0

package/dist/beacons/Beacon.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type CSSProperties } from "react";
-import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 /** Canonical rungs; the member names the rung of the text the dot sits beside (or the label's step). */
 export declare enum BeaconSize {
     /** 4px, beside `caption` (12px line); a label is `caption` with a 4px gap. */
@@ -85,12 +85,12 @@ interface BeaconColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the dot and ring take
-     * `solid.<family>.background` and the label `text.<family>`, the way a status variant renders.
-     * For categories; meanings take `variant`.
-     * Not with `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the dot and ring take `solid.<name>.background` and the label
+     * `text.<name>`, the way a status variant renders. For categories and data-driven marks; a status
+     * that is meaning takes `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** Beacon props. Passing both `variant` and `color` is a type error. */
 export type BeaconProps = BeaconBaseProps & (BeaconVariantProps | BeaconColorProps);

package/dist/beacons/Beacon.js

@@ -125,33 +125,36 @@ var BEACON_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: the label `text.<family>`, the dot `solid.<family>.background`, the way a status variant renders. */
 var BEACON_COLOR_TO_CSS_MAP = {
-	red: "gx-Beacon-red-r1nxs4in",
-	orange: "gx-Beacon-orange-o1dc3rbq",
-	amber: "gx-Beacon-amber-adasyys",
-	yellow: "gx-Beacon-yellow-y1rjlf72",
-	lime: "gx-Beacon-lime-lfhdj80",
-	green: "gx-Beacon-green-g1lpbbc5",
-	emerald: "gx-Beacon-emerald-e1wxkqi6",
-	teal: "gx-Beacon-teal-t9ukjzr",
-	cyan: "gx-Beacon-cyan-c1be6eig",
-	sky: "gx-Beacon-sky-smvjtgh",
-	blue: "gx-Beacon-blue-bkh8tqf",
-	indigo: "gx-Beacon-indigo-i1e21vro",
-	violet: "gx-Beacon-violet-vxwnre2",
-	purple: "gx-Beacon-purple-p1qbmqgn",
-	fuchsia: "gx-Beacon-fuchsia-fdn9ked",
-	pink: "gx-Beacon-pink-p1tc1xnc",
-	rose: "gx-Beacon-rose-rgzv1cm"
+	success: "gx-Beacon-success-s1nxs4in",
+	warning: "gx-Beacon-warning-w1dc3rbq",
+	error: "gx-Beacon-error-edasyys",
+	red: "gx-Beacon-red-r1rjlf72",
+	orange: "gx-Beacon-orange-ofhdj80",
+	amber: "gx-Beacon-amber-a1lpbbc5",
+	yellow: "gx-Beacon-yellow-y1wxkqi6",
+	lime: "gx-Beacon-lime-l9ukjzr",
+	green: "gx-Beacon-green-g1be6eig",
+	emerald: "gx-Beacon-emerald-emvjtgh",
+	teal: "gx-Beacon-teal-tkh8tqf",
+	cyan: "gx-Beacon-cyan-c1e21vro",
+	sky: "gx-Beacon-sky-sxwnre2",
+	blue: "gx-Beacon-blue-b1qbmqgn",
+	indigo: "gx-Beacon-indigo-idn9ked",
+	violet: "gx-Beacon-violet-v1tc1xnc",
+	purple: "gx-Beacon-purple-pgzv1cm",
+	fuchsia: "gx-Beacon-fuchsia-f1marsuc",
+	pink: "gx-Beacon-pink-p1ikfn3f",
+	rose: "gx-Beacon-rose-romuo8"
 };
 /** Declared after the variant and color maps so `hex` wins over them: the label and the dot both take it. */
-var HEX_CSS = "gx-Beacon-HEX_CSS-h1marsuc";
+var HEX_CSS = "gx-Beacon-HEX_CSS-h14k32og";
 /**
 * One pulse every thirteen `duration.base` steps (1.95s, the 1.x 2s default), linear, forever: the
 * ring, in the dot's fill, grows from the dot's edge to 2.5× while it fades from 0.5 to 0. Paint-only (`transform`), so
 * the line box never moves. The keyframes are global, so the name is `gx-` prefixed.
 * `REDUCED_MOTION` stops it and the ring falls back to its resting `opacity: 0`.
 */
-var PULSE_CSS = "gx-Beacon-PULSE_CSS-p1ikfn3f";
+var PULSE_CSS = "gx-Beacon-PULSE_CSS-p88byx5";
 /**
 * A status dot, alone or with its `label`; its color is a role (`variant`), a category (`color`) or
 * data (`hex`), and it can pulse.

package/dist/buttons/Button.d.ts

@@ -1,6 +1,7 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ElementType, type FocusEventHandler, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
 import { type DropdownSlot } from "../dropdown/Dropdown.js";
+import { IconWeight } from "../icons/Icon.js";
 /** Mode (Constitution V-A local mode set, declared in `scripts/lint-dls.ts` `MODE_SETS`). */
 export declare enum ButtonVariant {
     /** Monochrome solid (`solid.primary`): the one main action in a view. The default. */
@@ -34,6 +35,11 @@ export declare enum ButtonSize {
 export interface ButtonBaseProps extends AriaAttributes {
     /** Phosphor icon component: `PlusIcon`, not `<PlusIcon />`. Sized to the rung and colored by the variant. */
     icon?: PhosphorIcon;
+    /**
+     * Weight of `icon`. `FILL` for a brand glyph (a GitHub or Slack logo); the loading ring, the external arrow and the split caret keep `REGULAR`.
+     * @default IconWeight.REGULAR
+     */
+    iconWeight?: IconWeight;
     /**
      * Put `icon` after the label instead of before it.
      * @default false

package/dist/buttons/Button.js

@@ -6,7 +6,7 @@ import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
 import Tooltip from "../tooltip/Tooltip.js";
 import Dropdown from "../dropdown/Dropdown.js";
 import { parseHotkey, useHotkey } from "../hooks/useHotkey.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
+import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import IconSlot from "../icons/internal/IconSlot.js";
 import Rotate from "../transform/Rotate.js";
 /* empty css                 */
@@ -314,7 +314,7 @@ function toAriaKeyShortcuts(hotKeys, isMac) {
 	return names.join("+");
 }
 /** The standard action control: a label, an icon or both, in one of four modes and five rungs. */
-var Button = forwardRef(function Button({ label, icon, isIconTrailing = false, leading, trailing, hotKeys, shouldBindHotKey = false, variant = "PRIMARY", size = "MEDIUM", type = "button", href, isExternal = false, as, tooltip, dropdown, isDisabled = false, isLoading = false, isActive, isRound = false, fillWidth = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+var Button = forwardRef(function Button({ label, icon, iconWeight = IconWeight.REGULAR, isIconTrailing = false, leading, trailing, hotKeys, shouldBindHotKey = false, variant = "PRIMARY", size = "MEDIUM", type = "button", href, isExternal = false, as, tooltip, dropdown, isDisabled = false, isLoading = false, isActive, isRound = false, fillWidth = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
 	const isMac = useIsMac();
 	const rootRef = useRef(null);
 	const setRootRef = useCallback((node) => {
@@ -388,6 +388,7 @@ var Button = forwardRef(function Button({ label, icon, isIconTrailing = false, l
 		children: /* @__PURE__ */ jsx(Icon, {
 			component: icon,
 			size: iconPx,
+			weight: iconWeight,
 			variant: IconVariant.INHERIT
 		})
 	});

package/dist/charts/BarChart.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type RefAttributes } from "react";
-import type { Hex } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 import { type BaseCartesianChartProps, type ChartPalette, type ChartSeriesStyles } from "./types.js";
 /** How bar values are scaled before drawing. Not a grouped/stacked switch: that comes from the data. */
 export declare enum BarChartNormalization {
@@ -17,7 +17,7 @@ export interface BarChartComponentDatum<TComponentKey extends string = string> {
     /** Segment magnitude. Negative values stack below the zero baseline. */
     value: number;
     /** Palette slot; defaults to the component's position in the automatic order. */
-    color?: ChartPalette;
+    color?: ChartPalette | RoleColor;
     /** Raw color. Discouraged: it does not follow the theme. Wins over `color`. */
     hex?: Hex;
 }

package/dist/charts/ChartLegend.js

@@ -1,6 +1,7 @@
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { Placement } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { t } from "../theme/tokens/t.js";
 import Flex, { AlignItems } from "../layout/Flex.js";
 import Tooltip from "../tooltip/Tooltip.js";
 import { ChartLegendPlacement, ChartMarkState, ChartPalette, ChartSwatch } from "./types.js";
@@ -99,7 +100,7 @@ var OverflowList = /*#__PURE__*/ styled("ul")({
 });
 function Swatch({ item, swatch }) {
 	return /* @__PURE__ */ jsx(SwatchColor, {
-		style: { "--gx-chart-mark-color": item.hex ?? CHART_PALETTE_TO_COLOR_MAP[item.palette ?? ChartPalette.TERTIARY] },
+		style: { "--gx-chart-mark-color": item.hex ?? (item.hue !== void 0 ? t.color.text[item.hue] : CHART_PALETTE_TO_COLOR_MAP[item.palette ?? ChartPalette.TERTIARY]) },
 		children: swatch === ChartSwatch.CIRCLE ? /* @__PURE__ */ jsx(Circle, {
 			size: CircleSize.SMALL,
 			variant: CircleVariant.INHERIT

package/dist/charts/LineChart.js

@@ -84,6 +84,7 @@ function LineChartRootInner(props, ref) {
 			key,
 			label: series[key]?.label ?? key,
 			...color.palette !== void 0 && { palette: color.palette },
+			...color.hue !== void 0 && { hue: color.hue },
 			...color.hex !== void 0 && { hex: color.hex }
 		};
 	}), [colors, series]);

package/dist/charts/PieChart.js

@@ -83,6 +83,7 @@ function PieChartInner(props, ref) {
 		key: item.id,
 		label: item.label,
 		...item.color.palette !== void 0 && { palette: item.color.palette },
+		...item.color.hue !== void 0 && { hue: item.color.hue },
 		...item.color.hex !== void 0 && { hex: item.color.hex }
 	})), [resolvedSlices]);
 	const arcKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);

package/dist/charts/Sparkline.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type CSSProperties } from "react";
-import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 import { type ChartValueDomain } from "./types.js";
 /** Rung of the row the sparkline sits in. Height = control height; default width = 4 × height. */
 export declare enum SparklineSize {
@@ -94,11 +94,12 @@ interface SparklineColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the marks take `text.<family>`, the way
-     * a status variant renders. For a series' category color; meanings take `variant`. Not with
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the marks take `text.<name>`, the way a status variant renders. For
+     * a series' category or data-driven color; a status that is meaning takes `variant`. Not with
      * `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** Sparkline props. Passing both `variant` and `color` is a type error. */
 export type SparklineProps = SparklineBaseProps & (SparklineVariantProps | SparklineColorProps);

package/dist/charts/Sparkline.js

@@ -112,26 +112,29 @@ var SPARKLINE_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: `text.<family>`, the way a status variant renders. */
 var SPARKLINE_COLOR_TO_CSS_MAP = {
-	red: "gx-Sparkline-red-r1g1xl1p",
-	orange: "gx-Sparkline-orange-o1jau8rz",
-	amber: "gx-Sparkline-amber-a1oe0nww",
-	yellow: "gx-Sparkline-yellow-y927tvl",
-	lime: "gx-Sparkline-lime-l17vquw4",
-	green: "gx-Sparkline-green-g1dzgnla",
-	emerald: "gx-Sparkline-emerald-e11hl6v6",
-	teal: "gx-Sparkline-teal-t1dtbnvn",
-	cyan: "gx-Sparkline-cyan-c1hj4qmv",
-	sky: "gx-Sparkline-sky-s157jvnt",
-	blue: "gx-Sparkline-blue-b14oiqli",
-	indigo: "gx-Sparkline-indigo-izvb5wf",
-	violet: "gx-Sparkline-violet-v1rblyi3",
-	purple: "gx-Sparkline-purple-p1lhbciw",
-	fuchsia: "gx-Sparkline-fuchsia-f1l7cy0y",
-	pink: "gx-Sparkline-pink-ppfz7ft",
-	rose: "gx-Sparkline-rose-r14stz7g"
+	success: "gx-Sparkline-success-s1g1xl1p",
+	warning: "gx-Sparkline-warning-w1jau8rz",
+	error: "gx-Sparkline-error-e1oe0nww",
+	red: "gx-Sparkline-red-r927tvl",
+	orange: "gx-Sparkline-orange-o17vquw4",
+	amber: "gx-Sparkline-amber-a1dzgnla",
+	yellow: "gx-Sparkline-yellow-y11hl6v6",
+	lime: "gx-Sparkline-lime-l1dtbnvn",
+	green: "gx-Sparkline-green-g1hj4qmv",
+	emerald: "gx-Sparkline-emerald-e157jvnt",
+	teal: "gx-Sparkline-teal-t14oiqli",
+	cyan: "gx-Sparkline-cyan-czvb5wf",
+	sky: "gx-Sparkline-sky-s1rblyi3",
+	blue: "gx-Sparkline-blue-b1lhbciw",
+	indigo: "gx-Sparkline-indigo-i1l7cy0y",
+	violet: "gx-Sparkline-violet-vpfz7ft",
+	purple: "gx-Sparkline-purple-p14stz7g",
+	fuchsia: "gx-Sparkline-fuchsia-f41c05i",
+	pink: "gx-Sparkline-pink-psamfb6",
+	rose: "gx-Sparkline-rose-r3yynzk"
 };
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Sparkline-HEX_CSS-h41c05i";
+var HEX_CSS = "gx-Sparkline-HEX_CSS-hhfwv7i";
 /** A finite reading, or `null` for a gap. */
 var toReading = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
 /** The vertical range: the override where given, else the mark's default from the readings. */

package/dist/charts/barChartGeometry.d.ts

@@ -7,7 +7,7 @@
  * has to know how the palette maps to tokens. Values equal to a scale step come from `SPACE` /
  * `RADIUS` (through `constants.ts`); widths, ratios and thresholds are geometry, not spacing.
  */
-import type { Hex } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 import type { ChartSeriesColor } from "./chartPalette.js";
 import type { ChartPalette } from "./types.js";
 /** @internal Ceiling on one bar's width: past it the width stops carrying information (1.x). */
@@ -153,7 +153,7 @@ export interface ResolveBarColorArgs<TMetric extends string> {
     /** Index of the component within its bar. */
     componentIndex: number;
     /** The segment's palette override. */
-    explicit?: ChartPalette | undefined;
+    explicit?: ChartPalette | RoleColor | undefined;
     /** The segment's raw color override. */
     hex?: Hex | undefined;
 }

package/dist/charts/barChartLegend.js

@@ -8,6 +8,7 @@ function getBarLegendItems({ isStacked, series, groups, colors }) {
 			key: metric,
 			label: series[metric]?.label ?? metric,
 			...color.palette !== void 0 && { palette: color.palette },
+			...color.hue !== void 0 && { hue: color.hue },
 			...color.hex !== void 0 && { hex: color.hex }
 		};
 	});
@@ -19,6 +20,7 @@ function getBarLegendItems({ isStacked, series, groups, colors }) {
 			key: component.key,
 			label: component.label,
 			...color.palette !== void 0 && { palette: color.palette },
+			...color.hue !== void 0 && { hue: color.hue },
 			...color.hex !== void 0 && { hex: color.hex }
 		});
 	});

package/dist/charts/chartPalette.d.ts

@@ -1,12 +1,14 @@
-import type { Hex, PaletteColor, StatusColor } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 import { ChartPalette } from "./types.js";
 /**
  * @internal Automatic assignment order: the eight hues, purple first. Status slots never join it
  * (an ordinary ninth series must not read as an error).
  */
 export declare const CHART_PALETTE_ORDER: readonly ChartPalette[];
-/** @internal A chart ramp: a palette family or a status role. Never gray. */
-export type ChartHue = PaletteColor | StatusColor;
+/** @internal A chart ramp: a palette family or a status role (`RoleColor`). Never gray. */
+export type ChartHue = RoleColor;
+/** @internal A series `color` is a palette slot (SCREAMING member) or a role name (lowercase string). */
+export declare const isChartPalette: (value: ChartPalette | RoleColor) => value is ChartPalette;
 /**
  * @internal Palette slot → its family. The status slots are the status roles (there is no `INFO`
  * slot); the old neutral slots `PRIMARY` /
@@ -24,10 +26,12 @@ export interface ChartSeriesColor {
     color: string;
     /** The slot, when the color came from the palette. */
     palette?: ChartPalette;
+    /** The role name, when the series set one (`"error"`, `"blue"`). */
+    hue?: RoleColor;
     /** The raw color, when the series set one. */
     hex?: Hex;
 }
 /** @internal The slot at a position in the automatic order (wraps after eight). */
 export declare function chartPaletteAt(index: number): ChartPalette;
-/** @internal Resolves a series color: `hex` wins, then an explicit slot, then the automatic order. */
-export declare function resolveChartSeriesColor(index: number, explicit?: ChartPalette, hex?: Hex): ChartSeriesColor;
+/** @internal Resolves a series color: `hex` wins, then an explicit slot or role name, then the automatic order. */
+export declare function resolveChartSeriesColor(index: number, explicit?: ChartPalette | RoleColor, hex?: Hex): ChartSeriesColor;

package/dist/charts/chartPalette.js

@@ -21,6 +21,8 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.YELLOW,
 	ChartPalette.GREEN
 ];
+/** @internal A series `color` is a palette slot (SCREAMING member) or a role name (lowercase string). */
+var isChartPalette = (value) => value in CHART_PALETTE_TO_HUE_MAP;
 /**
 * @internal Palette slot → its family. The status slots are the status roles (there is no `INFO`
 * slot); the old neutral slots `PRIMARY` /
@@ -52,12 +54,16 @@ function chartPaletteAt(index) {
 	const order = CHART_PALETTE_ORDER;
 	return order[(index % order.length + order.length) % order.length] ?? ChartPalette.PURPLE;
 }
-/** @internal Resolves a series color: `hex` wins, then an explicit slot, then the automatic order. */
+/** @internal Resolves a series color: `hex` wins, then an explicit slot or role name, then the automatic order. */
 function resolveChartSeriesColor(index, explicit, hex) {
 	if (hex !== void 0) return {
 		color: hex,
 		hex
 	};
+	if (explicit !== void 0 && !isChartPalette(explicit)) return {
+		color: t.color.text[explicit],
+		hue: explicit
+	};
 	const palette = explicit ?? chartPaletteAt(index);
 	return {
 		color: CHART_PALETTE_TO_COLOR_MAP[palette],
@@ -65,4 +71,4 @@ function resolveChartSeriesColor(index, explicit, hex) {
 	};
 }
 //#endregion
-export { CHART_NEUTRAL_COLOR, CHART_PALETTE_ORDER, CHART_PALETTE_TO_COLOR_MAP, CHART_PALETTE_TO_HUE_MAP, chartPaletteAt, resolveChartSeriesColor };
+export { CHART_NEUTRAL_COLOR, CHART_PALETTE_ORDER, CHART_PALETTE_TO_COLOR_MAP, CHART_PALETTE_TO_HUE_MAP, chartPaletteAt, isChartPalette, resolveChartSeriesColor };

package/dist/charts/types.d.ts

@@ -18,7 +18,7 @@
  * ```
  */
 import type { AriaAttributes, CSSProperties, ReactNode } from "react";
-import type { Hex } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 /**
  * Series color slot. Members are canonical color-set names (Constitution
  * III.4). The first eight are the automatic order (purple leads); the rest are for explicit,
@@ -114,8 +114,8 @@ export type ChartLabelFormatter = (label: string) => string;
 export interface ChartSeriesStyle {
     /** Name shown in the legend, the tooltip and the accessible summary. */
     label: string;
-    /** Palette slot. Defaults to the series' position in the record, walked through the automatic order. */
-    color?: ChartPalette;
+    /** Palette slot, or a role name (`"error"`, `"blue"`) for a series whose color is data (a run status). Defaults to the series' position in the record, walked through the automatic order. */
+    color?: ChartPalette | RoleColor;
     /** Raw color for a data-driven series color. Discouraged: it does not follow the theme. Wins over `color`. */
     hex?: Hex;
 }
@@ -252,9 +252,11 @@ export interface ChartLegendItem {
     key: string;
     /** Series label. */
     label: string;
-    /** Palette slot of the swatch, when the series has no `hex`. */
+    /** Palette slot of the swatch, when the series has no `hex` and no `hue`. */
     palette?: ChartPalette;
-    /** Raw swatch color; wins over `palette`. */
+    /** Role name of the swatch, when the series set one. */
+    hue?: RoleColor;
+    /** Raw swatch color; wins over `palette` and `hue`. */
     hex?: Hex;
 }
 /** Props every chart takes (the shared vocabulary in `chartgroupprovider.md`). */

package/dist/charts/useSeriesColorResolver.d.ts

@@ -1,3 +1,4 @@
+import type { RoleColor } from "../theme/tokens/types.js";
 import { type ChartSeriesColor } from "./chartPalette.js";
 import { ChartPalette, type ChartSeriesStyles } from "./types.js";
 /** @internal What `useSeriesColorResolver` returns. */
@@ -7,7 +8,7 @@ export interface SeriesColorResolver<TKey extends string> {
     /** Color of a series: its `hex`, its `color` slot, or its position in the automatic order. */
     resolve: (key: TKey) => ChartSeriesColor;
     /** Color by position, for marks that are not series (a stack's components). */
-    resolveByIndex: (index: number, explicit?: ChartPalette) => ChartSeriesColor;
+    resolveByIndex: (index: number, explicit?: ChartPalette | RoleColor) => ChartSeriesColor;
     /** Neutral, for a mark that names no series. */
     neutral: ChartSeriesColor;
 }

package/dist/chips/Chip.d.ts

@@ -1,6 +1,6 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type MouseEvent, type ReactNode } from "react";
-import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+import type { Hex, RoleColor } from "../theme/tokens/types.js";
 /** Canonical rungs; the member names the control rung the chip sits in. */
 export declare enum ChipSize {
     /** 16px tall, `caption` text, 10px icon. */
@@ -153,11 +153,12 @@ interface ChipColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the family's text, fill and border,
-     * the way a status variant renders. For categories (a source type, a team); meanings take
-     * `variant`. Not with `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the name's text, fill and border, the way a status variant renders.
+     * For categories and data-driven chips (a source type, a team, a run status map); a status that
+     * is meaning takes `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /**
  * Chip props. A chip with nothing to show or name (`<Chip icon={TagIcon} />`) is a type error, and

package/dist/chips/Chip.js

@@ -152,30 +152,33 @@ var CHIP_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: the family's text, fill and border, as a status variant renders. */
 var CHIP_COLOR_TO_CSS_MAP = {
-	red: "gx-Chip-red-r1buqu4j",
-	orange: "gx-Chip-orange-o1xofe8u",
-	amber: "gx-Chip-amber-alle9kf",
-	yellow: "gx-Chip-yellow-yvehr9v",
-	lime: "gx-Chip-lime-l6qjmz2",
-	green: "gx-Chip-green-gtd4jog",
-	emerald: "gx-Chip-emerald-evlk44e",
-	teal: "gx-Chip-teal-t1pq316v",
-	cyan: "gx-Chip-cyan-cm0lqld",
-	sky: "gx-Chip-sky-syyt7c0",
-	blue: "gx-Chip-blue-b11ah2de",
-	indigo: "gx-Chip-indigo-izbiez9",
-	violet: "gx-Chip-violet-v9o9u3v",
-	purple: "gx-Chip-purple-p1ec95in",
-	fuchsia: "gx-Chip-fuchsia-fptfyqj",
-	pink: "gx-Chip-pink-p1fzme42",
-	rose: "gx-Chip-rose-riztats"
+	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"
 };
 /** `hex`: declared after the variant and color maps so it wins over them. */
-var HEX_CSS = "gx-Chip-HEX_CSS-h1g78mhs";
-var HAS_BORDER_CSS = "gx-Chip-HAS_BORDER_CSS-h1t4qqih";
+var HEX_CSS = "gx-Chip-HEX_CSS-hy859dk";
+var HAS_BORDER_CSS = "gx-Chip-HAS_BORDER_CSS-htyaijm";
 /** Declared after `HAS_BORDER_CSS`, so selection wins. */
-var SELECTED_CSS = "gx-Chip-SELECTED_CSS-s1na9n10";
-var PILL_CSS = "gx-Chip-PILL_CSS-py859dk";
+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 CHIP_SIZE_TO_TEXT_SIZE_MAP = {
 	["X_SMALL"]: TextSize.CAPTION,

package/dist/feedback/EmptyState.d.ts

@@ -9,15 +9,39 @@ export declare enum EmptyStateSize {
     /** A whole page or main region: 40px tile, heading_sm header. */
     LARGE = "LARGE"
 }
-export interface EmptyStateProps extends AriaAttributes {
+/** Color role of the tile (color set, subset). */
+export declare enum EmptyStateVariant {
+    /** A quiet tile: `text.secondary` icon on a `border.primary` hairline. The default. */
+    SECONDARY = "SECONDARY",
+    /** Something failed: `text.error` icon on a `border.error` hairline. */
+    ERROR = "ERROR"
+}
+/** The mark above the header: an icon in a tile, or a graphic of the app's own. */
+interface EmptyStateIconProps {
+    /** Phosphor icon component (`TrayIcon`, not `<TrayIcon />`) shown in a small tile above the header. Not with `graphic`. */
+    icon?: PhosphorIcon;
+    /** A node of the app's own above the header. Not with `icon`. */
+    graphic?: undefined;
+}
+/** An app illustration instead of the icon tile. */
+interface EmptyStateGraphicProps {
+    /** Phosphor icon component shown in a small tile above the header. Not with `graphic`. */
+    icon?: undefined;
+    /** A node of the app's own (ghost rows, a diagram) above the header, with no tile around it. Not with `icon`. */
+    graphic: ReactNode;
+}
+interface EmptyStateBaseProps extends AriaAttributes {
     /** One line that says what would be here ("No runs yet", "No results for “orders”"). Medium weight. */
     header: string;
     /** Why it is empty or what to do next. Up to three short lines; wraps at about 48 characters. */
     description?: string;
-    /** Phosphor icon component (`TrayIcon`, not `<TrayIcon />`) shown in a small tile above the header. */
-    icon?: PhosphorIcon;
     /** The way out: usually one `PRIMARY` and one `SECONDARY` `Button` (or a `Link`), in that order. Use `ButtonSize.SMALL` at `SMALL`, `MEDIUM` otherwise. */
     actions?: ReactNode;
+    /**
+     * Color role of the icon tile: `ERROR` when the region is empty because something failed (the tile border and icon turn `error`). Does not color a `graphic`.
+     * @default EmptyStateVariant.SECONDARY
+     */
+    variant?: EmptyStateVariant;
     /**
      * Where it sits: a cell, chart or menu (`SMALL`), a panel or card (`MEDIUM`), or a whole page (`LARGE`). Scales the tile, the type and the padding.
      * @default EmptyStateSize.MEDIUM
@@ -34,6 +58,8 @@ export interface EmptyStateProps extends AriaAttributes {
     /** Inline style on the root `<div>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
+/** EmptyState props. Passing both `icon` and `graphic` is a type error. */
+export type EmptyStateProps = EmptyStateBaseProps & (EmptyStateIconProps | EmptyStateGraphicProps);
 /** A centered icon, header, description and actions for a region with nothing to show. */
 declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
 export default EmptyState;