@galaxy-io/dls 2.10.0 → 2.10.1

package/dist/navigation/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ElementType, type ReactElement, type ReactNode, type RefAttributes } from "react";
 import { Orientation, type Space } from "../theme/enums.js";
-/** 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). */
 export declare enum TabsVariant {
     /** Tabs on a hairline; the selected tab has a `text.primary` indicator on the edge facing the panel. The default. */
     UNDERLINE = "UNDERLINE",
@@ -27,7 +27,9 @@ interface TabItemBase<TId extends string = string> {
     id: TId;
     /** Visible tab text, one short word or two. Also the overflow menu row's label. */
     label: string;
-    /** Phosphor icon component (`GitBranchIcon`, not `<GitBranchIcon />`), before the label. */
+    /** Anything else before the label (an `Avatar`, a connector logo). Must not be interactive. */
+    leading?: ReactNode;
+    /** Phosphor icon component (`GitBranchIcon`, not `<GitBranchIcon />`), before the label (after `leading`). */
     icon?: PhosphorIcon;
     /** Number after the label, as a count `Chip` (0 or less is hidden; above 99 shows "99+"). */
     count?: number;

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,