@yahoo/uds 3.105.1 → 3.107.0

package/dist/automated-config/dist/utils/index.cjs

@@ -30,6 +30,20 @@ const CSS_BOX_SHADOW = "box-shadow";
 function deepMerge(target, source) {
 	return (0, lodash_mergeWith_js.default)({}, target, source);
 }
+const COMPONENTS_WITH_SHADOW_BORDERS = [
+	{
+		componentName: "button",
+		layer: "root"
+	},
+	{
+		componentName: "iconbutton",
+		layer: "root"
+	},
+	{
+		componentName: "chip",
+		layer: "root"
+	}
+];
 /**
 * Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
 * Adjust or extend as needed.
@@ -394,8 +408,9 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 	* Post-process button/iconbutton styles to force box-shadow for borders.
 	* This runs AFTER all properties have been processed and merged.
 	*/
-	if (componentName === "button" || componentName === "iconbutton") {
-		for (const className in styles) if (className.includes("-root")) styles[className] = applyBoxShadowBorder(styles[className]);
+	const toApply = COMPONENTS_WITH_SHADOW_BORDERS.find((c) => c.componentName === componentName);
+	if (toApply) {
+		for (const className in styles) if (className.includes(`-${toApply.layer}`.toLowerCase())) styles[className] = applyBoxShadowBorder(styles[className]);
 	}
 	return styles;
 }

package/dist/automated-config/dist/utils/index.js

@@ -26,6 +26,20 @@ const CSS_BOX_SHADOW = "box-shadow";
 function deepMerge(target, source) {
 	return mergeWith({}, target, source);
 }
+const COMPONENTS_WITH_SHADOW_BORDERS = [
+	{
+		componentName: "button",
+		layer: "root"
+	},
+	{
+		componentName: "iconbutton",
+		layer: "root"
+	},
+	{
+		componentName: "chip",
+		layer: "root"
+	}
+];
 /**
 * Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
 * Adjust or extend as needed.
@@ -390,8 +404,9 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 	* Post-process button/iconbutton styles to force box-shadow for borders.
 	* This runs AFTER all properties have been processed and merged.
 	*/
-	if (componentName === "button" || componentName === "iconbutton") {
-		for (const className in styles) if (className.includes("-root")) styles[className] = applyBoxShadowBorder(styles[className]);
+	const toApply = COMPONENTS_WITH_SHADOW_BORDERS.find((c) => c.componentName === componentName);
+	if (toApply) {
+		for (const className in styles) if (className.includes(`-${toApply.layer}`.toLowerCase())) styles[className] = applyBoxShadowBorder(styles[className]);
 	}
 	return styles;
 }

package/dist/components/client/Button.cjs

@@ -103,6 +103,7 @@ const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultCla
 * }
 * ```
 *
+*
 * @usage
 * Buttons should be used to clearly indicate and initiate actions that users can take.
 *

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

@@ -65,6 +65,7 @@ interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
  * }
  * ```
  *
+ *
  * @usage
  * Buttons should be used to clearly indicate and initiate actions that users can take.
  *

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

@@ -65,6 +65,7 @@ interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
  * }
  * ```
  *
+ *
  * @usage
  * Buttons should be used to clearly indicate and initiate actions that users can take.
  *

package/dist/components/client/Button.js

@@ -100,6 +100,7 @@ const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
 * }
 * ```
 *
+*
 * @usage
 * Buttons should be used to clearly indicate and initiate actions that users can take.
 *

package/dist/components/client/Chip/ChipBase.cjs

@@ -30,7 +30,7 @@ const ChipBase = (0, react.forwardRef)(function ChipBase({ size = SIZE_DEFAULT,
 				"pointer-events-none": disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, "inline-flex", "items-center", "focus-visible:-outline-offset-2", "uds-ring", cssAnimationDuration, "transition-[background-color,outline-color,box-shadow]", className)
+			}, "inline-flex", "items-center", cssAnimationDuration, "transition-[background-color,outline-color,box-shadow]", className)
 		}),
 		text: require_styles_styler.cx("truncate", "whitespace-nowrap", "text-center", "flex-1", textClassName),
 		icon: require_styles_styler.getStyles({ chipSizeIcon: size })

package/dist/components/client/Chip/ChipBase.js

@@ -27,7 +27,7 @@ const ChipBase = forwardRef(function ChipBase({ size = SIZE_DEFAULT, minWidth, m
 				"pointer-events-none": disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, "inline-flex", "items-center", "focus-visible:-outline-offset-2", "uds-ring", cssAnimationDuration, "transition-[background-color,outline-color,box-shadow]", className)
+			}, "inline-flex", "items-center", cssAnimationDuration, "transition-[background-color,outline-color,box-shadow]", className)
 		}),
 		text: cx("truncate", "whitespace-nowrap", "text-center", "flex-1", textClassName),
 		icon: getStyles({ chipSizeIcon: size })

