@yahoo/uds-mobile 2.23.1 → 2.23.3

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -21,8 +21,8 @@ let generated_styles = require("../../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_gesture_handler = require("react-native-gesture-handler");
-let react_native_safe_area_context = require("react-native-safe-area-context");
 let react_native_screens = require("react-native-screens");
+let react_native_safe_area_context = require("react-native-safe-area-context");
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = (0, react.useState)(0);

package/dist/components/BottomSheet/BottomSheet.js

@@ -18,8 +18,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { bottomSheetStyles } from "../../../generated/styles";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FullWindowOverlay } from "react-native-screens";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = useState(0);

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,72 @@ 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. */
+/** 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. */
 function getButtonControlMetrics(theme, size) {
 	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);
+	const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);
+	const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);
+	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
-		controlHeight: Math.ceil(paddingVertical * 2 + contentSize),
-		contentLineHeight: Math.ceil(contentSize),
-		iconSize
+		minHeight,
+		labelLineHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - Math.max(labelLineHeight, iconCellHeight)) / 2)
 	};
 }
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
+/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
 function getIconButtonControlMetrics(theme, size) {
 	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));
+	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
-		controlHeight: 0,
-		iconSize
+		minHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight)) / 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,24 @@ 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. */
+/** 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. */
 declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize): {
-  controlHeight: number;
-  contentLineHeight: number;
-  iconSize: number;
+  minHeight: number;
+  labelLineHeight: number;
+  iconCellHeight: number;
+  paddingVertical: number;
 };
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
+/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
 declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize): {
-  controlHeight: number;
-  iconSize: 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;;iBAiBhB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA;EAEN,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;AAPF;AAAA,iBAgCgB,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA;EAEN,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBAyBc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

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

@@ -6,19 +6,24 @@ 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. */
+/** 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. */
 declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize): {
-  controlHeight: number;
-  contentLineHeight: number;
-  iconSize: number;
+  minHeight: number;
+  labelLineHeight: number;
+  iconCellHeight: number;
+  paddingVertical: number;
 };
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
+/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
 declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize): {
-  controlHeight: number;
-  iconSize: 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.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.ts","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.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;iBAiBhB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA;EAEN,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;AAPF;AAAA,iBAgCgB,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA;EAEN,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBAyBc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.js

@@ -1,4 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { fontMetrics } from "../../mobile/generated/fontMetrics.js";
 //#region src/components/Button/buttonTheme.ts
 const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
 	"xs",
@@ -6,6 +7,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`;
 }
@@ -22,47 +24,71 @@ 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" ? 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. */
+/** Safe line box for the icon font's em square plus any bbox overflow. */
+function getSafeIconCell(fontSize) {
+	const metrics = 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. */
 function getButtonControlMetrics(theme, size) {
 	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);
+	const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);
+	const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);
+	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
-		controlHeight: Math.ceil(paddingVertical * 2 + contentSize),
-		contentLineHeight: Math.ceil(contentSize),
-		iconSize
+		minHeight,
+		labelLineHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - Math.max(labelLineHeight, iconCellHeight)) / 2)
 	};
 }
-/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */
+/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
 function getIconButtonControlMetrics(theme, size) {
 	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));
+	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
-		controlHeight: 0,
-		iconSize
+		minHeight,
+		iconCellHeight,
+		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight)) / 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
-export { getButtonControlMetrics, getButtonTextStyleForControlHeight, getIconButtonControlMetrics };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
 
 //# sourceMappingURL=buttonTheme.js.map

package/dist/components/Button/buttonTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getButtonContentSize(iconSize: number, textStyle: TextStyle): number {\n  const lineHeight = typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined;\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  return Math.max(iconSize, lineHeight ?? fontSize);\n}\n\n/** Control height from vertical padding plus max(icon size, text line-height), matching web. */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n): { controlHeight: number; contentLineHeight: number; iconSize: number } {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const contentSize = getButtonContentSize(iconSize, textStyle);\n\n  return {\n    controlHeight: Math.ceil(paddingVertical * 2 + contentSize),\n    contentLineHeight: Math.ceil(contentSize),\n    iconSize,\n  };\n}\n\n/** IconButton uses explicit control height only when CSS sets height (match-button-height opt-in). */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n): { controlHeight: number; iconSize: number } {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconSize(iconStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n\n  if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined) {\n    return { controlHeight: explicitHeight, iconSize };\n  }\n\n  return { controlHeight: 0, iconSize };\n}\n\n/** Label line-height matches content box (max of icon size and line-height). */\nexport function getButtonTextStyleForControlHeight(\n  textStyle: TextStyle,\n  contentLineHeight: number,\n): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: contentLineHeight,\n  };\n}\n"],"mappings":";;AAQA,MAAM,iCAAiC,IAAI,IAAoB;CAAC;CAAM;CAAM;CAAM;CAAK,CAAC;AAExF,SAAS,eAAe,MAAkB,OAA6C;CACrF,OAAO,eAAe,KAAK,GAAG,MAAM;;AAGtC,SAAS,mBAAmB,MAAsB,OAAgC;CAChF,OAAO,mBAAmB,KAAK,GAAG,MAAM;;AAG1C,SAAS,cAAc,OAAoB,MAAqC;CAC9E,MAAM,QAAQ,MAAM,WAAW;CAC/B,OAAO,SAAS,OAAO,UAAU,WAAW,QAAQ,EAAE;;AAGxD,SAAS,YAAY,WAA8B;CACjD,QACG,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,OAC9D,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,MACnE;;AAIJ,SAAS,mBAAmB,WAA8B;CACxD,QACG,OAAO,UAAU,oBAAoB,WAAW,UAAU,kBAAkB,KAAA,OAC5E,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU,KAAA,MAC7D;;AAIJ,SAAS,qBAAqB,UAAkB,WAA8B;CAC5E,MAAM,aAAa,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA;CACrF,MAAM,WAAW,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW;CAC/E,OAAO,KAAK,IAAI,UAAU,cAAc,SAAS;;;AAInD,SAAgB,wBACd,OACA,MACwE;CACxE,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,OAAO,CAAC;CACpE,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,OAAO,CAAC;CACpE,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,WAAW,CAAC;CACxE,MAAM,kBAAkB,mBAAmB,UAAU;CACrD,MAAM,WAAW,YAAY,UAAU;CACvC,MAAM,cAAc,qBAAqB,UAAU,UAAU;CAE7D,OAAO;EACL,eAAe,KAAK,KAAK,kBAAkB,IAAI,YAAY;EAC3D,mBAAmB,KAAK,KAAK,YAAY;EACzC;EACD;;;AAIH,SAAgB,4BACd,OACA,MAC6C;CAC7C,MAAM,YAAY,cAAc,OAAO,mBAAmB,MAAM,OAAO,CAAC;CAExE,MAAM,WAAW,YADC,cAAc,OAAO,mBAAmB,MAAM,OAAO,CACjC,CAAC;CACvC,MAAM,iBAAiB,OAAO,UAAU,WAAW,WAAW,UAAU,SAAS,KAAA;CAEjF,IAAI,+BAA+B,IAAI,KAAK,IAAI,mBAAmB,KAAA,GACjE,OAAO;EAAE,eAAe;EAAgB;EAAU;CAGpD,OAAO;EAAE,eAAe;EAAG;EAAU;;;AAIvC,SAAgB,mCACd,WACA,mBACW;CACX,OAAO;EACL,GAAG;EACH,YAAY;EACb"}
+{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { fontMetrics } from '../../../generated/fontMetrics';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n// Covers common native font boxes (roughly 1.2em) plus pixel-rounding headroom.\nconst UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getMetricHeight(value: number, unitsPerEm: number, fontSize: number): number {\n  return Math.ceil((Math.max(0, value) / unitsPerEm) * fontSize);\n}\n\nfunction getSafeLabelLineHeight(textStyle: TextStyle, fallbackFontSize: number): number {\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : fallbackFontSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const metrics =\n    typeof textStyle.fontFamily === 'string' ? fontMetrics[textStyle.fontFamily] : undefined;\n\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));\n  }\n\n  const metricsLineHeight =\n    getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);\n\n  return Math.max(tokenLineHeight, metricsLineHeight);\n}\n\n/** Safe line box for the icon font's em square plus any bbox overflow. */\nexport function getSafeIconCell(fontSize: number): number {\n  const metrics = fontMetrics['uds-icons'];\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);\n  }\n\n  const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);\n  const overflowBelowEm = Math.max(0, -metrics.bbox.minY);\n\n  return (\n    Math.ceil(fontSize) +\n    getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize)\n  );\n}\n\n/** Safe native content metrics while retaining the token-derived target control height. */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n): {\n  minHeight: number;\n  labelLineHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n} {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const targetContentHeight = Math.max(iconSize, tokenLineHeight);\n  const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);\n  const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);\n  const iconCellHeight = getSafeIconCell(iconSize);\n  const safeContentHeight = Math.max(labelLineHeight, iconCellHeight);\n\n  return {\n    minHeight,\n    labelLineHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2),\n  };\n}\n\n/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n): {\n  minHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n  hasExplicitHeight: boolean;\n} {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconSize(iconStyle);\n  const tokenLineHeight =\n    typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : iconSize;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n  const hasExplicitHeight =\n    SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined;\n  const minHeight = hasExplicitHeight\n    ? (explicitHeight as number)\n    : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight));\n  const iconCellHeight = getSafeIconCell(iconSize);\n\n  return {\n    minHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight)) / 2),\n    hasExplicitHeight,\n  };\n}\n\n/** Apply the metric-safe line height after the token typography styles. */\nexport function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: labelLineHeight,\n  };\n}\n"],"mappings":"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"}

package/dist/components/Button.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../motion-tokens/dist/index.cjs");
 const require_motion = require("../motion.cjs");
+const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
 const require_components_Text = require("./Text.cjs");
-const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_native = require("react-native");
@@ -34,7 +34,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto
 * Uses staggered animation: opacity waits until halfway through width animation.
 */
-function AnimatedIconSlot({ children, visible, iconSize, gap }) {
+function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap }) {
 	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG), [visible]);
 	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
 		const totalWidth = iconSize + gap;
@@ -42,7 +42,9 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 			width: (0, react_native_reanimated.interpolate)(progress.value, [0, 1], [0, totalWidth]),
 			opacity: (0, react_native_reanimated.interpolate)(progress.value, [.5, 1], [0, 1], "clamp"),
 			transform: [{ scale: (0, react_native_reanimated.interpolate)(progress.value, [.5, 1], [.7, 1], "clamp") }],
-			overflow: "hidden"
+			overflow: "hidden",
+			minHeight: iconCellHeight,
+			justifyContent: "center"
 		};
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
@@ -85,7 +87,7 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 const Button = (0, react.memo)(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
-	const { controlHeight, contentLineHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size), [theme, size]);
+	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size), [theme, size]);
 	const [pressed, setPressed] = (0, react.useState)(false);
 	generated_styles.buttonStyles.useVariants({
 		size,
@@ -118,7 +120,7 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	const childrenNode = children && ((0, react.isValidElement)(children) ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
 		numberOfLines: 1,
 		textAlign: "center",
-		style: require_components_Button_buttonTheme.getButtonTextStyleForControlHeight(generated_styles.buttonStyles.text, contentLineHeight),
+		style: require_components_Button_buttonTheme.getButtonTextStyle(generated_styles.buttonStyles.text, labelLineHeight),
 		children
 	}));
 	const a11yState = (0, react.useMemo)(() => ({
@@ -143,6 +145,7 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	const startContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize,
+		iconCellHeight,
 		gap: buttonGap,
 		children: showLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
 			size: generated_styles.buttonStyles.icon.fontSize,
@@ -151,28 +154,33 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 			icon: startIcon,
 			size: iconSizeToken,
 			variant: iconVariant,
-			style: generated_styles.buttonStyles.icon
+			style: [generated_styles.buttonStyles.icon, { lineHeight: iconCellHeight }]
 		})
 	});
 	const endContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
 		visible: showEndIcon,
 		iconSize,
+		iconCellHeight,
 		gap: buttonGap,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: endIcon,
 			size: iconSizeToken,
 			variant: iconVariant,
-			style: generated_styles.buttonStyles.icon
+			style: [generated_styles.buttonStyles.icon, { lineHeight: iconCellHeight }]
 		})
 	});
 	const rootStyles = (0, react.useMemo)(() => [
 		generated_styles.buttonStyles.root,
-		{ height: controlHeight },
+		{
+			minHeight,
+			paddingVertical
+		},
 		animatedStyles,
 		typeof style === "function" ? style({ pressed }) : style
 	], [
 		generated_styles.buttonStyles.root,
-		controlHeight,
+		minHeight,
+		paddingVertical,
 		animatedStyles,
 		style,
 		pressed

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAiHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAqHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAiHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAqHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
 import { BUTTON_SPRING_CONFIG } from "../motion.js";
+import { getButtonControlMetrics, getButtonTextStyle } from "./Button/buttonTheme.js";
 import { IconSlot } from "./IconSlot.js";
 import { Text as Text$1 } from "./Text.js";
-import { getButtonControlMetrics, getButtonTextStyleForControlHeight } from "./Button/buttonTheme.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { isValidElement, memo, useCallback, useMemo, useState } from "react";
 import { ActivityIndicator } from "react-native";
@@ -31,7 +31,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto
 * Uses staggered animation: opacity waits until halfway through width animation.
 */
-function AnimatedIconSlot({ children, visible, iconSize, gap }) {
+function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap }) {
 	const progress = useDerivedValue(() => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG), [visible]);
 	const animatedStyle = useAnimatedStyle(() => {
 		const totalWidth = iconSize + gap;
@@ -39,7 +39,9 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 			width: interpolate(progress.value, [0, 1], [0, totalWidth]),
 			opacity: interpolate(progress.value, [.5, 1], [0, 1], "clamp"),
 			transform: [{ scale: interpolate(progress.value, [.5, 1], [.7, 1], "clamp") }],
-			overflow: "hidden"
+			overflow: "hidden",
+			minHeight: iconCellHeight,
+			justifyContent: "center"
 		};
 	});
 	return /* @__PURE__ */ jsx(Animated.View, {
@@ -82,7 +84,7 @@ function AnimatedIconSlot({ children, visible, iconSize, gap }) {
 const Button = memo(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
 	const { theme } = useUnistyles();
-	const { controlHeight, contentLineHeight } = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);
+	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);
 	const [pressed, setPressed] = useState(false);
 	buttonStyles.useVariants({
 		size,
@@ -115,7 +117,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	const childrenNode = children && (isValidElement(children) ? children : /* @__PURE__ */ jsx(Text$1, {
 		numberOfLines: 1,
 		textAlign: "center",
-		style: getButtonTextStyleForControlHeight(buttonStyles.text, contentLineHeight),
+		style: getButtonTextStyle(buttonStyles.text, labelLineHeight),
 		children
 	}));
 	const a11yState = useMemo(() => ({
@@ -140,6 +142,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	const startContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize,
+		iconCellHeight,
 		gap: buttonGap,
 		children: showLoading ? /* @__PURE__ */ jsx(ActivityIndicator, {
 			size: buttonStyles.icon.fontSize,
@@ -148,28 +151,33 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 			icon: startIcon,
 			size: iconSizeToken,
 			variant: iconVariant,
-			style: buttonStyles.icon
+			style: [buttonStyles.icon, { lineHeight: iconCellHeight }]
 		})
 	});
 	const endContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
 		visible: showEndIcon,
 		iconSize,
+		iconCellHeight,
 		gap: buttonGap,
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: endIcon,
 			size: iconSizeToken,
 			variant: iconVariant,
-			style: buttonStyles.icon
+			style: [buttonStyles.icon, { lineHeight: iconCellHeight }]
 		})
 	});
 	const rootStyles = useMemo(() => [
 		buttonStyles.root,
-		{ height: controlHeight },
+		{
+			minHeight,
+			paddingVertical
+		},
 		animatedStyles,
 		typeof style === "function" ? style({ pressed }) : style
 	], [
 		buttonStyles.root,
-		controlHeight,
+		minHeight,
+		paddingVertical,
 		animatedStyles,
 		style,
 		pressed