@yahoo/uds 3.131.0 → 3.132.0

package/dist/components/Banner/Banner.cjs

@@ -75,7 +75,7 @@ function bindActionVariants(actions, bannerVariant) {
 *
 * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
 **/
-const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, slotProps, ...rest }, ref) {
 	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
 	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
 	const rootStyles = require_styles_styler.getStyles({
@@ -133,6 +133,7 @@ const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size
 		onClick: onDismiss,
 		className: dismissContainerStyles,
 		"data-testid": "banner-dismiss",
+		...slotProps?.dismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: _yahoo_uds_icons.Cross,
 			iconProps: {
@@ -150,13 +151,15 @@ const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size
 				icon: startIcon,
 				iconProps: { color: "inherit" },
 				className: require_styles_styler.cx(iconStyles, "shrink-0"),
-				"data-testid": "banner-start-icon"
+				"data-testid": "banner-start-icon",
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: require_styles_styler.cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
 				children: [contentArea, hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
 					"data-testid": "banner-actions",
+					...slotProps?.actions,
 					children: actions
 				})]
 			}),

package/dist/components/Banner/Banner.d.cts

@@ -5,9 +5,18 @@ import * as react from "react";
 
 //#region src/components/Banner/Banner.d.ts
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface BannerProps extends HtmlDivProps, UniversalBannerProps {
   /** Accessible label for the dismiss button. @default "Dismiss" */
   dismissAriaLabel?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: DataAttributes;
+    actions?: DataAttributes;
+    dismiss?: DataAttributes;
+  };
 }
 /**
  * **An inline notification banner for contextual messages with optional actions.**

package/dist/components/Banner/Banner.d.ts

@@ -5,9 +5,18 @@ import * as react from "react";
 
 //#region src/components/Banner/Banner.d.ts
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface BannerProps extends HtmlDivProps, UniversalBannerProps {
   /** Accessible label for the dismiss button. @default "Dismiss" */
   dismissAriaLabel?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: DataAttributes;
+    actions?: DataAttributes;
+    dismiss?: DataAttributes;
+  };
 }
 /**
  * **An inline notification banner for contextual messages with optional actions.**

package/dist/components/Banner/Banner.js

@@ -73,7 +73,7 @@ function bindActionVariants(actions, bannerVariant) {
 *
 * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
 **/
