@yahoo/uds 3.131.0 → 3.132.0

package/dist/components/client/Menu/Menu.ItemBase.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 { 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;
@@ -16,11 +20,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";

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

@@ -28,18 +28,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 = 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 = 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 = 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 = getStyles({
-		className: cx(`${ITEM_CLASS_NAME}-content truncate`, layerClassNames?.text),
+		className: cx(`${ITEM_CLASS_NAME}-content truncate`, textClassName),
 		textAlign: "start",
 		...hasMultipleChildren && {
 			columnGap,
@@ -66,23 +70,23 @@ const MenuItemBase = forwardRef(function MenuItemBase({ spacing = "0", spacingBo
 			columnGap,
 			alignItems,
 			justifyContent,
-			className: cx(menuItemClassName, layerClassNames?.root)
+			className: cx(menuItemClassName, rootClassName)
 		}),
 		startIcon: getStyles({
 			menuitemSizeStartIcon: "default",
-			className: layerClassNames?.startIcon
+			className: startIconClassName
 		}),
 		endIcon: getStyles({
 			menuitemSizeEndIcon: "default",
-			className: layerClassNames?.endIcon
+			className: endIconClassName
 		})
 	}), [
 		alignItems,
 		columnGap,
 		justifyContent,
-		layerClassNames?.endIcon,
-		layerClassNames?.root,
-		layerClassNames?.startIcon,
+		endIconClassName,
+		rootClassName,
+		startIconClassName,
 		menuItemClassName,
 		spacing,
 		spacingBottom,
@@ -107,6 +111,7 @@ const MenuItemBase = forwardRef(function MenuItemBase({ spacing = "0", spacingBo
 		render: rootRender,
 		disabled,
 		className: classNames.root,
+		...rootSlotProps,
 		children: [/* @__PURE__ */ jsxs(HStack, {
 			gap: columnGap,
 			alignItems: "center",
@@ -125,12 +130,15 @@ const MenuItemBase = forwardRef(function MenuItemBase({ spacing = "0", spacingBo
 						iconProps: {
 							size: "sm",
 							variant: active ? "fill" : "outline",
-							color: "current"
+							color: "current",
+							...endIconSlotProps,
+							...startIconSlotProps
 						}
 					})
 				})
 			}), /* @__PURE__ */ jsx("span", {
 				className: contentStyles,
+				...textSlotProps,
 				children
 			})]
 		}), /* @__PURE__ */ jsx(AnimatePresence, {

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

@@ -97,23 +97,23 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
 		context,
 		checked
 	]);
-	const layerClassNames = {
-		root: require_styles_styler.getStyles({
+	const menuSlotProps = {
+		root: { className: require_styles_styler.getStyles({
 			menuitemItemCheckboxVariantRoot: "default",
 			menuitemItemCheckboxVariantActiveRoot: isChecked ? "on" : "off"
-		}),
-		text: require_styles_styler.getStyles({
+		}) },
+		text: { className: require_styles_styler.getStyles({
 			menuitemItemCheckboxVariantText: "default",
 			menuitemItemCheckboxVariantActiveText: isChecked ? "on" : "off"
-		}),
-		startIcon: require_styles_styler.getStyles({
+		}) },
+		startIcon: { className: require_styles_styler.getStyles({
 			menuitemItemCheckboxVariantStartIcon: "default",
 			menuitemItemCheckboxVariantActiveStartIcon: isChecked ? "on" : "off"
-		}),
-		endIcon: require_styles_styler.getStyles({
+		}) },
+		endIcon: { className: require_styles_styler.getStyles({
 			menuitemItemCheckboxVariantEndIcon: "default",
 			menuitemItemCheckboxVariantActiveEndIcon: isChecked ? "on" : "off"
-		})
+		}) }
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
 		ref,
@@ -122,7 +122,7 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
 		endIcon,
 		active: isChecked,
 		className: require_styles_styler.cx("uds-menu-item-checkbox", className),
-		layerClassNames,
+		slotProps: menuSlotProps,
 		name,
 		rootProps: {
 			onChange: handleChange,

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

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

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

@@ -89,6 +89,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

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

@@ -95,23 +95,23 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
 		context,
 		checked
 	]);
-	const layerClassNames = {
-		root: getStyles({
+	const menuSlotProps = {
+		root: { className: getStyles({
 			menuitemItemCheckboxVariantRoot: "default",
 			menuitemItemCheckboxVariantActiveRoot: isChecked ? "on" : "off"
-		}),
-		text: getStyles({
+		}) },
+		text: { className: getStyles({
 			menuitemItemCheckboxVariantText: "default",
 			menuitemItemCheckboxVariantActiveText: isChecked ? "on" : "off"
-		}),
-		startIcon: getStyles({
+		}) },
+		startIcon: { className: getStyles({
 			menuitemItemCheckboxVariantStartIcon: "default",
 			menuitemItemCheckboxVariantActiveStartIcon: isChecked ? "on" : "off"
-		}),
-		endIcon: getStyles({
+		}) },
+		endIcon: { className: getStyles({
 			menuitemItemCheckboxVariantEndIcon: "default",
 			menuitemItemCheckboxVariantActiveEndIcon: isChecked ? "on" : "off"
-		})
+		}) }
 	};
 	return /* @__PURE__ */ jsx(MenuItemBase, {
 		ref,
@@ -120,7 +120,7 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
 		endIcon,
 		active: isChecked,
 		className: cx("uds-menu-item-checkbox", className),
-		layerClassNames,
+		slotProps: menuSlotProps,
 		name,
 		rootProps: {
 			onChange: handleChange,

package/dist/components/client/Popover/PopoverContent.cjs

@@ -104,6 +104,7 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 		},
 		ref: mergedRef,
 		className: classNames.root,
+		...slotProps?.root,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,
 		updatePosition: onPositionUpdate,
@@ -135,6 +136,7 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 				...svgFloatingContentProps,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 					className: require_styles_styler.cx(classNames.contentWrapper),
+					...slotProps?.content,
 					style: { paddingInlineEnd: internalContext?.hideDismissButton || disableHorizontalSpacing ? void 0 : require_index.spacingMap[gap] + require_index.spacingMap[spacingHorizontal] + dismissButtonSize },
 					children
 				})
@@ -161,7 +163,8 @@ const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children,
 			!internalContext?.hideArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverArrow, {
 				size: 1,
 				ref: arrowRef,
-				style: { opacity: 0 }
+				style: { opacity: 0 },
+				...slotProps?.caret
 			})
 		]
 	});

package/dist/components/client/Popover/PopoverContent.d.cts

@@ -11,6 +11,9 @@ type DataAttributes = {
 };
 interface PopoverContentProps extends UniversalPopoverContentProps {
   slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    caret?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
     closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
     closeIconContainer?: Partial<PressableProps & DataAttributes>;
     svgBase?: {

package/dist/components/client/Popover/PopoverContent.d.ts

@@ -12,6 +12,9 @@ type DataAttributes = {
 };
 interface PopoverContentProps extends UniversalPopoverContentProps {
   slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    caret?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
     closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
     closeIconContainer?: Partial<PressableProps & DataAttributes>;
     svgBase?: {

package/dist/components/client/Popover/PopoverContent.js

@@ -102,6 +102,7 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 		},
 		ref: mergedRef,
 		className: classNames.root,
+		...slotProps?.root,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,
 		updatePosition: onPositionUpdate,
@@ -133,6 +134,7 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 				...svgFloatingContentProps,
 				children: /* @__PURE__ */ jsx(Box, {
 					className: cx(classNames.contentWrapper),
+					...slotProps?.content,
 					style: { paddingInlineEnd: internalContext?.hideDismissButton || disableHorizontalSpacing ? void 0 : spacingMap[gap] + spacingMap[spacingHorizontal] + dismissButtonSize },
 					children
 				})
@@ -159,7 +161,8 @@ const PopoverContent = forwardRef(function PopoverContent({ children, className,
 			!internalContext?.hideArrow && /* @__PURE__ */ jsx(PopoverArrow, {
 				size: 1,
 				ref: arrowRef,
-				style: { opacity: 0 }
+				style: { opacity: 0 },
+				...slotProps?.caret
 			})
 		]
 	});

package/dist/components/client/Radio/Radio.cjs

@@ -52,9 +52,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
+const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, ...radioProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = (0, react.useRef)(null);
 	/**
 	* State
@@ -125,15 +129,11 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			display: "flex",
 			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 			alignItems: "center",
-			className: require_styles_styler.cx([
-				{
-					"cursor-pointer": !disabled,
-					"cursor-default": disabled,
-					"opacity-50": disabled
-				},
-				className,
-				layerClassNames?.root
-			])
+			className: require_styles_styler.cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
 		}),
 		radio: require_styles_styler.getStyles({
 			radioSizeRadio: size,
@@ -145,8 +145,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 				"uds-ring-within",
 				cssAnimationDuration,
 				"transition-[background-color,border-color]",
-				"transition-shadow",
-				layerClassNames?.radio
+				"transition-shadow"
 			])
 		}),
 		radioCircle: require_styles_styler.getStyles({
@@ -162,7 +161,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			])
 		}),
 		htmlRadio: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? motion_react.m.label : motion_react.m.div;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
@@ -178,6 +177,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 				position: "relative",
 				borderRadius: "full",
@@ -187,6 +187,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 				className: classNames.radio,
 				animate: motionAnimate,
 				insetShadow: showShadow ? "lg-invert" : "none",
+				...radioSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "radio",
 					tabIndex: 0,
@@ -208,14 +209,16 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 					className: classNames.htmlRadio
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 					borderRadius: "full",
-					className: classNames.radioCircle
+					className: classNames.radioCircle,
+					...radioIconSlotProps
 				})]
 			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
 				as: "div",
 				variant: "inherit",
 				color: "inherit",
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Radio/Radio.d.cts

@@ -5,11 +5,16 @@ import React from "react";
 
 //#region src/components/client/Radio/Radio.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface RadioProps extends NativeInputProps, UniversalRadioProps {
-  layerClassNames?: {
-    root?: string;
-    radio?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const RADIO_VARIANTS: RadioVariant[];

package/dist/components/client/Radio/Radio.d.ts

@@ -6,11 +6,16 @@ import React from "react";
 
 //#region src/components/client/Radio/Radio.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface RadioProps extends NativeInputProps, UniversalRadioProps {
-  layerClassNames?: {
-    root?: string;
-    radio?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const RADIO_VARIANTS: RadioVariant[];

package/dist/components/client/Radio/Radio.js

@@ -49,9 +49,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
+const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, ...radioProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = useRef(null);
 	/**
 	* State
@@ -122,15 +126,11 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			display: "flex",
 			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 			alignItems: "center",
-			className: cx([
-				{
-					"cursor-pointer": !disabled,
-					"cursor-default": disabled,
-					"opacity-50": disabled
-				},
-				className,
-				layerClassNames?.root
-			])
+			className: cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
 		}),
 		radio: getStyles({
 			radioSizeRadio: size,
@@ -142,8 +142,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 				"uds-ring-within",
 				cssAnimationDuration,
 				"transition-[background-color,border-color]",
-				"transition-shadow",
-				layerClassNames?.radio
+				"transition-shadow"
 			])
 		}),
 		radioCircle: getStyles({
@@ -159,7 +158,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			])
 		}),
 		htmlRadio: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? m.label : m.div;
 	return /* @__PURE__ */ jsx(SpringMotionConfig, {
@@ -175,6 +174,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ jsxs(MotionBox, {
 				position: "relative",
 				borderRadius: "full",
@@ -184,6 +184,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 				className: classNames.radio,
 				animate: motionAnimate,
 				insetShadow: showShadow ? "lg-invert" : "none",
+				...radioSlotProps,
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					tabIndex: 0,
@@ -205,14 +206,16 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 					className: classNames.htmlRadio
 				}), /* @__PURE__ */ jsx(Box, {
 					borderRadius: "full",
-					className: classNames.radioCircle
+					className: classNames.radioCircle,
+					...radioIconSlotProps
 				})]
 			}), label && /* @__PURE__ */ jsx(FormLabel, {
 				as: "div",
 				variant: "inherit",
 				color: "inherit",
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Switch.cjs

@@ -46,9 +46,13 @@ const toggleTransition = {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, layerClassNames, ...switchProps }, parentRef) {
+const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, slotProps, ...switchProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const switchSlotProps = slotProps?.switch ?? {};
+	const handleSlotProps = slotProps?.handle ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = (0, react.useRef)(null);
 	/**
 	* State
@@ -117,7 +121,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				"cursor-pointer": !disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, layerClassNames?.root, className)
+			}, className)
 		}),
 		switch: require_styles_styler.getStyles({
 			switchVariantSwitch: "default",
@@ -126,11 +130,11 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			borderRadius: "full",
 			position: "relative",
 			alignItems: "center",
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
 		}),
 		handle: require_styles_styler.getStyles({
 			switchSizeHandle: size,
-			className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden", layerClassNames?.handle)
+			className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
 		}),
 		handleCircle: require_styles_styler.getStyles({
 			switchVariantActiveHandle: isOn ? "on" : "off",
@@ -144,7 +148,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
 		}),
 		htmlCheckbox: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? motion_react.m.label : motion_react.m.div;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
@@ -157,8 +161,10 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 				className: classNames.switch,
+				...switchSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
 					tabIndex: 0,
@@ -180,6 +186,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 					className: classNames.handle,
 					...motionInitialAndAnimate,
+					...handleSlotProps,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
 						onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
@@ -208,7 +215,8 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Switch.d.cts

@@ -5,12 +5,16 @@ import React from "react";
 
 //#region src/components/client/Switch.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    switch?: DataAttributes;
+    handle?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 /**

package/dist/components/client/Switch.d.ts

@@ -6,12 +6,16 @@ import React from "react";
 
 //#region src/components/client/Switch.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    switch?: DataAttributes;
+    handle?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 /**