@yahoo/uds 3.167.0 → 3.168.1

package/dist/tailwind-internal/dist/packages/automated-config/dist/generated/generatedConfigs.js

@@ -2665,7 +2665,8 @@ const AvatarConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -2902,7 +2903,8 @@ const BadgeConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -3503,7 +3505,8 @@ const BadgeConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -4852,7 +4855,8 @@ const BannerConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -5858,7 +5862,8 @@ const BannerConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -8812,7 +8817,8 @@ const ButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -9427,7 +9433,8 @@ const ButtonConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -13158,7 +13165,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -14711,7 +14719,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -16263,7 +16272,8 @@ const ChipConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -17468,7 +17478,8 @@ const ChipConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -18606,7 +18617,8 @@ const IconButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -18742,7 +18754,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperIcon: {
 					label: "helperIcon",
@@ -18760,7 +18773,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperText: {
 					label: "helperText",
@@ -19198,7 +19212,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				}
 			},
 			options: ["md", "lg"]
@@ -19580,7 +19595,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperIcon: {
 					atomicStates: [
@@ -19950,7 +19966,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperText: {
 					atomicStates: [
@@ -22903,7 +22920,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				}
 			},
 			options: ["default"]
@@ -22955,7 +22973,8 @@ const LinkConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -23426,7 +23445,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				iconStart: {
 					label: "iconStart",
@@ -23795,7 +23815,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -25994,7 +26015,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27099,7 +27121,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27824,7 +27847,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						text: {
 							label: "text",
@@ -28273,7 +28297,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -28292,7 +28317,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -28470,7 +28496,8 @@ const ModalConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -29298,7 +29325,8 @@ const ModalConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				description: {
 					label: "description",
@@ -31175,7 +31203,8 @@ const PaddleNavConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -32186,7 +32215,8 @@ const PaddleNavConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -32628,7 +32658,8 @@ const PaginationConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				item: {
 					label: "item",
@@ -34002,7 +34033,8 @@ const PopoverConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -34641,7 +34673,8 @@ const PopoverConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -39963,7 +39996,8 @@ const SelectItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -40726,7 +40760,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -40745,7 +40780,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -40932,7 +40968,8 @@ const SwitchConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -42063,7 +42100,8 @@ const SwitchConfig = {
 								"muted",
 								"on-color"
 							]]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -43224,7 +43262,8 @@ const TabConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -43790,7 +43829,8 @@ const TabConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -46418,7 +46458,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				icon: {
 					label: "icon",
@@ -46433,7 +46474,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				label: {
 					label: "label",
@@ -47100,7 +47142,8 @@ const ToastConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				icon: {
 					label: "icon",
@@ -47488,7 +47531,8 @@ const ToastConfig = {
 								"multicolor"
 							]]
 						}
-					}
+					},
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -48421,7 +48465,8 @@ const TooltipConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -49056,7 +49101,8 @@ const TooltipConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",

package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.cjs

@@ -249,6 +249,28 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 function getLayerClassSelector(layer, className, componentName, propertyStateSelector) {
 	return componentName === "input" && (layer === "inputWrapperDynamic" || layer === "inputWrapper") && propertyStateSelector.includes("focus-within") ? `.${className}:not(.uds-ring):not(.uds-select-field-trigger)` : `.${className}`;
 }
+/**
+* Zero-specificity guards for `userOverridableProperties` layers: exclude
+* elements the runtime marked with the matching attribute (set by `IconSlot`
+* when a custom slot icon carries the explicit prop — non-`inherit` `color`
+* or explicit `size`). `:where()` contributes (0,0,0), so the rule's
+* class-count specificity tier — which the whole state cascade relies on — is
+* unchanged; the rule simply stops matching, letting the consumer's own
+* styling win.
+*/
+const USER_OVERRIDE_GUARDS = {
+	color: `:where(:not([${require_index.ICON_COLOR_OVERRIDE_ATTRIBUTE}]))`,
+	iconSize: `:where(:not([${require_index.ICON_SIZE_OVERRIDE_ATTRIBUTE}]))`
+};
+/**
+* Appends a {@link USER_OVERRIDE_GUARDS} guard to a layer class selector,
+* inserting before a pseudo-element (e.g. `::placeholder`) if the layer
+* carries one — a pseudo-class after a pseudo-element is invalid CSS.
+*/
+function appendUserOverrideGuard(layerClassSelector, guard) {
+	const pseudoElementIndex = layerClassSelector.indexOf("::");
+	return pseudoElementIndex === -1 ? `${layerClassSelector}${guard}` : `${layerClassSelector.slice(0, pseudoElementIndex)}${guard}${layerClassSelector.slice(pseudoElementIndex)}`;
+}
 const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = require_properties.configurableProperties[propertyName];
@@ -310,9 +332,10 @@ function selectiveEmittedStates(stateMap, orderedStateKeys, emittableStates) {
 	}
 	return emitted;
 }
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity, buttonHeightReferenceSchema }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, userOverridableProperties, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity, buttonHeightReferenceSchema }) {
 	const shouldUseExhaustive = (emit ?? "exhaustive") === "exhaustive" && layerUsesAtomicStates;
 	const { cssProperties: configuredCssProperties, extendedProperties: configuredExtendedGetter } = require_properties.configurableProperties[originalPropertyDefinition.name];
+	const userOverrideGuard = userOverridableProperties?.includes(originalPropertyDefinition.name) ? USER_OVERRIDE_GUARDS[originalPropertyDefinition.name] : void 0;
 	const configuredExtendedProperties = (0, lodash_es.isFunction)(configuredExtendedGetter) ? configuredExtendedGetter({
 		componentName,
 		subComponentName,
@@ -409,7 +432,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					subComponentName
 				});
 				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
-				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${layerClassSelector}`;
+				const guardedLayerClassSelector = userOverrideGuard ? appendUserOverrideGuard(layerClassSelector, userOverrideGuard) : layerClassSelector;
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${guardedLayerClassSelector}`;
 			} else {
 				className = generateClassName({
 					componentName,
@@ -420,7 +444,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					subComponentName
 				});
 				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
-				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}`;
+				const guardedLayerClassSelector = userOverrideGuard ? appendUserOverrideGuard(layerClassSelector, userOverrideGuard) : layerClassSelector;
+				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${guardedLayerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${guardedLayerClassSelector}`;
 			}
 		}
 		const { cssProperties, extendedProperties: extendedPropertiesGetter } = require_properties.configurableProperties[originalPropertyDefinition.name];