-const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, slotProps, ...rest }, ref) {
 	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
 	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
 	const rootStyles = getStyles({
@@ -131,6 +131,7 @@ const Banner = forwardRef(function Banner({ variant = "primary", size = "default
 		onClick: onDismiss,
 		className: dismissContainerStyles,
 		"data-testid": "banner-dismiss",
+		...slotProps?.dismiss,
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: Cross,
 			iconProps: {
@@ -148,13 +149,15 @@ const Banner = forwardRef(function Banner({ variant = "primary", size = "default
 				icon: startIcon,
 				iconProps: { color: "inherit" },
 				className: cx(iconStyles, "shrink-0"),
-				"data-testid": "banner-start-icon"
+				"data-testid": "banner-start-icon",
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
 				children: [contentArea, hasActions && /* @__PURE__ */ jsx("div", {
 					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
 					"data-testid": "banner-actions",
+					...slotProps?.actions,
 					children: actions
 				})]
 			}),

package/dist/components/Divider/Divider.d.cts

@@ -3,7 +3,7 @@ import { DividerInternalProps } from "./DividerInternal.cjs";
 import * as react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+type DividerProps = DividerInternalProps;
 /**
  * **📦 A divider component that can be used to visually separate components**
  *
@@ -34,6 +34,6 @@ type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
  *
  * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/Divider.d.ts

@@ -3,7 +3,7 @@ import { DividerInternalProps } from "./DividerInternal.js";
 import * as react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+type DividerProps = DividerInternalProps;
 /**
  * **📦 A divider component that can be used to visually separate components**
  *
@@ -34,6 +34,6 @@ type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
  *
  * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/DividerCore.cjs

@@ -14,19 +14,22 @@ const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
 	vertical: ""
 };
-const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, contentPosition = "center", className, layerClassNames, children, ...boxProps }, ref) {
+const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, contentPosition = "center", className, slotProps, children, ...boxProps }, ref) {
 	const direction = vertical ? "vertical" : "horizontal";
 	const InternalComponent = vertical ? require_components_VStack.VStack : require_components_HStack.HStack;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: labelClassName, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_styles_styler.cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
-		label: require_styles_styler.cx(layerClassNames?.text),
-		line: layerClassNames?.line
+		root: require_styles_styler.cx(ORIENTATION_WIDTH_MAP[direction], className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
 	}), [
 		className,
 		direction,
-		layerClassNames?.root,
-		layerClassNames?.text,
-		layerClassNames?.line
+		rootClassName,
+		labelClassName,
+		lineClassName
 	]);
 	const lineStyle = (0, react.useMemo)(() => direction === "vertical" ? {
 		borderTopWidth: 0,
@@ -39,8 +42,9 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 	}, [direction]);
 	const Line = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		flex: "1",
-		className: classNames.line,
-		style: lineStyle
+		className: require_styles_styler.cx(classNames.line, lineClassName),
+		style: lineStyle,
+		...lineSlotProps
 	});
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InternalComponent, {
 		flex: "1",
@@ -48,6 +52,7 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: [
 			contentPosition !== "start" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -56,7 +61,8 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 					as: "span",
 					color: "inherit",
 					variant: "inherit",
-					className: classNames.label,
+					className: require_styles_styler.cx(classNames.label, labelClassName),
+					...labelSlotProps,
 					children
 				})
 			}),
@@ -69,6 +75,7 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {})
 	});
 });

package/dist/components/Divider/DividerCore.d.cts

@@ -2,14 +2,20 @@
 import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.cjs";
 import "../../tokens/types.cjs";
 import { BoxProps } from "../Box.cjs";
+import { Text } from "../Text.cjs";
 import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    line?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<ComponentProps<typeof Text> & DataAttributes>;
+    line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
 declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/Divider/DividerCore.d.ts

@@ -2,14 +2,20 @@
 import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.js";
 import "../../tokens/types.js";
 import { BoxProps } from "../Box.js";
+import { Text } from "../Text.js";
 import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    line?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<ComponentProps<typeof Text> & DataAttributes>;
+    line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
 declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/Divider/DividerCore.js

@@ -12,19 +12,22 @@ const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
 	vertical: ""
 };
-const DividerCore = forwardRef(function Divider({ vertical = false, contentPosition = "center", className, layerClassNames, children, ...boxProps }, ref) {
+const DividerCore = forwardRef(function Divider({ vertical = false, contentPosition = "center", className, slotProps, children, ...boxProps }, ref) {
 	const direction = vertical ? "vertical" : "horizontal";
 	const InternalComponent = vertical ? VStack : HStack;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: labelClassName, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
 	const classNames = useMemo(() => ({
-		root: cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
-		label: cx(layerClassNames?.text),
-		line: layerClassNames?.line
+		root: cx(ORIENTATION_WIDTH_MAP[direction], className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
 	}), [
 		className,
 		direction,
-		layerClassNames?.root,
-		layerClassNames?.text,
-		layerClassNames?.line
+		rootClassName,
+		labelClassName,
+		lineClassName
 	]);
 	const lineStyle = useMemo(() => direction === "vertical" ? {
 		borderTopWidth: 0,
@@ -37,8 +40,9 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 	}, [direction]);
 	const Line = () => /* @__PURE__ */ jsx(Box, {
 		flex: "1",
-		className: classNames.line,
-		style: lineStyle
+		className: cx(classNames.line, lineClassName),
+		style: lineStyle,
+		...lineSlotProps
 	});
 	if (children) return /* @__PURE__ */ jsxs(InternalComponent, {
 		flex: "1",
@@ -46,6 +50,7 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: [
 			contentPosition !== "start" && /* @__PURE__ */ jsx(Line, {}),
 			/* @__PURE__ */ jsx(Box, {
@@ -54,7 +59,8 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 					as: "span",
 					color: "inherit",
 					variant: "inherit",
-					className: classNames.label,
+					className: cx(classNames.label, labelClassName),
+					...labelSlotProps,
 					children
 				})
 			}),
@@ -67,6 +73,7 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: /* @__PURE__ */ jsx(Line, {})
 	});
 });

package/dist/components/Divider/DividerInternal.cjs

@@ -7,19 +7,23 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Divider/DividerInternal.tsx
-const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "primary", layerClassNames, ...props }, ref) {
+const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerCore.DividerCore, {
 		ref,
-		layerClassNames: (0, react.useMemo)(() => ({
-			root: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantRoot: variant }), layerClassNames?.root),
-			text: require_styles_styler.cx(variant !== "inherit" ? require_styles_styler.getStyles({ dividerVariantLabel: variant }) : void 0, layerClassNames?.text),
-			line: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLine: variant }), layerClassNames?.line)
-		}), [
-			layerClassNames?.line,
-			layerClassNames?.root,
-			layerClassNames?.text,
-			variant
-		]),
+		slotProps: (0, react.useMemo)(() => ({
+			root: {
+				...slotProps?.root,
+				className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantRoot: variant }), slotProps?.root?.className)
+			},
+			label: {
+				...slotProps?.label,
+				className: require_styles_styler.cx(variant !== "inherit" ? require_styles_styler.getStyles({ dividerVariantLabel: variant }) : void 0, slotProps?.label?.className)
+			},
+			line: {
+				...slotProps?.line,
+				className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLine: variant }), slotProps?.line?.className)
+			}
+		}), [slotProps, variant]),
 		...props
 	});
 });

