@yahoo/uds 3.152.1 → 3.153.0

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

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/componentStatePseudoStates.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
+	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
+}
+function filterPseudoStatesByExclusion(pseudoStates, excludedPseudoStates) {
+	if (!pseudoStates) return [];
+	if (excludedPseudoStates.length === 0) return [...pseudoStates];
+	const excluded = new Set(excludedPseudoStates);
+	return pseudoStates.filter((pseudoState) => !excluded.has(pseudoState));
+}
+//#endregion
+exports.filterPseudoStatesByExclusion = filterPseudoStatesByExclusion;
+exports.getExcludedPseudoStatesForComponentStateOption = getExcludedPseudoStatesForComponentStateOption;

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

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/componentStatePseudoStates.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
+	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
+}
+function filterPseudoStatesByExclusion(pseudoStates, excludedPseudoStates) {
+	if (!pseudoStates) return [];
+	if (excludedPseudoStates.length === 0) return [...pseudoStates];
+	const excluded = new Set(excludedPseudoStates);
+	return pseudoStates.filter((pseudoState) => !excluded.has(pseudoState));
+}
+//#endregion
+export { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption };

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

@@ -2,6 +2,7 @@
 require("../../../../../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../../css-tokens/dist/index.cjs");
 const require_properties = require("../properties.cjs");
+const require_componentStatePseudoStates = require("./componentStatePseudoStates.cjs");
 const require_generateSchemaKey = require("./generateSchemaKey.cjs");
 const require_variantConfigGuards = require("./variantConfigGuards.cjs");
 const require_buildConfigSchema = require("./buildConfigSchema.cjs");
@@ -11,7 +12,9 @@ let lodash_es = require("lodash-es");
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const CSS_GAP = "gap";
+const CSS_PADDING = "padding";
 const CSS_LINE_HEIGHT = "line-height";
+const PAGINATION_CONTROL_SIZE_VAR = "--uds-pagination-control-size";
 const CSS_BORDER_WIDTH = "border-width";
 const CSS_BORDER_RADIUS = "border-radius";
 const CSS_BORDER_COLOR = "border-color";
