@yahoo/uds 3.152.1 → 3.153.0

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

@@ -1,4 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { getArbitraryFixture, validateArbitraryValue } from "../../../fixtures/src/util.js";
@@ -16,6 +17,14 @@ function findFixtureTypeForValue(property, value) {
 function findFixtureType(property, variantKey) {
 	return findFixtureTypeForValue(property, property.defaults[variantKey]);
 }
+function appendPseudoStateVariables(variableObject, propertyKey, property, variantOption, excludedPseudoStates = []) {
+	if (!property.pseudoStates) return;
+	for (const pseudoState of filterPseudoStatesByExclusion(property.pseudoStates, excludedPseudoStates)) variableObject[propertyKey][pseudoState] = {
+		type: findFixtureType(property, variantOption),
+		valueType: "alias",
+		value: property.defaults[variantOption]
+	};
+}
 /** Builds component schema from ComponentConfig at runtime */
 function buildConfigSchema(config) {
 	const result = {};
@@ -47,11 +56,7 @@ function buildConfigSchema(config) {
 							valueType: "alias",
 							value: property.defaults[variantOption]
 						} };
-						if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
-							type: findFixtureType(property, variantOption),
-							valueType: "alias",
-							value: property.defaults[variantOption]
-						};
+						appendPseudoStateVariables(variableObject, propertyKey, property, variantOption, getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption));
 						result.variables[schemaKey] = {
 							...result.variables[schemaKey],
 							...variableObject
@@ -77,11 +82,7 @@ function buildConfigSchema(config) {
 						valueType: "alias",
 						value: property.defaults[variantOption]
 					} };
-					if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
-						type: findFixtureType(property, variantOption),
-						valueType: "alias",
-						value: property.defaults[variantOption]
-					};
+					appendPseudoStateVariables(variableObject, propertyKey, property, variantOption);
 					result.variables[schemaKey] = {
 						...result.variables[schemaKey],
 						...variableObject
@@ -118,11 +119,7 @@ function buildConfigSchema(config) {
 								valueType: "alias",
 								value: property.defaults[variantOption]
 							} };
-							if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
-								type: findFixtureType(property, variantOption),
-								valueType: "alias",
-								value: property.defaults[variantOption]
-							};
+							appendPseudoStateVariables(variableObject, propertyKey, property, variantOption, getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption));
 							result.variables[schemaKey] = {
 								...result.variables[schemaKey],
 								...variableObject
@@ -149,11 +146,7 @@ function buildConfigSchema(config) {
 							valueType: "alias",
 							value: property.defaults[variantOption]
 						} };
