@yahoo/uds 3.167.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/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/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts

@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/css-tokens/dist/index.cjs

@@ -49,6 +49,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`;
@@ -147,6 +171,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;

package/dist/css-tokens/dist/index.d.cts

@@ -41,6 +41,30 @@ declare const DEFAULT_COLOR_MODE_CLASSNAME = "uds-color-mode-light";
 declare const DEFAULT_SCALE_MODE_CLASSNAME = "uds-scale-mode-large";
 declare const TEXT_RESPONSIVE_CLASSNAME = "uds-text-responsive";
 declare const TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES: Record<BreakpointWithBase | 'defaultBreakpoint', string>;
+/**
+ * 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`.
+ */
+declare 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.
+ */
+declare const ICON_SIZE_OVERRIDE_ATTRIBUTE = "data-uds-icon-size";
 declare const BUTTON_GAP_VAR = "--uds-button-gap";
 declare const BUTTON_CONTROL_HEIGHT_VAR = "--uds-button-control-height";
 declare const BUTTON_SCALE_EFFECT = "--uds-button-scale-effect";
@@ -95,4 +119,4 @@ declare function getMotionVar({
   control
 }: GetMotionVarParams): string; //#endregion
 //#endregion
-export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, GetMotionVarParams, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };
+export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, GetMotionVarParams, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };

package/dist/css-tokens/dist/index.d.ts

@@ -41,6 +41,30 @@ declare const DEFAULT_COLOR_MODE_CLASSNAME = "uds-color-mode-light";
 declare const DEFAULT_SCALE_MODE_CLASSNAME = "uds-scale-mode-large";
 declare const TEXT_RESPONSIVE_CLASSNAME = "uds-text-responsive";
 declare const TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES: Record<BreakpointWithBase | 'defaultBreakpoint', string>;
+/**
+ * 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`.
+ */
+declare 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.
+ */
+declare const ICON_SIZE_OVERRIDE_ATTRIBUTE = "data-uds-icon-size";
 declare const BUTTON_GAP_VAR = "--uds-button-gap";
 declare const BUTTON_CONTROL_HEIGHT_VAR = "--uds-button-control-height";
 declare const BUTTON_SCALE_EFFECT = "--uds-button-scale-effect";
@@ -95,4 +119,4 @@ declare function getMotionVar({
   control
 }: GetMotionVarParams): string; //#endregion
 //#endregion
-export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, GetMotionVarParams, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };
+export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, GetMotionVarParams, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };

package/dist/css-tokens/dist/index.js

@@ -49,6 +49,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`;
@@ -125,4 +149,4 @@ function getMotionVar({ variant, speed, control }) {
 	].join("-")}`;
 }
 //#endregion
-export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };
+export { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CONTROL_HEIGHT_VAR, BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, DROP_SHADOW_PREFIX, FONT_FAMILY_PREFIX, FONT_SIZE_PREFIX, FONT_SLANT_PREFIX, FONT_WEIGHT_PREFIX, FONT_WIDTH_PREFIX, ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE, ICON_SIZE_PREFIX, INSET_SHADOW_PREFIX, INVERT_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LETTER_SPACING_PREFIX, LIGHT_COLOR_MODE_CLASSNAME, LINE_COLOR_PREFIX, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, MOTION_PREFIX, OUTLINE_PREFIX, PSEUDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, SYSTEM_COLOR_MODE_CLASSNAME, TEXT_RESPONSIVE_BREAKPOINT_CLASSNAMES, TEXT_RESPONSIVE_CLASSNAME, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, getMotionVar, getShadowLayerValue, textVariantsSafe };

package/dist/index.cjs

@@ -221,6 +221,8 @@ exports.FONT_WEIGHT_PREFIX = require_index$1.FONT_WEIGHT_PREFIX;
 exports.FONT_WIDTH_PREFIX = require_index$1.FONT_WIDTH_PREFIX;
 exports.FormLabel = require_components_FormLabel.FormLabel;
 exports.HStack = require_components_HStack.HStack;
+exports.ICON_COLOR_OVERRIDE_ATTRIBUTE = require_index$1.ICON_COLOR_OVERRIDE_ATTRIBUTE;
+exports.ICON_SIZE_OVERRIDE_ATTRIBUTE = require_index$1.ICON_SIZE_OVERRIDE_ATTRIBUTE;
 exports.ICON_SIZE_PREFIX = require_index$1.ICON_SIZE_PREFIX;
 exports.INSET_SHADOW_PREFIX = require_index$1.INSET_SHADOW_PREFIX;
 exports.INTERACTIVE_ATOMICS = require_StateAxis.INTERACTIVE_ATOMICS;