@yahoo/uds 3.131.0 → 3.132.0

package/dist/components/client/Input/Input.js

@@ -13,7 +13,7 @@ import { isFunction } from "lodash-es";
 import { useReducedMotion } from "motion/react";
 
 //#region src/components/client/Input/Input.tsx
-const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, ...rest }) {
+const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ jsx(Box, {
 		spacingTop,
@@ -23,6 +23,10 @@ const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helper
 			startIcon: helperTextIcon,
 			size,
 			isFilled,
+			slotProps: {
+				startIcon: helperTextSlotProps?.helperTextIcon,
+				text: helperTextSlotProps?.helperText
+			},
 			children: isFunction(helpText) ? helpText() : helpText
 		})
 	});
@@ -144,6 +148,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 				className: classNames.label,
 				children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: uid,
+					...slotProps?.label,
 					children: isFunction(label) ? label() : label
 				}), required && /* @__PURE__ */ jsx("span", {
 					className: classNames.labelRequired,
@@ -196,7 +201,8 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 					spacingTop: "2",
 					size,
 					isFilled: !!value,
-					helperTextIcon
+					helperTextIcon,
+					helperTextSlotProps: slotProps
 				})
 			})
 		]

package/dist/components/client/Input/InputHelpTextInternal.cjs

@@ -9,7 +9,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
+const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, slotProps, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: require_styles_styler.cx(require_styles_styler.getStyles({
@@ -23,6 +23,9 @@ const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextIntern
 			inputVariantValueHelperIcon: !isFilled ? "empty" : "filled"
 		})
 	};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const props = {
 		...defaultIconProps,
 		...iconProps
@@ -36,18 +39,25 @@ const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextIntern
 			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: startIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...startIconSlotProps
+				},
+				className: require_styles_styler.cx(classNames.helperIcon, startIconClassName)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: classNames.helperText,
+				className: require_styles_styler.cx(classNames.helperText, textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: endIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...endIconSlotProps
+				},
+				className: require_styles_styler.cx(classNames.helperIcon, endIconClassName)
 			})
 		]
 	});

package/dist/components/client/Input/InputHelpTextInternal.d.cts

@@ -1,5 +1,6 @@
 
 import { UniversalIconSlot } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { IconProps } from "../../Icon.cjs";
 import { InputProps } from "./Input.cjs";
@@ -7,6 +8,9 @@ import * as react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface InputHelpTextInternalProps extends PropsWithChildren {
   /** Icon to render at the start of the content */
   startIcon?: UniversalIconSlot;
@@ -19,6 +23,12 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   iconProps?: Pick<IconProps, 'color' | 'size' | 'variant'>;
   size?: InputProps['size'];
   isFilled?: boolean;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
 }
 declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/client/Input/InputHelpTextInternal.d.ts

@@ -1,6 +1,7 @@
 
 "use client";
 import { UniversalIconSlot } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { IconProps } from "../../Icon.js";
 import { InputProps } from "./Input.js";
@@ -8,6 +9,9 @@ import * as react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface InputHelpTextInternalProps extends PropsWithChildren {
   /** Icon to render at the start of the content */
   startIcon?: UniversalIconSlot;
@@ -20,6 +24,12 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   iconProps?: Pick<IconProps, 'color' | 'size' | 'variant'>;
   size?: InputProps['size'];
   isFilled?: boolean;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
 }
 declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/client/Input/InputHelpTextInternal.js

@@ -7,7 +7,7 @@ import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
+const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, slotProps, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: cx(getStyles({
@@ -21,6 +21,9 @@ const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startI
 			inputVariantValueHelperIcon: !isFilled ? "empty" : "filled"
 		})
 	};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const props = {
 		...defaultIconProps,
 		...iconProps
@@ -34,18 +37,25 @@ const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startI
 			startIcon && /* @__PURE__ */ jsx(IconSlot, {
 				icon: startIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...startIconSlotProps
+				},
+				className: cx(classNames.helperIcon, startIconClassName)
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: classNames.helperText,
+				className: cx(classNames.helperText, textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ jsx(IconSlot, {
 				icon: endIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...endIconSlotProps
+				},
+				className: cx(classNames.helperIcon, endIconClassName)
 			})
 		]
 	});

package/dist/components/client/Menu/Menu.Content.cjs