package/dist/components/Divider/DividerInternal.js

@@ -5,19 +5,23 @@ import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Divider/DividerInternal.tsx
-const DividerInternal = forwardRef(function Divider({ variant = "primary", layerClassNames, ...props }, ref) {
+const DividerInternal = forwardRef(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DividerCore, {
 		ref,
-		layerClassNames: useMemo(() => ({
-			root: cx(variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), layerClassNames?.root),
-			text: cx(variant !== "inherit" ? getStyles({ dividerVariantLabel: variant }) : void 0, layerClassNames?.text),
-			line: cx(variant !== "inherit" && getStyles({ dividerVariantLine: variant }), layerClassNames?.line)
-		}), [
-			layerClassNames?.line,
-			layerClassNames?.root,
-			layerClassNames?.text,
-			variant
-		]),
+		slotProps: useMemo(() => ({
+			root: {
+				...slotProps?.root,
+				className: cx(variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), slotProps?.root?.className)
+			},
+			label: {
+				...slotProps?.label,
+				className: cx(variant !== "inherit" ? getStyles({ dividerVariantLabel: variant }) : void 0, slotProps?.label?.className)
+			},
+			line: {
+				...slotProps?.line,
+				className: cx(variant !== "inherit" && getStyles({ dividerVariantLine: variant }), slotProps?.line?.className)
+			}
+		}), [slotProps, variant]),
 		...props
 	});
 });

package/dist/components/Link.cjs

@@ -35,7 +35,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
 *```
 **/
-const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, ...anchorProps }, ref) {
+const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, slotProps, ...anchorProps }, ref) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
 	const shouldSizeRelativeToContainingText = !textVariant;
 	const rootClasses = (0, react.useMemo)(() => {
 		return require_styles_styler.getStyles({
@@ -78,17 +80,22 @@ const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVar
 		...anchorProps,
 		children: [
 			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-				className: iconStartStyles,
+				className: require_styles_styler.cx(iconStartStyles, startIconClassName),
 				icon: startIcon,
 				iconProps,
-				"data-testid": "start-icon"
+				"data-testid": "start-icon",
+				...startIconSlotProps
 			}),
-			children,
+			slotProps?.text ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...slotProps.text,
+				children
+			}) : children,
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-				className: iconEndStyles,
+				className: require_styles_styler.cx(iconEndStyles, endIconClassName),
 				icon: endIcon,
 				iconProps,
-				"data-testid": "end-icon"
+				"data-testid": "end-icon",
+				...endIconSlotProps
 			})
 		]
 	});

package/dist/components/Link.d.cts

@@ -1,15 +1,25 @@
 
 import { UniversalLinkProps } from "../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../tokens/types.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 
 //#region src/components/Link.d.ts
 type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
   /** The link's destination. */
   href?: string;
   /** Anchor rel property. @default "noopener" **/
   rel?: string;
+  /** 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>;
+  };
 }
 /**
  * A Link provides navigation or actionable functionality by linking users to

package/dist/components/Link.d.ts

@@ -1,15 +1,25 @@
 
 import { UniversalLinkProps } from "../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../tokens/types.js";
 import "../tokens/index.js";
 import * as react from "react";
 
 //#region src/components/Link.d.ts
 type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
   /** The link's destination. */
   href?: string;
   /** Anchor rel property. @default "noopener" **/
   rel?: string;
+  /** 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>;
+  };
 }
 /**
  * A Link provides navigation or actionable functionality by linking users to

package/dist/components/Link.js

@@ -33,7 +33,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
 *```
 **/
