@yahoo/uds 3.157.0 → 3.158.0

package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.cjs

@@ -434,6 +434,12 @@ const paginationWidthVar = {
 	possibleFixtures: ["positiveIntegers"],
 	twThemePath: (_, value) => `${value}px`
 };
+const controlHeight = {
+	name: "controlHeight",
+	cssProperties: [],
+	possibleFixtures: ["positiveIntegers"],
+	twThemePath: (_, value) => `${value}px`
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
@@ -530,7 +536,8 @@ const publicProperties = {
 		twThemePath: () => "",
 		customValueRenderer: ({ value }) => `${String(value)}%`
 	},
-	paginationWidthVar
+	paginationWidthVar,
+	controlHeight
 };
 const internalProperties = {
 	outlineWidth,

package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.js

@@ -434,6 +434,12 @@ const paginationWidthVar = {
 	possibleFixtures: ["positiveIntegers"],
 	twThemePath: (_, value) => `${value}px`
 };
+const controlHeight = {
+	name: "controlHeight",
+	cssProperties: [],
+	possibleFixtures: ["positiveIntegers"],
+	twThemePath: (_, value) => `${value}px`
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
@@ -530,7 +536,8 @@ const publicProperties = {
 		twThemePath: () => "",
 		customValueRenderer: ({ value }) => `${String(value)}%`
 	},
-	paginationWidthVar
+	paginationWidthVar,
+	controlHeight
 };
 const internalProperties = {
 	outlineWidth,

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

@@ -5,5 +5,9 @@
 function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
 	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
 }
+function getExcludedLayersForComponentStateOption(componentState, componentStateOption) {
+	return componentState.excludeLayersForOptions?.[componentStateOption] ?? [];
+}
 //#endregion
+exports.getExcludedLayersForComponentStateOption = getExcludedLayersForComponentStateOption;
 exports.getExcludedPseudoStatesForComponentStateOption = getExcludedPseudoStatesForComponentStateOption;

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

@@ -5,5 +5,8 @@
 function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
 	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
 }
+function getExcludedLayersForComponentStateOption(componentState, componentStateOption) {
+	return componentState.excludeLayersForOptions?.[componentStateOption] ?? [];
+}
 //#endregion
-export { getExcludedPseudoStatesForComponentStateOption };
+export { getExcludedLayersForComponentStateOption, getExcludedPseudoStatesForComponentStateOption };

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

