@yahoo/uds-mobile 2.23.2 → 2.24.0-beta.1

package/README.md

@@ -546,17 +546,11 @@ The CLI generates a TypeScript file containing:
 ```typescript
 // AUTO-GENERATED FILE. DO NOT EDIT.
 export const themes = {
-  light: {
-    /* ... */
-  },
-  dark: {
-    /* ... */
-  },
+  light: {/* ... */},
+  dark: {/* ... */},
 };
 
-export const breakpoints = {
-  /* ... */
-};
+export const breakpoints = {/* ... */};
 ```
 
 ## Testing
@@ -642,9 +636,7 @@ import { mocks } from '@yahoo/uds-mobile/jest';
 jest.mock('react-native-unistyles', () => ({
   ...mocks.unistyles,
   useUnistyles: () => ({
-    theme: {
-      /* custom theme */
-    },
+    theme: {/* custom theme */},
     rt: { themeName: 'dark' },
   }),
 }));

package/dist/bin/automated-config/dist/generated/generatedConfigs.mjs

@@ -2694,7 +2694,8 @@ const AvatarConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -2931,7 +2932,8 @@ const BadgeConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -3532,7 +3534,8 @@ const BadgeConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -4881,7 +4884,8 @@ const BannerConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -5887,7 +5891,8 @@ const BannerConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -8841,7 +8846,8 @@ const ButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -9456,7 +9462,8 @@ const ButtonConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -13187,7 +13194,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -14740,7 +14748,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -16292,7 +16301,8 @@ const ChipConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -17497,7 +17507,8 @@ const ChipConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -18635,7 +18646,8 @@ const IconButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -18771,7 +18783,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperIcon: {
 					label: "helperIcon",
@@ -18789,7 +18802,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperText: {
 					label: "helperText",
@@ -19227,7 +19241,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				}
 			},
 			options: ["md", "lg"]
@@ -19609,7 +19624,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperIcon: {
 					atomicStates: [
@@ -19979,7 +19995,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperText: {
 					atomicStates: [
@@ -22932,7 +22949,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				}
 			},
 			options: ["default"]
@@ -22984,7 +23002,8 @@ const LinkConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -23455,7 +23474,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				iconStart: {
 					label: "iconStart",
@@ -23824,7 +23844,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -26023,7 +26044,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27128,7 +27150,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27853,7 +27876,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						text: {
 							label: "text",
@@ -28302,7 +28326,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -28321,7 +28346,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -28499,7 +28525,8 @@ const ModalConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -29327,7 +29354,8 @@ const ModalConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				description: {
 					label: "description",
@@ -31204,7 +31232,8 @@ const PaddleNavConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -32215,7 +32244,8 @@ const PaddleNavConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -32657,7 +32687,8 @@ const PaginationConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				item: {
 					label: "item",
@@ -34031,7 +34062,8 @@ const PopoverConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -34670,7 +34702,8 @@ const PopoverConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -39992,7 +40025,8 @@ const SelectItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -40755,7 +40789,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -40774,7 +40809,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -40961,7 +40997,8 @@ const SwitchConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -42092,7 +42129,8 @@ const SwitchConfig = {
 								"muted",
 								"on-color"
 							]]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -43253,7 +43291,8 @@ const TabConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -43819,7 +43858,8 @@ const TabConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -46447,7 +46487,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				icon: {
 					label: "icon",
@@ -46462,7 +46503,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				label: {
 					label: "label",
@@ -47129,7 +47171,8 @@ const ToastConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				icon: {
 					label: "icon",
@@ -47517,7 +47560,8 @@ const ToastConfig = {
 								"multicolor"
 							]]
 						}
-					}
+					},
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -48450,7 +48494,8 @@ const TooltipConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -49085,7 +49130,8 @@ const TooltipConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",

package/dist/components/Button/buttonTheme.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_fontMetrics = require("../../mobile/generated/fontMetrics.cjs");
 //#region src/components/Button/buttonTheme.ts
 const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
 	"xs",
@@ -7,6 +8,7 @@ const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
 	"md",
 	"lg"
 ]);
+const UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;
 function buttonSizePath(size, layer) {
 	return `button/size/${size}/${layer}/rest`;
 }
@@ -23,47 +25,85 @@ function getIconSize(iconStyle) {
 function getVerticalPadding(rootStyle) {
 	return (typeof rootStyle.paddingVertical === "number" ? rootStyle.paddingVertical : void 0) ?? (typeof rootStyle.padding === "number" ? rootStyle.padding : void 0) ?? 0;
 }
-function getButtonContentSize(iconSize, textStyle) {
-	const lineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0;
-	const fontSize = typeof textStyle.fontSize === "number" ? textStyle.fontSize : iconSize;
-	return Math.max(iconSize, lineHeight ?? fontSize);
+function getMetricHeight(value, unitsPerEm, fontSize) {
+	return Math.ceil(Math.max(0, value) / unitsPerEm * fontSize);
+}
+function getSafeLabelLineHeight(textStyle, fallbackFontSize) {
+	const fontSize = typeof textStyle.fontSize === "number" ? textStyle.fontSize : fallbackFontSize;
+	const tokenLineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : fontSize;
+	const metrics = typeof textStyle.fontFamily === "string" ? require_fontMetrics.fontMetrics[textStyle.fontFamily] : void 0;
+	if (!metrics || metrics.unitsPerEm <= 0) return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));
+	const metricsLineHeight = getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) + getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) + getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);
+	return Math.max(tokenLineHeight, metricsLineHeight);
 }