@@ -94,7 +94,7 @@ const useMenuAnimationVariants = (placement) => {
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
+const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, slotProps, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
 	const context = (0, _ariakit_react_menu.useMenuContext)();
 	const open = (0, _ariakit_react.useStoreState)(context, "open");
 	const mounted = (0, _ariakit_react.useStoreState)(context, "mounted");
@@ -146,6 +146,7 @@ const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default
 				nestedBorderRadiusSpacing,
 				nestedBorderRadiusWidth,
 				className: classNames.root,
+				...slotProps?.root,
 				children
 			})
 		})

package/dist/components/client/Menu/Menu.Content.d.cts

@@ -6,6 +6,9 @@ import * as react from "react";
 import { MenuProps } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Content.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
   /**
    * Controls spacing-related properties (border radius, border width, shadow, spacing, gap)
@@ -18,6 +21,10 @@ interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
    */
   variant?: 'default';
   gutter?: SpacingAlias;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+  };
   /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
    *  If you need to disable this, set this prop to true.
    *

package/dist/components/client/Menu/Menu.Content.d.ts

@@ -7,6 +7,9 @@ import * as react from "react";
 import { MenuProps } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Content.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
   /**
    * Controls spacing-related properties (border radius, border width, shadow, spacing, gap)
@@ -19,6 +22,10 @@ interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
    */
   variant?: 'default';
   gutter?: SpacingAlias;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+  };
   /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
    *  If you need to disable this, set this prop to true.
    *

package/dist/components/client/Menu/Menu.Content.js

