@yahoo/uds 3.131.0-beta.2 → 3.132.0

package/dist/components/Icon.js

@@ -1,9 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { cx, getStyles } from "../styles/styler.js";
 import { normalIconSizes } from "../tokens/configs/sizes.js";
-import { cloneElement, forwardRef, isValidElement } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { getIconMarkup, getIconVariants, isIconDefinition } from "@yahoo/uds-icons/utils";
 
 //#region src/components/Icon.tsx
 /**
@@ -35,10 +34,8 @@ import { getIconMarkup, getIconVariants, isIconDefinition } from "@yahoo/uds-ico
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
-const Icon = forwardRef(function BaseIcon({ name: iconName, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
-	const iconDefinition = isIconDefinition(iconName) ? iconName : void 0;
-	const iconComponent = typeof iconName === "function" ? iconName : void 0;
-	const availableVariants = iconDefinition ? getIconVariants(iconDefinition) : [];
+const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
+	const availableVariants = SVGIcon.metadata?.variants ?? [];
 	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
 	const isMulticolor = effectiveVariant === "multicolor";
 	const styles = getStyles({
@@ -47,14 +44,6 @@ const Icon = forwardRef(function BaseIcon({ name: iconName, size = "md", variant
 		className: cx(className, !isMulticolor && "[&_path]:fill-current")
 	});
 	const sizePx = normalIconSizes[size];
-	const renderedMarkup = iconDefinition ? getIconMarkup(iconDefinition, size, effectiveVariant) : null;
-	const renderedIcon = renderedMarkup ? null : isValidElement(iconName) ? cloneElement(iconName, {
-		size,
-		variant: effectiveVariant
-	}) : iconComponent ? iconComponent({
-		size,
-		variant: effectiveVariant
-	}) : null;
 	return /* @__PURE__ */ jsx("svg", {
 		ref,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -64,9 +53,11 @@ const Icon = forwardRef(function BaseIcon({ name: iconName, size = "md", variant
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
-		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: renderedIcon
+		children: /* @__PURE__ */ jsx(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
 	});
 });
 Icon.displayName = "Icon";

package/dist/components/IconSlot.cjs

@@ -6,12 +6,10 @@ const require_components_Icon = require('./Icon.cjs');
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 
 //#region src/components/IconSlot.tsx
-function isIconRenderOutput(icon) {
-	return (0, react.isValidElement)(icon) && (icon.type === react.default.Fragment || typeof icon.type === "string");
-}
 /**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
@@ -32,38 +30,21 @@ const IconSlot = (0, react.memo)(function IconSlot({ icon, iconProps, className:
 	if (!icon) return null;
 	const { className: iconPropsClassName, ...props } = iconProps || {};
 	const mergedClassName = require_styles_styler.cx(slotClassName, iconPropsClassName);
-	if ((0, _yahoo_uds_icons_utils.isIconDefinition)(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-		name: icon,
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+		name: svgIcon,
 		...props,
 		...rest,
 		className: mergedClassName
 	});
-	if (typeof icon === "function") {
+	if ((0, lodash_isFunction_js.default)(icon)) {
 		const iconEl = icon(iconProps || {});
-		if ((0, _yahoo_uds_icons_utils.isIconDefinition)(iconEl)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-			name: iconEl,
-			...props,
-			...rest,
-			className: mergedClassName
-		});
-		if (isIconRenderOutput(iconEl)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-			name: icon,
-			...props,
-			...rest,
-			className: mergedClassName
-		});
 		const elProps = iconEl?.props;
 		return (0, react.isValidElement)(iconEl) && (0, react.cloneElement)(iconEl, {
 			...rest,
 			className: require_styles_styler.cx(mergedClassName, elProps?.className)
 		});
 	}
-	if (isIconRenderOutput(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-		name: ((svgIconProps) => (0, react.cloneElement)(icon, svgIconProps)),
-		...props,
-		...rest,
-		className: mergedClassName
-	});
 	const elProps = icon.props;
 	return (0, react.isValidElement)(icon) && (0, react.cloneElement)(icon, {
 		...props,

package/dist/components/IconSlot.d.cts

@@ -1,14 +1,13 @@
 
-import { UniversalIconSlot } from "../types/src/index.cjs";
+import { UniversalIconSlot } from "../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../tokens/types.cjs";
 import "../tokens/index.cjs";
 import React from "react";
-import { IconDefinition } from "@yahoo/uds-icons/types";
 
 //#region src/components/IconSlot.d.ts
 interface IconSlotProps {
   /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
-  icon?: UniversalIconSlot<IconDefinition>;
+  icon?: UniversalIconSlot;
   /** Props to spread onto the icon. */
   iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
   className?: string;

package/dist/components/IconSlot.d.ts

@@ -1,14 +1,13 @@
 
-import { UniversalIconSlot } from "../types/src/index.js";
+import { UniversalIconSlot } from "../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../tokens/types.js";
 import "../tokens/index.js";
 import React from "react";
-import { IconDefinition } from "@yahoo/uds-icons/types";
 
 //#region src/components/IconSlot.d.ts
 interface IconSlotProps {
   /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
-  icon?: UniversalIconSlot<IconDefinition>;
+  icon?: UniversalIconSlot;
   /** Props to spread onto the icon. */
   iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
   className?: string;

package/dist/components/IconSlot.js

@@ -3,12 +3,9 @@ import { cx } from "../styles/styler.js";
 import { Icon } from "./Icon.js";
 import React, { cloneElement, isValidElement, memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isIconDefinition } from "@yahoo/uds-icons/utils";
+import { isFunction } from "lodash-es";
 
 //#region src/components/IconSlot.tsx
-function isIconRenderOutput(icon) {
-	return isValidElement(icon) && (icon.type === React.Fragment || typeof icon.type === "string");
-}
 /**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
@@ -29,38 +26,21 @@ const IconSlot = memo(function IconSlot({ icon, iconProps, className: slotClassN
 	if (!icon) return null;
 	const { className: iconPropsClassName, ...props } = iconProps || {};
 	const mergedClassName = cx(slotClassName, iconPropsClassName);
-	if (isIconDefinition(icon)) return /* @__PURE__ */ jsx(Icon, {
-		name: icon,
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ jsx(Icon, {
+		name: svgIcon,
 		...props,
 		...rest,
 		className: mergedClassName
 	});
-	if (typeof icon === "function") {
+	if (isFunction(icon)) {
 		const iconEl = icon(iconProps || {});
-		if (isIconDefinition(iconEl)) return /* @__PURE__ */ jsx(Icon, {
-			name: iconEl,
-			...props,
-			...rest,
-			className: mergedClassName
-		});
-		if (isIconRenderOutput(iconEl)) return /* @__PURE__ */ jsx(Icon, {
-			name: icon,
-			...props,
-			...rest,
-			className: mergedClassName
-		});
 		const elProps = iconEl?.props;
 		return isValidElement(iconEl) && cloneElement(iconEl, {
 			...rest,
 			className: cx(mergedClassName, elProps?.className)
 		});
 	}
-	if (isIconRenderOutput(icon)) return /* @__PURE__ */ jsx(Icon, {
-		name: ((svgIconProps) => cloneElement(icon, svgIconProps)),
-		...props,
-		...rest,
-		className: mergedClassName
-	});
 	const elProps = icon.props;
 	return isValidElement(icon) && cloneElement(icon, {
 		...props,

package/dist/components/Image.d.cts

@@ -1,5 +1,5 @@
 
-import { ImagePropsWithImgProps } from "../types/src/index.cjs";
+import { ImagePropsWithImgProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 

package/dist/components/Image.d.ts

@@ -1,5 +1,5 @@
 
-import { ImagePropsWithImgProps } from "../types/src/index.js";
+import { ImagePropsWithImgProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 

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/src/index.cjs";
+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/src/index.js";
+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/Text.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalTextProps } from "../types/src/index.cjs";
+import { UniversalTextProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 import { JSX, ReactNode, Ref } from "react";

package/dist/components/Text.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalTextProps } from "../types/src/index.js";
+import { UniversalTextProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 import { JSX, ReactNode, Ref } from "react";

package/dist/components/VStack.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.cjs";
+import { UniversalStackProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import { DivProps } from "./Box.cjs";
 import * as react from "react";

package/dist/components/VStack.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.js";
+import { UniversalStackProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import { DivProps } from "./Box.js";
 import * as react from "react";

package/dist/components/client/Avatar/AvatarIcon.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalAvatarIconProps } from "../../../types/src/index.cjs";
+import { UniversalAvatarIconProps } from "../../../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import * as react from "react";

package/dist/components/client/Avatar/AvatarIcon.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalAvatarIconProps } from "../../../types/src/index.js";
+import { UniversalAvatarIconProps } from "../../../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import * as react from "react";

package/dist/components/client/Avatar/AvatarImage.d.cts

@@ -1,5 +1,5 @@
 
-import { ImagePropsWithImgProps } from "../../../types/src/index.cjs";
+import { ImagePropsWithImgProps } from "../../../types/dist/index.cjs";
 import { UniversalAvatarImageProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { AvatarIconProps } from "./AvatarIcon.cjs";

package/dist/components/client/Avatar/AvatarImage.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { ImagePropsWithImgProps } from "../../../types/src/index.js";
+import { ImagePropsWithImgProps } from "../../../types/dist/index.js";
 import { UniversalAvatarImageProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { AvatarIconProps } from "./AvatarIcon.js";

package/dist/components/client/Avatar/AvatarText.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalAvatarTextProps } from "../../../types/src/index.cjs";
+import { UniversalAvatarTextProps } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import { TextProps } from "../../Text.cjs";
 import * as react from "react";

package/dist/components/client/Avatar/AvatarText.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalAvatarTextProps } from "../../../types/src/index.js";
+import { UniversalAvatarTextProps } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import { TextProps } from "../../Text.js";
 import * as react from "react";

package/dist/components/client/Avatar/utils.d.cts

@@ -1,5 +1,5 @@
 
-import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/src/index.cjs";
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import { getStyles } from "../../../styles/styler.cjs";
 

package/dist/components/client/Avatar/utils.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/src/index.js";
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import { getStyles } from "../../../styles/styler.js";
 

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/src/index.cjs";
+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

@@ -1,12 +1,23 @@
 
 "use client";
-import { UniversalBadgeProps } from "../../types/src/index.js";
+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.
  *

package/dist/components/client/Badge.js

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

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

@@ -1,5 +1,5 @@
 
-import { UniversalBottomSheetProps } from "../../../types/src/index.cjs";
+import { UniversalBottomSheetProps } from "../../../types/dist/index.cjs";
 import { BottomSheetController } from "./useBottomSheetStore.cjs";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalBottomSheetProps } from "../../../types/src/index.js";
+import { UniversalBottomSheetProps } from "../../../types/dist/index.js";
 import { BottomSheetController } from "./useBottomSheetStore.js";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/dist/components/client/BottomSheet/BottomSheetContent.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalBottomSheetContentProps } from "../../../types/src/index.cjs";
+import { UniversalBottomSheetContentProps } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetContent.d.ts

package/dist/components/client/BottomSheet/BottomSheetContent.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalBottomSheetContentProps } from "../../../types/src/index.js";
+import { UniversalBottomSheetContentProps } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetContent.d.ts

package/dist/components/client/BottomSheet/BottomSheetHandle.d.cts

@@ -1,5 +1,5 @@
 
-import { BottomSheetVariant } from "../../../types/src/index.cjs";
+import { BottomSheetVariant } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetHandle.d.ts

package/dist/components/client/BottomSheet/BottomSheetHandle.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { BottomSheetVariant } from "../../../types/src/index.js";
+import { BottomSheetVariant } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetHandle.d.ts