-/** Control height from vertical padding plus max(icon size, text line-height), matching web. */
-function getButtonControlMetrics(theme, size) {
+/** Safe line box for the icon font's em square plus any bbox overflow. */
+function getSafeIconCell(fontSize) {
+	const metrics = require_fontMetrics.fontMetrics["uds-icons"];
+	if (!metrics || metrics.unitsPerEm <= 0) return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);
+	const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);
+	const overflowBelowEm = Math.max(0, -metrics.bbox.minY);
+	return Math.ceil(fontSize) + getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) + getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize);
+}
+/**
+* Safe native content metrics while retaining the token-derived target control height.
+*
+* `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
+* metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
+* because they go into Text/Icon styles, which native multiplies by the same
+* capped factor — container math must mirror that, not double-apply it.
+*/
+function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, buttonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, buttonSizePath(size, "icon"));
 	const textStyle = getLayerStyle(theme, buttonSizePath(size, "rootText"));
 	const paddingVertical = getVerticalPadding(rootStyle);
 	const iconSize = getIconSize(iconStyle);
-	const contentSize = getButtonContentSize(iconSize, textStyle);
+	const fontSize = typeof textStyle.fontSize === "number" ? textStyle.fontSize : iconSize;
+	const tokenLineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : fontSize;
+	const targetContentHeight = Math.max(iconSize, tokenLineHeight) * fontScaleFactor;
+	const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);
+	const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);
+	const iconCellHeight = getSafeIconCell(iconSize);
+	const safeContentHeight = Math.max(labelLineHeight, iconCellHeight) * fontScaleFactor;
 	return {
-		controlHeight: Math.ceil(paddingVertical * 2 + contentSize),
-		contentLineHeight: Math.ceil(contentSize),
-		iconSize
+		minHeight,
+		labelLineHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2)
 	};
 }
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
-function getIconButtonControlMetrics(theme, size) {
+/**
+* Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+*
+* `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+* token height stays fixed, with padding absorbing the scaled content.
+*/
+function getIconButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, "root"));
-	const iconSize = getIconSize(getLayerStyle(theme, iconButtonSizePath(size, "icon")));
+	const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, "icon"));
+	const iconSize = getIconSize(iconStyle);
+	const tokenLineHeight = typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : iconSize;
+	const paddingVertical = getVerticalPadding(rootStyle);
 	const explicitHeight = typeof rootStyle.height === "number" ? rootStyle.height : void 0;
-	if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== void 0) return {
-		controlHeight: explicitHeight,
-		iconSize
-	};
+	const hasExplicitHeight = SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== void 0;
+	const minHeight = hasExplicitHeight ? explicitHeight : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);
+	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
-		controlHeight: 0,
-		iconSize
+		minHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2),
+		hasExplicitHeight
 	};
 }
-/** Label line-height matches content box (max of icon size and line-height). */
-function getButtonTextStyleForControlHeight(textStyle, contentLineHeight) {
+/** Apply the metric-safe line height after the token typography styles. */
+function getButtonTextStyle(textStyle, labelLineHeight) {
 	return {
 		...textStyle,
-		lineHeight: contentLineHeight
+		lineHeight: labelLineHeight
 	};
 }
 //#endregion
 exports.getButtonControlMetrics = getButtonControlMetrics;
-exports.getButtonTextStyleForControlHeight = getButtonTextStyleForControlHeight;
+exports.getButtonTextStyle = getButtonTextStyle;
 exports.getIconButtonControlMetrics = getIconButtonControlMetrics;
+exports.getSafeIconCell = getSafeIconCell;

package/dist/components/Button/buttonTheme.d.cts

@@ -6,19 +6,36 @@ import { TextStyle } from "react-native";
 type ButtonTheme = {
   components: Record<string, any>;
 };
-/** Control height from vertical padding plus max(icon size, text line-height), matching web. */
-declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize): {
-  controlHeight: number;
-  contentLineHeight: number;
-  iconSize: number;
+/** Safe line box for the icon font's em square plus any bbox overflow. */
+declare function getSafeIconCell(fontSize: number): number;
+/**
+ * Safe native content metrics while retaining the token-derived target control height.
+ *
+ * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
+ * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
+ * because they go into Text/Icon styles, which native multiplies by the same
+ * capped factor — container math must mirror that, not double-apply it.
+ */
+declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number): {
+  minHeight: number;
+  labelLineHeight: number;
+  iconCellHeight: number;
+  paddingVertical: number;
 };
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
-declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize): {
-  controlHeight: number;
-  iconSize: number;
+/**
+ * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+ *
+ * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+ * token height stays fixed, with padding absorbing the scaled content.
+ */
+declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize, fontScaleFactor?: number): {
+  minHeight: number;
+  iconCellHeight: number;
+  paddingVertical: number;
+  hasExplicitHeight: boolean;
 };
-/** Label line-height matches content box (max of icon size and line-height). */
-declare function getButtonTextStyleForControlHeight(textStyle: TextStyle, contentLineHeight: number): TextStyle;
+/** Apply the metric-safe line height after the token typography styles. */
+declare function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle;
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyleForControlHeight, getIconButtonControlMetrics };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
 //# sourceMappingURL=buttonTheme.d.cts.map

package/dist/components/Button/buttonTheme.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAGK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBAyCE,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA;EACH,aAAA;EAAuB,iBAAA;EAA2B,QAAA;AAAA;;iBAgBvC,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA;EACH,aAAA;EAAuB,QAAA;AAAA;;iBAcZ,kCAAA,CACd,SAAA,EAAW,SAAA,EACX,iBAAA,WACC,SAAA"}
+{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAwBA;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAEA,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA8Bc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}