jfs-components 0.1.8 → 0.1.12

package/lib/module/components/CompareTable/CompareTable.js

@@ -3,8 +3,9 @@
 import React from 'react';
 import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Accordion from '../Accordion/Accordion';
+import Table from '../Table/Table';
 import Image from '../Image/Image';
 import IconButton from '../IconButton/IconButton';
 import Icon from '../../icons/Icon';
@@ -104,7 +105,8 @@ function CompareTable({
   addColumnLabel = 'Add a card',
   maxColumns = 4,
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
@@ -118,6 +120,11 @@ function CompareTable({
   const cardLabelFontFamily = getVariableByName('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = getVariableByName('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = getVariableByName('image/radius', modes) ?? 8;
+  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
+  // The published token store is still out of sync (the variable resolves to
+  // `0` in the design), so the read falls back to `0` and will pick up a
+  // rounded value automatically once the store syncs.
+  const cardRadius = getVariableByName('selectionCard/radius', modes) ?? 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -127,6 +134,9 @@ function CompareTable({
   const addBorderSize = getVariableByName('iconButton/border/size', modes) ?? 1;
   const addPadding = getVariableByName('iconButton/padding', modes) ?? 11;
   const addIconSize = getVariableByName('iconButton/icon/size', modes) ?? 18;
+  // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+  // circle"), mirroring IconButton's own resolution.
+  const addRadius = getVariableByName('iconButton/radius', modes) ?? 9999;
   const addBg = ADD_BUTTON_BG;
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
@@ -151,6 +161,8 @@ function CompareTable({
   const cellPaddingV = getVariableByName('compareTableCell/padding/vertical', modes) ?? 12;
   const columnCount = columns.length;
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
+  /** Grid columns shared by the selection-card row and every table row. */
+  const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -185,6 +197,7 @@ function CompareTable({
     minWidth: 0,
     minHeight: 147,
     backgroundColor: cardBg,
+    borderRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -209,7 +222,7 @@ function CompareTable({
         accessibilityLabel: column.label
       }), column.label != null && /*#__PURE__*/_jsx(Text, {
         style: cardLabelStyle,
-        numberOfLines: 2,
+        ...resolveTruncation(disableTruncation, 2),
         children: column.label
       }), column.actionLabel != null && /*#__PURE__*/_jsx(Pressable, {
         onPress: column.onActionPress,
@@ -246,7 +259,7 @@ function CompareTable({
       style: {
         width: addPadding * 2 + addIconSize,
         height: addPadding * 2 + addIconSize,
-        borderRadius: 9999,
+        borderRadius: addRadius,
         borderWidth: addBorderSize,
         borderColor: addBorderColor,
         backgroundColor: addBg,
@@ -262,7 +275,7 @@ function CompareTable({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: cardLabelStyle,
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: addColumnLabel
     })]
   }, "__add_card__");
@@ -285,53 +298,72 @@ function CompareTable({
     }
     return cloneChildrenWithModes(value, modes);
   };
-  const renderTable = section => /*#__PURE__*/_jsxs(View, {
+
+  // Renders a section's comparison grid using the shared `Table` component.
+  // CompareTable keeps ownership of token resolution and passes the resolved
+  // values as style overrides so the appearance is byte-identical to the
+  // previous hand-rolled grid (full outer border + suppressed last-edge
+  // dividers), while reusing Table's structure and `modes` cascade.
+  //
+  // When the "Add a card" tile is visible, each table row appends an empty
+  // trailing cell with the same flex weight so data columns stay 1:1 beneath
+  // their selection card.
+  const renderTableCell = (content, colIndex, isLastRow, key) => {
+    const isLastCol = colIndex === gridColumnCount - 1;
+    return /*#__PURE__*/_jsx(Table.Cell, {
+      modes: modes,
+      flex: 1,
+      align: "left",
+      isLastColumn: isLastCol,
+      isLastRow: isLastRow,
+      style: {
+        backgroundColor: cellBg,
+        borderColor: cellBorderColor,
+        borderRightWidth: isLastCol ? 0 : cellBorderSize,
+        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+        paddingHorizontal: cellPaddingH,
+        paddingVertical: cellPaddingV
+      },
+      children: content
+    }, key);
+  };
+  const renderTable = section => /*#__PURE__*/_jsxs(Table, {
+    modes: modes,
     style: {
       width: '100%',
       borderWidth: cellBorderSize,
-      borderColor: cellBorderColor,
-      overflow: 'hidden'
+      borderColor: cellBorderColor
     },
-    children: [section.header != null && /*#__PURE__*/_jsx(View, {
+    children: [section.header != null && /*#__PURE__*/_jsx(Table.Header, {
+      modes: modes,
       style: {
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
         borderBottomWidth: cellBorderSize,
         borderBottomColor: cellBorderColor
       },
-      children: /*#__PURE__*/_jsx(Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), section.rows.map((row, rowIndex) => {
-      const isLastRow = rowIndex === section.rows.length - 1;
-      return /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Table.HeaderCell, {
+        modes: modes,
+        flex: 1,
         style: {
-          flexDirection: 'row',
-          width: '100%'
+          backgroundColor: headerBg,
+          paddingHorizontal: headerPaddingH,
+          paddingVertical: headerPaddingV
         },
-        children: Array.from({
-          length: columnCount
-        }).map((_, colIndex) => {
-          const isLastCol = colIndex === columnCount - 1;
-          return /*#__PURE__*/_jsx(View, {
-            style: {
-              flex: 1,
-              minWidth: 0,
-              backgroundColor: cellBg,
-              justifyContent: 'center',
-              paddingHorizontal: cellPaddingH,
-              paddingVertical: cellPaddingV,
-              borderRightWidth: isLastCol ? 0 : cellBorderSize,
-              borderRightColor: cellBorderColor,
-              borderBottomWidth: isLastRow ? 0 : cellBorderSize,
-              borderBottomColor: cellBorderColor
-            },
-            children: renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, colIndex);
+        children: /*#__PURE__*/_jsx(Text, {
+          style: headerTextStyle,
+          children: section.header
         })
-      }, row.key ?? rowIndex);
+      })
+    }), /*#__PURE__*/_jsx(Table.Body, {
+      modes: modes,
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/_jsxs(Table.Row, {
+          modes: modes,
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
+      })
     })]
   });
   return /*#__PURE__*/_jsxs(View, {
@@ -356,9 +388,6 @@ function CompareTable({
         title: section.title,
         defaultExpanded: section.defaultExpanded ?? index === 0,
         modes: modes,
-        style: {
-          paddingHorizontal: headerPaddingH
-        },
         children: renderTable(section)
       }, section.key ?? section.title ?? index))
     })]

package/lib/module/components/CoverageBarComparison/CoverageBarComparison.js

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native';
 import Svg, { Rect } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -136,7 +136,8 @@ function CoverageBarComparison({
   chartStyle,
   legendStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -222,7 +223,7 @@ function CoverageBarComparison({
             minWidth: 1
           },
           children: [hasLabel ? /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [computedLabelStyle, labelStyle],
             children: original.label
           }) : null, /*#__PURE__*/_jsx(BarShape, {

package/lib/module/components/DonutChart/DonutChart.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -126,7 +126,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -224,7 +225,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/_jsx(Text, {
         style: [{
@@ -235,7 +236,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/module/components/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
@@ -61,7 +61,8 @@ export function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -130,7 +131,7 @@ export function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/_jsx(Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/_jsx(Icon, {
       name: "ic_confirm",

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -5,7 +5,7 @@ import { Dimensions, Modal, Platform, Pressable, StyleSheet, Text, View } from '
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import SupportText from '../SupportText/SupportText';
 import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
@@ -155,7 +155,8 @@ const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
+  onBlur,
+  disableTruncation
 }, ref) {
   // ---------------- Modes ----------------
   const {
@@ -542,7 +543,7 @@ const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,

package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -58,6 +58,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = EMPTY_MODES,
   style,
   labelStyle,
@@ -130,7 +131,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/module/components/FormField/FormField.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { View, Text, TextInput as RNTextInput } from 'react-native';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, View, Text, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
+import { useWebOutsidePress } from '../../utils/web-platform-utils';
 import SupportText from '../SupportText/SupportText';
 import Icon from '../../icons/Icon';
 import { useFormContext } from '../Form/Form';
@@ -202,6 +203,21 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
   const [isFocused, setIsFocused] = useState(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  useWebOutsidePress(rootRef, useCallback(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -284,7 +300,30 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -321,6 +360,7 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/_jsxs(View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -341,7 +381,7 @@ const FormField = /*#__PURE__*/forwardRef(function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/_jsx(RNTextInput, {
-        ref: ref,
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

package/lib/module/components/Gauge/Gauge.js

@@ -35,7 +35,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,

package/lib/module/components/HoldingsCard/HoldingsCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text, Pressable, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Radio from '../Radio/Radio';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_COLUMNS = 3;
 const GRID_COLUMN_GAP = 12;
@@ -34,7 +34,8 @@ export default function HoldingsCard({
   onPress,
   modes = EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
   const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5';
@@ -186,7 +187,7 @@ export default function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default avatar asset (shared with the Avatar component) so that
@@ -82,6 +82,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -118,7 +119,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     })]
   });

package/lib/module/components/ListGroup/ListGroup.js

@@ -8,7 +8,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
@@ -43,6 +43,7 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
@@ -95,7 +96,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/module/components/ListItem/ListItem.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
@@ -185,6 +185,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes]);
@@ -239,7 +240,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/_jsx(Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -272,7 +273,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/_jsx(Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/_jsx(View, {

package/lib/module/components/MediaCard/MediaCard.js

@@ -4,7 +4,7 @@ import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
-import GlassFill from './GlassFill';
+import GlassFill from '../../utils/GlassFill/GlassFill';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
@@ -186,7 +186,9 @@ export function Footer({
     children: [/*#__PURE__*/_jsx(GlassFill, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: 'row',

package/lib/module/components/MetricLegendItem/MetricLegendItem.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MetricLegendItem renders a horizontal row consisting of a small colored
@@ -22,7 +22,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = getVariableByName('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = getVariableByName('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -87,7 +88,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/module/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -75,7 +75,8 @@ function CalendarGlyph({
   modes: propModes = EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -120,7 +121,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -182,7 +183,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -239,6 +241,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),