@@ -678,6 +703,7 @@ function emitSchemaOverrideStyles({ componentName, subComponentName, variantKey,
 					originalPropertyDefinition,
 					declaredStates: new Set(require_resolvePropertyStates.resolvePropertyStates(universalLayer, originalPropertyDefinition)),
 					layerUsesAtomicStates: (universalLayer.atomicStates?.length ?? 0) > 0,
+					userOverridableProperties: universalLayer.userOverridableProperties,
 					theme,
 					schema,
 					currentStyles: styles,
@@ -724,6 +750,7 @@ function emitUniversalLayers({ componentName, subComponentName, variantKey, vari
 				originalPropertyDefinition,
 				declaredStates: new Set(require_resolvePropertyStates.resolvePropertyStates(layer, originalPropertyDefinition)),
 				layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+				userOverridableProperties: layer.userOverridableProperties,
 				theme,
 				schema,
 				currentStyles: styles,
@@ -779,6 +806,7 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 								originalPropertyDefinition,
 								declaredStates: new Set(require_resolvePropertyStates.resolvePropertyStates(layer, originalPropertyDefinition)),
 								layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+								userOverridableProperties: layer.userOverridableProperties,
 								theme,
 								schema,
 								currentStyles: styles,
@@ -859,6 +887,7 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 									originalPropertyDefinition,
 									declaredStates: new Set(require_resolvePropertyStates.resolvePropertyStates(layer, originalPropertyDefinition)),
 									layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+									userOverridableProperties: layer.userOverridableProperties,
 									theme,
 									schema,
 									currentStyles: styles,

package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.js

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
+import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE } from "../../../css-tokens/dist/index.js";
 import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
 import { configurableProperties } from "../properties.js";
 import { INTERACTIVE_ATOMICS, MODIFIER_ATOMICS, comparePriority } from "../types/StateAxis.js";
@@ -248,6 +248,28 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 function getLayerClassSelector(layer, className, componentName, propertyStateSelector) {
 	return componentName === "input" && (layer === "inputWrapperDynamic" || layer === "inputWrapper") && propertyStateSelector.includes("focus-within") ? `.${className}:not(.uds-ring):not(.uds-select-field-trigger)` : `.${className}`;
 }
+/**
+* Zero-specificity guards for `userOverridableProperties` layers: exclude
+* elements the runtime marked with the matching attribute (set by `IconSlot`
+* when a custom slot icon carries the explicit prop — non-`inherit` `color`
+* or explicit `size`). `:where()` contributes (0,0,0), so the rule's
+* class-count specificity tier — which the whole state cascade relies on — is
+* unchanged; the rule simply stops matching, letting the consumer's own
+* styling win.
+*/
+const USER_OVERRIDE_GUARDS = {
+	color: `:where(:not([${ICON_COLOR_OVERRIDE_ATTRIBUTE}]))`,
+	iconSize: `:where(:not([${ICON_SIZE_OVERRIDE_ATTRIBUTE}]))`
+};
+/**
+* Appends a {@link USER_OVERRIDE_GUARDS} guard to a layer class selector,
+* inserting before a pseudo-element (e.g. `::placeholder`) if the layer
+* carries one — a pseudo-class after a pseudo-element is invalid CSS.
+*/
+function appendUserOverrideGuard(layerClassSelector, guard) {
+	const pseudoElementIndex = layerClassSelector.indexOf("::");
+	return pseudoElementIndex === -1 ? `${layerClassSelector}${guard}` : `${layerClassSelector.slice(0, pseudoElementIndex)}${guard}${layerClassSelector.slice(pseudoElementIndex)}`;
+}
 const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = configurableProperties[propertyName];
@@ -309,9 +331,10 @@ function selectiveEmittedStates(stateMap, orderedStateKeys, emittableStates) {
 	}
 	return emitted;
 }
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity, buttonHeightReferenceSchema }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, userOverridableProperties, theme, currentStyles, previewOptions, excludedPseudoStates = [], emit, fallbackStateMap, bumpRootSpecificity, buttonHeightReferenceSchema }) {
 	const shouldUseExhaustive = (emit ?? "exhaustive") === "exhaustive" && layerUsesAtomicStates;
 	const { cssProperties: configuredCssProperties, extendedProperties: configuredExtendedGetter } = configurableProperties[originalPropertyDefinition.name];
+	const userOverrideGuard = userOverridableProperties?.includes(originalPropertyDefinition.name) ? USER_OVERRIDE_GUARDS[originalPropertyDefinition.name] : void 0;
 	const configuredExtendedProperties = isFunction(configuredExtendedGetter) ? configuredExtendedGetter({
 		componentName,
 		subComponentName,
@@ -408,7 +431,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					subComponentName
 				});
 				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
-				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${layerClassSelector}`;
+				const guardedLayerClassSelector = userOverrideGuard ? appendUserOverrideGuard(layerClassSelector, userOverrideGuard) : layerClassSelector;
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${guardedLayerClassSelector}`;
 			} else {
 				className = generateClassName({
 					componentName,
@@ -419,7 +443,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					subComponentName
 				});
 				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
-				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}`;
+				const guardedLayerClassSelector = userOverrideGuard ? appendUserOverrideGuard(layerClassSelector, userOverrideGuard) : layerClassSelector;
+				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${guardedLayerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${guardedLayerClassSelector}`;
 			}
 		}
 		const { cssProperties, extendedProperties: extendedPropertiesGetter } = configurableProperties[originalPropertyDefinition.name];