@@ -51,6 +54,10 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 	{
 		componentName: "tabs",
 		layer: "root"
+	},
+	{
+		componentName: "pagination",
+		layer: "root"
 	}
 ];
 /**
@@ -96,6 +103,15 @@ function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey,
 	return lineHeight;
 }
 /**
+* Shared pagination control height: padding on all sides plus icon size.
+* Keeps page circles, prev/next, and ellipsis vertically aligned when spacing changes.
+*/
+function getPaginationControlSize({ padding, schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (iconSizeValue) return `calc(2 * ${padding} + ${theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
+	return `calc(2 * ${padding} + 1em)`;
+}
+/**
 * Forces button borders to use box-shadow instead of border properties.
 * Converts border-width and border-color into an inset box-shadow layer.
 *
@@ -134,11 +150,37 @@ function applyBoxShadowBorder(classStyles) {
 	const bottomColor = classStyles[CSS_BORDER_BOTTOM_COLOR] ?? borderColor;
 	const leftColor = classStyles[CSS_BORDER_LEFT_COLOR] ?? borderColor;
 	const borderLayers = [];
-	if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
-	if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
-	if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
-	if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
-	if (borderLayers.length === 0) return classStyles;
+	const sidesWithBorder = [
+		topWidth,
+		rightWidth,
+		bottomWidth,
+		leftWidth
+	].map((width, index) => {
+		const color = [
+			topColor,
+			rightColor,
+			bottomColor,
+			leftColor
+		][index];
+		return {
+			width: stripImportant(width ?? "").trim(),
+			color: stripImportant(color ?? "").trim()
+		};
+	}).filter(({ width }) => !isZeroWidth(width));
+	if (sidesWithBorder.length === 0) return classStyles;
+	const uniformWidth = sidesWithBorder.every(({ width }) => width === sidesWithBorder[0].width);
+	const uniformColor = sidesWithBorder.every(({ color }) => color && color === sidesWithBorder[0].color);
+	const hasBorderWidthShorthand = borderWidth !== void 0 && !isZeroWidth(borderWidth);
+	const allSidesBordered = sidesWithBorder.length === 4;
+	if ((hasBorderWidthShorthand || allSidesBordered) && uniformWidth && uniformColor) {
+		const { width, color } = sidesWithBorder[0];
+		borderLayers.push(`inset 0 0 0 ${width} ${color}`);
+	} else {
+		if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
+		if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
+		if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
+		if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
+	}
 	const layers = [...borderLayers, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
 	const needsImportant = hasImportant(topWidth) || hasImportant(rightWidth) || hasImportant(bottomWidth) || hasImportant(leftWidth) || hasImportant(topColor) || hasImportant(rightColor) || hasImportant(bottomColor) || hasImportant(leftColor) || hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
 	const newStyles = { ...classStyles };
@@ -177,7 +219,7 @@ const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, e
 	if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
 	return newValue;
 };
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions, excludedPseudoStates = [] }) {
 	const schemaKey = require_generateSchemaKey.generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -199,7 +241,7 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	if (!propertyStateMap) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
 	const styles = {};
 	const skipRestForProperty = originalPropertyDefinition.skipRestState === true;
-	const declaredPseudoStates = originalPropertyDefinition.pseudoStates ?? [];
+	const declaredPseudoStates = require_componentStatePseudoStates.filterPseudoStatesByExclusion(originalPropertyDefinition.pseudoStates, excludedPseudoStates);
 	const declaredPropertyStates = new Set([...skipRestForProperty ? [] : ["rest"], ...declaredPseudoStates]);
 	for (const propStateStr in propertyStateMap) {
 		if (!declaredPropertyStates.has(propStateStr)) continue;
@@ -311,6 +353,21 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (componentName === "pagination" && layer === "item" && propertyKey === "spacing") {
+			const padding = cssDeclarations[CSS_PADDING];
+			if (padding) cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
+				padding,
+				schema,
+				iconLayerKey: require_generateSchemaKey.generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "icon",
+					subComponentName
+				}),
+				state: propertyState,
+				theme
+			});
+		}
 		if (componentName === "paddlenav" && layer === "root") {
 			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
@@ -382,26 +439,30 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 			const componentStates = variantConfig.componentStates;
 			for (const componentStateKey in componentStates) {
 				const componentState = componentStates[componentStateKey];
-				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-					const layer = componentState.layers[layerKey];
-					for (const propertyKey in layer.properties) {
-						const originalPropertyDefinition = layer.properties[propertyKey];
-						const declarations = generateDeclaration({
-							componentName,
-							variantKey,
-							variantValue: variantOption,
-							componentStateKey,
-							componentStateValue: componentStateOption,
-							layer: layerKey,
-							layerOptionalPseudoSelector: layer.pseudoSelector,
-							propertyKey,
-							originalPropertyDefinition,
-							theme,
-							schema,
-							currentStyles: styles,
-							previewOptions
-						});
-						styles = deepMerge(styles, declarations);
+				for (const componentStateOption of componentState.options) {
+					const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						for (const propertyKey in layer.properties) {
+							const originalPropertyDefinition = layer.properties[propertyKey];
+							const declarations = generateDeclaration({
+								componentName,
+								variantKey,
+								variantValue: variantOption,
+								componentStateKey,
+								componentStateValue: componentStateOption,
+								layer: layerKey,
+								layerOptionalPseudoSelector: layer.pseudoSelector,
+								propertyKey,
+								originalPropertyDefinition,
+								theme,
+								schema,
+								currentStyles: styles,
+								previewOptions,
+								excludedPseudoStates
+							});
+							styles = deepMerge(styles, declarations);
+						}
 					}
 				}
 			}
@@ -437,27 +498,31 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 				const componentStates = variantConfig.componentStates;
 				for (const componentStateKey in componentStates) {
 					const componentState = componentStates[componentStateKey];
-					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-						const layer = componentState.layers[layerKey];
-						for (const propertyKey in layer.properties) {
-							const originalPropertyDefinition = layer.properties[propertyKey];
-							const declarations = generateDeclaration({
-								componentName,
-								variantKey,
-								variantValue: variantOption,
-								componentStateKey,
-								componentStateValue: componentStateOption,
-								subComponentName: subComponentKey,
-								layer: layerKey,
-								layerOptionalPseudoSelector: layer.pseudoSelector,
-								propertyKey,
-								originalPropertyDefinition,
-								theme,
-								schema,
-								currentStyles: styles,
-								previewOptions
-							});
-							styles = deepMerge(styles, declarations);
+					for (const componentStateOption of componentState.options) {
+						const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						for (const layerKey in componentState.layers) {
+							const layer = componentState.layers[layerKey];
+							for (const propertyKey in layer.properties) {
+								const originalPropertyDefinition = layer.properties[propertyKey];
+								const declarations = generateDeclaration({
+									componentName,
+									variantKey,
+									variantValue: variantOption,
+									componentStateKey,
+									componentStateValue: componentStateOption,
+									subComponentName: subComponentKey,
+									layer: layerKey,
+									layerOptionalPseudoSelector: layer.pseudoSelector,
+									propertyKey,
+									originalPropertyDefinition,
+									theme,
+									schema,
+									currentStyles: styles,
+									previewOptions,
+									excludedPseudoStates
+								});
+								styles = deepMerge(styles, declarations);
+							}
 						}
 					}
 				}

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

@@ -1,6 +1,7 @@
 /*! © 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 { configurableProperties } from "../properties.js";
+import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { findFixtureTypeForValue } from "./buildConfigSchema.js";
@@ -10,7 +11,9 @@ import { isFunction, mergeWith } from "lodash-es";
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const CSS_GAP = "gap";
+const CSS_PADDING = "padding";
 const CSS_LINE_HEIGHT = "line-height";
+const PAGINATION_CONTROL_SIZE_VAR = "--uds-pagination-control-size";
 const CSS_BORDER_WIDTH = "border-width";
 const CSS_BORDER_RADIUS = "border-radius";
 const CSS_BORDER_COLOR = "border-color";
@@ -50,6 +53,10 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 	{
 		componentName: "tabs",
 		layer: "root"
+	},
+	{
+		componentName: "pagination",
+		layer: "root"
 	}
 ];
 /**
@@ -95,6 +102,15 @@ function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey,
 	return lineHeight;
 }
 /**
+* Shared pagination control height: padding on all sides plus icon size.
+* Keeps page circles, prev/next, and ellipsis vertically aligned when spacing changes.
+*/
+function getPaginationControlSize({ padding, schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (iconSizeValue) return `calc(2 * ${padding} + ${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
+	return `calc(2 * ${padding} + 1em)`;
+}
+/**
 * Forces button borders to use box-shadow instead of border properties.
 * Converts border-width and border-color into an inset box-shadow layer.
 *
@@ -133,11 +149,37 @@ function applyBoxShadowBorder(classStyles) {
 	const bottomColor = classStyles[CSS_BORDER_BOTTOM_COLOR] ?? borderColor;
 	const leftColor = classStyles[CSS_BORDER_LEFT_COLOR] ?? borderColor;
 	const borderLayers = [];
-	if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
-	if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
-	if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
-	if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
-	if (borderLayers.length === 0) return classStyles;
+	const sidesWithBorder = [
+		topWidth,
+		rightWidth,
+		bottomWidth,
+		leftWidth
+	].map((width, index) => {
+		const color = [
+			topColor,
+			rightColor,
+			bottomColor,
+			leftColor
+		][index];
+		return {
+			width: stripImportant(width ?? "").trim(),
+			color: stripImportant(color ?? "").trim()
+		};
+	}).filter(({ width }) => !isZeroWidth(width));
+	if (sidesWithBorder.length === 0) return classStyles;
+	const uniformWidth = sidesWithBorder.every(({ width }) => width === sidesWithBorder[0].width);
+	const uniformColor = sidesWithBorder.every(({ color }) => color && color === sidesWithBorder[0].color);
+	const hasBorderWidthShorthand = borderWidth !== void 0 && !isZeroWidth(borderWidth);
+	const allSidesBordered = sidesWithBorder.length === 4;
+	if ((hasBorderWidthShorthand || allSidesBordered) && uniformWidth && uniformColor) {
+		const { width, color } = sidesWithBorder[0];
+		borderLayers.push(`inset 0 0 0 ${width} ${color}`);
+	} else {
+		if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
+		if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
+		if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
+		if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
+	}
 	const layers = [...borderLayers, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
 	const needsImportant = hasImportant(topWidth) || hasImportant(rightWidth) || hasImportant(bottomWidth) || hasImportant(leftWidth) || hasImportant(topColor) || hasImportant(rightColor) || hasImportant(bottomColor) || hasImportant(leftColor) || hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
 	const newStyles = { ...classStyles };
@@ -176,7 +218,7 @@ const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, e
 	if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
 	return newValue;
 };
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions, excludedPseudoStates = [] }) {
 	const schemaKey = generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -198,7 +240,7 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	if (!propertyStateMap) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
 	const styles = {};
 	const skipRestForProperty = originalPropertyDefinition.skipRestState === true;
-	const declaredPseudoStates = originalPropertyDefinition.pseudoStates ?? [];
+	const declaredPseudoStates = filterPseudoStatesByExclusion(originalPropertyDefinition.pseudoStates, excludedPseudoStates);
 	const declaredPropertyStates = new Set([...skipRestForProperty ? [] : ["rest"], ...declaredPseudoStates]);
 	for (const propStateStr in propertyStateMap) {
 		if (!declaredPropertyStates.has(propStateStr)) continue;
@@ -310,6 +352,21 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (componentName === "pagination" && layer === "item" && propertyKey === "spacing") {
+			const padding = cssDeclarations[CSS_PADDING];
+			if (padding) cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
+				padding,
+				schema,
+				iconLayerKey: generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "icon",
+					subComponentName
+				}),
+				state: propertyState,
+				theme
+			});
+		}
 		if (componentName === "paddlenav" && layer === "root") {
 			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
@@ -381,26 +438,30 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 			const componentStates = variantConfig.componentStates;
 			for (const componentStateKey in componentStates) {
 				const componentState = componentStates[componentStateKey];
-				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-					const layer = componentState.layers[layerKey];
-					for (const propertyKey in layer.properties) {
-						const originalPropertyDefinition = layer.properties[propertyKey];
-						const declarations = generateDeclaration({
-							componentName,
-							variantKey,
-							variantValue: variantOption,
-							componentStateKey,
-							componentStateValue: componentStateOption,
-							layer: layerKey,
-							layerOptionalPseudoSelector: layer.pseudoSelector,
-							propertyKey,
-							originalPropertyDefinition,
-							theme,
-							schema,
-							currentStyles: styles,
-							previewOptions
-						});
-						styles = deepMerge(styles, declarations);
+				for (const componentStateOption of componentState.options) {
+					const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						for (const propertyKey in layer.properties) {
+							const originalPropertyDefinition = layer.properties[propertyKey];
+							const declarations = generateDeclaration({
+								componentName,
+								variantKey,
+								variantValue: variantOption,
+								componentStateKey,
+								componentStateValue: componentStateOption,
+								layer: layerKey,
+								layerOptionalPseudoSelector: layer.pseudoSelector,
+								propertyKey,
+								originalPropertyDefinition,
+								theme,
+								schema,
+								currentStyles: styles,
+								previewOptions,
+								excludedPseudoStates
+							});
+							styles = deepMerge(styles, declarations);
+						}
 					}
 				}
 			}
@@ -436,27 +497,31 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 				const componentStates = variantConfig.componentStates;
 				for (const componentStateKey in componentStates) {
 					const componentState = componentStates[componentStateKey];
-					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-						const layer = componentState.layers[layerKey];
-						for (const propertyKey in layer.properties) {
-							const originalPropertyDefinition = layer.properties[propertyKey];
-							const declarations = generateDeclaration({
-								componentName,
-								variantKey,
-								variantValue: variantOption,
-								componentStateKey,
-								componentStateValue: componentStateOption,
-								subComponentName: subComponentKey,
-								layer: layerKey,
-								layerOptionalPseudoSelector: layer.pseudoSelector,
-								propertyKey,
-								originalPropertyDefinition,
-								theme,
-								schema,
-								currentStyles: styles,
-								previewOptions
-							});
-							styles = deepMerge(styles, declarations);
+					for (const componentStateOption of componentState.options) {
+						const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						for (const layerKey in componentState.layers) {
+							const layer = componentState.layers[layerKey];
+							for (const propertyKey in layer.properties) {
+								const originalPropertyDefinition = layer.properties[propertyKey];
+								const declarations = generateDeclaration({
+									componentName,
+									variantKey,
+									variantValue: variantOption,
+									componentStateKey,
+									componentStateValue: componentStateOption,
+									subComponentName: subComponentKey,
+									layer: layerKey,
+									layerOptionalPseudoSelector: layer.pseudoSelector,
+									propertyKey,
+									originalPropertyDefinition,
+									theme,
+									schema,
+									currentStyles: styles,
+									previewOptions,
+									excludedPseudoStates
+								});
+								styles = deepMerge(styles, declarations);
+							}
 						}
 					}
 				}