@yahoo/uds 3.156.2 → 3.157.1

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

@@ -8,7 +8,7 @@ const require_index$1 = require("../../motion-tokens/dist/index.cjs");
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const isInputWrapperCtx = (context) => {
-	return context.componentName === "input" && context.layer === "inputWrapper";
+	return context.componentName === "input" && (context.layer === "inputWrapper" || context.layer === "inputWrapperDynamic");
 };
 const hexToRgb = (hex) => {
 	hex = hex.replace("#", "");
@@ -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

@@ -8,7 +8,7 @@ import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const isInputWrapperCtx = (context) => {
-	return context.componentName === "input" && context.layer === "inputWrapper";
+	return context.componentName === "input" && (context.layer === "inputWrapper" || context.layer === "inputWrapperDynamic");
 };
 const hexToRgb = (hex) => {
 	hex = hex.replace("#", "");
@@ -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/types/StateAxis.cjs

@@ -0,0 +1,81 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind-internal/dist/packages/automated-config/dist/types/StateAxis.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Atomic-state taxonomy.
+*
+* Every interactive component reacts to a fixed set of "atomic" states, each
+* belonging to one axis:
+*
+* - `interactive` — pointer/keyboard focus signals. At runtime at most one of
+*   these is meaningfully "active" at a time on a given element (you can't
+*   simultaneously hover and press distinctly enough to style separately, etc.).
+*
+* - `modifier` — semantic flags that can stack independently of each other and
+*   of the interactive state. An input can be `invalid` AND `readonly` at the
+*   same time, optionally also `hover`ed.
+*
+* Compound states (`'invalid&hover'`, `'invalid&readonly&hover'`, etc.) are
+* built by listing 0..N modifiers followed by 0..1 interactive. The
+* `canonicalizeStateKey` helper enforces this ordering so that, e.g.,
+* `['hover', 'invalid']` and `['invalid', 'hover']` resolve to the same key.
+*/
+/**
+* Interactive atomics:
+*
+* - `hover`/`pressed` for pointer interaction.
+* - `focus-within` for containers that wrap a focusable child (e.g. an input
+*   wrapper).
+* - `focus-visible` for keyboard-only focus rings on focusable elements.
+*/
+const INTERACTIVE_ATOMICS = [
+	"hover",
+	"pressed",
+	"focus-within",
+	"focus-visible"
+];
+const MODIFIER_ATOMICS = [
+	"invalid",
+	"readonly",
+	"placeholder-shown",
+	"autofill",
+	"visited"
+];
+const INTERACTIVE_ATOMIC_SET = new Set(INTERACTIVE_ATOMICS);
+const MODIFIER_ATOMIC_SET = new Set(MODIFIER_ATOMICS);
+function isInteractiveAtomic(state) {
+	return INTERACTIVE_ATOMIC_SET.has(state);
+}
+function isModifierAtomic(state) {
+	return MODIFIER_ATOMIC_SET.has(state);
+}
+function isAtomicState(state) {
+	return isInteractiveAtomic(state) || isModifierAtomic(state);
+}
+const STATE_PRIORITY_INDEX = new Map([
+	"visited",
+	"placeholder-shown",
+	"autofill",
+	"focus-within",
+	"focus-visible",
+	"hover",
+	"pressed",
+	"invalid",
+	"readonly"
+].map((atom, i) => [atom, i]));
+/**
+* Comparator usable with `Array.prototype.sort`. Atoms not in `STATE_PRIORITY`
+* sort to the front (weakest) — this only triggers for unknown strings; every
+* known `AtomicState` is in the priority array.
+*/
+function comparePriority(a, b) {
+	return (STATE_PRIORITY_INDEX.get(a) ?? -1) - (STATE_PRIORITY_INDEX.get(b) ?? -1);
+}
+//#endregion
+exports.INTERACTIVE_ATOMICS = INTERACTIVE_ATOMICS;
+exports.MODIFIER_ATOMICS = MODIFIER_ATOMICS;
+exports.comparePriority = comparePriority;
+exports.isAtomicState = isAtomicState;
+exports.isInteractiveAtomic = isInteractiveAtomic;
+exports.isModifierAtomic = isModifierAtomic;

package/dist/tailwind-internal/dist/packages/automated-config/dist/types/StateAxis.js

@@ -0,0 +1,76 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind-internal/dist/packages/automated-config/dist/types/StateAxis.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+/**
+* Atomic-state taxonomy.
+*
+* Every interactive component reacts to a fixed set of "atomic" states, each
+* belonging to one axis:
+*
+* - `interactive` — pointer/keyboard focus signals. At runtime at most one of
+*   these is meaningfully "active" at a time on a given element (you can't
+*   simultaneously hover and press distinctly enough to style separately, etc.).
+*
+* - `modifier` — semantic flags that can stack independently of each other and
+*   of the interactive state. An input can be `invalid` AND `readonly` at the
+*   same time, optionally also `hover`ed.
+*
+* Compound states (`'invalid&hover'`, `'invalid&readonly&hover'`, etc.) are
+* built by listing 0..N modifiers followed by 0..1 interactive. The
+* `canonicalizeStateKey` helper enforces this ordering so that, e.g.,
+* `['hover', 'invalid']` and `['invalid', 'hover']` resolve to the same key.
+*/
+/**
+* Interactive atomics:
+*
+* - `hover`/`pressed` for pointer interaction.
+* - `focus-within` for containers that wrap a focusable child (e.g. an input
+*   wrapper).
+* - `focus-visible` for keyboard-only focus rings on focusable elements.
+*/
+const INTERACTIVE_ATOMICS = [
+	"hover",
+	"pressed",
+	"focus-within",
+	"focus-visible"
+];
+const MODIFIER_ATOMICS = [
+	"invalid",
+	"readonly",
+	"placeholder-shown",
+	"autofill",
+	"visited"
+];
+const INTERACTIVE_ATOMIC_SET = new Set(INTERACTIVE_ATOMICS);
+const MODIFIER_ATOMIC_SET = new Set(MODIFIER_ATOMICS);
+function isInteractiveAtomic(state) {
+	return INTERACTIVE_ATOMIC_SET.has(state);
+}
+function isModifierAtomic(state) {
+	return MODIFIER_ATOMIC_SET.has(state);
+}
+function isAtomicState(state) {
+	return isInteractiveAtomic(state) || isModifierAtomic(state);
+}
+const STATE_PRIORITY_INDEX = new Map([
+	"visited",
+	"placeholder-shown",
+	"autofill",
+	"focus-within",
+	"focus-visible",
+	"hover",
+	"pressed",
+	"invalid",
+	"readonly"
+].map((atom, i) => [atom, i]));
+/**
+* Comparator usable with `Array.prototype.sort`. Atoms not in `STATE_PRIORITY`
+* sort to the front (weakest) — this only triggers for unknown strings; every
+* known `AtomicState` is in the priority array.
+*/
+function comparePriority(a, b) {
+	return (STATE_PRIORITY_INDEX.get(a) ?? -1) - (STATE_PRIORITY_INDEX.get(b) ?? -1);
+}
+//#endregion
+export { INTERACTIVE_ATOMICS, MODIFIER_ATOMICS, comparePriority, isAtomicState, isInteractiveAtomic, isModifierAtomic };

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

@@ -0,0 +1,33 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_StateAxis = require("../types/StateAxis.cjs");
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/canonicalizeStateKey.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function canonicalizeStateKey(atoms) {
+	if (atoms.length === 0) return "rest";
+	const seen = /* @__PURE__ */ new Set();
+	const modifiers = [];
+	const interactives = [];
+	for (const atom of atoms) {
+		if (seen.has(atom)) continue;
+		seen.add(atom);
+		if (require_StateAxis.isModifierAtomic(atom)) modifiers.push(atom);
+		else if (require_StateAxis.isInteractiveAtomic(atom)) interactives.push(atom);
+		else throw new Error(`canonicalizeStateKey received an unrecognized atom "${atom}". Atoms must be in MODIFIER_ATOMICS or INTERACTIVE_ATOMICS — see StateAxis.`);
+	}
+	modifiers.sort(require_StateAxis.comparePriority);
+	interactives.sort(require_StateAxis.comparePriority);
+	const ordered = [...modifiers, ...interactives];
+	return ordered.length === 0 ? "rest" : ordered.join("&");
+}
+/**
+* Splits a canonical (or legacy) state key into its atomic parts.
+* `'rest'` and `''` produce an empty array.
+*/
+function splitStateKey(stateKey) {
+	if (!stateKey || stateKey === "rest") return [];
+	return stateKey.split("&");
+}
+//#endregion
+exports.canonicalizeStateKey = canonicalizeStateKey;
+exports.splitStateKey = splitStateKey;

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

@@ -0,0 +1,32 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { comparePriority, isInteractiveAtomic, isModifierAtomic } from "../types/StateAxis.js";
+//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/canonicalizeStateKey.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function canonicalizeStateKey(atoms) {
+	if (atoms.length === 0) return "rest";
+	const seen = /* @__PURE__ */ new Set();
+	const modifiers = [];
+	const interactives = [];
+	for (const atom of atoms) {
+		if (seen.has(atom)) continue;
+		seen.add(atom);
+		if (isModifierAtomic(atom)) modifiers.push(atom);
+		else if (isInteractiveAtomic(atom)) interactives.push(atom);
+		else throw new Error(`canonicalizeStateKey received an unrecognized atom "${atom}". Atoms must be in MODIFIER_ATOMICS or INTERACTIVE_ATOMICS — see StateAxis.`);
+	}
+	modifiers.sort(comparePriority);
+	interactives.sort(comparePriority);
+	const ordered = [...modifiers, ...interactives];
+	return ordered.length === 0 ? "rest" : ordered.join("&");
+}
+/**
+* Splits a canonical (or legacy) state key into its atomic parts.
+* `'rest'` and `''` produce an empty array.
+*/
+function splitStateKey(stateKey) {
+	if (!stateKey || stateKey === "rest") return [];
+	return stateKey.split("&");
+}
+//#endregion
+export { canonicalizeStateKey, splitStateKey };

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

@@ -5,12 +5,5 @@
 function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
 	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
 }
-function filterPseudoStatesByExclusion(pseudoStates, excludedPseudoStates) {
-	if (!pseudoStates) return [];
-	if (excludedPseudoStates.length === 0) return [...pseudoStates];
-	const excluded = new Set(excludedPseudoStates);
-	return pseudoStates.filter((pseudoState) => !excluded.has(pseudoState));
-}
 //#endregion
-exports.filterPseudoStatesByExclusion = filterPseudoStatesByExclusion;
 exports.getExcludedPseudoStatesForComponentStateOption = getExcludedPseudoStatesForComponentStateOption;

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

@@ -5,11 +5,5 @@
 function getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption) {
 	return componentState.excludePseudoStatesForOptions?.[componentStateOption] ?? [];
 }
-function filterPseudoStatesByExclusion(pseudoStates, excludedPseudoStates) {
-	if (!pseudoStates) return [];
-	if (excludedPseudoStates.length === 0) return [...pseudoStates];
-	const excluded = new Set(excludedPseudoStates);
-	return pseudoStates.filter((pseudoState) => !excluded.has(pseudoState));
-}
 //#endregion
-export { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption };
+export { 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 };