@galaxy-io/dls 2.10.0 → 2.10.2

package/dist/menu/ContextMenu.d.ts

@@ -34,6 +34,12 @@ export interface ContextMenuProps extends AriaAttributes {
      * @default MenuVariant.BASE
      */
     variant?: MenuVariant;
+    /**
+     * Accepted for parity with `Menu` and has no effect: a context menu opens at the pointer, so
+     * there is no trigger box to match. It sizes to its rows.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
     /** Controlled open state. When set, ContextMenu calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
     /**

package/dist/menu/Menu.d.ts

@@ -56,6 +56,13 @@ export interface MenuProps extends AriaAttributes {
      * @default false
      */
     isSearchable?: boolean;
+    /**
+     * The panel takes the trigger's width (a menu opened from a full-width row, such as a sidebar
+     * account button). The rows fill it. Never narrower than 160px. The root panel only: submenus
+     * size to their rows. No effect on `ContextMenu`, which opens at the pointer and has no trigger box.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
     /** Controlled open state. When set, Menu calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
     /**

package/dist/menu/Menu.js

@@ -163,18 +163,25 @@ var List = /*#__PURE__*/ styled("div")({
 	class: "gx-Menu-List-letxokg",
 	propsAsIs: false
 });
+/** `shouldMatchTriggerWidth`, root list: fills the panel at any width, still never under the minimum. */
+var LIST_MATCH_TRIGGER_WIDTH_CSS = "gx-Menu-LIST_MATCH_TRIGGER_WIDTH_CSS-l1m37gth";
+/**
+* `shouldMatchTriggerWidth`, root panel: a trigger narrower than the list's minimum still gets the
+* whole list (the panel is `border-box` with a hairline left and right).
+*/
+var PANEL_MATCH_TRIGGER_WIDTH_CSS = "gx-Menu-PANEL_MATCH_TRIGGER_WIDTH_CSS-p1ab151u";
 /** With search: the pinned field over the scrolling list, capped to the room on screen. */
 var SearchLayout = /*#__PURE__*/ styled("div")({
 	name: "SearchLayout",
-	class: "gx-Menu-SearchLayout-s1m37gth",
+	class: "gx-Menu-SearchLayout-s1nyz30c",
 	propsAsIs: false
 });
 /** With search: only the rows scroll. */
-var SEARCH_LIST_CSS = "gx-Menu-SEARCH_LIST_CSS-s1ab151u";
+var SEARCH_LIST_CSS = "gx-Menu-SEARCH_LIST_CSS-s1hougl1";
 /** "No results": a row's box, not interactive. */
 var MenuEmpty = /*#__PURE__*/ styled("div")({
 	name: "MenuEmpty",
-	class: "gx-Menu-MenuEmpty-m1nyz30c",
+	class: "gx-Menu-MenuEmpty-mjsjxm5",
 	propsAsIs: false
 });
 /**
@@ -183,53 +190,53 @@ var MenuEmpty = /*#__PURE__*/ styled("div")({
 * where they are.
 */
 var MENU_ITEM_VARIANT_TO_CSS_MAP = {
-	["DEFAULT"]: "gx-Menu-DEFAULT-d1hougl1",
-	["ERROR"]: "gx-Menu-ERROR-ejsjxm5"
+	["DEFAULT"]: "gx-Menu-DEFAULT-d11wn83l",
+	["ERROR"]: "gx-Menu-ERROR-eotc445"
 };
 /** A disabled row. Declared after the mode map. */
-var ITEM_DISABLED_CSS = "gx-Menu-ITEM_DISABLED_CSS-i11wn83l";
+var ITEM_DISABLED_CSS = "gx-Menu-ITEM_DISABLED_CSS-imfg9k5";
 /** `leading` / `trailing`: never squeezed, so only the text shrinks. */
 var Slot = /*#__PURE__*/ styled("span")({
 	name: "Slot",
-	class: "gx-Menu-Slot-sotc445",
+	class: "gx-Menu-Slot-s1aves2k",
 	propsAsIs: false
 });
 /** Label and description, stacked; the only part that shrinks. */
 var Content = /*#__PURE__*/ styled("span")({
 	name: "Content",
-	class: "gx-Menu-Content-cmfg9k5",
+	class: "gx-Menu-Content-c1n04r8w",
 	propsAsIs: false
 });
 /** The check marker's box (width per rung). */
 var CheckSlot = /*#__PURE__*/ styled("span")({
 	name: "CheckSlot",
-	class: "gx-Menu-CheckSlot-c1aves2k",
+	class: "gx-Menu-CheckSlot-cwavq3l",
 	propsAsIs: false
 });
 /** Icons, caps and markers never shrink. */
-var NO_SHRINK_CSS = "gx-Menu-NO_SHRINK_CSS-n1n04r8w";
+var NO_SHRINK_CSS = "gx-Menu-NO_SHRINK_CSS-n1dkclye";
 /** A section of rows. */
 var GroupRoot = /*#__PURE__*/ styled("div")({
 	name: "GroupRoot",
-	class: "gx-Menu-GroupRoot-gwavq3l",
+	class: "gx-Menu-GroupRoot-g1wbdfpl",
 	propsAsIs: false
 });
 /** The section heading. */
 var GroupLabel = /*#__PURE__*/ styled("div")({
 	name: "GroupLabel",
-	class: "gx-Menu-GroupLabel-g1dkclye",
+	class: "gx-Menu-GroupLabel-g1e1rrjq",
 	propsAsIs: false
 });
 /** While a term is set, a section with no row left disappears (a structural role selector). */
-var GROUP_FILTERED_CSS = "gx-Menu-GROUP_FILTERED_CSS-g1wbdfpl";
+var GROUP_FILTERED_CSS = "gx-Menu-GROUP_FILTERED_CSS-g28zrrg";
 /** The separator wrapper (`role="none"`; the `<hr>` inside is the separator). */
 var SeparatorRoot = /*#__PURE__*/ styled("div")({
 	name: "SeparatorRoot",
-	class: "gx-Menu-SeparatorRoot-s1e1rrjq",
+	class: "gx-Menu-SeparatorRoot-s1c0ylq3",
 	propsAsIs: false
 });
 /** Space above and below a separator's rule. */
-var SEPARATOR_CSS = "gx-Menu-SEPARATOR_CSS-s28zrrg";
+var SEPARATOR_CSS = "gx-Menu-SEPARATOR_CSS-sd934y5";
 var MenuRootContext = createContext(null);
 var MenuContext = createContext(null);
 /** The context for a part; throws outside a menu. */
@@ -447,7 +454,7 @@ function MenuList({ children, menuAttributes, className }) {
 		children: /* @__PURE__ */ jsx(List, {
 			...menuAttributes,
 			ref: setListRef,
-			className,
+			className: cx(depth === 0 && root.shouldMatchTriggerWidth && LIST_MATCH_TRIGGER_WIDTH_CSS, className),
 			onKeyDown: handleKeyDown,
 			onFocus: handleFocus,
 			onPointerEnter: handlePointerEnter,
@@ -891,7 +898,7 @@ function MenuSearchBody({ children, listId, triggerId, ariaLabel }) {
 * @internal Shared by Menu and ContextMenu; apps use those. The menu engine: a Popover in `MENU`
 * role (or `DIALOG` around a search field) holding the rows, opened by `popoverTrigger`.
 */
-var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM", variant: variantProp, placement = Placement.BOTTOM_START, isSearchable = false, isOpen, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, popoverTrigger, id, className, style, ...rest }, ref) {
+var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM", variant: variantProp, placement = Placement.BOTTOM_START, isSearchable = false, shouldMatchTriggerWidth = false, isOpen, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, popoverTrigger, id, className, style, ...rest }, ref) {
 	const variant = variantProp ?? "BASE";
 	const { isOpen: isOpenState, setOpen } = useControlledOpenState({
 		isOpen,
@@ -913,11 +920,14 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 	const triggerId = typeof triggerProps.id === "string" ? triggerProps.id : generatedTriggerId;
 	const closeTree = useCallback(() => setOpen(false), [setOpen]);
 	const term = isSearchable ? normalizeSearchTerm(rawTerm) : "";
+	const isMatchingTriggerWidth = shouldMatchTriggerWidth && popoverTrigger !== PopoverTrigger.CONTEXT_MENU;
+	const panelClassName = isMatchingTriggerWidth ? cx(PANEL_MATCH_TRIGGER_WIDTH_CSS, className) : className;
 	const rootValue = useMemo(() => ({
 		size,
 		variant,
 		term,
 		isSearchable,
+		shouldMatchTriggerWidth: isMatchingTriggerWidth,
 		closeTree,
 		search: isSearchable ? {
 			inputRef,
@@ -931,6 +941,7 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 		variant,
 		term,
 		isSearchable,
+		isMatchingTriggerWidth,
 		closeTree,
 		rawTerm
 	]);
@@ -973,12 +984,13 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 			role: isSearchable ? PopoverRole.DIALOG : PopoverRole.MENU,
 			variant: MENU_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
 			placement,
+			shouldMatchTriggerWidth: isMatchingTriggerWidth,
 			isOpen: isOpenState,
 			onOpenChange: setOpen,
 			isDisabled,
 			...ariaLabel === void 0 ? {} : { ariaLabel },
 			...id === void 0 ? {} : { id },
-			...className === void 0 ? {} : { className },
+			...panelClassName === void 0 ? {} : { className: panelClassName },
 			...style === void 0 ? {} : { style },
 			body,
 			children: triggerClone

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,