@@ -92,7 +92,7 @@ const useMenuAnimationVariants = (placement) => {
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuContent = forwardRef(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
+const MenuContent = forwardRef(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, slotProps, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
 	const context = useMenuContext();
 	const open = useStoreState(context, "open");
 	const mounted = useStoreState(context, "mounted");
@@ -144,6 +144,7 @@ const MenuContent = forwardRef(function MenuContent({ size = "default", variant
 				nestedBorderRadiusSpacing,
 				nestedBorderRadiusWidth,
 				className: classNames.root,
+				...slotProps?.root,
 				children
 			})
 		})

package/dist/components/client/Menu/Menu.Divider.cjs

@@ -47,14 +47,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
 **/
 const MenuDivider = (0, react.forwardRef)(function MenuDivider({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
-	const layerClassNames = {
-		root: require_styles_styler.getStyles({
-			menuitemDividerVariantRoot: "default",
-			className
-		}),
-		text: require_styles_styler.getStyles({ menuitemDividerVariantText: "default" }),
-		line: require_styles_styler.getStyles({ menuitemDividerVariantLine: "default" })
-	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
 		ref,
 		role,
@@ -63,8 +55,14 @@ const MenuDivider = (0, react.forwardRef)(function MenuDivider({ role = "separat
 		gap,
 		spacingVertical,
 		spacingHorizontal,
-		className: layerClassNames.root,
-		layerClassNames,
+		slotProps: {
+			root: { className: require_styles_styler.getStyles({
+				menuitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: require_styles_styler.getStyles({ menuitemDividerVariantText: "default" }) },
+			line: { className: require_styles_styler.getStyles({ menuitemDividerVariantLine: "default" }) }
+		},
 		...props,
 		children
 	});

package/dist/components/client/Menu/Menu.Divider.js

@@ -45,14 +45,6 @@ import { jsx } from "react/jsx-runtime";
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
 **/
 const MenuDivider = forwardRef(function MenuDivider({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
-	const layerClassNames = {
-		root: getStyles({
-			menuitemDividerVariantRoot: "default",
-			className
-		}),
-		text: getStyles({ menuitemDividerVariantText: "default" }),
-		line: getStyles({ menuitemDividerVariantLine: "default" })
-	};
 	return /* @__PURE__ */ jsx(DividerInternal, {
 		ref,
 		role,
@@ -61,8 +53,14 @@ const MenuDivider = forwardRef(function MenuDivider({ role = "separator", conten
 		gap,
 		spacingVertical,
 		spacingHorizontal,
-		className: layerClassNames.root,
-		layerClassNames,
+		slotProps: {
+			root: { className: getStyles({
+				menuitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: getStyles({ menuitemDividerVariantText: "default" }) },
+			line: { className: getStyles({ menuitemDividerVariantLine: "default" }) }
+		},
 		...props,
 		children
 	});

package/dist/components/client/Menu/Menu.Item.cjs

@@ -52,24 +52,33 @@ let _ariakit_react_menu = require("@ariakit/react/menu");
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuItem = (0, react.forwardRef)(function MenuItem({ active, hideOnClick, ...props }, ref) {
+const MenuItem = (0, react.forwardRef)(function MenuItem({ active, hideOnClick, slotProps, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
 		ref,
 		as: _ariakit_react_menu.MenuItem,
 		active,
-		layerClassNames: {
-			root: require_styles_styler.getStyles({
-				menuitemItemVariantRoot: "default",
-				menuitemItemVariantActiveRoot: active ? "on" : "off"
-			}),
-			text: require_styles_styler.getStyles({
-				menuitemItemVariantText: "default",
-				menuitemItemVariantActiveText: active ? "on" : "off"
-			}),
-			startIcon: require_styles_styler.getStyles({
-				menuitemItemVariantIcon: "default",
-				menuitemItemVariantActiveIcon: active ? "on" : "off"
-			})
+		slotProps: {
+			root: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantRoot: "default",
+					menuitemItemVariantActiveRoot: active ? "on" : "off"
+				}), slotProps?.root?.className),
+				...slotProps?.root
+			},
+			text: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantText: "default",
+					menuitemItemVariantActiveText: active ? "on" : "off"
+				}), slotProps?.text?.className),
+				...slotProps?.text
+			},
+			startIcon: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantIcon: "default",
+					menuitemItemVariantActiveIcon: active ? "on" : "off"
+				}), slotProps?.startIcon?.className),
+				...slotProps?.startIcon
+			}
 		},
 		rootProps: { hideOnClick },
 		...props

package/dist/components/client/Menu/Menu.Item.d.cts

@@ -1,5 +1,6 @@
 
 import { UniversalMenuItemProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { PressableProps } from "../Pressable.cjs";
 import * as react from "react";
@@ -7,6 +8,9 @@ import { AriaRole } from "react";
 import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Item.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
   /**
    * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
@@ -30,6 +34,13 @@ interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalM
    * @default 'menuitem'
    */
   role?: AriaRole;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
 }
 /**
  * **📋 A Menu Item component for navigation and actions**

package/dist/components/client/Menu/Menu.Item.d.ts

@@ -1,6 +1,7 @@
 
 "use client";
 import { UniversalMenuItemProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { PressableProps } from "../Pressable.js";
 import * as react from "react";
@@ -8,6 +9,9 @@ import { AriaRole } from "react";
 import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Item.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
   /**
    * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
@@ -31,6 +35,13 @@ interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalM
    * @default 'menuitem'
    */
   role?: AriaRole;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
 }
 /**
  * **📋 A Menu Item component for navigation and actions**

package/dist/components/client/Menu/Menu.Item.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
-import { getStyles } from "../../../styles/styler.js";
+import { cx, getStyles } from "../../../styles/styler.js";
 import { MenuItemBase } from "./Menu.ItemBase.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -50,24 +50,33 @@ import { MenuItem as MenuItem$1 } from "@ariakit/react/menu";
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuItem = forwardRef(function MenuItem({ active, hideOnClick, ...props }, ref) {
+const MenuItem = forwardRef(function MenuItem({ active, hideOnClick, slotProps, ...props }, ref) {
 	return /* @__PURE__ */ jsx(MenuItemBase, {
 		ref,
 		as: MenuItem$1,
 		active,
-		layerClassNames: {
-			root: getStyles({
-				menuitemItemVariantRoot: "default",
-				menuitemItemVariantActiveRoot: active ? "on" : "off"
-			}),
-			text: getStyles({
-				menuitemItemVariantText: "default",
-				menuitemItemVariantActiveText: active ? "on" : "off"
-			}),
-			startIcon: getStyles({
-				menuitemItemVariantIcon: "default",
-				menuitemItemVariantActiveIcon: active ? "on" : "off"
-			})
+		slotProps: {
+			root: {
+				className: cx(getStyles({
+					menuitemItemVariantRoot: "default",
+					menuitemItemVariantActiveRoot: active ? "on" : "off"
+				}), slotProps?.root?.className),
+				...slotProps?.root
+			},
+			text: {
+				className: cx(getStyles({
+					menuitemItemVariantText: "default",
+					menuitemItemVariantActiveText: active ? "on" : "off"
+				}), slotProps?.text?.className),
+				...slotProps?.text
+			},
+			startIcon: {
+				className: cx(getStyles({
+					menuitemItemVariantIcon: "default",
+					menuitemItemVariantActiveIcon: active ? "on" : "off"
+				}), slotProps?.startIcon?.className),
+				...slotProps?.startIcon
+			}
 		},
 		rootProps: { hideOnClick },
 		...props

package/dist/components/client/Menu/Menu.ItemBase.cjs

@@ -30,18 +30,22 @@ const buildMenuItemClasses = ({ active, disabled, className }) => {
 * @private This is an internal component shared by [Menu.Item](https://uds.build/docs/components/menu#menu-item) and [Menu.ItemCheckbox](https://uds.build/docs/components/menu#menu-item-checkbox)
 * and may change without notice. Please do not use this component directly.
 */
-const MenuItemBase = (0, react.forwardRef)(function MenuItemBase({ spacing = "0", spacingBottom, spacingEnd, spacingHorizontal = "4", spacingStart, spacingTop, spacingVertical = "3.5", columnGap = "2", className, children, endIcon, startIcon, hideEndIcon, active, disabled, as: RootComponent, name, alignItems = "center", justifyContent = "space-between", layerClassNames, slots, rootProps, ...props }, ref) {
+const MenuItemBase = (0, react.forwardRef)(function MenuItemBase({ spacing = "0", spacingBottom, spacingEnd, spacingHorizontal = "4", spacingStart, spacingTop, spacingVertical = "3.5", columnGap = "2", className, children, endIcon, startIcon, hideEndIcon, active, disabled, as: RootComponent, name, alignItems = "center", justifyContent = "space-between", slotProps, slots, rootProps, ...props }, ref) {
 	const hasMultipleChildren = react.Children.count(children) > 1;
 	const menuItemClassName = buildMenuItemClasses({
 		active,
 		disabled,
 		className
 	});
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
 	/**
 	* Get content styles based on children layout needs
 	*/
 	const contentStyles = require_styles_styler.getStyles({
-		className: require_styles_styler.cx(`${ITEM_CLASS_NAME}-content truncate`, layerClassNames?.text),
+		className: require_styles_styler.cx(`${ITEM_CLASS_NAME}-content truncate`, textClassName),
 		textAlign: "start",
 		...hasMultipleChildren && {
 			columnGap,
@@ -68,23 +72,23 @@ const MenuItemBase = (0, react.forwardRef)(function MenuItemBase({ spacing = "0"
 			columnGap,
 			alignItems,
 			justifyContent,
-			className: require_styles_styler.cx(menuItemClassName, layerClassNames?.root)
+			className: require_styles_styler.cx(menuItemClassName, rootClassName)
 		}),
 		startIcon: require_styles_styler.getStyles({
 			menuitemSizeStartIcon: "default",
-			className: layerClassNames?.startIcon
+			className: startIconClassName
 		}),
 		endIcon: require_styles_styler.getStyles({
 			menuitemSizeEndIcon: "default",
-			className: layerClassNames?.endIcon
+			className: endIconClassName
 		})
 	}), [
 		alignItems,
 		columnGap,
 		justifyContent,
-		layerClassNames?.endIcon,
-		layerClassNames?.root,
-		layerClassNames?.startIcon,
+		endIconClassName,
+		rootClassName,
+		startIconClassName,
 		menuItemClassName,
 		spacing,
 		spacingBottom,
@@ -109,6 +113,7 @@ const MenuItemBase = (0, react.forwardRef)(function MenuItemBase({ spacing = "0"
 		render: rootRender,
 		disabled,
 		className: classNames.root,
+		...rootSlotProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
 			gap: columnGap,
 			alignItems: "center",
@@ -127,12 +132,15 @@ const MenuItemBase = (0, react.forwardRef)(function MenuItemBase({ spacing = "0"
 						iconProps: {
 							size: "sm",
 							variant: active ? "fill" : "outline",
-							color: "current"
+							color: "current",
+							...endIconSlotProps,
+							...startIconSlotProps
 						}
 					})
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: contentStyles,
+				...textSlotProps,
 				children
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {

package/dist/components/client/Menu/Menu.ItemBase.d.cts

@@ -1,5 +1,6 @@
 
 import { UniversalMenuItemProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { PressableProps } from "../Pressable.cjs";
 import * as react from "react";
@@ -7,6 +8,9 @@ import { MenuItem, MenuItemCheckbox } from "@ariakit/react";
 
 //#region src/components/client/Menu/Menu.ItemBase.d.ts
 type MenuItemRootComponent = typeof MenuItem | typeof MenuItemCheckbox;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuItemBaseProps extends Omit<PressableProps, 'asChild'>, UniversalMenuItemProps {
   /** Whether to show the end icon */
   hideEndIcon?: boolean;
@@ -15,11 +19,11 @@ interface MenuItemBaseProps extends Omit<PressableProps, 'asChild'>, UniversalMe
   /** Additional props to pass to the root component */
   rootProps?: Record<string, unknown>;
   /** Internal overrides for downstream components. */
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    startIcon?: string;
-    endIcon?: string;
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
 }
 declare const ITEM_CLASS_NAME = "uds-menu-item";