@@ -677,6 +702,7 @@ function emitSchemaOverrideStyles({ componentName, subComponentName, variantKey,
 					originalPropertyDefinition,
 					declaredStates: new Set(resolvePropertyStates(universalLayer, originalPropertyDefinition)),
 					layerUsesAtomicStates: (universalLayer.atomicStates?.length ?? 0) > 0,
+					userOverridableProperties: universalLayer.userOverridableProperties,
 					theme,
 					schema,
 					currentStyles: styles,
@@ -723,6 +749,7 @@ function emitUniversalLayers({ componentName, subComponentName, variantKey, vari
 				originalPropertyDefinition,
 				declaredStates: new Set(resolvePropertyStates(layer, originalPropertyDefinition)),
 				layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+				userOverridableProperties: layer.userOverridableProperties,
 				theme,
 				schema,
 				currentStyles: styles,
@@ -778,6 +805,7 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 								originalPropertyDefinition,
 								declaredStates: new Set(resolvePropertyStates(layer, originalPropertyDefinition)),
 								layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+								userOverridableProperties: layer.userOverridableProperties,
 								theme,
 								schema,
 								currentStyles: styles,
@@ -858,6 +886,7 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit, gener
 									originalPropertyDefinition,
 									declaredStates: new Set(resolvePropertyStates(layer, originalPropertyDefinition)),
 									layerUsesAtomicStates: (layer.atomicStates?.length ?? 0) > 0,
+									userOverridableProperties: layer.userOverridableProperties,
 									theme,
 									schema,
 									currentStyles: styles,

package/dist/tailwind-internal/dist/packages/css-tokens/dist/index.cjs

@@ -47,6 +47,30 @@ const TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES = {
 	xl: "uds-text-xl",
 	"2xl": "uds-text-2xl"
 };
+/**
+* Set by `IconSlot` (@yahoo/uds) when a consumer passes an explicit,
+* non-`inherit` `color` on a custom slot icon element (e.g.
+* `<Input endIcon={<Icon name={Check} color="positive" />} />`).
+*
+* Config-generated icon color rules for layers that list `color` in
+* `userOverridableProperties` exclude elements carrying this attribute via a
+* zero-specificity `:where(:not([data-uds-icon-color]))` guard, so the
+* consumer's explicit color wins over the configured value without
+* `!important`.
+*/
+const ICON_COLOR_OVERRIDE_ATTRIBUTE = `data-uds-icon-color`;
+/**
+* Set by `IconSlot` (@yahoo/uds) when a consumer passes an explicit `size`
+* on a custom slot icon element (e.g.
+* `<Input endIcon={<Icon name={Check} size="lg" />} />`).
+*
+* Config-generated icon size (width/height) rules for layers that list
+* `iconSize` in `userOverridableProperties` exclude elements carrying this
+* attribute via a zero-specificity `:where(:not([data-uds-icon-size]))`
+* guard, so the svg's own width/height attributes (matching the explicit
+* size's artwork and viewBox) govern instead of the configured box.
+*/
+const ICON_SIZE_OVERRIDE_ATTRIBUTE = `data-uds-icon-size`;
 const BUTTON_GAP_VAR = `--uds-button-gap`;
 const BUTTON_CONTROL_HEIGHT_VAR = `--uds-button-control-height`;
 const BUTTON_SCALE_EFFECT = `--uds-button-scale-effect`;
@@ -143,6 +167,8 @@ exports.FONT_SIZE_PREFIX = FONT_SIZE_PREFIX;
 exports.FONT_SLANT_PREFIX = FONT_SLANT_PREFIX;
 exports.FONT_WEIGHT_PREFIX = FONT_WEIGHT_PREFIX;
 exports.FONT_WIDTH_PREFIX = FONT_WIDTH_PREFIX;
+exports.ICON_COLOR_OVERRIDE_ATTRIBUTE = ICON_COLOR_OVERRIDE_ATTRIBUTE;
+exports.ICON_SIZE_OVERRIDE_ATTRIBUTE = ICON_SIZE_OVERRIDE_ATTRIBUTE;
 exports.ICON_SIZE_PREFIX = ICON_SIZE_PREFIX;
 exports.INSET_SHADOW_PREFIX = INSET_SHADOW_PREFIX;
 exports.INVERT_COLOR_MODE_CLASSNAME = INVERT_COLOR_MODE_CLASSNAME;