@galaxy-io/dls 2.4.1 → 2.5.1

package/dist/layout/Flex.js

@@ -1,4 +1,5 @@
 import { gapToCss, getCssSizeValue, spaceToCss } from "../utils/css.js";
+import { BASE_SURFACE_CSS, PRIMARY_SURFACE_CSS, RADIUS_TO_CSS_MAP, SECONDARY_SURFACE_CSS, TERTIARY_SURFACE_CSS } from "./internal/surface.js";
 /* empty css               */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -7,8 +8,9 @@ import { cx } from "@linaria/core";
 //#region src/layout/Flex.tsx
 /**
 * The flexbox layout primitive: a `display: flex` element with every flex and sizing knob as a
-* prop. Replaces 1.x `FlexWrapper`. Spacing is `gap` and `padding` from the space scale; there is
-* no `margin` (Constitution II.5).
+* prop, plus the surface props of `Box` (`variant`, `hasBorder`, `radius`) so a bordered island
+* that also flexes is one element. Replaces 1.x `FlexWrapper`. Spacing is `gap` and `padding`
+* from the space scale; there is no `margin` (Constitution II.5).
 *
 * The four flex axes are enums, each a `Record` of `css` blocks. Continuous values (`gap`,
 * `padding`, `grow` / `shrink` / `basis`, sizes, `overflow`) are set as `--gx-flex-*` custom
@@ -16,6 +18,18 @@ import { cx } from "@linaria/core";
 * set. So a nested `Flex` never inherits its parent's values, and nothing extra reaches a custom
 * `as` component (Linaria forwards `$`-props to one).
 */
+/** Surface step the container fills with (surface set, Constitution V-A). Leave `variant` unset for no fill. */
+var FlexVariant = /* @__PURE__ */ function(FlexVariant) {
+	/** The canvas, `background.base`. */
+	FlexVariant["BASE"] = "BASE";
+	/** A panel, `background.primary`. */
+	FlexVariant["PRIMARY"] = "PRIMARY";
+	/** A raised surface, `background.secondary`. */
+	FlexVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated surface, `background.tertiary`. */
+	FlexVariant["TERTIARY"] = "TERTIARY";
+	return FlexVariant;
+}({});
 /** Main-axis direction of the flex container (`flex-direction`). */
 var FlexDirection = /* @__PURE__ */ function(FlexDirection) {
 	/** Left to right. */
@@ -101,6 +115,12 @@ var FLEX_WRAP_TO_CSS_MAP = {
 };
 var FILL_WIDTH_CSS = "gx-Flex-FILL_WIDTH_CSS-fy5wrww";
 var CLICKABLE_CSS = "gx-Flex-CLICKABLE_CSS-cactce2";
+var FLEX_VARIANT_TO_CSS_MAP = {
+	["BASE"]: BASE_SURFACE_CSS,
+	["PRIMARY"]: PRIMARY_SURFACE_CSS,
+	["SECONDARY"]: SECONDARY_SURFACE_CSS,
+	["TERTIARY"]: TERTIARY_SURFACE_CSS
+};
 /** Each block reads the `--gx-flex-<property>` custom property the component sets beside it. */
 var FLEX_CSS_PROPERTY_TO_CSS_MAP = {
 	gap: "gx-Flex-gap-gykdsqa",
@@ -119,7 +139,7 @@ var FLEX_CSS_PROPERTY_TO_CSS_MAP = {
 /** A length prop as CSS (number → px), or `undefined` when unset. */
 var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
 /** The flexbox layout primitive: direction, alignment, wrapping, `gap`, `padding` and sizing. */
-var Flex = forwardRef(function Flex({ children, direction = "ROW", alignItems = "STRETCH", justifyContent = "START", wrap = "NOWRAP", gap, padding, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, overflow, as = "div", onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll, id, className, style, ...rest }, ref) {
+var Flex = forwardRef(function Flex({ children, direction = "ROW", alignItems = "STRETCH", justifyContent = "START", wrap = "NOWRAP", gap, padding, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, overflow, variant, hasBorder = false, radius, as = "div", onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll, id, className, style, ...rest }, ref) {
 	const values = {
 		gap: gap === void 0 ? void 0 : gapToCss(gap),
 		padding: padding === void 0 ? void 0 : spaceToCss(padding),
@@ -152,7 +172,7 @@ var Flex = forwardRef(function Flex({ children, direction = "ROW", alignItems =
 		onMouseEnter,
 		onMouseLeave,
 		onScroll,
-		className: cx(FLEX_DIRECTION_TO_CSS_MAP[direction], ALIGN_ITEMS_TO_CSS_MAP[alignItems], JUSTIFY_CONTENT_TO_CSS_MAP[justifyContent], FLEX_WRAP_TO_CSS_MAP[wrap], fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
+		className: cx(FLEX_DIRECTION_TO_CSS_MAP[direction], ALIGN_ITEMS_TO_CSS_MAP[alignItems], JUSTIFY_CONTENT_TO_CSS_MAP[justifyContent], FLEX_WRAP_TO_CSS_MAP[wrap], variant !== void 0 && FLEX_VARIANT_TO_CSS_MAP[variant], hasBorder && "gx-surface-BORDER_CSS-b9a3ryy", radius !== void 0 && RADIUS_TO_CSS_MAP[radius], fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
 		style: {
 			...variables,
 			...style
@@ -162,4 +182,4 @@ var Flex = forwardRef(function Flex({ children, direction = "ROW", alignItems =
 });
 Flex.displayName = "Flex";
 //#endregion
-export { AlignItems, FlexDirection, FlexWrap, JustifyContent, Flex as default };
+export { AlignItems, FlexDirection, FlexVariant, FlexWrap, JustifyContent, Flex as default };

package/dist/layout/FlexItem.d.ts

@@ -1,8 +1,31 @@
 import { type AriaAttributes, type CSSProperties, type ElementType, type MouseEvent, type ReactNode } from "react";
-import type { SpaceShorthand } from "../theme/enums.js";
+import type { Radius, SpaceShorthand } from "../theme/enums.js";
+/** Surface step the item fills with (surface set, Constitution V-A). Leave `variant` unset for no fill. */
+export declare enum FlexItemVariant {
+    /** The canvas, `background.base`. */
+    BASE = "BASE",
+    /** A panel, `background.primary`. */
+    PRIMARY = "PRIMARY",
+    /** A raised surface, `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** The most elevated surface, `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
 export interface FlexItemProps extends AriaAttributes {
     /** Content of the item. Laid out in normal flow; nest a `Flex` to arrange it. */
     children?: ReactNode;
+    /**
+     * Surface step the item fills with, as on `Box`. Unset draws no fill: the parent shows through.
+     * @default undefined (no fill)
+     */
+    variant?: FlexItemVariant;
+    /**
+     * Draw the 1px hairline border (`border.primary`), as on `Box`.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /** Corner radius from the scale, as on `Box`. Square corners when omitted. */
+    radius?: Radius;
     /**
      * `flex-grow`: this item's share of the parent's spare main-axis space.
      * @default 0

package/dist/layout/FlexItem.js

@@ -1,4 +1,5 @@
 import { getCssSizeValue, spaceToCss } from "../utils/css.js";
+import { BASE_SURFACE_CSS, PRIMARY_SURFACE_CSS, RADIUS_TO_CSS_MAP, SECONDARY_SURFACE_CSS, TERTIARY_SURFACE_CSS } from "./internal/surface.js";
 /* empty css                   */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";
@@ -17,6 +18,18 @@ import { cx } from "@linaria/core";
 * `width: auto`, `position: static`, `overflow: visible`), and nothing extra reaches a custom `as`
 * component (Linaria forwards `$`-props to one).
 */
+/** Surface step the item fills with (surface set, Constitution V-A). Leave `variant` unset for no fill. */
+var FlexItemVariant = /* @__PURE__ */ function(FlexItemVariant) {
+	/** The canvas, `background.base`. */
+	FlexItemVariant["BASE"] = "BASE";
+	/** A panel, `background.primary`. */
+	FlexItemVariant["PRIMARY"] = "PRIMARY";
+	/** A raised surface, `background.secondary`. */
+	FlexItemVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated surface, `background.tertiary`. */
+	FlexItemVariant["TERTIARY"] = "TERTIARY";
+	return FlexItemVariant;
+}({});
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
 	class: "gx-FlexItem-r10jnoxq",
@@ -24,6 +37,12 @@ var Root = /*#__PURE__*/ styled("div")({
 });
 var FILL_WIDTH_CSS = "gx-FlexItem-FILL_WIDTH_CSS-f11ur0tg";
 var CLICKABLE_CSS = "gx-FlexItem-CLICKABLE_CSS-c1phfxjv";
+var FLEX_ITEM_VARIANT_TO_CSS_MAP = {
+	["BASE"]: BASE_SURFACE_CSS,
+	["PRIMARY"]: PRIMARY_SURFACE_CSS,
+	["SECONDARY"]: SECONDARY_SURFACE_CSS,
+	["TERTIARY"]: TERTIARY_SURFACE_CSS
+};
 /** Each block reads the `--gx-flex-item-<property>` custom property the component sets beside it. */
 var FLEX_ITEM_CSS_PROPERTY_TO_CSS_MAP = {
 	"flex-grow": "gx-FlexItem-flex-grow-f19z5ofo",
@@ -42,7 +61,7 @@ var FLEX_ITEM_CSS_PROPERTY_TO_CSS_MAP = {
 /** A length prop as CSS (number → px), or `undefined` when unset. */
 var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
 /** One child of a `Flex` with its own grow, shrink, basis and sizing. Not a flex container. */
-var FlexItem = forwardRef(function FlexItem({ children, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, padding, overflow, position, as = "div", onClick, id, className, style, ...rest }, ref) {
+var FlexItem = forwardRef(function FlexItem({ children, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, padding, overflow, position, variant, hasBorder = false, radius, as = "div", onClick, id, className, style, ...rest }, ref) {
 	const values = {
 		"flex-grow": grow === void 0 ? void 0 : String(grow),
 		"flex-shrink": shrink === void 0 ? void 0 : String(shrink),
@@ -71,7 +90,7 @@ var FlexItem = forwardRef(function FlexItem({ children, grow, shrink, basis, wid
 		ref,
 		id,
 		onClick,
-		className: cx(fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
+		className: cx(variant !== void 0 && FLEX_ITEM_VARIANT_TO_CSS_MAP[variant], hasBorder && "gx-surface-BORDER_CSS-b9a3ryy", radius !== void 0 && RADIUS_TO_CSS_MAP[radius], fillWidth && FILL_WIDTH_CSS, onClick !== void 0 && CLICKABLE_CSS, ...classNames, className),
 		style: {
 			...variables,
 			...style
@@ -81,4 +100,4 @@ var FlexItem = forwardRef(function FlexItem({ children, grow, shrink, basis, wid
 });
 FlexItem.displayName = "FlexItem";
 //#endregion
-export { FlexItem as default };
+export { FlexItemVariant, FlexItem as default };

package/dist/layout/internal/surface.d.ts

@@ -0,0 +1,13 @@
+import { Radius } from "../../theme/enums.js";
+/** The canvas, `background.base`. */
+export declare const BASE_SURFACE_CSS: import("@linaria/core").LinariaClassName;
+/** A panel, `background.primary`. */
+export declare const PRIMARY_SURFACE_CSS: import("@linaria/core").LinariaClassName;
+/** A raised surface, `background.secondary`. */
+export declare const SECONDARY_SURFACE_CSS: import("@linaria/core").LinariaClassName;
+/** The most elevated surface, `background.tertiary`. */
+export declare const TERTIARY_SURFACE_CSS: import("@linaria/core").LinariaClassName;
+/** Corner radius per step of the scale. */
+export declare const RADIUS_TO_CSS_MAP: Record<Radius, string>;
+/** The 1px hairline border, `border.primary`. */
+export declare const BORDER_CSS: import("@linaria/core").LinariaClassName;

package/dist/layout/internal/surface.js

@@ -0,0 +1,28 @@
+import { Radius } from "../../theme/enums.js";
+/* empty css                  */
+//#region src/layout/internal/surface.ts
+/**
+* @internal The surface blocks `Box`, `Flex` and `FlexItem` share: one `css` block per surface
+* step, the radius map and the hairline. Each layout component keys its own `<Component>Variant`
+* enum onto these, so the four fills are written once. Private on purpose (an `internal/` module:
+* built, never a package export).
+*/
+/** The canvas, `background.base`. */
+var BASE_SURFACE_CSS = "gx-surface-BASE_SURFACE_CSS-b1mo8pwf";
+/** A panel, `background.primary`. */
+var PRIMARY_SURFACE_CSS = "gx-surface-PRIMARY_SURFACE_CSS-p1m48mr7";
+/** A raised surface, `background.secondary`. */
+var SECONDARY_SURFACE_CSS = "gx-surface-SECONDARY_SURFACE_CSS-s1pzz23i";
+/** The most elevated surface, `background.tertiary`. */
+var TERTIARY_SURFACE_CSS = "gx-surface-TERTIARY_SURFACE_CSS-t12aes5t";
+/** Corner radius per step of the scale. */
+var RADIUS_TO_CSS_MAP = {
+	[Radius.SM]: "gx-surface-Radius_SM-r1tdghn5",
+	[Radius.MD]: "gx-surface-Radius_MD-rel0w7v",
+	[Radius.LG]: "gx-surface-Radius_LG-r4i8935",
+	[Radius.PILL]: "gx-surface-Radius_PILL-r1su3y0g"
+};
+/** The 1px hairline border, `border.primary`. */
+var BORDER_CSS = "gx-surface-BORDER_CSS-b9a3ryy";
+//#endregion
+export { BASE_SURFACE_CSS, BORDER_CSS, PRIMARY_SURFACE_CSS, RADIUS_TO_CSS_MAP, SECONDARY_SURFACE_CSS, TERTIARY_SURFACE_CSS };

package/dist/lists/DescriptionList.d.ts

@@ -77,6 +77,12 @@ export interface DescriptionListProps extends AriaAttributes {
      * @default 1
      */
     columns?: DescriptionListColumns;
+    /**
+     * Align every value (and its copy button) to the end of its track instead of the start: the
+     * detail-pane layout where labels sit at the left edge and values at the right.
+     * @default false
+     */
+    isValueTrailing?: boolean;
     /** DOM id on the root `<dl>`. */
     id?: string;
     /** Any `data-*` attribute, forwarded to the root `<dl>`. */

package/dist/lists/DescriptionList.js

@@ -62,21 +62,23 @@ var Details = /*#__PURE__*/ styled("dd")({
 * center on the strut's line.
 */
 var NODE_VALUE_CSS = "gx-DescriptionList-NODE_VALUE_CSS-n1mikopx";
+/** Values at the end of their track; the value cell is a flex row, so its content follows. */
+var VALUE_TRAILING_CSS = "gx-DescriptionList-VALUE_TRAILING_CSS-v17z38i7";
 var DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-DescriptionList-Orientation_HORIZONTAL-o17z38i7",
-	[Orientation.VERTICAL]: "gx-DescriptionList-Orientation_VERTICAL-oarm5a8"
+	[Orientation.HORIZONTAL]: "gx-DescriptionList-Orientation_HORIZONTAL-oarm5a8",
+	[Orientation.VERTICAL]: "gx-DescriptionList-Orientation_VERTICAL-o1itek1z"
 };
 var DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP = {
-	1: "gx-DescriptionList-1-_1itek1z",
-	2: "gx-DescriptionList-2-_19oquh",
-	3: "gx-DescriptionList-3-_108p3ql",
-	4: "gx-DescriptionList-4-_10x7q9y"
+	1: "gx-DescriptionList-1-_19oquh",
+	2: "gx-DescriptionList-2-_108p3ql",
+	3: "gx-DescriptionList-3-_10x7q9y",
+	4: "gx-DescriptionList-4-_1g4xmgd"
 };
 /** Applied only when some item is copyable: every row is as tall as a row with a copy button. */
 var DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP = {
-	["SMALL"]: "gx-DescriptionList-SMALL-s1g4xmgd",
-	["MEDIUM"]: "gx-DescriptionList-MEDIUM-m1s7hmki",
-	["LARGE"]: "gx-DescriptionList-LARGE-l1t8g3vn"
+	["SMALL"]: "gx-DescriptionList-SMALL-s1s7hmki",
+	["MEDIUM"]: "gx-DescriptionList-MEDIUM-m1t8g3vn",
+	["LARGE"]: "gx-DescriptionList-LARGE-l1k8wc0x"
 };
 var DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
@@ -97,7 +99,7 @@ var getCopyText = (item) => {
 	return isText(item.value) && !isEmpty(item.value) ? String(item.value) : void 0;
 };
 /** Labelled values in a `<dl>`: labels aligned in one column, or above their values. */
-var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIUM", orientation = Orientation.HORIZONTAL, columns = 1, id, className, style, ...rest }, ref) {
+var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIUM", orientation = Orientation.HORIZONTAL, columns = 1, isValueTrailing = false, id, className, style, ...rest }, ref) {
 	const textSize = DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP[size];
 	const hasCopy = items.some((item) => item.isCopyable === true);
 	const entries = items.map((item, position) => ({
@@ -108,7 +110,7 @@ var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIU
 		...rest,
 		ref,
 		id,
-		className: cx(DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP[orientation], DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP[columns], hasCopy && DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP[size], className),
+		className: cx(DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP[orientation], DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP[columns], hasCopy && DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP[size], isValueTrailing && VALUE_TRAILING_CSS, className),
 		style,
 		children: entries.map(({ item, position }) => {
 			const copyText = getCopyText(item);

package/dist/modal/ConfirmDialog.d.ts

@@ -30,6 +30,10 @@ export interface ConfirmDialogProps extends AriaAttributes {
     isDestructive?: boolean;
     /** Type-to-confirm. When set, the user must type this text exactly (surrounding spaces ignored) before the confirm button enables. */
     confirmValue?: string;
+    /** Replaces the default comparison of what was typed against `confirmValue` (trimmed equality): accept an alias, ignore case, normalise a glyph. */
+    isMatch?: (typed: string, confirmValue: string) => boolean;
+    /** Block content between the description and the confirm field: an `Alert` with what the action also does, a `BulletedList` of what is removed. Never a form. */
+    children?: ReactNode;
     /** A message under the description, for an action that failed. The app sets it, usually after `onConfirm` rejects. */
     error?: string;
     /** Controlled open state. When set, ConfirmDialog calls `onOpenChange` and lets the caller decide. */

package/dist/modal/ConfirmDialog.js

@@ -1,10 +1,10 @@
-import { FontFamily } from "../theme/enums.js";
 import Text, { TextVariant } from "../text/Text.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Flex, { FlexDirection } from "../layout/Flex.js";
 import Button, { ButtonVariant } from "../buttons/Button.js";
-import Span from "../text/Span.js";
 import TextInput from "../inputs/TextInput.js";
+import Code from "../text/Code.js";
+import Selectable from "../text/Selectable.js";
 import Modal, { ModalSize } from "./Modal.js";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -26,10 +26,12 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 */
 /** The fixed text of the dismiss button (as Modal's "Close"). */
 var CANCEL_LABEL = "Cancel";
+/** The default `isMatch`: what was typed equals `confirmValue`, surrounding spaces ignored. */
+var isTrimmedEqual = (typed, confirmValue) => typed.trim() === confirmValue.trim();
 /** A value with a `then` method: what `await` would treat as a promise. */
 var isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
 /** A yes/no question before an action: title, description, optional type-to-confirm, Cancel + action. */
-var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, label, onConfirm, isDestructive = false, confirmValue, error, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, "aria-describedby": ariaDescribedBy, className, style, ...rest }, ref) {
+var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, label, onConfirm, isDestructive = false, confirmValue, isMatch = isTrimmedEqual, children, error, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, "aria-describedby": ariaDescribedBy, className, style, ...rest }, ref) {
 	const descriptionId = useId();
 	const promptId = useId();
 	const { isOpen, setOpen } = useControlledOpenState({
@@ -59,7 +61,7 @@ var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, lab
 		if (!next && isPending) return;
 		setOpen(next);
 	};
-	const isMatched = confirmValue === void 0 || typed.trim() === confirmValue.trim();
+	const isMatched = confirmValue === void 0 || isMatch(typed, confirmValue);
 	const confirm = () => {
 		if (!isMatched || isPending) return;
 		const result = onConfirm();
@@ -78,10 +80,10 @@ var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, lab
 		});
 	};
 	const describedBy = ariaDescribedBy ?? (description === void 0 ? void 0 : descriptionId);
-	const hasBody = description !== void 0 || confirmValue !== void 0 || error !== void 0;
+	const hasBody = description !== void 0 || children !== void 0 || confirmValue !== void 0 || error !== void 0;
 	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 		label: CANCEL_LABEL,
-		variant: ButtonVariant.TERTIARY,
+		variant: ButtonVariant.SECONDARY,
 		isDisabled: isPending,
 		onClick: () => requestOpenChange(false)
 	}), /* @__PURE__ */ jsx(Button, {
@@ -112,18 +114,18 @@ var ConfirmDialog = forwardRef(function ConfirmDialog({ header, description, lab
 					variant: TextVariant.SECONDARY,
 					children: description
 				}),
+				children,
 				confirmValue !== void 0 && /* @__PURE__ */ jsxs(Flex, {
 					direction: FlexDirection.COLUMN,
 					gap: 8,
 					children: [/* @__PURE__ */ jsxs(Text, {
 						id: promptId,
 						children: [
-							"Type ",
-							/* @__PURE__ */ jsx(Span, {
-								family: FontFamily.MONO,
-								children: confirmValue
-							}),
-							" to confirm."
+							"Type",
+							" ",
+							/* @__PURE__ */ jsx(Code, { children: /* @__PURE__ */ jsx(Selectable, { children: confirmValue }) }),
+							" ",
+							"to confirm."
 						]
 					}), /* @__PURE__ */ jsx(TextInput, {
 						value: typed,

package/dist/shapes/Circle.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. */
 export declare enum CircleSize {
     /** 6px, beside `caption` (12px line). */
@@ -72,11 +72,12 @@ interface CircleColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): fills with `text.<family>`, the way a
-     * status variant renders. For categories (a series, a source type); meanings take `variant`.
-     * Not with `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): fills with `text.<name>`, the way a status variant renders. For
+     * categories and data-driven marks (a series, a source type, a run status map); a status that is
+     * meaning takes `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** Circle props. Passing both `variant` and `color` is a type error. */
 export type CircleProps = CircleBaseProps & (CircleVariantProps | CircleColorProps);

package/dist/shapes/Circle.js

@@ -84,26 +84,29 @@ var CIRCLE_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: `text.<family>`, the way a status variant renders. */
 var CIRCLE_COLOR_TO_CSS_MAP = {
-	red: "gx-Circle-red-risghat",
-	orange: "gx-Circle-orange-ornyxi5",
-	amber: "gx-Circle-amber-amlehi9",
-	yellow: "gx-Circle-yellow-yx4zu59",
-	lime: "gx-Circle-lime-lmm7dfa",
-	green: "gx-Circle-green-g15qmdzt",
-	emerald: "gx-Circle-emerald-e1p4fg4l",
-	teal: "gx-Circle-teal-t6eszpj",
-	cyan: "gx-Circle-cyan-c1kmyxwu",
-	sky: "gx-Circle-sky-sr4sdq5",
-	blue: "gx-Circle-blue-bw9vccf",
-	indigo: "gx-Circle-indigo-i1rmact7",
-	violet: "gx-Circle-violet-vyv0gwd",
-	purple: "gx-Circle-purple-pdx6kbq",
-	fuchsia: "gx-Circle-fuchsia-f1j11685",
-	pink: "gx-Circle-pink-pgz62lk",
-	rose: "gx-Circle-rose-re429ux"
+	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"
 };
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Circle-HEX_CSS-h1h7hg24";
+var HEX_CSS = "gx-Circle-HEX_CSS-h18iedp";
 /** 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 = {};

package/dist/shapes/Square.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 mark sits beside. */
 export declare enum SquareSize {
     /** 6px, beside `caption` (12px line). */
@@ -72,11 +72,12 @@ interface SquareColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): fills with `text.<family>`, the way a
-     * status variant renders. For categories (a series, a source type); meanings take `variant`.
-     * Not with `variant`.
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): fills with `text.<name>`, the way a status variant renders. For
+     * categories and data-driven marks (a series, a source type, a run status map); a status that is
+     * meaning takes `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** Square props. Passing both `variant` and `color` is a type error. */
 export type SquareProps = SquareBaseProps & (SquareVariantProps | SquareColorProps);

package/dist/shapes/Square.js

@@ -85,26 +85,29 @@ var SQUARE_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: `text.<family>`, the way a status variant renders. */
 var SQUARE_COLOR_TO_CSS_MAP = {
-	red: "gx-Square-red-r44keg",
-	orange: "gx-Square-orange-o1czb11g",
-	amber: "gx-Square-amber-a11m2avz",
-	yellow: "gx-Square-yellow-y1dycb8",
-	lime: "gx-Square-lime-l13w32o7",
-	green: "gx-Square-green-gflvbdc",
-	emerald: "gx-Square-emerald-e1wrg0mj",
-	teal: "gx-Square-teal-tbmrs5y",
-	cyan: "gx-Square-cyan-c1229390",
-	sky: "gx-Square-sky-sylmgp4",
-	blue: "gx-Square-blue-bgnvnom",
-	indigo: "gx-Square-indigo-iqzrj1i",
-	violet: "gx-Square-violet-vx1evfg",
-	purple: "gx-Square-purple-p1bh3ofr",
-	fuchsia: "gx-Square-fuchsia-f15n3xo4",
-	pink: "gx-Square-pink-p1qvour9",
-	rose: "gx-Square-rose-r1g6v6vx"
+	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"
 };
 /** Declared after the variant and color maps so `hex` wins over them. */
-var HEX_CSS = "gx-Square-HEX_CSS-h1u3b7de";
+var HEX_CSS = "gx-Square-HEX_CSS-h1ah0bbe";
 /** 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 = {};