package/dist/components/client/Chip/ChipButton.cjs

@@ -14,7 +14,7 @@ const ChipButton = (0, react.forwardRef)(function ChipButton({ variant = require
 	const classNames = (0, react.useMemo)(() => ({
 		root: require_styles_styler.getStyles({
 			chipLinkVariantRoot: variant,
-			className
+			className: require_styles_styler.cx("uds-ring", className)
 		}),
 		icon: require_styles_styler.getStyles({ chipLinkVariantIcon: variant })
 	}), [className, variant]);

package/dist/components/client/Chip/ChipButton.js

@@ -1,6 +1,6 @@
 "use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { getStyles } from "../../../styles/styler.js";
+import { cx, getStyles } from "../../../styles/styler.js";
 import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
 import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
 import React, { forwardRef, useMemo } from "react";
@@ -11,7 +11,7 @@ const ChipButton = forwardRef(function ChipButton({ variant = VARIANT_DEFAULT, s
 	const classNames = useMemo(() => ({
 		root: getStyles({
 			chipLinkVariantRoot: variant,
-			className
+			className: cx("uds-ring", className)
 		}),
 		icon: getStyles({ chipLinkVariantIcon: variant })
 	}), [className, variant]);

package/dist/components/client/Chip/ChipLink.cjs

@@ -14,7 +14,7 @@ const ChipLink = (0, react.forwardRef)(function ChipLink({ variant = require_com
 	const classNames = (0, react.useMemo)(() => ({
 		root: require_styles_styler.getStyles({
 			chipLinkVariantRoot: variant,
-			className
+			className: require_styles_styler.cx("uds-ring", className)
 		}),
 		icon: require_styles_styler.getStyles({ chipLinkVariantIcon: variant })
 	}), [className, variant]);
@@ -28,7 +28,7 @@ const ChipLink = (0, react.forwardRef)(function ChipLink({ variant = require_com
 		disabled,
 		className: classNames.root,
 		slotProps: mergedSlotProps,
-		tabIndex: 0,
+		tabIndex: disabled ? -1 : 0,
 		...rest,
 		href: disabled ? void 0 : href
 	});

package/dist/components/client/Chip/ChipLink.js

@@ -1,6 +1,6 @@
 "use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { getStyles } from "../../../styles/styler.js";
+import { cx, getStyles } from "../../../styles/styler.js";
 import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
 import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
 import React, { forwardRef, useMemo } from "react";
@@ -11,7 +11,7 @@ const ChipLink = forwardRef(function ChipLink({ variant = VARIANT_DEFAULT, href,
 	const classNames = useMemo(() => ({
 		root: getStyles({
 			chipLinkVariantRoot: variant,
-			className
+			className: cx("uds-ring", className)
 		}),
 		icon: getStyles({ chipLinkVariantIcon: variant })
 	}), [className, variant]);
@@ -25,7 +25,7 @@ const ChipLink = forwardRef(function ChipLink({ variant = VARIANT_DEFAULT, href,
 		disabled,
 		className: classNames.root,
 		slotProps: mergedSlotProps,
-		tabIndex: 0,
+		tabIndex: disabled ? -1 : 0,
 		...rest,
 		href: disabled ? void 0 : href
 	});

package/dist/components/client/Chip/ChipToggle.cjs

@@ -15,7 +15,7 @@ const ChipToggle = (0, react.forwardRef)(function ChipToggle({ isToggled = false
 		root: require_styles_styler.getStyles({
 			chipToggleVariantRoot: variant,
 			chipToggleVariantActiveRoot: isToggled ? "on" : "off",
-			className
+			className: require_styles_styler.cx("uds-ring", className)
 		}),
 		icon: require_styles_styler.getStyles({ chipToggleVariantIcon: variant })
 	}), [

package/dist/components/client/Chip/ChipToggle.js

@@ -1,6 +1,6 @@
 "use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { getStyles } from "../../../styles/styler.js";
+import { cx, getStyles } from "../../../styles/styler.js";
 import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
 import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
 import React, { forwardRef, useCallback, useMemo } from "react";
@@ -12,7 +12,7 @@ const ChipToggle = forwardRef(function ChipToggle({ isToggled = false, onToggle,
 		root: getStyles({
 			chipToggleVariantRoot: variant,
 			chipToggleVariantActiveRoot: isToggled ? "on" : "off",
-			className
+			className: cx("uds-ring", className)
 		}),
 		icon: getStyles({ chipToggleVariantIcon: variant })
 	}), [