@galaxy-io/dls 2.4.0 → 2.5.0

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

@@ -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,6 +114,7 @@ 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,

package/dist/navigation/Tabs.d.ts

@@ -76,7 +76,8 @@ export interface TabsProps<TId extends string = string> extends AriaAttributes {
      */
     orientation?: Orientation;
     /**
-     * Horizontal only: the row spans its parent and every tab takes an equal share; labels truncate instead of overflowing into a menu.
+     * Horizontal: the row spans its parent and every tab takes an equal share; labels truncate instead of overflowing into a menu.
+     * Vertical: the column (and its `UNDERLINE` hairline) spans its parent instead of hugging the widest label; for a column with no panel beside it.
      * @default false
      */
     fillWidth?: boolean;

package/dist/navigation/Tabs.js

@@ -112,9 +112,11 @@ var TABS_ORIENTATION_TO_CSS_MAP = {
 };
 /** Horizontal `fillWidth`: the row spans its parent and every tab takes an equal share. */
 var FILL_WIDTH_CSS = "gx-Tabs-FILL_WIDTH_CSS-fs6iug3";
+/** 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 TABS_ORIENTATION_TO_BAR_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-ovxftzj",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oduyhd6"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oduyhd6",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oux4b2d"
 };
 /**
 * The hairline on the edge facing the panel (`UNDERLINE` only). A horizontal row draws it as an
@@ -125,52 +127,52 @@ var TABS_ORIENTATION_TO_BAR_CSS_MAP = {
 */
 var TABS_VARIANT_TO_BAR_CSS_MAP = {
 	["UNDERLINE"]: {
-		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oux4b2d",
-		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6lhzlg"
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o6lhzlg",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-otj50wv"
 	},
 	["PILL"]: {
-		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-otj50wv",
-		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1wa4rz3"
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1wa4rz3",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o19ax5w1"
 	}
 };
 var TABS_ORIENTATION_TO_LIST_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o19ax5w1",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6on29c"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o6on29c",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1cleozi"
 };
 /** While unmeasured (server, first paint, after items change): every tab renders, clipped. */
-var MEASURING_CSS = "gx-Tabs-MEASURING_CSS-m1cleozi";
+var MEASURING_CSS = "gx-Tabs-MEASURING_CSS-mfzxznm";
 /** The overflow trigger copy that is only measured. */
-var MEASURING_TRIGGER_CSS = "gx-Tabs-MEASURING_TRIGGER_CSS-mfzxznm";
+var MEASURING_TRIGGER_CSS = "gx-Tabs-MEASURING_TRIGGER_CSS-m10e4gpz";
 /**
 * 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-s10e4gpz",
-	["MEDIUM"]: "gx-Tabs-MEDIUM-m1k4ei2n",
-	["LARGE"]: "gx-Tabs-LARGE-l1fu2ke2"
+	["SMALL"]: "gx-Tabs-SMALL-s1k4ei2n",
+	["MEDIUM"]: "gx-Tabs-MEDIUM-m1fu2ke2",
+	["LARGE"]: "gx-Tabs-LARGE-l1q90ijz"
 };
 /** Shape per mode (every tab and the overflow trigger). */
 var TABS_VARIANT_TO_TAB_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1q90ijz",
-	["PILL"]: "gx-Tabs-PILL-p1xzvabb"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1xzvabb",
+	["PILL"]: "gx-Tabs-PILL-pxgth9d"
 };
 /** Hover and press on an enabled, unselected tab (and the overflow trigger). */
 var TABS_VARIANT_TO_INTERACTIVE_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uxgth9d",
-	["PILL"]: "gx-Tabs-PILL-p15kodi3"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u15kodi3",
+	["PILL"]: "gx-Tabs-PILL-phu3rsh"
 };
 var TABS_VARIANT_TO_SELECTED_CSS_MAP = {
-	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uhu3rsh",
-	["PILL"]: "gx-Tabs-PILL-p1nmauec"
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1nmauec",
+	["PILL"]: "gx-Tabs-PILL-p14ug43i"
 };
 /** 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-o14ug43i",
-	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1qvds3x"
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1qvds3x",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oa8x8b6"
 };
-var TAB_DISABLED_CSS = "gx-Tabs-TAB_DISABLED_CSS-ta8x8b6";
+var TAB_DISABLED_CSS = "gx-Tabs-TAB_DISABLED_CSS-t2u7szj";
 /** 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,
@@ -469,7 +471,7 @@ function TabsImpl(props, ref) {
 	const selectedPanel = selectedItem !== void 0 && selectedItem.href === void 0 ? selectedItem.panel : void 0;
 	return /* @__PURE__ */ jsxs(Root, {
 		ref,
-		className: cx(TABS_ORIENTATION_TO_CSS_MAP[orientation], fillWidth && isHorizontal && FILL_WIDTH_CSS, className),
+		className: cx(TABS_ORIENTATION_TO_CSS_MAP[orientation], fillWidth && (isHorizontal ? FILL_WIDTH_CSS : VERTICAL_FILL_WIDTH_CSS), className),
 		style,
 		children: [/* @__PURE__ */ jsxs(Bar, {
 			ref: barRef,

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