@yahoo/uds 3.157.0 → 3.158.0

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

@@ -0,0 +1,110 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_getButtonControlHeight = require("./getButtonControlHeight.cjs");
+const require_getButtonControlHeightPx = require("./getButtonControlHeightPx.cjs");
+//#region ../automated-config/dist/utils/iconButtonMatchButtonHeight.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function asMatchButtonHeightConfig(config) {
+	return config;
+}
+function getMatchButtonHeightMap(config) {
+	return config.iconButton?.matchButtonHeight ?? config.matchButtonHeight;
+}
+function getIconButtonVariables(config) {
+	return config.iconButton?.variables ?? config.variables;
+}
+function isMatchButtonHeightSize(size) {
+	return require_getButtonControlHeight.SHARED_BUTTON_ICONBUTTON_SIZES.has(size);
+}
+function isIconButtonMatchButtonHeightEnabled(config, size) {
+	if (!isMatchButtonHeightSize(size)) return false;
+	return getMatchButtonHeightMap(asMatchButtonHeightConfig(config))?.[size] === true;
+}
+function getIconButtonSpacingRestValue(config, size) {
+	const rootKey = `size/${size}/root`;
+	const value = (getIconButtonVariables(config)?.[rootKey]?.spacing)?.rest?.value;
+	return typeof value === "string" ? value : void 0;
+}
+function setIconButtonSpacingRestValue(config, size, spacing) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const rootKey = `size/${size}/root`;
+	const iconButton = matchConfig.iconButton ?? { variables: {} };
+	const existingRoot = iconButton.variables?.[rootKey] ?? {};
+	return {
+		...config,
+		iconButton: {
+			...iconButton,
+			variables: {
+				...iconButton.variables,
+				[rootKey]: {
+					...existingRoot,
+					spacing: { rest: {
+						type: "spacingAliases",
+						value: spacing,
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+function removeIconButtonControlHeight(config, size) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const rootKey = `size/${size}/root`;
+	const iconButton = matchConfig.iconButton;
+	const rootLayer = iconButton?.variables?.[rootKey];
+	if (!rootLayer?.controlHeight) return config;
+	const { controlHeight: _, ...restRoot } = rootLayer;
+	return {
+		...config,
+		iconButton: {
+			...iconButton,
+			variables: {
+				...iconButton?.variables,
+				[rootKey]: restRoot
+			}
+		}
+	};
+}
+function enableIconButtonMatchButtonHeight(config, size) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const currentSpacing = getIconButtonSpacingRestValue(matchConfig, size);
+	const iconButton = {
+		...matchConfig.iconButton,
+		matchButtonHeight: {
+			...matchConfig.iconButton?.matchButtonHeight,
+			[size]: true
+		}
+	};
+	if (currentSpacing !== void 0) iconButton.spacingBeforeMatchButtonHeight = {
+		...matchConfig.iconButton?.spacingBeforeMatchButtonHeight,
+		[size]: currentSpacing
+	};
+	let nextConfig = {
+		...config,
+		iconButton
+	};
+	nextConfig = require_getButtonControlHeightPx.syncButtonControlHeightVarForSize(nextConfig, size);
+	return nextConfig;
+}
+function disableIconButtonMatchButtonHeight(config, size) {
+	const spacingSnapshot = asMatchButtonHeightConfig(config).iconButton?.spacingBeforeMatchButtonHeight?.[size];
+	let nextConfig = removeIconButtonControlHeight(config, size);
+	if (spacingSnapshot !== void 0) nextConfig = setIconButtonSpacingRestValue(nextConfig, size, spacingSnapshot);
+	nextConfig = require_getButtonControlHeightPx.syncIconButtonOnlyControlHeightVarForSize(nextConfig, size);
+	const nextMatchConfig = asMatchButtonHeightConfig(nextConfig);
+	const { [size]: _removedFlag, ...remainingMatchButtonHeight } = nextMatchConfig.iconButton?.matchButtonHeight ?? {};
+	const { [size]: _removedSnapshot, ...remainingSpacingSnapshot } = nextMatchConfig.iconButton?.spacingBeforeMatchButtonHeight ?? {};
+	const iconButton = { ...nextMatchConfig.iconButton };
+	if (Object.keys(remainingMatchButtonHeight).length > 0) iconButton.matchButtonHeight = remainingMatchButtonHeight;
+	else delete iconButton.matchButtonHeight;
+	if (Object.keys(remainingSpacingSnapshot).length > 0) iconButton.spacingBeforeMatchButtonHeight = remainingSpacingSnapshot;
+	else delete iconButton.spacingBeforeMatchButtonHeight;
+	return {
+		...nextConfig,
+		iconButton
+	};
+}
+//#endregion
+exports.disableIconButtonMatchButtonHeight = disableIconButtonMatchButtonHeight;
+exports.enableIconButtonMatchButtonHeight = enableIconButtonMatchButtonHeight;
+exports.isIconButtonMatchButtonHeightEnabled = isIconButtonMatchButtonHeightEnabled;

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

@@ -0,0 +1,19 @@
+
+import { ButtonSize } from "../../../types/dist/index.cjs";
+
+//#region ../automated-config/dist/utils/iconButtonMatchButtonHeight.d.ts
+//#region src/utils/iconButtonMatchButtonHeight.d.ts
+type IconButtonMatchButtonHeightSize = ButtonSize;
+type IconButtonMatchButtonHeightConfig = {
+  iconButton?: {
+    matchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, true>>;
+    spacingBeforeMatchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, string>>;
+    variables?: Record<string, Record<string, unknown>>;
+  };
+  matchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, true>>;
+};
+declare function isIconButtonMatchButtonHeightEnabled(config: object, size: string): boolean;
+declare function enableIconButtonMatchButtonHeight<T extends object>(config: T, size: IconButtonMatchButtonHeightSize): T;
+declare function disableIconButtonMatchButtonHeight<T extends object>(config: T, size: IconButtonMatchButtonHeightSize): T; //#endregion
+//#endregion
+export { IconButtonMatchButtonHeightConfig, IconButtonMatchButtonHeightSize, disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled };

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

@@ -0,0 +1,19 @@
+
+import { ButtonSize } from "../../../types/dist/index.js";
+
+//#region ../automated-config/dist/utils/iconButtonMatchButtonHeight.d.ts
+//#region src/utils/iconButtonMatchButtonHeight.d.ts
+type IconButtonMatchButtonHeightSize = ButtonSize;
+type IconButtonMatchButtonHeightConfig = {
+  iconButton?: {
+    matchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, true>>;
+    spacingBeforeMatchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, string>>;
+    variables?: Record<string, Record<string, unknown>>;
+  };
+  matchButtonHeight?: Partial<Record<IconButtonMatchButtonHeightSize, true>>;
+};
+declare function isIconButtonMatchButtonHeightEnabled(config: object, size: string): boolean;
+declare function enableIconButtonMatchButtonHeight<T extends object>(config: T, size: IconButtonMatchButtonHeightSize): T;
+declare function disableIconButtonMatchButtonHeight<T extends object>(config: T, size: IconButtonMatchButtonHeightSize): T; //#endregion
+//#endregion
+export { IconButtonMatchButtonHeightConfig, IconButtonMatchButtonHeightSize, disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled };

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

@@ -0,0 +1,108 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { SHARED_BUTTON_ICONBUTTON_SIZES } from "./getButtonControlHeight.js";
+import { syncButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize } from "./getButtonControlHeightPx.js";
+//#region ../automated-config/dist/utils/iconButtonMatchButtonHeight.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function asMatchButtonHeightConfig(config) {
+	return config;
+}
+function getMatchButtonHeightMap(config) {
+	return config.iconButton?.matchButtonHeight ?? config.matchButtonHeight;
+}
+function getIconButtonVariables(config) {
+	return config.iconButton?.variables ?? config.variables;
+}
+function isMatchButtonHeightSize(size) {
+	return SHARED_BUTTON_ICONBUTTON_SIZES.has(size);
+}
+function isIconButtonMatchButtonHeightEnabled(config, size) {
+	if (!isMatchButtonHeightSize(size)) return false;
+	return getMatchButtonHeightMap(asMatchButtonHeightConfig(config))?.[size] === true;
+}
+function getIconButtonSpacingRestValue(config, size) {
+	const rootKey = `size/${size}/root`;
+	const value = (getIconButtonVariables(config)?.[rootKey]?.spacing)?.rest?.value;
+	return typeof value === "string" ? value : void 0;
+}
+function setIconButtonSpacingRestValue(config, size, spacing) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const rootKey = `size/${size}/root`;
+	const iconButton = matchConfig.iconButton ?? { variables: {} };
+	const existingRoot = iconButton.variables?.[rootKey] ?? {};
+	return {
+		...config,
+		iconButton: {
+			...iconButton,
+			variables: {
+				...iconButton.variables,
+				[rootKey]: {
+					...existingRoot,
+					spacing: { rest: {
+						type: "spacingAliases",
+						value: spacing,
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+function removeIconButtonControlHeight(config, size) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const rootKey = `size/${size}/root`;
+	const iconButton = matchConfig.iconButton;
+	const rootLayer = iconButton?.variables?.[rootKey];
+	if (!rootLayer?.controlHeight) return config;
+	const { controlHeight: _, ...restRoot } = rootLayer;
+	return {
+		...config,
+		iconButton: {
+			...iconButton,
+			variables: {
+				...iconButton?.variables,
+				[rootKey]: restRoot
+			}
+		}
+	};
+}
+function enableIconButtonMatchButtonHeight(config, size) {
+	const matchConfig = asMatchButtonHeightConfig(config);
+	const currentSpacing = getIconButtonSpacingRestValue(matchConfig, size);
+	const iconButton = {
+		...matchConfig.iconButton,
+		matchButtonHeight: {
+			...matchConfig.iconButton?.matchButtonHeight,
+			[size]: true
+		}
+	};
+	if (currentSpacing !== void 0) iconButton.spacingBeforeMatchButtonHeight = {
+		...matchConfig.iconButton?.spacingBeforeMatchButtonHeight,
+		[size]: currentSpacing
+	};
+	let nextConfig = {
+		...config,
+		iconButton
+	};
+	nextConfig = syncButtonControlHeightVarForSize(nextConfig, size);
+	return nextConfig;
+}
+function disableIconButtonMatchButtonHeight(config, size) {
+	const spacingSnapshot = asMatchButtonHeightConfig(config).iconButton?.spacingBeforeMatchButtonHeight?.[size];
+	let nextConfig = removeIconButtonControlHeight(config, size);
+	if (spacingSnapshot !== void 0) nextConfig = setIconButtonSpacingRestValue(nextConfig, size, spacingSnapshot);
+	nextConfig = syncIconButtonOnlyControlHeightVarForSize(nextConfig, size);
+	const nextMatchConfig = asMatchButtonHeightConfig(nextConfig);
+	const { [size]: _removedFlag, ...remainingMatchButtonHeight } = nextMatchConfig.iconButton?.matchButtonHeight ?? {};
+	const { [size]: _removedSnapshot, ...remainingSpacingSnapshot } = nextMatchConfig.iconButton?.spacingBeforeMatchButtonHeight ?? {};
+	const iconButton = { ...nextMatchConfig.iconButton };
+	if (Object.keys(remainingMatchButtonHeight).length > 0) iconButton.matchButtonHeight = remainingMatchButtonHeight;
+	else delete iconButton.matchButtonHeight;
+	if (Object.keys(remainingSpacingSnapshot).length > 0) iconButton.spacingBeforeMatchButtonHeight = remainingSpacingSnapshot;
+	else delete iconButton.spacingBeforeMatchButtonHeight;
+	return {
+		...nextConfig,
+		iconButton
+	};
+}
+//#endregion
+export { disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled };

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

@@ -11,6 +11,9 @@ const require_resolvePropertyStates = require("./resolvePropertyStates.cjs");
 const require_variantConfigGuards = require("./variantConfigGuards.cjs");
 const require_buildConfigSchema = require("./buildConfigSchema.cjs");
 const require_generateDefaultClassName = require("./generateDefaultClassName.cjs");
+const require_getButtonControlHeight = require("./getButtonControlHeight.cjs");
+require("./iconButtonMatchButtonHeight.cjs");
+require("./getButtonControlHeightPx.cjs");
 const require_pseudoStateSelectors = require("./pseudoStateSelectors.cjs");
 const require_resolveSlotByCascade = require("./resolveSlotByCascade.cjs");
 require("./cartesianProduct.cjs");
@@ -24,6 +27,7 @@ require("./getConfigVariantProperties.cjs");
 require("./getConfigVariantPseudoStates.cjs");
 require("./getConfigVariants.cjs");
 require("./getPaginationControlWidthPx.cjs");
+require("./isConfiguratorPropertyVisible.cjs");
 let lodash_es = require("lodash-es");
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
@@ -86,7 +90,8 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 const LEGACY_STATE_KEYS = [
 	"disabled",
 	"focused",
-	"focused-keyboard"
+	"focused-keyboard",
+	"selected"
 ];
 /**
 * Enumerates every canonical state key the system supports: rest, every atom,
@@ -127,15 +132,9 @@ function buildStateRecord(transform) {
 }
 const statePseudoMapDocsMode = buildStateRecord(require_pseudoStateSelectors.getStateDocsClass);
 /**
-* Generates button line-height with icon size minimum.
-* Ensures button line-height is at least as tall as the icon to prevent clipping.
-* @returns Enhanced line-height CSS value with max(), or original value if icon size unavailable
+* Layout line-height for button root: icon size only (not textVariant line-height).
+* @see getButtonContentLineHeight
 */
-function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey, state, theme }) {
-	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
-	if (iconSizeValue) return `max(${lineHeight}, ${theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
-	return lineHeight;
-}
 /**
 * Shared pagination control content size: max(icon size, text line-height).
 * Keeps page numbers and prev/next icons vertically centered when typography exceeds icon height.
@@ -256,6 +255,14 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
 	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
 	return className.replaceAll(/\s+/g, "-");
 }
+/**
+* Select triggers carry `uds-ring-shadow` and draw focus via the focus-ring tokens.
+* Input wrappers still use `focus-within` border styling, so exclude `.uds-ring` and
+* `.uds-select-field-trigger` descendants from those rules.
+*/
+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}`;
+}
 const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
 	const { value, type } = schemaStateValue;
 	const propertyConfig = require_properties.configurableProperties[propertyName];
@@ -317,8 +324,16 @@ 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 }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, declaredStates, layerUsesAtomicStates, 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 configuredExtendedProperties = (0, lodash_es.isFunction)(configuredExtendedGetter) ? configuredExtendedGetter({
+		componentName,
+		subComponentName,
+		layer,
+		propertyKey
+	}) : configuredExtendedGetter;
+	if (!(typeof configuredCssProperties === "string" && configuredCssProperties.length > 0 || Array.isArray(configuredCssProperties) && configuredCssProperties.length > 0 || Array.isArray(configuredExtendedProperties) && configuredExtendedProperties.length > 0)) return {};
 	const schemaKey = require_generateSchemaKey.generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -347,7 +362,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	for (const propStateStr of orderedStateKeys) {
 		if (!emittableStates.has(propStateStr)) continue;
 		const propertyState = propStateStr;
-		const propertyStateSelector = require_pseudoStateSelectors.getStateSelector(propertyState);
+		let propertyStateSelector = require_pseudoStateSelectors.getStateSelector(propertyState);
+		if (componentName === "selectitem" && propertyState === "focused") propertyStateSelector = ":is(:focus, [data-active-item])";
 		const schemaValueForState = shouldUseExhaustive || layerUsesAtomicStates ? require_resolveSlotByCascade.resolveSlotByCascade(propStateStr, resolutionStates) : propertyStateMap[propertyState];
 		if (!schemaValueForState) continue;
 		if (!shouldUseExhaustive) {
@@ -406,7 +422,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} ${layerClassSelector}`;
 			} else {
 				className = generateClassName({
 					componentName,
@@ -416,7 +433,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 					layerOptionalPseudoSelector,
 					subComponentName
 				});
-				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} .${className}` : `.${rootVariantClassName}${propertyStateSelector} .${className}`;
+				const layerClassSelector = getLayerClassSelector(layer, className, componentName, propertyStateSelector);
+				fullClassName = bumpRootSpecificity ? `.${rootVariantClassName}.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}` : `.${rootVariantClassName}${propertyStateSelector} ${layerClassSelector}`;
 			}
 		}
 		const { cssProperties, extendedProperties: extendedPropertiesGetter } = require_properties.configurableProperties[originalPropertyDefinition.name];
@@ -453,6 +471,28 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 		*/
 		if (componentName === "button" && layer === "root") {
 			if (propertyKey === CSS_GAP) cssDeclarations[require_index.BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
+			if (propertyKey === "spacingVertical") {
+				const paddingVertical = cssDeclarations["padding-top"];
+				if (paddingVertical) require_getButtonControlHeight.applyButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					schema,
+					rootLayerKey: require_generateSchemaKey.generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "root",
+						subComponentName
+					}),
+					iconLayerKey: require_generateSchemaKey.generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
+					state: propertyState,
+					theme
+				});
+			}
 			if (propertyKey === "scaleEffect" && propertyState === "hover") {
 				const rootClassName = `.${className}`;
 				const renderValue = (schemaValue) => require_properties.configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
@@ -461,17 +501,39 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				if (propertyStateMap.hover) styles[rootClassName][require_index.BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertyStateMap.hover);
 				if (propertyStateMap.pressed) styles[rootClassName][require_index.BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertyStateMap.pressed);
 			}
-			if (cssDeclarations[CSS_LINE_HEIGHT]) {
-				const iconLayerKey = require_generateSchemaKey.generateSchemaKey({
+			if (cssDeclarations[CSS_LINE_HEIGHT]) cssDeclarations[CSS_LINE_HEIGHT] = require_getButtonControlHeight.getButtonContentLineHeight({
+				schema,
+				rootLayerKey: require_generateSchemaKey.generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "root",
+					subComponentName
+				}),
+				iconLayerKey: require_generateSchemaKey.generateSchemaKey({
 					variantKey,
 					variantValue,
 					layer: "icon",
 					subComponentName
-				});
-				cssDeclarations[CSS_LINE_HEIGHT] = getButtonLineHeightWithIconMinimum({
-					lineHeight: cssDeclarations[CSS_LINE_HEIGHT],
-					schema,
-					iconLayerKey,
+				}),
+				state: propertyState,
+				theme
+			});
+		}
+		if (componentName === "iconbutton" && layer === "root") {
+			if (propertyKey === "spacing") {
+				const paddingVertical = cssDeclarations[CSS_PADDING];
+				if (paddingVertical) require_getButtonControlHeight.applyIconButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					iconButtonSchema: schema,
+					buttonHeightReferenceSchema,
+					variantValue,
+					iconLayerKey: require_generateSchemaKey.generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
 					state: propertyState,
 					theme
 				});
@@ -513,8 +575,8 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS] && (componentName === "paddlenav" && layer === "root" || componentName === "input" && layer === "inputWrapperDynamic")) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 		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];
 		}
 		if ((componentName === "tabs" || componentName === "tab") && layer === "root") {
@@ -650,7 +712,7 @@ function emitSchemaOverrideStyles({ componentName, subComponentName, variantKey,
 * layers express the variant's universal baseline, with per-state overrides
 * winning via class-compound specificity).
 */
-function emitUniversalLayers({ componentName, subComponentName, variantKey, variantOption, layers, schema, theme, previewOptions, emit, currentStyles, bumpRootSpecificity }) {
+function emitUniversalLayers({ componentName, subComponentName, variantKey, variantOption, layers, schema, theme, previewOptions, emit, currentStyles, bumpRootSpecificity, buttonHeightReferenceSchema }) {
 	let styles = currentStyles;
 	const variables = schema.variables;
 	for (const layerKey in layers) {
@@ -681,14 +743,15 @@ function emitUniversalLayers({ componentName, subComponentName, variantKey, vari
 				currentStyles: styles,
 				previewOptions,
 				emit,
-				bumpRootSpecificity
+				bumpRootSpecificity,
+				buttonHeightReferenceSchema
 			});
 			styles = deepMerge(styles, declarations);
 		}
 	}
 	return styles;
 }
-function generateConfigStyles(config, schema, theme, previewOptions, emit) {
+function generateConfigStyles(config, schema, theme, previewOptions, emit, generateStylesContext) {
 	const componentName = config.label.toLowerCase();
 	let styles = {};
 	for (const variantKey in config.variants) {
@@ -704,14 +767,17 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				previewOptions,
 				emit,
 				currentStyles: styles,
-				bumpRootSpecificity: true
+				bumpRootSpecificity: true,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 			const componentStates = variantConfig.componentStates;
 			for (const componentStateKey in componentStates) {
 				const componentState = componentStates[componentStateKey];
 				for (const componentStateOption of componentState.options) {
 					const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					const excludedLayers = new Set(require_componentStatePseudoStates.getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 					for (const layerKey in componentState.layers) {
+						if (excludedLayers.has(layerKey)) continue;
 						const layer = componentState.layers[layerKey];
 						for (const propertyKey in layer.properties) {
 							const originalPropertyDefinition = layer.properties[propertyKey];
@@ -732,7 +798,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -759,7 +826,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -778,14 +846,17 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 					previewOptions,
 					emit,
 					currentStyles: styles,
-					bumpRootSpecificity: true
+					bumpRootSpecificity: true,
+					buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 				});
 				const componentStates = variantConfig.componentStates;
 				for (const componentStateKey in componentStates) {
 					const componentState = componentStates[componentStateKey];
 					for (const componentStateOption of componentState.options) {
 						const excludedPseudoStates = require_componentStatePseudoStates.getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						const excludedLayers = new Set(require_componentStatePseudoStates.getExcludedLayersForComponentStateOption(componentState, componentStateOption));
 						for (const layerKey in componentState.layers) {
+							if (excludedLayers.has(layerKey)) continue;
 							const layer = componentState.layers[layerKey];
 							for (const propertyKey in layer.properties) {
 								const originalPropertyDefinition = layer.properties[propertyKey];
@@ -807,7 +878,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -836,7 +908,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -870,8 +943,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 * @param previewOptions - Options for generating preview mode class modifiers
 * @returns CSS styles object with grouped selectors for default aliases
 */
-const generateStylesInner = (config, schema, theme, previewOptions) => {
-	const styles = generateConfigStyles(config, schema, theme, previewOptions, previewOptions.emit ?? "exhaustive");
+const generateStylesInner = (config, schema, theme, previewOptions, generateStylesContext) => {
+	const styles = generateConfigStyles(config, schema, theme, previewOptions, previewOptions.emit ?? "exhaustive", generateStylesContext);
 	if (!config.variants && !config.subComponents) return styles;
 	const componentName = config.label.toLowerCase();
 	if (componentName !== "button" && componentName !== "iconbutton") return styles;
@@ -952,7 +1025,7 @@ const generateStylesInner = (config, schema, theme, previewOptions) => {
 * list, so minifiers leave their specificity intact. (gzip already collapses the
 * repeated declaration blocks, so the shipped-size cost is minimal.)
 */
-const generateStyles = (config, schema, theme, previewOptions) => generateStylesInner(config, schema, theme, previewOptions);
+const generateStyles = (config, schema, theme, previewOptions, generateStylesContext) => generateStylesInner(config, schema, theme, previewOptions, generateStylesContext);
 /**
 * Throws if `values` contains a duplicate entry. Runs at config-import time so
 * a typo like `atomicStates: ['hover', 'hover']` fails the UDS build instead

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

@@ -12,12 +12,16 @@ import { getConfigDefaultValue, isConfigDefaultValue } from "./defaults.cjs";
 import { generateDefaultClassName } from "./generateDefaultClassName.cjs";
 import { generateKeyFromFlatConfigPath } from "./generateKeyFromFlatConfigPath.cjs";
 import { generateSchemaKey } from "./generateSchemaKey.cjs";
+import { IconButtonMatchButtonHeightConfig, IconButtonMatchButtonHeightSize, disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.cjs";
+import { ButtonControlSchema, SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight } from "./getButtonControlHeight.cjs";
+import { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize } from "./getButtonControlHeightPx.cjs";
 import { getConfigComponentVariant } from "./getConfigComponentVariant.cjs";
 import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix } from "./getConfigVariantComponentStatesMatrix.cjs";
 import { getConfigVariantProperties } from "./getConfigVariantProperties.cjs";
 import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.cjs";
 import { getConfigVariants } from "./getConfigVariants.cjs";
 import { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./getPaginationControlWidthPx.cjs";
+import { isConfiguratorPropertyVisible } from "./isConfiguratorPropertyVisible.cjs";
 import { getStateDocsClass, getStateSelector, isKnownStateAtom } from "./pseudoStateSelectors.cjs";
 import { resolvePropertyStates } from "./resolvePropertyStates.cjs";
 import { PropertyStates, StateSlot, propertyUsesPerStateEnabled, resolveSlotByCascade } from "./resolveSlotByCascade.cjs";
@@ -97,7 +101,8 @@ declare function generateDeclaration({
   excludedPseudoStates,
   emit,
   fallbackStateMap,
-  bumpRootSpecificity
+  bumpRootSpecificity,
+  buttonHeightReferenceSchema
 }: {
   componentName: string;
   subComponentName?: string;
@@ -121,10 +126,13 @@ declare function generateDeclaration({
   emit?: EmitMode;
   fallbackStateMap?: VariableState;
   bumpRootSpecificity?: boolean;
+  buttonHeightReferenceSchema?: ButtonControlSchema;
 }): Record<string, Record<string, string>>;
 declare function generateConfigStyles<C extends ComponentConfig>(config: C, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions?: {
-  generatePseudoStateClassModifier: boolean;
-}, emit?: EmitMode): Record<string, Record<string, string>>;
+  generatePseudoStateClassModifier?: boolean;
+}, emit?: EmitMode, generateStylesContext?: {
+  buttonHeightReferenceSchema?: ButtonControlSchema;
+}): Record<string, Record<string, string>>;
 /**
  * Public entry point. Generates a component's CSS, emitting each declared state
  * as its own rule (one selector per rule) so the cascade is carried entirely by
@@ -143,6 +151,8 @@ declare function generateConfigStyles<C extends ComponentConfig>(config: C, sche
 declare const generateStyles: (config: ComponentConfig, schema: ComponentSchema<ComponentConfig>, theme: ThemeFn, previewOptions: {
   generatePseudoStateClassModifier: boolean;
   emit?: EmitMode;
+}, generateStylesContext?: {
+  buttonHeightReferenceSchema?: ButtonControlSchema;
 }) => Record<string, Record<string, string>>;
 declare function createConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof configurableProperties)[C]['possibleFixtures'], V extends readonly (readonly unknown[])[] = readonly (readonly unknown[])[]>(prop: {
   name: C;
@@ -150,7 +160,8 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
   values: V;
   defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
   label: string;
-  skipRestState?: boolean; /** @deprecated Prefer layer-level `atomicStates` + `excludeAtomics`. */
+  skipRestState?: boolean;
+  optionalInDefaultSchema?: boolean; /** @deprecated Prefer layer-level `atomicStates` + `excludeAtomics`. */
   pseudoStates?: PossibleStates[];
   excludeAtomics?: AtomicState[];
   supportsCustom?: boolean;
@@ -189,6 +200,7 @@ declare function createComponentStates<T extends {
   label: string;
   options: readonly string[];
   excludePseudoStatesForOptions?: Partial<Record<string, readonly PossibleStates[]>>;
+  excludeLayersForOptions?: Partial<Record<string, readonly string[]>>;
   layers?: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;