@yahoo/uds 3.153.2 → 3.154.1

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

@@ -281,9 +281,7 @@ const height = {
 const width = {
 	name: "width",
 	cssProperties: "width",
-	twThemePath: (_, value) => {
-		return `width[${value}]`;
-	},
+	twThemePath: (_, value) => `width[${value}]`,
 	possibleFixtures: ["spacingAliases"]
 };
 const shadow = {
@@ -347,6 +345,95 @@ const opacity = {
 	twThemePath: (_, value) => `opacity[${value}]`,
 	possibleFixtures: ["opacitySteps"]
 };
+const fillOpacity = {
+	name: "fillOpacity",
+	cssProperties: "fill-opacity",
+	twThemePath: (_, value) => `opacity[${value}]`,
+	possibleFixtures: ["opacitySteps"]
+};
+const iconSize = {
+	name: "iconSize",
+	cssProperties: ["width", "height"],
+	twThemePath: (_, value) => `sizing.icon.${value}`,
+	possibleFixtures: ["iconSizes"]
+};
+const scaleEffect = {
+	name: "scaleEffect",
+	cssProperties: BUTTON_SCALE_EFFECT,
+	possibleFixtures: ["scaleEffects"],
+	twThemePath: () => {
+		return ``;
+	},
+	customValueRenderer: (schemaValue) => {
+		const value = schemaValue.value;
+		return String(SCALE_EFFECTS[String(value)] ?? SCALE_EFFECTS.none);
+	}
+};
+const blurBackgroundColor = {
+	...backgroundColor,
+	name: "blurBackgroundColor",
+	cssProperties: `--${BACKGROUND_BLUR_COLOR_PREFIX}`
+};
+const backdropBlur = {
+	name: "backdropBlur",
+	possibleFixtures: ["positiveIntegers"],
+	cssProperties: "--uds-backdrop-blur",
+	twThemePath: () => {
+		return ``;
+	},
+	customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
+		if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
+			const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
+			const property = schema.variables[variablePath][propertyName].rest;
+			if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
+		}
+		return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
+	}
+};
+const blurBackgroundColorFallback = {
+	...backgroundColor,
+	name: "blurBackgroundColorFallback",
+	cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
+};
+const buttonSize = {
+	name: "buttonSize",
+	cssProperties: "--uds-button-size",
+	possibleFixtures: ["buttonSizes"],
+	twThemePath: () => {
+		return ``;
+	},
+	customValueRenderer: (schemaValue) => {
+		return String(schemaValue.value);
+	}
+};
+const buttonVariant = {
+	name: "buttonVariant",
+	cssProperties: "--uds-button-variant",
+	possibleFixtures: ["buttonVariantsFlat"],
+	twThemePath: () => {
+		return ``;
+	},
+	customValueRenderer: (schemaValue) => {
+		return String(schemaValue.value);
+	}
+};
+const iconVariant = {
+	name: "iconVariant",
+	cssProperties: "--uds-icon-variant",
+	possibleFixtures: ["iconVariants"],
+	twThemePath: () => {
+		return ``;
+	},
+	customValueRenderer: (schemaValue) => {
+		return String(schemaValue.value);
+	}
+};
+const paginationWidthVar = {
+	name: "paginationWidthVar",
+	cssProperties: "--uds-pagination-control-size",
+	possibleFixtures: ["positiveIntegers"],
+	twThemePath: (_, value) => `${value}px`
+};
 const publicProperties = {
 	backgroundColor,
 	borderWidth,
@@ -357,28 +444,8 @@ const publicProperties = {
 	borderColor,
 	underlineColor,
 	stroke,
-	buttonSize: {
-		name: "buttonSize",
-		cssProperties: "--uds-button-size",
-		possibleFixtures: ["buttonSizes"],
-		twThemePath: () => {
-			return ``;
-		},
-		customValueRenderer: (schemaValue) => {
-			return String(schemaValue.value);
-		}
-	},
-	buttonVariant: {
-		name: "buttonVariant",
-		cssProperties: "--uds-button-variant",
-		possibleFixtures: ["buttonVariantsFlat"],
-		twThemePath: () => {
-			return ``;
-		},
-		customValueRenderer: (schemaValue) => {
-			return String(schemaValue.value);
-		}
-	},
+	buttonSize,
+	buttonVariant,
 	fontFamily,
 	fontSize,
 	fontVariationSettings,
@@ -388,31 +455,11 @@ const publicProperties = {
 	gap,
 	color,
 	opacity,
-	fillOpacity: {
-		name: "fillOpacity",
-		cssProperties: "fill-opacity",
-		twThemePath: (_, value) => `opacity[${value}]`,
-		possibleFixtures: ["opacitySteps"]
-	},
+	fillOpacity,
 	fontWeight,
-	iconSize: {
-		name: "iconSize",
-		cssProperties: ["width", "height"],
-		twThemePath: (_, value) => `sizing.icon.${value}`,
-		possibleFixtures: ["iconSizes"]
-	},
+	iconSize,
 	spacing,
-	iconVariant: {
-		name: "iconVariant",
-		cssProperties: "--uds-icon-variant",
-		possibleFixtures: ["iconVariants"],
-		twThemePath: () => {
-			return ``;
-		},
-		customValueRenderer: (schemaValue) => {
-			return String(schemaValue.value);
-		}
-	},
+	iconVariant,
 	horizontalMargin,
 	bottomMargin,
 	spacingHorizontal,
@@ -454,44 +501,10 @@ const publicProperties = {
 	},
 	height,
 	width,
-	scaleEffect: {
-		name: "scaleEffect",
-		cssProperties: BUTTON_SCALE_EFFECT,
-		possibleFixtures: ["scaleEffects"],
-		twThemePath: () => {
-			return ``;
-		},
-		customValueRenderer: (schemaValue) => {
-			const value = schemaValue.value;
-			return String(SCALE_EFFECTS[String(value)] ?? SCALE_EFFECTS.none);
-		}
-	},
-	backdropBlur: {
-		name: "backdropBlur",
-		possibleFixtures: ["positiveIntegers"],
-		cssProperties: "--uds-backdrop-blur",
-		twThemePath: () => {
-			return ``;
-		},
-		customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
-			if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
-				const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
-				const property = schema.variables[variablePath][propertyName].rest;
-				if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
-			}
-			return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
-		}
-	},
-	blurBackgroundColor: {
-		...backgroundColor,
-		name: "blurBackgroundColor",
-		cssProperties: `--${BACKGROUND_BLUR_COLOR_PREFIX}`
-	},
-	blurBackgroundColorFallback: {
-		...backgroundColor,
-		name: "blurBackgroundColorFallback",
-		cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
-	},
+	scaleEffect,
+	backdropBlur,
+	blurBackgroundColor,
+	blurBackgroundColorFallback,
 	scrimBackgroundColor: {
 		name: "scrimBackgroundColor",
 		cssProperties: "--uds-scrim-background-color",
@@ -516,7 +529,8 @@ const publicProperties = {
 		cssProperties: "--uds-scrim-opacity",
 		twThemePath: () => "",
 		customValueRenderer: ({ value }) => `${String(value)}%`
-	}
+	},
+	paginationWidthVar
 };
 const internalProperties = {
 	outlineWidth,

package/dist/tailwind-internal/dist/packages/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");
@@ -11,10 +12,10 @@ let lodash_es = require("lodash-es");
 //#region ../tailwind-internal/dist/packages/automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 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";
@@ -103,13 +104,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.
@@ -353,20 +369,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/tailwind-internal/dist/packages/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";
@@ -10,10 +11,10 @@ import { isFunction, mergeWith } from "lodash-es";
 //#region ../tailwind-internal/dist/packages/automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
 /*! © 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";
@@ -102,13 +103,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.
@@ -352,20 +368,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];