@@ -0,0 +1,126 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_index = require("../../../css-tokens/dist/index.cjs");
+const require_mapTextVariantFixtureToValue = require("../mapTextVariantFixtureToValue.cjs");
+const require_properties = require("../properties.cjs");
+const require_iconButtonMatchButtonHeight = require("./iconButtonMatchButtonHeight.cjs");
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/getButtonControlHeight.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/** Sizes where IconButton control height should match Button. */
+const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg"
+]);
+function getButtonIconSizeVar({ schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (typeof iconSizeValue === "string" && iconSizeValue) return theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
+}
+/**
+* Button content box: max(icon size, text line-height).
+* Matches Figma auto-layout and keeps IconButton height aligned with Button.
+*/
+function getButtonControlContentSize({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	const textVariantValue = schema.variables?.[rootLayerKey]?.textVariant?.[state]?.value;
+	if (iconSizeVar && typeof textVariantValue === "string" && textVariantValue) return `max(${iconSizeVar}, ${theme(require_mapTextVariantFixtureToValue.mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
+	if (iconSizeVar) return iconSizeVar;
+}
+/** `round(up, …, 1px)` matches Math.ceil in getButtonControlHeightPx and Figma hug height. */
+function formatControlHeightCalc(calcExpression) {
+	return `round(up, ${calcExpression}, 1px)`;
+}
+/**
+* Button control height: vertical padding on both sides plus max(icon size, text line-height).
+*/
+function getButtonControlHeight({ paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const contentSize = getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!contentSize) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${contentSize})`);
+}
+/**
+* IconButton control height: uniform padding plus icon size only (no typography).
+*/
+function getIconButtonControlHeight({ paddingVertical, schema, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!iconSizeVar) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${iconSizeVar})`);
+}
+/**
+* Layout line-height for button root: max(icon size, text line-height).
+*/
+function getButtonContentLineHeight({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	return getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) ?? "1em";
+}
+function applyButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const controlHeight = rootLayerKey ? getButtonControlHeight({
+		paddingVertical,
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) : getIconButtonControlHeight({
+		paddingVertical,
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (controlHeight) {
+		cssDeclarations[require_index.BUTTON_CONTROL_HEIGHT_VAR] = controlHeight;
+		cssDeclarations.height = `var(${require_index.BUTTON_CONTROL_HEIGHT_VAR})`;
+	}
+}
+function applyIconButtonSquareDimensions(cssDeclarations) {
+	if (cssDeclarations[require_index.BUTTON_CONTROL_HEIGHT_VAR]) cssDeclarations.width = `var(${require_index.BUTTON_CONTROL_HEIGHT_VAR})`;
+}
+/**
+* IconButton height for xs–lg mirrors Button (padding + max(icon, line-height)).
+* xl uses icon-only height from IconButton tokens.
+*/
+function applyIconButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, iconButtonSchema, buttonHeightReferenceSchema, variantValue, iconLayerKey: _iconLayerKey, state, theme }) {
+	if (buttonHeightReferenceSchema && SHARED_BUTTON_ICONBUTTON_SIZES.has(variantValue) && require_iconButtonMatchButtonHeight.isIconButtonMatchButtonHeightEnabled(iconButtonSchema, variantValue)) {
+		const buttonRootLayerKey = `size/${variantValue}/root`;
+		const buttonIconLayerKey = `size/${variantValue}/icon`;
+		const buttonSpacingValue = buttonHeightReferenceSchema.variables?.[buttonRootLayerKey]?.spacingVertical?.[state]?.value;
+		applyButtonControlHeightDeclarations({
+			cssDeclarations,
+			paddingVertical: typeof buttonSpacingValue === "string" && buttonSpacingValue ? theme(require_properties.configurableProperties.spacingVertical.twThemePath("spacingAliases", buttonSpacingValue)) : paddingVertical,
+			schema: buttonHeightReferenceSchema,
+			rootLayerKey: buttonRootLayerKey,
+			iconLayerKey: buttonIconLayerKey,
+			state,
+			theme
+		});
+		applyIconButtonSquareDimensions(cssDeclarations);
+	}
+}
+//#endregion
+exports.SHARED_BUTTON_ICONBUTTON_SIZES = SHARED_BUTTON_ICONBUTTON_SIZES;
+exports.applyButtonControlHeightDeclarations = applyButtonControlHeightDeclarations;
+exports.applyIconButtonControlHeightDeclarations = applyIconButtonControlHeightDeclarations;
+exports.getButtonContentLineHeight = getButtonContentLineHeight;

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

@@ -0,0 +1,123 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { BUTTON_CONTROL_HEIGHT_VAR } from "../../../css-tokens/dist/index.js";
+import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
+import { configurableProperties } from "../properties.js";
+import { isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/getButtonControlHeight.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/** Sizes where IconButton control height should match Button. */
+const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg"
+]);
+function getButtonIconSizeVar({ schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (typeof iconSizeValue === "string" && iconSizeValue) return theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
+}
+/**
+* Button content box: max(icon size, text line-height).
+* Matches Figma auto-layout and keeps IconButton height aligned with Button.
+*/
+function getButtonControlContentSize({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	const textVariantValue = schema.variables?.[rootLayerKey]?.textVariant?.[state]?.value;
+	if (iconSizeVar && typeof textVariantValue === "string" && textVariantValue) return `max(${iconSizeVar}, ${theme(mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
+	if (iconSizeVar) return iconSizeVar;
+}
+/** `round(up, …, 1px)` matches Math.ceil in getButtonControlHeightPx and Figma hug height. */
+function formatControlHeightCalc(calcExpression) {
+	return `round(up, ${calcExpression}, 1px)`;
+}
+/**
+* Button control height: vertical padding on both sides plus max(icon size, text line-height).
+*/
+function getButtonControlHeight({ paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const contentSize = getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!contentSize) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${contentSize})`);
+}
+/**
+* IconButton control height: uniform padding plus icon size only (no typography).
+*/
+function getIconButtonControlHeight({ paddingVertical, schema, iconLayerKey, state, theme }) {
+	const iconSizeVar = getButtonIconSizeVar({
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (!iconSizeVar) return;
+	return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${iconSizeVar})`);
+}
+/**
+* Layout line-height for button root: max(icon size, text line-height).
+*/
+function getButtonContentLineHeight({ schema, rootLayerKey, iconLayerKey, state, theme }) {
+	return getButtonControlContentSize({
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) ?? "1em";
+}
+function applyButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
+	const controlHeight = rootLayerKey ? getButtonControlHeight({
+		paddingVertical,
+		schema,
+		rootLayerKey,
+		iconLayerKey,
+		state,
+		theme
+	}) : getIconButtonControlHeight({
+		paddingVertical,
+		schema,
+		iconLayerKey,
+		state,
+		theme
+	});
+	if (controlHeight) {
+		cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR] = controlHeight;
+		cssDeclarations.height = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
+	}
+}
+function applyIconButtonSquareDimensions(cssDeclarations) {
+	if (cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR]) cssDeclarations.width = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
+}
+/**
+* IconButton height for xs–lg mirrors Button (padding + max(icon, line-height)).
+* xl uses icon-only height from IconButton tokens.
+*/
+function applyIconButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, iconButtonSchema, buttonHeightReferenceSchema, variantValue, iconLayerKey: _iconLayerKey, state, theme }) {
+	if (buttonHeightReferenceSchema && SHARED_BUTTON_ICONBUTTON_SIZES.has(variantValue) && isIconButtonMatchButtonHeightEnabled(iconButtonSchema, variantValue)) {
+		const buttonRootLayerKey = `size/${variantValue}/root`;
+		const buttonIconLayerKey = `size/${variantValue}/icon`;
+		const buttonSpacingValue = buttonHeightReferenceSchema.variables?.[buttonRootLayerKey]?.spacingVertical?.[state]?.value;
+		applyButtonControlHeightDeclarations({
+			cssDeclarations,
+			paddingVertical: typeof buttonSpacingValue === "string" && buttonSpacingValue ? theme(configurableProperties.spacingVertical.twThemePath("spacingAliases", buttonSpacingValue)) : paddingVertical,
+			schema: buttonHeightReferenceSchema,
+			rootLayerKey: buttonRootLayerKey,
+			iconLayerKey: buttonIconLayerKey,
+			state,
+			theme
+		});
+		applyIconButtonSquareDimensions(cssDeclarations);
+	}
+}
+//#endregion
+export { SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight };

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

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_getButtonControlHeight = require("./getButtonControlHeight.cjs");
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/iconButtonMatchButtonHeight.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 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 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;
+}
+//#endregion
+exports.isIconButtonMatchButtonHeightEnabled = isIconButtonMatchButtonHeightEnabled;

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

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { SHARED_BUTTON_ICONBUTTON_SIZES } from "./getButtonControlHeight.js";
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/iconButtonMatchButtonHeight.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 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 isMatchButtonHeightSize(size) {
+	return SHARED_BUTTON_ICONBUTTON_SIZES.has(size);
+}
+function isIconButtonMatchButtonHeightEnabled(config, size) {
+	if (!isMatchButtonHeightSize(size)) return false;
+	return getMatchButtonHeightMap(asMatchButtonHeightConfig(config))?.[size] === true;
+}
+//#endregion
+export { isIconButtonMatchButtonHeightEnabled };

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

@@ -10,6 +10,7 @@ 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");
 const require_pseudoStateSelectors = require("./pseudoStateSelectors.cjs");
 const require_resolveSlotByCascade = require("./resolveSlotByCascade.cjs");
 let lodash_es = require("lodash-es");
@@ -75,7 +76,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,
@@ -116,15 +118,9 @@ function buildStateRecord(transform) {
 }
 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.
@@ -245,6 +241,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];
@@ -306,8 +310,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,
@@ -336,7 +348,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) {
@@ -395,7 +408,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,
@@ -405,7 +419,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];
@@ -442,6 +457,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";
@@ -450,17 +487,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
 				});
@@ -502,8 +561,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") {
@@ -639,7 +698,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) {
@@ -670,14 +729,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) {
@@ -693,14 +753,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];
@@ -721,7 +784,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -748,7 +812,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -767,14 +832,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];
@@ -796,7 +864,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -825,7 +894,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -859,8 +929,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;
@@ -941,6 +1011,6 @@ 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);
 //#endregion
 exports.generateStyles = generateStyles;