-const Link = forwardRef(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, ...anchorProps }, ref) {
+const Link = forwardRef(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, slotProps, ...anchorProps }, ref) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
 	const shouldSizeRelativeToContainingText = !textVariant;
 	const rootClasses = useMemo(() => {
 		return getStyles({
@@ -76,17 +78,22 @@ const Link = forwardRef(function Input({ variant = "primary", textVariant, start
 		...anchorProps,
 		children: [
 			startIcon && /* @__PURE__ */ jsx(IconSlot, {
-				className: iconStartStyles,
+				className: cx(iconStartStyles, startIconClassName),
 				icon: startIcon,
 				iconProps,
-				"data-testid": "start-icon"
+				"data-testid": "start-icon",
+				...startIconSlotProps
 			}),
-			children,
+			slotProps?.text ? /* @__PURE__ */ jsx("span", {
+				...slotProps.text,
+				children
+			}) : children,
 			endIcon && /* @__PURE__ */ jsx(IconSlot, {
-				className: iconEndStyles,
+				className: cx(iconEndStyles, endIconClassName),
 				icon: endIcon,
 				iconProps,
-				"data-testid": "end-icon"
+				"data-testid": "end-icon",
+				...endIconSlotProps
 			})
 		]
 	});

package/dist/components/client/Badge.cjs

@@ -40,7 +40,10 @@ const MAX_WIDTH_DEFAULT = 200;
 *
 * @related [Chip](https://uds.build/docs/components/chip).
 **/
-const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, ...rest }, ref) {
+const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, slotProps, ...rest }, ref) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const rootStyles = require_styles_styler.getStyles({
 		badgeSizeRoot: size,
 		badgeVariantRoot: variant,
@@ -86,17 +89,20 @@ const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size =
 				icon: startIcon,
 				iconProps,
 				"data-testid": "start-icon",
-				className: iconStyles
+				className: require_styles_styler.cx(iconStyles, startIconClassName),
+				...startIconSlotProps
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex-1 truncate whitespace-nowrap text-center",
+				className: require_styles_styler.cx("flex-1 truncate whitespace-nowrap text-center", textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: endIcon,
 				iconProps,
 				"data-testid": "end-icon",
-				className: iconStyles
+				className: require_styles_styler.cx(iconStyles, endIconClassName),
+				...endIconSlotProps
 			})
 		]
 	});

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

@@ -1,11 +1,22 @@
 
 import { UniversalBadgeProps } from "../../types/dist/index.cjs";
 import "../../tokens/index.cjs";
+import { IconSlotProps } from "../IconSlot.cjs";
 import React from "react";
 
 //#region src/components/client/Badge.d.ts
 type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconSlotProps & DataAttributes>;
+    endIcon?: Partial<IconSlotProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ A badge.
  *

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

@@ -2,11 +2,22 @@
 "use client";
 import { UniversalBadgeProps } from "../../types/dist/index.js";
 import "../../tokens/index.js";
+import { IconSlotProps } from "../IconSlot.js";
 import React from "react";
 
 //#region src/components/client/Badge.d.ts
 type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconSlotProps & DataAttributes>;
+    endIcon?: Partial<IconSlotProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ A badge.
  *