@yahoo/uds 3.157.0 → 3.157.1

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 */
@@ -127,15 +131,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.
@@ -317,8 +315,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,
@@ -453,6 +459,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 +489,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
 				});
@@ -650,7 +700,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 +731,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,7 +755,8 @@ 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) {
@@ -732,7 +784,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -759,7 +812,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -778,7 +832,8 @@ 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) {
@@ -807,7 +862,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -836,7 +892,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -870,8 +927,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 +1009,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;

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

@@ -12,12 +12,16 @@ import { getConfigDefaultValue, isConfigDefaultValue } from "./defaults.js";
 import { generateDefaultClassName } from "./generateDefaultClassName.js";
 import { generateKeyFromFlatConfigPath } from "./generateKeyFromFlatConfigPath.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
+import { IconButtonMatchButtonHeightConfig, IconButtonMatchButtonHeightSize, disableIconButtonMatchButtonHeight, enableIconButtonMatchButtonHeight, isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
+import { ButtonControlSchema, SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight } from "./getButtonControlHeight.js";
+import { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize } from "./getButtonControlHeightPx.js";
 import { getConfigComponentVariant } from "./getConfigComponentVariant.js";
 import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix } from "./getConfigVariantComponentStatesMatrix.js";
 import { getConfigVariantProperties } from "./getConfigVariantProperties.js";
 import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.js";
 import { getConfigVariants } from "./getConfigVariants.js";
 import { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./getPaginationControlWidthPx.js";
+import { isConfiguratorPropertyVisible } from "./isConfiguratorPropertyVisible.js";
 import { getStateDocsClass, getStateSelector, isKnownStateAtom } from "./pseudoStateSelectors.js";
 import { resolvePropertyStates } from "./resolvePropertyStates.js";
 import { PropertyStates, StateSlot, propertyUsesPerStateEnabled, resolveSlotByCascade } from "./resolveSlotByCascade.js";
@@ -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;

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

@@ -10,6 +10,9 @@ import { atomicAndCompoundStateKeys, resolvePropertyStates } from "./resolveProp
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { findFixtureTypeForValue } from "./buildConfigSchema.js";
 import { generateDefaultClassName } from "./generateDefaultClassName.js";
+import { applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight } from "./getButtonControlHeight.js";
+import "./iconButtonMatchButtonHeight.js";
+import "./getButtonControlHeightPx.js";
 import { getStateDocsClass, getStateSelector } from "./pseudoStateSelectors.js";
 import { resolveSlotByCascade } from "./resolveSlotByCascade.js";
 import "./cartesianProduct.js";
@@ -23,6 +26,7 @@ import "./getConfigVariantProperties.js";
 import "./getConfigVariantPseudoStates.js";
 import "./getConfigVariants.js";
 import "./getPaginationControlWidthPx.js";
+import "./isConfiguratorPropertyVisible.js";
 import { isFunction, mergeWith } from "lodash-es";
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
@@ -126,15 +130,9 @@ function buildStateRecord(transform) {
 }
 const statePseudoMapDocsMode = buildStateRecord(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(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.
@@ -316,8 +314,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 } = configurableProperties[originalPropertyDefinition.name];
+	const configuredExtendedProperties = 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 = generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -452,6 +458,28 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 		*/
 		if (componentName === "button" && layer === "root") {
 			if (propertyKey === CSS_GAP) cssDeclarations[BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
+			if (propertyKey === "spacingVertical") {
+				const paddingVertical = cssDeclarations["padding-top"];
+				if (paddingVertical) applyButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					schema,
+					rootLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "root",
+						subComponentName
+					}),
+					iconLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
+					state: propertyState,
+					theme
+				});
+			}
 			if (propertyKey === "scaleEffect" && propertyState === "hover") {
 				const rootClassName = `.${className}`;
 				const renderValue = (schemaValue) => configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
@@ -460,17 +488,39 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				if (propertyStateMap.hover) styles[rootClassName][BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertyStateMap.hover);
 				if (propertyStateMap.pressed) styles[rootClassName][BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertyStateMap.pressed);
 			}
-			if (cssDeclarations[CSS_LINE_HEIGHT]) {
-				const iconLayerKey = generateSchemaKey({
+			if (cssDeclarations[CSS_LINE_HEIGHT]) cssDeclarations[CSS_LINE_HEIGHT] = getButtonContentLineHeight({
+				schema,
+				rootLayerKey: generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "root",
+					subComponentName
+				}),
+				iconLayerKey: 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) applyIconButtonControlHeightDeclarations({
+					cssDeclarations,
+					paddingVertical,
+					iconButtonSchema: schema,
+					buttonHeightReferenceSchema,
+					variantValue,
+					iconLayerKey: generateSchemaKey({
+						variantKey,
+						variantValue,
+						layer: "icon",
+						subComponentName
+					}),
 					state: propertyState,
 					theme
 				});
@@ -649,7 +699,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) {
@@ -680,14 +730,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) {
@@ -703,7 +754,8 @@ 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) {
@@ -731,7 +783,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 								currentStyles: styles,
 								previewOptions,
 								excludedPseudoStates,
-								emit
+								emit,
+								buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 							});
 							styles = deepMerge(styles, declarations);
 						}