-						if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
-							type: findFixtureType(property, variantOption),
-							valueType: "alias",
-							value: property.defaults[variantOption]
-						};
+						appendPseudoStateVariables(variableObject, propertyKey, property, variantOption);
 						result.variables[schemaKey] = {
 							...result.variables[schemaKey],
 							...variableObject

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

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../automated-config/dist/utils/componentStatePseudoStates.js
+/*! © 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/automated-config/dist/utils/componentStatePseudoStates.js

@@ -0,0 +1,14 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../automated-config/dist/utils/componentStatePseudoStates.js
+/*! © 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/automated-config/dist/utils/getConfigVariantPseudoStates.cjs

@@ -1,19 +1,21 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_componentStatePseudoStates = require("./componentStatePseudoStates.cjs");
 const require_variantConfigGuards = require("./variantConfigGuards.cjs");
 const require_getConfigComponentVariant = require("./getConfigComponentVariant.cjs");
 //#region ../automated-config/dist/utils/getConfigVariantPseudoStates.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const DEFAULT_PSEUDO_STATES = ["rest"];
-function getConfigVariantPseudoStates(config, variantKey, state, subComponentName) {
+function getConfigVariantPseudoStates(config, variantKey, state, subComponentName, componentStateValue) {
 	const componentVariant = require_getConfigComponentVariant.getConfigComponentVariant(config, variantKey, subComponentName);
 	if (!componentVariant) return null;
+	const excludedPseudoStates = state && componentStateValue && require_variantConfigGuards.isVariantConfigWithComponentStates(componentVariant) ? require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentVariant.componentStates[state], componentStateValue) : [];
 	const variantLayers = require_variantConfigGuards.isVariantConfigWithProperties(componentVariant) ? Object.entries(componentVariant?.layers ?? {}) : [];
 	const stateLayers = require_variantConfigGuards.isVariantConfigWithComponentStates(componentVariant) && state ? Object.entries(componentVariant.componentStates[state].layers ?? {}) : [];
 	return [...variantLayers, ...stateLayers].flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
 		layerKey,
 		propertyKey,
 		property
-	])).flatMap(([layerKey, propertyKey, property]) => [...property.skipRestState ? DEFAULT_PSEUDO_STATES.filter((s) => s !== "rest") : DEFAULT_PSEUDO_STATES, ...property.pseudoStates ?? []].map((pseudoState) => [
+	])).flatMap(([layerKey, propertyKey, property]) => [...property.skipRestState ? DEFAULT_PSEUDO_STATES.filter((s) => s !== "rest") : DEFAULT_PSEUDO_STATES, ...require_componentStatePseudoStates.filterPseudoStatesByExclusion(property.pseudoStates, excludedPseudoStates)].map((pseudoState) => [
 		layerKey,
 		propertyKey,
 		property,

package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.d.cts

@@ -6,6 +6,6 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
 //#region src/utils/getConfigVariantPseudoStates.d.ts
 type GenericProperty = SelectedConfigurableProperty<any, any>;
 type InfoTuple = [string, string, GenericProperty];
-declare function getConfigVariantPseudoStates<C extends ComponentConfig>(config: C, variantKey: string, state?: string, subComponentName?: string): Record<PossibleStatesWithRest, InfoTuple[]> | null; //#endregion
+declare function getConfigVariantPseudoStates<C extends ComponentConfig>(config: C, variantKey: string, state?: string, subComponentName?: string, componentStateValue?: string): Record<PossibleStatesWithRest, InfoTuple[]> | null; //#endregion
 //#endregion
 export { getConfigVariantPseudoStates };

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

@@ -6,6 +6,6 @@ import { SelectedConfigurableProperty } from "../properties.js";
 //#region src/utils/getConfigVariantPseudoStates.d.ts
 type GenericProperty = SelectedConfigurableProperty<any, any>;
 type InfoTuple = [string, string, GenericProperty];
-declare function getConfigVariantPseudoStates<C extends ComponentConfig>(config: C, variantKey: string, state?: string, subComponentName?: string): Record<PossibleStatesWithRest, InfoTuple[]> | null; //#endregion
+declare function getConfigVariantPseudoStates<C extends ComponentConfig>(config: C, variantKey: string, state?: string, subComponentName?: string, componentStateValue?: string): Record<PossibleStatesWithRest, InfoTuple[]> | null; //#endregion
 //#endregion
 export { getConfigVariantPseudoStates };

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

@@ -1,19 +1,21 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { getConfigComponentVariant } from "./getConfigComponentVariant.js";
 //#region ../automated-config/dist/utils/getConfigVariantPseudoStates.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const DEFAULT_PSEUDO_STATES = ["rest"];
-function getConfigVariantPseudoStates(config, variantKey, state, subComponentName) {
+function getConfigVariantPseudoStates(config, variantKey, state, subComponentName, componentStateValue) {
 	const componentVariant = getConfigComponentVariant(config, variantKey, subComponentName);
 	if (!componentVariant) return null;
+	const excludedPseudoStates = state && componentStateValue && isVariantConfigWithComponentStates(componentVariant) ? getExcludedPseudoStatesForComponentStateOption(componentVariant.componentStates[state], componentStateValue) : [];
 	const variantLayers = isVariantConfigWithProperties(componentVariant) ? Object.entries(componentVariant?.layers ?? {}) : [];
 	const stateLayers = isVariantConfigWithComponentStates(componentVariant) && state ? Object.entries(componentVariant.componentStates[state].layers ?? {}) : [];
 	return [...variantLayers, ...stateLayers].flatMap(([layerKey, layer]) => Object.entries(layer.properties).map(([propertyKey, property]) => [
 		layerKey,
 		propertyKey,
 		property
-	])).flatMap(([layerKey, propertyKey, property]) => [...property.skipRestState ? DEFAULT_PSEUDO_STATES.filter((s) => s !== "rest") : DEFAULT_PSEUDO_STATES, ...property.pseudoStates ?? []].map((pseudoState) => [
+	])).flatMap(([layerKey, propertyKey, property]) => [...property.skipRestState ? DEFAULT_PSEUDO_STATES.filter((s) => s !== "rest") : DEFAULT_PSEUDO_STATES, ...filterPseudoStatesByExclusion(property.pseudoStates, excludedPseudoStates)].map((pseudoState) => [
 		layerKey,
 		propertyKey,
 		property,

package/dist/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");
@@ -19,7 +20,9 @@ let lodash_es = require("lodash-es");
 //#region ../automated-config/dist/utils/index.js
 /*! © 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";
@@ -59,6 +62,10 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 	{
 		componentName: "tabs",
 		layer: "root"
+	},
+	{
+		componentName: "pagination",
+		layer: "root"
 	}
 ];
 /**
@@ -104,6 +111,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.
 *
@@ -142,11 +158,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 };
@@ -185,7 +227,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,
@@ -207,7 +249,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;
@@ -319,6 +361,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];
@@ -390,26 +447,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);
+						}
 					}
 				}
 			}
@@ -445,27 +506,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);
+							}
 						}
 					}
 				}
@@ -613,6 +678,7 @@ function createSubComponentConfig(config) {
 	return config;
 }
 //#endregion
+exports.applyBoxShadowBorder = applyBoxShadowBorder;
 exports.createComponentStates = createComponentStates;
 exports.createConfigurableProperty = createConfigurableProperty;
 exports.createLayerConfig = createLayerConfig;

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

@@ -19,6 +19,26 @@ import { getConfigSubcomponents } from "./subcomponents.cjs";
 //#region src/utils/index.d.ts
 type ThemeFn = (path: string) => string;
 declare const statePseudoMapDocsMode: Record<PossibleStatesWithRest, string>;
+/**
+ * Forces button borders to use box-shadow instead of border properties.
+ * Converts border-width and border-color into an inset box-shadow layer.
+ *
+ * Why box-shadow for borders?
+ * - Respects border-radius (unlike outline which stays rectangular)
+ * - Allows layering multiple shadows in a single property
+ * - GPU-accelerated and performant
+ * - Works perfectly with rounded/circular buttons
+ *
+ * @param classStyles - The CSS declarations for a button class
+ * @returns Modified styles with box-shadow layers, or original if no border
+ *
+ * @example
+ * Input:  { border-width: '2px', border-color: 'red', box-shadow: '0 2px 4px rgba(0,0,0,0.1)' }
+ * Output: { box-shadow: 'inset 0 0 0 2px red, 0 2px 4px rgba(0,0,0,0.1)' }
+ * Renders borders using inset box-shadows instead of CSS border widths.
+ * This preserves visual borders without affecting layout dimensions.
+ */
+declare function applyBoxShadowBorder(classStyles: Record<string, string>): Record<string, string>;
 declare function generateClassName({
   componentName,
   subComponentName,
@@ -52,7 +72,8 @@ declare function generateDeclaration({
   originalPropertyDefinition,
   theme,
   currentStyles,
-  previewOptions
+  previewOptions,
+  excludedPseudoStates
 }: {
   componentName: string;
   subComponentName?: string;
@@ -70,6 +91,7 @@ declare function generateDeclaration({
   previewOptions?: {
     generatePseudoStateClassModifier?: boolean;
   };
+  excludedPseudoStates?: readonly PossibleStates[];
 }): Record<string, Record<string, string>>;
 declare function generateConfigStyles<C extends ComponentConfig>(config: C, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions?: {
   generatePseudoStateClassModifier: boolean;
@@ -123,6 +145,7 @@ declare function createVariantConfigWithComponentStates(config: {
 declare function createComponentStates(config: {
   label: string;
   options: string[];
+  excludePseudoStatesForOptions?: Partial<Record<string, readonly PossibleStates[]>>;
   layers: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;
@@ -138,4 +161,4 @@ declare function createSubComponentConfig(config: {
   variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
 }): SubComponentConfig; //#endregion
 //#endregion
-export { createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };
+export { applyBoxShadowBorder, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };

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

@@ -19,6 +19,26 @@ import { getConfigSubcomponents } from "./subcomponents.js";
 //#region src/utils/index.d.ts
 type ThemeFn = (path: string) => string;
 declare const statePseudoMapDocsMode: Record<PossibleStatesWithRest, string>;
+/**
+ * Forces button borders to use box-shadow instead of border properties.
+ * Converts border-width and border-color into an inset box-shadow layer.
+ *
+ * Why box-shadow for borders?
+ * - Respects border-radius (unlike outline which stays rectangular)
+ * - Allows layering multiple shadows in a single property
+ * - GPU-accelerated and performant
+ * - Works perfectly with rounded/circular buttons
+ *
+ * @param classStyles - The CSS declarations for a button class
+ * @returns Modified styles with box-shadow layers, or original if no border
+ *
+ * @example
+ * Input:  { border-width: '2px', border-color: 'red', box-shadow: '0 2px 4px rgba(0,0,0,0.1)' }
+ * Output: { box-shadow: 'inset 0 0 0 2px red, 0 2px 4px rgba(0,0,0,0.1)' }
+ * Renders borders using inset box-shadows instead of CSS border widths.
+ * This preserves visual borders without affecting layout dimensions.
+ */
+declare function applyBoxShadowBorder(classStyles: Record<string, string>): Record<string, string>;
 declare function generateClassName({
   componentName,
   subComponentName,
@@ -52,7 +72,8 @@ declare function generateDeclaration({
   originalPropertyDefinition,
   theme,
   currentStyles,
-  previewOptions
+  previewOptions,
+  excludedPseudoStates
 }: {
   componentName: string;
   subComponentName?: string;
@@ -70,6 +91,7 @@ declare function generateDeclaration({
   previewOptions?: {
     generatePseudoStateClassModifier?: boolean;
   };
+  excludedPseudoStates?: readonly PossibleStates[];
 }): Record<string, Record<string, string>>;
 declare function generateConfigStyles<C extends ComponentConfig>(config: C, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions?: {
   generatePseudoStateClassModifier: boolean;
@@ -123,6 +145,7 @@ declare function createVariantConfigWithComponentStates(config: {
 declare function createComponentStates(config: {
   label: string;
   options: string[];
+  excludePseudoStatesForOptions?: Partial<Record<string, readonly PossibleStates[]>>;
   layers: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;
@@ -138,4 +161,4 @@ declare function createSubComponentConfig(config: {
   variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
 }): SubComponentConfig; //#endregion
 //#endregion
-export { createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };
+export { applyBoxShadowBorder, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };