@yahoo/uds 3.153.2 → 3.154.1

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

@@ -40,8 +40,12 @@ type InferredLayerPropertiesForOption<Layer, ExcludedPseudoStates extends readon
 } ? { [PropKey in keyof Props]: InferredPropertyStatesForOption<Props[PropKey], ExcludedPseudoStates> } : {} : {};
 /** Generates schema key → properties mappings for a variant's layers or component states */
 type InferredSchemaMap<VarKey extends string, VarConfig extends VariantConfig, LayersOrStates extends NonNullable<VariantConfigWithComponentStates['componentStates']> | NonNullable<VariantConfigWithProperties['layers']>, Prefix extends string = ''> = LayersOrStates extends NonNullable<VariantConfigWithComponentStates['componentStates']> ? UnionToIntersection<{ [StateKey in keyof OmitIndexSignature<LayersOrStates>]: UnionToIntersection<{ [StateOption in LayersOrStates[StateKey]['options'][number]]: { [LayerKey in keyof OmitIndexSignature<LayersOrStates[StateKey]['layers']> as `${Prefix}${VarKey}/${VarConfig['options'][number]}/${StateKey & string}/${StateOption}/${LayerKey & string}`]: InferredLayerPropertiesForOption<LayersOrStates[StateKey]['layers'][LayerKey], GetExcludedPseudoStatesForOption<LayersOrStates[StateKey], StateOption>> } }[LayersOrStates[StateKey]['options'][number]]> }[keyof OmitIndexSignature<LayersOrStates>]> : { [LayerKey in keyof OmitIndexSignature<LayersOrStates> as `${Prefix}${VarKey}/${VarConfig['options'][number]}/${LayerKey & string}`]: InferredLayerProperties<LayersOrStates[LayerKey]> };
+type InferredVariantLevelProperties<Props extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>> = { [PropKey in keyof Props]: InferredPropertyStates<Props[PropKey]> };
+type InferredVariantPropertiesMap<VarKey extends string, VarConfig extends VariantConfigWithProperties, Prefix extends string = ''> = VarConfig extends {
+  variantProperties: infer Props extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>;
+} ? { [Option in VarConfig['options'][number] as `${Prefix}${VarKey}/${Option}`]: InferredVariantLevelProperties<Props> } : {};
 /** Routes to appropriate schema map generator based on variant configuration type */
-type InferredVariablesFilter<VarKey extends string, VarConfig extends VariantConfig, Prefix extends string = ''> = VarConfig extends VariantConfigWithComponentStates ? InferredSchemaMap<VarKey, VarConfig, VarConfig['componentStates'], Prefix> : VarConfig extends VariantConfigWithProperties ? InferredSchemaMap<VarKey, VarConfig, VarConfig['layers'], Prefix> : {};
+type InferredVariablesFilter<VarKey extends string, VarConfig extends VariantConfig, Prefix extends string = ''> = VarConfig extends VariantConfigWithComponentStates ? InferredSchemaMap<VarKey, VarConfig, VarConfig['componentStates'], Prefix> : VarConfig extends VariantConfigWithProperties ? InferredSchemaMap<VarKey, VarConfig, VarConfig['layers'], Prefix> & InferredVariantPropertiesMap<VarKey, VarConfig, Prefix> : {};
 /** Collects all schema mappings from component variants and subComponents */
 type InferredVariables<C extends ComponentConfig> = (C['variants'] extends NonNullable<ComponentConfig['variants']> ? UnionToIntersection<{ [VarKey in keyof C['variants']]: InferredVariablesFilter<VarKey & string, C['variants'][VarKey]> }[keyof C['variants']]> : {}) & (C['subComponents'] extends NonNullable<ComponentConfig['subComponents']> ? UnionToIntersection<{ [SubCompKey in keyof C['subComponents']]: UnionToIntersection<{ [VarKey in keyof C['subComponents'][SubCompKey]['variants']]: InferredVariablesFilter<VarKey & string, C['subComponents'][SubCompKey]['variants'][VarKey], `${SubCompKey & string}/`> }[keyof C['subComponents'][SubCompKey]['variants']]> }[keyof C['subComponents']]> : {});
 /** Component schema with inferred defaults and variable schema mappings */

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

@@ -65,6 +65,24 @@ function buildConfigSchema(config) {
 				}
 			}
 		} else if (isVariantConfigWithProperties(variantConfig)) {
+			if (variantConfig.variantProperties) {
+				const variantSchemaKey = `${variantKey}/${variantOption}`;
+				result.variables[variantSchemaKey] = result.variables[variantSchemaKey] ?? {};
+				for (const propertyKey in variantConfig.variantProperties) {
+					const property = variantConfig.variantProperties[propertyKey];
+					const variableObject = { [propertyKey]: {} };
+					if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
+						type: findFixtureType(property, variantOption),
+						valueType: "alias",
+						value: property.defaults[variantOption]
+					} };
+					appendPseudoStateVariables(variableObject, propertyKey, property, variantOption);
+					result.variables[variantSchemaKey] = {
+						...result.variables[variantSchemaKey],
+						...variableObject
+					};
+				}
+			}
 			const layers = variantConfig.layers;
 			for (const layerKey in layers) {
 				const layer = layers[layerKey];

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

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -0,0 +1,68 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../../fixtures/dist/index.cjs");
+let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
+let lodash_es = require("lodash-es");
+//#region ../automated-config/dist/utils/getPaginationControlWidthPx.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function resolveSpacingPx(config, alias) {
+	if (!alias) return 0;
+	const scaleValue = (0, lodash_es.get)(config, [
+		"scaleMode",
+		"large",
+		"spacing",
+		alias.replace(".", "_")
+	]);
+	if (typeof scaleValue === "number") return scaleValue;
+	return require_index.spacingMap[alias] ?? 0;
+}
+function resolveTypographyPx(config, textVariant, property) {
+	if (!textVariant) return 0;
+	const typographyConfig = config.typography[textVariant];
+	if (!typographyConfig) return 0;
+	const defaultBreakpoint = config.globalDefaults.breakpoint;
+	const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
+	if (typeof value === "number") return value;
+	if (value && typeof value === "object" && "value" in value) return value.value;
+	return 0;
+}
+/** Pixel width/height for pagination page circles and prev/next controls. */
+function getPaginationControlWidthPx(config, size) {
+	const pagination = config.pagination;
+	if (!pagination?.variables) return 0;
+	const variables = pagination.variables;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = variables[`${layerPrefix}/item`]?.spacing?.rest?.value;
+	const iconSizeAlias = variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const textVariant = variables[`${layerPrefix}/text`]?.textVariant?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
+	return padding * 2 + Math.max(iconSize, lineHeight || iconSize);
+}
+function syncPaginationWidthVarForSize(config, size) {
+	const itemKey = `size/${size}/item`;
+	const widthPx = getPaginationControlWidthPx(config, size);
+	const paginationConfig = config;
+	const existingItem = paginationConfig.pagination?.variables?.[itemKey] ?? {};
+	return {
+		...config,
+		pagination: {
+			...paginationConfig.pagination,
+			variables: {
+				...paginationConfig.pagination?.variables,
+				[itemKey]: {
+					...existingItem,
+					paginationWidthVar: { rest: {
+						type: "positiveIntegers",
+						value: widthPx,
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+//#endregion
+exports.getPaginationControlWidthPx = getPaginationControlWidthPx;
+exports.syncPaginationWidthVarForSize = syncPaginationWidthVarForSize;

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

@@ -0,0 +1,49 @@
+
+//#region ../automated-config/dist/utils/getPaginationControlWidthPx.d.ts
+//#region src/utils/getPaginationControlWidthPx.d.ts
+type PaginationSize = 'sm' | 'md';
+/** Minimal config shape for deriving pagination control width from layer tokens. */
+type PaginationWidthConfig = {
+  pagination?: {
+    variables?: Record<string, {
+      spacing?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      textVariant?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  typography: Record<string, {
+    lineHeight: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+  }>;
+  scaleMode: {
+    large: {
+      spacing: Record<string, number>;
+    };
+  };
+  globalDefaults: {
+    breakpoint: string;
+  };
+};
+/** Pixel width/height for pagination page circles and prev/next controls. */
+declare function getPaginationControlWidthPx(config: PaginationWidthConfig, size: PaginationSize): number;
+declare function syncPaginationWidthVarForSize<T extends object>(config: T, size: PaginationSize): T; //#endregion
+//#endregion
+export { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize };

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

@@ -0,0 +1,49 @@
+
+//#region ../automated-config/dist/utils/getPaginationControlWidthPx.d.ts
+//#region src/utils/getPaginationControlWidthPx.d.ts
+type PaginationSize = 'sm' | 'md';
+/** Minimal config shape for deriving pagination control width from layer tokens. */
+type PaginationWidthConfig = {
+  pagination?: {
+    variables?: Record<string, {
+      spacing?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      size?: {
+        rest?: {
+          value?: string;
+        };
+      };
+      textVariant?: {
+        rest?: {
+          value?: string;
+        };
+      };
+    }>;
+  };
+  typography: Record<string, {
+    lineHeight: {
+      base: number | {
+        value: number;
+      };
+      breakpoints: Record<string, number | {
+        value: number;
+      }>;
+    };
+  }>;
+  scaleMode: {
+    large: {
+      spacing: Record<string, number>;
+    };
+  };
+  globalDefaults: {
+    breakpoint: string;
+  };
+};
+/** Pixel width/height for pagination page circles and prev/next controls. */
+declare function getPaginationControlWidthPx(config: PaginationWidthConfig, size: PaginationSize): number;
+declare function syncPaginationWidthVarForSize<T extends object>(config: T, size: PaginationSize): T; //#endregion
+//#endregion
+export { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize };

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

@@ -0,0 +1,66 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { spacingMap } from "../../../fixtures/dist/index.js";
+import { get } from "lodash-es";
+import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
+//#region ../automated-config/dist/utils/getPaginationControlWidthPx.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+function resolveSpacingPx(config, alias) {
+	if (!alias) return 0;
+	const scaleValue = get(config, [
+		"scaleMode",
+		"large",
+		"spacing",
+		alias.replace(".", "_")
+	]);
+	if (typeof scaleValue === "number") return scaleValue;
+	return spacingMap[alias] ?? 0;
+}
+function resolveTypographyPx(config, textVariant, property) {
+	if (!textVariant) return 0;
+	const typographyConfig = config.typography[textVariant];
+	if (!typographyConfig) return 0;
+	const defaultBreakpoint = config.globalDefaults.breakpoint;
+	const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
+	if (typeof value === "number") return value;
+	if (value && typeof value === "object" && "value" in value) return value.value;
+	return 0;
+}
+/** Pixel width/height for pagination page circles and prev/next controls. */
+function getPaginationControlWidthPx(config, size) {
+	const pagination = config.pagination;
+	if (!pagination?.variables) return 0;
+	const variables = pagination.variables;
+	const layerPrefix = `size/${size}`;
+	const paddingAlias = variables[`${layerPrefix}/item`]?.spacing?.rest?.value;
+	const iconSizeAlias = variables[`${layerPrefix}/icon`]?.size?.rest?.value;
+	const textVariant = variables[`${layerPrefix}/text`]?.textVariant?.rest?.value;
+	const padding = resolveSpacingPx(config, paddingAlias);
+	const iconSize = ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
+	const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
+	return padding * 2 + Math.max(iconSize, lineHeight || iconSize);
+}
+function syncPaginationWidthVarForSize(config, size) {
+	const itemKey = `size/${size}/item`;
+	const widthPx = getPaginationControlWidthPx(config, size);
+	const paginationConfig = config;
+	const existingItem = paginationConfig.pagination?.variables?.[itemKey] ?? {};
+	return {
+		...config,
+		pagination: {
+			...paginationConfig.pagination,
+			variables: {
+				...paginationConfig.pagination?.variables,
+				[itemKey]: {
+					...existingItem,
+					paginationWidthVar: { rest: {
+						type: "positiveIntegers",
+						value: widthPx,
+						valueType: "alias"
+					} }
+				}
+			}
+		}
+	};
+}
+//#endregion
+export { getPaginationControlWidthPx, syncPaginationWidthVarForSize };

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

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 require("../../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../../css-tokens/dist/index.cjs");
+const require_mapTextVariantFixtureToValue = require("../mapTextVariantFixtureToValue.cjs");
 const require_properties = require("../properties.cjs");
 const require_componentStatePseudoStates = require("./componentStatePseudoStates.cjs");
 const require_generateSchemaKey = require("./generateSchemaKey.cjs");
@@ -16,13 +17,14 @@ require("./getConfigVariantComponentStatesMatrix.cjs");
 require("./getConfigVariantProperties.cjs");
 require("./getConfigVariantPseudoStates.cjs");
 require("./getConfigVariants.cjs");
+require("./getPaginationControlWidthPx.cjs");
 let lodash_es = require("lodash-es");
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const CSS_GAP = "gap";
 const CSS_PADDING = "padding";
-const CSS_LINE_HEIGHT = "line-height";
 const PAGINATION_CONTROL_SIZE_VAR = "--uds-pagination-control-size";
+const CSS_GAP = "gap";
+const CSS_LINE_HEIGHT = "line-height";
 const CSS_BORDER_WIDTH = "border-width";
 const CSS_BORDER_RADIUS = "border-radius";
 const CSS_BORDER_COLOR = "border-color";
@@ -111,13 +113,28 @@ function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey,
 	return lineHeight;
 }
 /**
-* Shared pagination control height: padding on all sides plus icon size.
-* Keeps page circles, prev/next, and ellipsis vertically aligned when spacing changes.
+* 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.
 */
-function getPaginationControlSize({ padding, schema, iconLayerKey, state, theme }) {
+function getPaginationControlContentSize({ schema, iconLayerKey, textLayerKey, state, theme }) {
 	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
-	if (iconSizeValue) return `calc(2 * ${padding} + ${theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
-	return `calc(2 * ${padding} + 1em)`;
+	const textVariantValue = schema.variables?.[textLayerKey]?.textVariant?.[state]?.value;
+	if (iconSizeValue && textVariantValue) return `max(${theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))}, ${theme(require_mapTextVariantFixtureToValue.mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
+	if (iconSizeValue) return theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
+	return "1em";
+}
+/**
+* Shared pagination control size: padding on all sides plus max(icon size, line-height).
+* Used for both width and height so page circles stay square for single-digit labels.
+*/
+function getPaginationControlSize({ padding, schema, iconLayerKey, textLayerKey, state, theme }) {
+	return `calc(2 * ${padding} + ${getPaginationControlContentSize({
+		schema,
+		iconLayerKey,
+		textLayerKey,
+		state,
+		theme
+	})})`;
 }
 /**
 * Forces button borders to use box-shadow instead of border properties.
@@ -361,20 +378,41 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
-		if (componentName === "pagination" && layer === "item" && propertyKey === "spacing") {
-			const padding = cssDeclarations[CSS_PADDING];
-			if (padding) cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
-				padding,
-				schema,
-				iconLayerKey: require_generateSchemaKey.generateSchemaKey({
+		if (componentName === "pagination" && layer === "item") {
+			let padding;
+			if (propertyKey === "spacing") padding = cssDeclarations[CSS_PADDING];
+			else if (propertyKey === "paginationWidthVar") {
+				const itemSchemaKey = require_generateSchemaKey.generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "item",
+					subComponentName
+				});
+				const paddingValue = schema.variables?.[itemSchemaKey]?.spacing?.[propertyState]?.value;
+				if (paddingValue) padding = theme(require_properties.configurableProperties.spacing.twThemePath("spacingAliases", paddingValue));
+			}
+			if (padding) {
+				const iconLayerKey = require_generateSchemaKey.generateSchemaKey({
 					variantKey,
 					variantValue,
 					layer: "icon",
 					subComponentName
-				}),
-				state: propertyState,
-				theme
-			});
+				});
+				const textLayerKey = require_generateSchemaKey.generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "text",
+					subComponentName
+				});
+				cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
+					padding,
+					schema,
+					iconLayerKey,
+					textLayerKey,
+					state: propertyState,
+					theme
+				});
+			}
 		}
 		if (componentName === "paddlenav" && layer === "root") {
 			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];

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

@@ -13,6 +13,7 @@ import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix
 import { getConfigVariantProperties } from "./getConfigVariantProperties.cjs";
 import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.cjs";
 import { getConfigVariants } from "./getConfigVariants.cjs";
+import { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./getPaginationControlWidthPx.cjs";
 import { getConfigSubcomponents } from "./subcomponents.cjs";
 
 //#region ../automated-config/dist/utils/index.d.ts
@@ -134,6 +135,7 @@ declare function createVariantConfigWithProperties(config: {
   layers: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;
+  variantProperties?: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
 }): VariantConfigWithProperties;
 declare function createVariantConfigWithComponentStates(config: {
   label: string;

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

@@ -13,6 +13,7 @@ import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix
 import { getConfigVariantProperties } from "./getConfigVariantProperties.js";
 import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.js";
 import { getConfigVariants } from "./getConfigVariants.js";
+import { PaginationWidthConfig, getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./getPaginationControlWidthPx.js";
 import { getConfigSubcomponents } from "./subcomponents.js";
 
 //#region ../automated-config/dist/utils/index.d.ts
@@ -134,6 +135,7 @@ declare function createVariantConfigWithProperties(config: {
   layers: {
     root: LayerConfig;
   } & Record<string, LayerConfig>;
+  variantProperties?: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
 }): VariantConfigWithProperties;
 declare function createVariantConfigWithComponentStates(config: {
   label: string;

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

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
+import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
 import { configurableProperties } from "../properties.js";
 import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
@@ -15,13 +16,14 @@ import "./getConfigVariantComponentStatesMatrix.js";
 import "./getConfigVariantProperties.js";
 import "./getConfigVariantPseudoStates.js";
 import "./getConfigVariants.js";
+import "./getPaginationControlWidthPx.js";
 import { isFunction, mergeWith } from "lodash-es";
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
-const CSS_GAP = "gap";
 const CSS_PADDING = "padding";
-const CSS_LINE_HEIGHT = "line-height";
 const PAGINATION_CONTROL_SIZE_VAR = "--uds-pagination-control-size";
+const CSS_GAP = "gap";
+const CSS_LINE_HEIGHT = "line-height";
 const CSS_BORDER_WIDTH = "border-width";
 const CSS_BORDER_RADIUS = "border-radius";
 const CSS_BORDER_COLOR = "border-color";
@@ -110,13 +112,28 @@ function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey,
 	return lineHeight;
 }
 /**
-* Shared pagination control height: padding on all sides plus icon size.
-* Keeps page circles, prev/next, and ellipsis vertically aligned when spacing changes.
+* 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.
 */
-function getPaginationControlSize({ padding, schema, iconLayerKey, state, theme }) {
+function getPaginationControlContentSize({ schema, iconLayerKey, textLayerKey, state, theme }) {
 	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
-	if (iconSizeValue) return `calc(2 * ${padding} + ${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
-	return `calc(2 * ${padding} + 1em)`;
+	const textVariantValue = schema.variables?.[textLayerKey]?.textVariant?.[state]?.value;
+	if (iconSizeValue && textVariantValue) return `max(${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))}, ${theme(mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
+	if (iconSizeValue) return theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
+	return "1em";
+}
+/**
+* Shared pagination control size: padding on all sides plus max(icon size, line-height).
+* Used for both width and height so page circles stay square for single-digit labels.
+*/
+function getPaginationControlSize({ padding, schema, iconLayerKey, textLayerKey, state, theme }) {
+	return `calc(2 * ${padding} + ${getPaginationControlContentSize({
+		schema,
+		iconLayerKey,
+		textLayerKey,
+		state,
+		theme
+	})})`;
 }
 /**
 * Forces button borders to use box-shadow instead of border properties.
@@ -360,20 +377,41 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
-		if (componentName === "pagination" && layer === "item" && propertyKey === "spacing") {
-			const padding = cssDeclarations[CSS_PADDING];
-			if (padding) cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
-				padding,
-				schema,
-				iconLayerKey: generateSchemaKey({
+		if (componentName === "pagination" && layer === "item") {
+			let padding;
+			if (propertyKey === "spacing") padding = cssDeclarations[CSS_PADDING];
+			else if (propertyKey === "paginationWidthVar") {
+				const itemSchemaKey = generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "item",
+					subComponentName
+				});
+				const paddingValue = schema.variables?.[itemSchemaKey]?.spacing?.[propertyState]?.value;
+				if (paddingValue) padding = theme(configurableProperties.spacing.twThemePath("spacingAliases", paddingValue));
+			}
+			if (padding) {
+				const iconLayerKey = generateSchemaKey({
 					variantKey,
 					variantValue,
 					layer: "icon",
 					subComponentName
-				}),
-				state: propertyState,
-				theme
-			});
+				});
+				const textLayerKey = generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "text",
+					subComponentName
+				});
+				cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
+					padding,
+					schema,
+					iconLayerKey,
+					textLayerKey,
+					state: propertyState,
+					theme
+				});
+			}
 		}
 		if (componentName === "paddlenav" && layer === "root") {
 			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];