@@ -758,7 +811,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 			theme,
 			previewOptions,
 			emit,
-			currentStyles: styles
+			currentStyles: styles,
+			buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 		});
 	}
 	if (config.subComponents) {
@@ -777,7 +831,8 @@ 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) {
@@ -806,7 +861,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 									currentStyles: styles,
 									previewOptions,
 									excludedPseudoStates,
-									emit
+									emit,
+									buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 								});
 								styles = deepMerge(styles, declarations);
 							}
@@ -835,7 +891,8 @@ function generateConfigStyles(config, schema, theme, previewOptions, emit) {
 				theme,
 				previewOptions,
 				emit,
-				currentStyles: styles
+				currentStyles: styles,
+				buttonHeightReferenceSchema: generateStylesContext?.buttonHeightReferenceSchema
 			});
 		}
 	}
@@ -869,8 +926,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;
@@ -951,7 +1008,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/isConfiguratorPropertyVisible.cjs

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+* (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+* CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+* sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+* on `branch.config` before `resolvedConfig` catches up.
+*/
+function isConfiguratorPropertyVisible(_config, _componentName, _variableKey, _propertyKey, property) {
+	return property.optionalInDefaultSchema !== true;
+}
+//#endregion
+exports.isConfiguratorPropertyVisible = isConfiguratorPropertyVisible;

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

@@ -0,0 +1,20 @@
+
+import { UniversalTokensConfigAuto } from "../generated/universalTokensConfigAuto.cjs";
+
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.d.ts
+//#region src/utils/isConfiguratorPropertyVisible.d.ts
+type ConfigWithComponentVariables = { [K in keyof UniversalTokensConfigAuto]?: {
+  variables?: Record<string, Record<string, unknown>>;
+} };
+/**
+ * Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+ * (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+ * CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+ * sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+ * on `branch.config` before `resolvedConfig` catches up.
+ */
+declare function isConfiguratorPropertyVisible(_config: Readonly<ConfigWithComponentVariables>, _componentName: keyof UniversalTokensConfigAuto, _variableKey: string, _propertyKey: string, property: {
+  optionalInDefaultSchema?: boolean;
+}): boolean; //#endregion
+//#endregion
+export { isConfiguratorPropertyVisible };

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

@@ -0,0 +1,20 @@
+
+import { UniversalTokensConfigAuto } from "../generated/universalTokensConfigAuto.js";
+
+//#region ../automated-config/dist/utils/isConfiguratorPropertyVisible.d.ts
+//#region src/utils/isConfiguratorPropertyVisible.d.ts
+type ConfigWithComponentVariables = { [K in keyof UniversalTokensConfigAuto]?: {
+  variables?: Record<string, Record<string, unknown>>;
+} };
+/**
+ * Opt-in schema properties (`optionalInDefaultSchema`) are written at runtime
+ * (e.g. IconButton `controlHeight` when match-button-height is enabled) for
+ * CSS/Figma sync — not for direct editing in the configurator. Hide them so the
+ * sidebar never calls `getConfigPseudoStateVariables` on slots that may exist
+ * on `branch.config` before `resolvedConfig` catches up.
+ */
+declare function isConfiguratorPropertyVisible(_config: Readonly<ConfigWithComponentVariables>, _componentName: keyof UniversalTokensConfigAuto, _variableKey: string, _propertyKey: string, property: {
+  optionalInDefaultSchema?: boolean;
+}): boolean; //#endregion
+//#endregion
+export { isConfiguratorPropertyVisible };