@yahoo/uds 3.166.0 → 3.168.0

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

@@ -263,6 +263,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];
@@ -324,9 +346,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,
@@ -423,7 +446,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,
@@ -434,7 +458,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];
@@ -692,6 +717,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,
@@ -738,6 +764,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,
@@ -793,6 +820,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,
@@ -873,6 +901,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/automated-config/dist/utils/index.d.cts

@@ -2,7 +2,7 @@
 import { AtomicState, INTERACTIVE_ATOMICS, InteractiveAtomic, MAX_MODIFIERS_PER_COMPOUND, MODIFIER_ATOMICS, ModifierAtomic, isAtomicState, isInteractiveAtomic, isModifierAtomic } from "../types/StateAxis.cjs";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.cjs";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty, configurableProperties } from "../properties.cjs";
-import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
+import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, UserOverridableProperty, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
 import { VariableState } from "../types/ConfigSchema.cjs";
 import { ComponentSchema, buildConfigSchema, findFixtureType, findFixtureTypeForValue } from "./buildConfigSchema.cjs";
 import { canonicalizeStateKey, splitStateKey } from "./canonicalizeStateKey.cjs";
@@ -95,6 +95,7 @@ declare function generateDeclaration({
   originalPropertyDefinition,
   declaredStates,
   layerUsesAtomicStates,
+  userOverridableProperties,
   theme,
   currentStyles,
   previewOptions,
@@ -117,6 +118,7 @@ declare function generateDeclaration({
   originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
   declaredStates: ReadonlySet<string>;
   layerUsesAtomicStates: boolean;
+  userOverridableProperties?: readonly string[];
   theme: ThemeFn;
   currentStyles: Readonly<Record<string, Record<string, string>>>;
   previewOptions?: {
@@ -217,6 +219,12 @@ declare function createLayerConfig<T extends {
    * full breakdown.
    */
   atomicStates?: AtomicState[];
+  /**
+   * Marks the listed properties as consumer-overridable defaults: every
+   * emitted rule for them carries the matching zero-specificity
+   * `:where(:not([data-uds-icon-*]))` guard. See {@link LayerConfig}.
+   */
+  userOverridableProperties?: readonly UserOverridableProperty[];
   properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
 }>(config: T): T;
 declare function createSubComponentConfig(config: {

package/dist/automated-config/dist/utils/index.d.ts

@@ -2,7 +2,7 @@
 import { AtomicState, INTERACTIVE_ATOMICS, InteractiveAtomic, MAX_MODIFIERS_PER_COMPOUND, MODIFIER_ATOMICS, ModifierAtomic, isAtomicState, isInteractiveAtomic, isModifierAtomic } from "../types/StateAxis.js";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.js";
 import { ConfigurablePropertiesName, SelectedConfigurableProperty, configurableProperties } from "../properties.js";
-import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
+import { ComponentConfig, ComponentStateConfig, LayerConfig, PossibleStates, PossibleStatesWithRest, SubComponentConfig, UserOverridableProperty, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
 import { VariableState } from "../types/ConfigSchema.js";
 import { ComponentSchema, buildConfigSchema, findFixtureType, findFixtureTypeForValue } from "./buildConfigSchema.js";
 import { canonicalizeStateKey, splitStateKey } from "./canonicalizeStateKey.js";
@@ -95,6 +95,7 @@ declare function generateDeclaration({
   originalPropertyDefinition,
   declaredStates,
   layerUsesAtomicStates,
+  userOverridableProperties,
   theme,
   currentStyles,
   previewOptions,
@@ -117,6 +118,7 @@ declare function generateDeclaration({
   originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
   declaredStates: ReadonlySet<string>;
   layerUsesAtomicStates: boolean;
+  userOverridableProperties?: readonly string[];
   theme: ThemeFn;
   currentStyles: Readonly<Record<string, Record<string, string>>>;
   previewOptions?: {
@@ -217,6 +219,12 @@ declare function createLayerConfig<T extends {
    * full breakdown.
    */
   atomicStates?: AtomicState[];
+  /**
+   * Marks the listed properties as consumer-overridable defaults: every
+   * emitted rule for them carries the matching zero-specificity
+   * `:where(:not([data-uds-icon-*]))` guard. See {@link LayerConfig}.
+   */
+  userOverridableProperties?: readonly UserOverridableProperty[];
   properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
 }>(config: T): T;
 declare function createSubComponentConfig(config: {

package/dist/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";
@@ -262,6 +262,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];
@@ -323,9 +345,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,
@@ -422,7 +445,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,
@@ -433,7 +457,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];
@@ -691,6 +716,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,
@@ -737,6 +763,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,
@@ -792,6 +819,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,
@@ -872,6 +900,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/cli/commands/sync.cjs

@@ -3,12 +3,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_defaultTokensConfig = require("../../defaultTokensConfig.cjs");
 const require_serializeToJS = require("../../utils/dist/serializeToJS.cjs");
+const require_runtime_avatarConfig = require("../../runtime/avatarConfig.cjs");
+const require_runtime_badgeConfig = require("../../runtime/badgeConfig.cjs");
 const require_runtime_bottomSheetConfig = require("../../runtime/bottomSheetConfig.cjs");
 const require_runtime_breakpointsConfig = require("../../runtime/breakpointsConfig.cjs");
 const require_runtime_buttonConfig = require("../../runtime/buttonConfig.cjs");
+const require_runtime_chipConfig = require("../../runtime/chipConfig.cjs");
 const require_runtime_iconButtonConfig = require("../../runtime/iconButtonConfig.cjs");
+const require_runtime_inputConfig = require("../../runtime/inputConfig.cjs");
+const require_runtime_menuItemConfig = require("../../runtime/menuItemConfig.cjs");
 const require_runtime_modalConfig = require("../../runtime/modalConfig.cjs");
+const require_runtime_paddleNavConfig = require("../../runtime/paddleNavConfig.cjs");
+const require_runtime_paginationConfig = require("../../runtime/paginationConfig.cjs");
 const require_runtime_popoverConfig = require("../../runtime/popoverConfig.cjs");
+const require_runtime_selectItemConfig = require("../../runtime/selectItemConfig.cjs");
+const require_runtime_tabConfig = require("../../runtime/tabConfig.cjs");
 const require_runtime_toastConfig = require("../../runtime/toastConfig.cjs");
 const require_runtime_tooltipConfig = require("../../runtime/tooltipConfig.cjs");
 const require_config = require("../dist/utils/rules/config.cjs");
@@ -86,12 +95,21 @@ const syncCommand = {
 			const exportsTS = [`export const config: UniversalTokensConfig = ${serializedConfig} as UniversalTokensConfig;`];
 			const exportsJS = [`export const config = ${serializedConfig};`];
 			const runtimeConfigs = {
+				avatar: [require_runtime_avatarConfig.configToAvatarConfigContext(config), "UDSAvatarConfigContextType"],
+				badge: [require_runtime_badgeConfig.configToBadgeConfigContext(config), "UDSBadgeConfigContextType"],
 				bottomSheet: [require_runtime_bottomSheetConfig.configToBottomSheetConfigContext(config), "UDSBottomSheetConfigContextType"],
 				breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(config), "UDSBreakpointsConfigContextType"],
 				button: [require_runtime_buttonConfig.configToButtonConfigContext(config), "UDSButtonConfigContextType"],
+				chip: [require_runtime_chipConfig.configToChipConfigContext(config), "UDSChipConfigContextType"],
 				iconButton: [require_runtime_iconButtonConfig.configToIconButtonConfigContext(config), "UDSIconButtonConfigContextType"],
+				input: [require_runtime_inputConfig.configToInputConfigContext(config), "UDSInputConfigContextType"],
+				menuItem: [require_runtime_menuItemConfig.configToMenuItemConfigContext(config), "UDSMenuItemConfigContextType"],
 				modal: [require_runtime_modalConfig.configToModalConfigContext(config), "UDSModalConfigContextType"],
+				paddleNav: [require_runtime_paddleNavConfig.configToPaddleNavConfigContext(config), "UDSPaddleNavConfigContextType"],
+				pagination: [require_runtime_paginationConfig.configToPaginationConfigContext(config), "UDSPaginationConfigContextType"],
 				popover: [require_runtime_popoverConfig.configToPopoverConfigContext(config), "UDSPopoverConfigContextType"],
+				selectItem: [require_runtime_selectItemConfig.configToSelectItemConfigContext(config), "UDSSelectItemConfigContextType"],
+				tab: [require_runtime_tabConfig.configToTabConfigContext(config), "UDSTabConfigContextType"],
 				toast: [require_runtime_toastConfig.configToToastConfigContext(config), "UDSToastConfigContextType"],
 				tooltip: [require_runtime_tooltipConfig.configToTooltipConfigContext(config), "UDSTooltipConfigContextType"]
 			};
@@ -105,22 +123,40 @@ const syncCommand = {
 			runtimeTypeImports.push("UDSConfigContextType");
 			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  avatar: avatarRuntimeConfig,
+  badge: badgeRuntimeConfig,
   bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   button: buttonRuntimeConfig,
+  chip: chipRuntimeConfig,
   iconButton: iconButtonRuntimeConfig,
+  input: inputRuntimeConfig,
+  menuItem: menuItemRuntimeConfig,
   modal: modalRuntimeConfig,
+  paddleNav: paddleNavRuntimeConfig,
+  pagination: paginationRuntimeConfig,
   popover: popoverRuntimeConfig,
+  selectItem: selectItemRuntimeConfig,
+  tab: tabRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
+  avatar: avatarRuntimeConfig,
+  badge: badgeRuntimeConfig,
   bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   button: buttonRuntimeConfig,
+  chip: chipRuntimeConfig,
   iconButton: iconButtonRuntimeConfig,
+  input: inputRuntimeConfig,
+  menuItem: menuItemRuntimeConfig,
   modal: modalRuntimeConfig,
+  paddleNav: paddleNavRuntimeConfig,
+  pagination: paginationRuntimeConfig,
   popover: popoverRuntimeConfig,
+  selectItem: selectItemRuntimeConfig,
+  tab: tabRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);

package/dist/cli/commands/sync.js

@@ -1,12 +1,21 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { defaultTokensConfig } from "../../defaultTokensConfig.js";
 import { serializeToJS } from "../../utils/dist/serializeToJS.js";
+import { configToAvatarConfigContext } from "../../runtime/avatarConfig.js";
+import { configToBadgeConfigContext } from "../../runtime/badgeConfig.js";
 import { configToBottomSheetConfigContext } from "../../runtime/bottomSheetConfig.js";
 import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
 import { configToButtonConfigContext } from "../../runtime/buttonConfig.js";
+import { configToChipConfigContext } from "../../runtime/chipConfig.js";
 import { configToIconButtonConfigContext } from "../../runtime/iconButtonConfig.js";
+import { configToInputConfigContext } from "../../runtime/inputConfig.js";
+import { configToMenuItemConfigContext } from "../../runtime/menuItemConfig.js";
 import { configToModalConfigContext } from "../../runtime/modalConfig.js";
+import { configToPaddleNavConfigContext } from "../../runtime/paddleNavConfig.js";
+import { configToPaginationConfigContext } from "../../runtime/paginationConfig.js";
 import { configToPopoverConfigContext } from "../../runtime/popoverConfig.js";
+import { configToSelectItemConfigContext } from "../../runtime/selectItemConfig.js";
+import { configToTabConfigContext } from "../../runtime/tabConfig.js";
 import { configToToastConfigContext } from "../../runtime/toastConfig.js";
 import { configToTooltipConfigContext } from "../../runtime/tooltipConfig.js";
 import { getEditorsWithStaleRules } from "../dist/utils/rules/config.js";
@@ -82,12 +91,21 @@ const syncCommand = {
 			const exportsTS = [`export const config: UniversalTokensConfig = ${serializedConfig} as UniversalTokensConfig;`];
 			const exportsJS = [`export const config = ${serializedConfig};`];
 			const runtimeConfigs = {
+				avatar: [configToAvatarConfigContext(config), "UDSAvatarConfigContextType"],
+				badge: [configToBadgeConfigContext(config), "UDSBadgeConfigContextType"],
 				bottomSheet: [configToBottomSheetConfigContext(config), "UDSBottomSheetConfigContextType"],
 				breakpoints: [configToBreakpointsConfigContext(config), "UDSBreakpointsConfigContextType"],
 				button: [configToButtonConfigContext(config), "UDSButtonConfigContextType"],
+				chip: [configToChipConfigContext(config), "UDSChipConfigContextType"],
 				iconButton: [configToIconButtonConfigContext(config), "UDSIconButtonConfigContextType"],
+				input: [configToInputConfigContext(config), "UDSInputConfigContextType"],
+				menuItem: [configToMenuItemConfigContext(config), "UDSMenuItemConfigContextType"],
 				modal: [configToModalConfigContext(config), "UDSModalConfigContextType"],
+				paddleNav: [configToPaddleNavConfigContext(config), "UDSPaddleNavConfigContextType"],
+				pagination: [configToPaginationConfigContext(config), "UDSPaginationConfigContextType"],
 				popover: [configToPopoverConfigContext(config), "UDSPopoverConfigContextType"],
+				selectItem: [configToSelectItemConfigContext(config), "UDSSelectItemConfigContextType"],
+				tab: [configToTabConfigContext(config), "UDSTabConfigContextType"],
 				toast: [configToToastConfigContext(config), "UDSToastConfigContextType"],
 				tooltip: [configToTooltipConfigContext(config), "UDSTooltipConfigContextType"]
 			};
@@ -101,22 +119,40 @@ const syncCommand = {
 			runtimeTypeImports.push("UDSConfigContextType");
 			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  avatar: avatarRuntimeConfig,
+  badge: badgeRuntimeConfig,
   bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   button: buttonRuntimeConfig,
+  chip: chipRuntimeConfig,
   iconButton: iconButtonRuntimeConfig,
+  input: inputRuntimeConfig,
+  menuItem: menuItemRuntimeConfig,
   modal: modalRuntimeConfig,
+  paddleNav: paddleNavRuntimeConfig,
+  pagination: paginationRuntimeConfig,
   popover: popoverRuntimeConfig,
+  selectItem: selectItemRuntimeConfig,
+  tab: tabRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
+  avatar: avatarRuntimeConfig,
+  badge: badgeRuntimeConfig,
   bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   button: buttonRuntimeConfig,
+  chip: chipRuntimeConfig,
   iconButton: iconButtonRuntimeConfig,
+  input: inputRuntimeConfig,
+  menuItem: menuItemRuntimeConfig,
   modal: modalRuntimeConfig,
+  paddleNav: paddleNavRuntimeConfig,
+  pagination: paginationRuntimeConfig,
   popover: popoverRuntimeConfig,
+  selectItem: selectItemRuntimeConfig,
+  tab: tabRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);

package/dist/components/IconSlot.cjs

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../css-tokens/dist/index.cjs");
 const require_styles_styler = require("../styles/styler.cjs");
 const require_components_Icon = require("./Icon.cjs");
 let react = require("react");
@@ -10,6 +11,32 @@ let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 //#region src/components/IconSlot.tsx
 /**
+* When the consumer's own element carries an explicit non-`inherit` color or
+* an explicit size, mark it with {@link ICON_COLOR_OVERRIDE_ATTRIBUTE} /
+* {@link ICON_SIZE_OVERRIDE_ATTRIBUTE}. Config-generated icon rules for
+* layers that list the property in `userOverridableProperties` exclude
+* marked elements via a zero-specificity `:where(:not([...]))` guard, so the
+* explicit prop wins over the configured value (across ALL configured
+* states) without `!important`. For size, disabling the configured
+* width/height box lets the svg's own attributes (matching the explicit
+* size's artwork and viewBox) govern.
+*
+* Detection intentionally reads the element's OWN props (never `iconProps`):
+* components pass their own defaults through `iconProps` (e.g. Button's
+* `color="current"`, or configured icon sizes routed from runtime config),
+* so only element props signal consumer intent.
+*/
+function getUserOverrideAttributes(elProps) {
+	let attributes;
+	const color = elProps?.color;
+	if (typeof color === "string" && color !== "inherit") attributes = { [require_index.ICON_COLOR_OVERRIDE_ATTRIBUTE]: "" };
+	if (typeof elProps?.size === "string") attributes = {
+		...attributes,
+		[require_index.ICON_SIZE_OVERRIDE_ATTRIBUTE]: ""
+	};
+	return attributes;
+}
+/**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
 * Useful in components that use icons and have a startIcon and endIcon. It allows
@@ -41,6 +68,7 @@ const IconSlot = (0, react.memo)(function IconSlot({ icon, iconProps, className:
 		const elProps = iconEl?.props;
 		return (0, react.isValidElement)(iconEl) && (0, react.cloneElement)(iconEl, {
 			...rest,
+			...getUserOverrideAttributes(elProps),
 			className: require_styles_styler.cx(mergedClassName, elProps?.className)
 		});
 	}
@@ -49,6 +77,7 @@ const IconSlot = (0, react.memo)(function IconSlot({ icon, iconProps, className:
 		...props,
 		...elProps,
 		...rest,
+		...getUserOverrideAttributes(elProps),
 		className: require_styles_styler.cx(mergedClassName, elProps.className)
 	});
 });

package/dist/components/IconSlot.js

@@ -1,4 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE } from "../css-tokens/dist/index.js";
 import { cx } from "../styles/styler.js";
 import { Icon } from "./Icon.js";
 import { cloneElement, isValidElement, memo } from "react";
@@ -6,6 +7,32 @@ import { jsx } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
 //#region src/components/IconSlot.tsx
 /**
+* When the consumer's own element carries an explicit non-`inherit` color or
+* an explicit size, mark it with {@link ICON_COLOR_OVERRIDE_ATTRIBUTE} /
+* {@link ICON_SIZE_OVERRIDE_ATTRIBUTE}. Config-generated icon rules for
+* layers that list the property in `userOverridableProperties` exclude
+* marked elements via a zero-specificity `:where(:not([...]))` guard, so the
+* explicit prop wins over the configured value (across ALL configured
+* states) without `!important`. For size, disabling the configured
+* width/height box lets the svg's own attributes (matching the explicit
+* size's artwork and viewBox) govern.
+*
+* Detection intentionally reads the element's OWN props (never `iconProps`):
+* components pass their own defaults through `iconProps` (e.g. Button's
+* `color="current"`, or configured icon sizes routed from runtime config),
+* so only element props signal consumer intent.
+*/
+function getUserOverrideAttributes(elProps) {
+	let attributes;
+	const color = elProps?.color;
+	if (typeof color === "string" && color !== "inherit") attributes = { [ICON_COLOR_OVERRIDE_ATTRIBUTE]: "" };
+	if (typeof elProps?.size === "string") attributes = {
+		...attributes,
+		[ICON_SIZE_OVERRIDE_ATTRIBUTE]: ""
+	};
+	return attributes;
+}
+/**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
 * Useful in components that use icons and have a startIcon and endIcon. It allows
@@ -37,6 +64,7 @@ const IconSlot = memo(function IconSlot({ icon, iconProps, className: slotClassN
 		const elProps = iconEl?.props;
 		return isValidElement(iconEl) && cloneElement(iconEl, {
 			...rest,
+			...getUserOverrideAttributes(elProps),
 			className: cx(mergedClassName, elProps?.className)
 		});
 	}
@@ -45,6 +73,7 @@ const IconSlot = memo(function IconSlot({ icon, iconProps, className: slotClassN
 		...props,
 		...elProps,
 		...rest,
+		...getUserOverrideAttributes(elProps),
 		className: cx(mergedClassName, elProps.className)
 	});
 });

package/dist/components/client/Avatar/AvatarIcon.cjs

@@ -5,6 +5,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
+const require_components_client_Avatar_UDSAvatarConfigProvider = require("./UDSAvatarConfigProvider.cjs");
 const require_components_client_Avatar_utils = require("./utils.cjs");
 let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
@@ -24,6 +25,7 @@ const mapVariantToIcon = {
 * @returns The AvatarIcon element.
 */
 const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
+	const { iconSize } = require_components_client_Avatar_UDSAvatarConfigProvider.useAvatarConfig(size);
 	const classNames = (0, react.useMemo)(() => ({
 		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
@@ -52,6 +54,7 @@ const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_compo
 				iconProps: {
 					variant: "fill",
 					color: "current",
+					size: iconSize,
 					...slotProps?.icon
 				},
 				className: classNames.icon

package/dist/components/client/Avatar/AvatarIcon.js

@@ -3,6 +3,7 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
+import { useAvatarConfig } from "./UDSAvatarConfigProvider.js";
 import { DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
 import { Building, Person } from "@yahoo/uds-icons";
 import { forwardRef, useMemo } from "react";
@@ -22,6 +23,7 @@ const mapVariantToIcon = {
 * @returns The AvatarIcon element.
 */
 const AvatarIcon = forwardRef(({ size = "md", variant = DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
+	const { iconSize } = useAvatarConfig(size);
 	const classNames = useMemo(() => ({
 		root: buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
@@ -50,6 +52,7 @@ const AvatarIcon = forwardRef(({ size = "md", variant = DEFAULT_AVATAR_VARIANT,
 				iconProps: {
 					variant: "fill",
 					color: "current",
+					size: iconSize,
 					...slotProps?.icon
 				},
 				className: classNames.icon

package/dist/components/client/Avatar/UDSAvatarConfigProvider.cjs

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/Avatar/UDSAvatarConfigProvider.tsx
+const { Provider: UDSAvatarConfigProvider, useConfigContext } = require("../providers/createUDSConfigProvider.cjs").createUDSConfigProvider("Avatar");
+/**
+* Resolves the configured icon size for an Avatar size.
+*
+* Unlike other UDS config hooks, this hook does not require a provider: Avatar
+* is used in many apps without a `UDSConfigProvider`, so it gracefully falls
+* back to `undefined` (letting `Icon` apply its own default size) when no
+* config is present — preserving the previous rendering exactly.
+*/
+const useAvatarConfig = (sizeProp) => {
+	const context = useConfigContext();
+	if (!context) return {
+		size: sizeProp,
+		iconSize: void 0
+	};
+	const size = sizeProp ?? context.defaultSize;
+	return {
+		size,
+		iconSize: context.iconSize[size]
+	};
+};
+//#endregion
+exports.UDSAvatarConfigProvider = UDSAvatarConfigProvider;
+exports.useAvatarConfig = useAvatarConfig;