jfs-components 0.1.8 → 0.1.12

package/lib/commonjs/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.js

@@ -150,9 +150,13 @@ function GradientMask({
 }
 
 /**
- * Glass / frosted surface for native (iOS + Android).
+ * Shared glass / frosted surface for native (iOS + Android).
  *
- * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ * This is the single source of truth for the glass effect used by `MediaCard`,
+ * `ProductMerchandisingCard`, `Badge`, and any future consumer. It supersedes
+ * the per-component `GlassFill` copies that previously drifted apart.
+ *
+ * Why this lives in its own platform-split file:
  *   - `@react-native-community/blur` is a native-only module; importing it on
  *     web throws because it references native components not registered there.
  *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
@@ -165,12 +169,16 @@ function GradientMask({
  * native module isn't linked in the running binary, the component degrades to
  * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
  * color) instead of rendering the "Unimplemented component" placeholder.
+ *
+ * NOTE: the consumer MUST clip this with `overflow: 'hidden'` on a rounded
+ * parent — the native blur view does not honor `borderRadius` itself.
  */
 function GlassFill({
   tint = 'dark',
   intensity = 50,
   overlayColor,
   progressive = false,
+  androidTintWash = true,
   style
 }) {
   const rawId = (0, _react.useId)();
@@ -252,7 +260,7 @@ function GlassFill({
       style: [_reactNative.StyleSheet.absoluteFill, {
         backgroundColor: overlayColor
       }]
-    }) : null, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, _reactNative.Platform.OS === 'android' && androidTintWash ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, {
         backgroundColor: 'rgba(255,255,255,0.03)',
         opacity: 0.6

package/lib/commonjs/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.web.js

@@ -10,6 +10,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_FALLBACK_DARK = '#1414174a';
 const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+const DEFAULT_WEB_BLUR_SCALE = 0.32;
+const DEFAULT_WEB_BLUR_MAX_PX = 32;
 
 // Mirror of the native ramp (see GlassFill.tsx). Each layer is a `mask-image`
 // gradient whose alpha stops (0 = top, 1 = bottom) ease the blur in; `amount`
@@ -57,7 +59,7 @@ function toGradient(stops) {
 }
 
 /**
- * Web counterpart of `GlassFill`.
+ * Web counterpart of the shared `GlassFill`.
  *
  * `@react-native-community/blur` ships no web implementation, so on web we
  * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
@@ -69,15 +71,17 @@ function GlassFill({
   intensity = 50,
   overlayColor,
   progressive = false,
+  webBlurScale = DEFAULT_WEB_BLUR_SCALE,
+  webBlurMaxPx = DEFAULT_WEB_BLUR_MAX_PX,
   style
 }) {
-  // intensity 0-100 -> ~0-32px CSS blur, kept in parity with the native scale.
-  const blurPx = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  // intensity 0-100 -> ~0-maxPx CSS blur, kept in parity with the native scale.
+  const blurPx = Math.max(0, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)));
   const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
   if (progressive) {
     // Full peak blur (parity with native) so the frosted glass is clearly
     // engaged at the bottom; the eased masks keep the top fully clear.
-    const peakPx = Math.max(1, Math.min(32, Math.round(intensity * 0.32)));
+    const peakPx = Math.max(1, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, style],
       pointerEvents: "none",

package/lib/commonjs/utils/react-utils.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.EMPTY_MODES = void 0;
 exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
+exports.injectChildStyle = injectChildStyle;
 exports.mergeRefs = mergeRefs;
+exports.resolveTruncation = resolveTruncation;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -80,6 +82,40 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
   return _react.default.Children.toArray(result);
 }
 
+/**
+ * Merges a style onto each direct (top-level) child element, with the injected
+ * style taking precedence over the child's own style.
+ *
+ * Used by the Stack family to *enforce* cross-axis stretching from the container
+ * itself: a child can set its own `alignSelf` (which, per the flexbox spec,
+ * overrides the parent's `alignItems`), so to guarantee equal heights / full
+ * width regardless of what individual children declare, we append
+ * `{ alignSelf: 'stretch' }` to every direct child.
+ *
+ * @remarks
+ * - Only top-level children are touched. Grandchildren are intentionally left
+ *   alone — we never want to leak layout styles deeper into the tree.
+ * - Non-element children (strings, numbers) are passed through untouched.
+ * - This relies on the child forwarding `style` to its outer/root view. Built-in
+ *   RN primitives and components that spread `style` onto their root honour it;
+ *   a child that fully ignores `style` cannot be forced (this is a hard React
+ *   Native limitation, not something this helper can work around).
+ * - Per Yoga, stretch has no effect on an axis where the child has a *fixed*
+ *   dimension (e.g. an explicit `height` for a row). Such children opt out by
+ *   design; this helper does not strip explicit dimensions.
+ */
+function injectChildStyle(children, style) {
+  return _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    const existingStyle = child.props?.style;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      style: existingStyle != null ? [existingStyle, style] : style
+    });
+  });
+}
+
 /**
  * Combines several refs (object refs and/or callback refs) into a single
  * callback ref. Useful when a component needs to keep its own internal ref to a
@@ -100,6 +136,26 @@ function mergeRefs(...refs) {
     });
   };
 }
+/**
+ * Resolves the `numberOfLines` / `ellipsizeMode` pair for a `<Text>` based on a
+ * `disableTruncation` flag.
+ *
+ * When `disableTruncation` is `true`, both values are returned as `undefined`
+ * so the text wraps to as many lines as it needs and never shows the trailing
+ * ellipsis. Otherwise the provided values are passed through unchanged.
+ */
+function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMode) {
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/commonjs/utils/web-platform-utils.js

@@ -10,6 +10,8 @@ exports.getWebAccessibilityProps = getWebAccessibilityProps;
 exports.isWeb = exports.isNative = void 0;
 exports.useKeyboardNavigation = useKeyboardNavigation;
 exports.usePressableWebSupport = usePressableWebSupport;
+exports.useWebOutsidePress = useWebOutsidePress;
+var _react = require("react");
 var _reactNative = require("react-native");
 /**
  * Web-specific props that should NOT be passed to React Native's Pressable component.
@@ -201,6 +203,63 @@ function usePressableWebSupport({
   };
 }
 
+/**
+ * Detects pointer presses (mouse / touch) that land OUTSIDE the node held by
+ * `containerRef` and invokes `onOutsidePress`.
+ *
+ * Why this exists:
+ * On web, React Native pressables (`Pressable`, `Button`, links, etc.) do not
+ * always claim DOM focus the way a native `<button>`/`<input>` does. As a
+ * result, tapping an *interactive* element outside a focused `<input>` may
+ * never trigger the input's native `blur` event, leaving a field stuck in its
+ * "Active" visual state. Listening for document-level pointer-down in the
+ * capture phase lets a component force a blur (or close a popover, etc.)
+ * regardless of whether the outside target takes focus.
+ *
+ * Behavior & safety:
+ *  - **Web only.** On native (or when `document` is unavailable) this is a
+ *    no-op, so it is safe to call unconditionally.
+ *  - Listeners are attached only while `enabled` is `true`, and are removed on
+ *    cleanup / when disabled — there is no standing global listener.
+ *  - Uses the **capture** phase so it runs before element-level handlers, and
+ *    listens to both `mousedown` and `touchstart` for parity across devices.
+ *  - The latest `onOutsidePress` is read through a ref, so passing a fresh
+ *    inline closure every render does NOT re-subscribe the listener.
+ *
+ * @param containerRef - Ref to the root host node to treat as "inside".
+ * @param onOutsidePress - Called when a pointer press occurs outside the node.
+ * @param enabled - When `false`, no listener is attached. Defaults to `true`.
+ *
+ * @example
+ * ```tsx
+ * const rootRef = useRef<View>(null)
+ * const inputRef = useRef<RNTextInput>(null)
+ * useWebOutsidePress(rootRef, () => inputRef.current?.blur(), isFocused)
+ * ```
+ */
+function useWebOutsidePress(containerRef, onOutsidePress, enabled = true) {
+  const callbackRef = (0, _react.useRef)(onOutsidePress);
+  callbackRef.current = onOutsidePress;
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== 'web' || typeof document === 'undefined' || !enabled) {
+      return;
+    }
+    const handlePointerDown = event => {
+      const node = containerRef.current;
+      const target = event.target;
+      if (node?.contains && !node.contains(target)) {
+        callbackRef.current();
+      }
+    };
+    document.addEventListener('mousedown', handlePointerDown, true);
+    document.addEventListener('touchstart', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown, true);
+      document.removeEventListener('touchstart', handlePointerDown, true);
+    };
+  }, [containerRef, enabled]);
+}
+
 /**
  * Type guard to check if running on web platform
  */

package/lib/module/components/Accordion/Accordion.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'rea
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 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";
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -61,6 +61,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
@@ -160,7 +161,7 @@ function Accordion({
       ...webProps,
       children: [/*#__PURE__*/_jsx(Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: title
       }), /*#__PURE__*/_jsx(Icon, {
         name: isExpanded ? 'ic_minus' : 'ic_add',

package/lib/module/components/AccordionCheckbox/AccordionCheckbox.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } 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 Checkbox from '../Checkbox/Checkbox';
 import Divider from '../Divider/Divider';
 import Icon from '../../icons/Icon';
@@ -58,7 +58,8 @@ function AccordionCheckbox({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const isExpandedControlled = controlledExpanded !== undefined;
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
@@ -203,12 +204,12 @@ function AccordionCheckbox({
           style: textWrapStyle,
           children: [/*#__PURE__*/_jsx(Text, {
             style: titleStyle,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             selectable: false,
             children: title
           }), subtitle ? /*#__PURE__*/_jsx(Text, {
             style: subtitleStyle,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             selectable: false,
             children: subtitle
           }) : null]

package/lib/module/components/AccountCard/AccountCard.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Image as RNImage, Platform, Pressable, Text, View } 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 Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const IS_IOS = Platform.OS === 'ios';
@@ -72,7 +72,8 @@ function AccountCard({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const iconModes = useMemo(() => modes === EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
     ...ADD_ICON_DEFAULT_MODES,
@@ -205,11 +206,11 @@ function AccountCard({
       },
       children: [title != null && title !== '' ? /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: title
       }) : null, showSubtitle ? /*#__PURE__*/_jsx(Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: subtitle
       }) : null]
     }) : null]

package/lib/module/components/AllocationComparisonChart/AllocationComparisonChart.js

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native';
 import Svg, { Line } 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';
 
 /**
@@ -61,7 +61,8 @@ function SegmentBar({
   baselineHeightPx,
   baselineLabel,
   showMarker,
-  theme
+  theme,
+  disableTruncation
 }) {
   const {
     barWidth,
@@ -88,7 +89,7 @@ function SegmentBar({
     },
     accessibilityLabel: segment.accessibilityLabel,
     children: [showValueLabel ? /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: labelStyle,
       children: segment.valueLabel
     }) : null, /*#__PURE__*/_jsx(View, {
@@ -134,7 +135,7 @@ function SegmentBar({
               strokeDasharray: "2 2"
             })
           }), isShown(baselineLabel) ? /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [labelStyle, {
               marginLeft: 6
             }],
@@ -143,7 +144,7 @@ function SegmentBar({
         }) : null]
       }) : null
     }), /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: labelStyle,
       children: segment.label
     })]
@@ -180,7 +181,8 @@ function AllocationComparisonChart({
   style,
   chartStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -284,7 +286,8 @@ function AllocationComparisonChart({
           baselineHeightPx: baselineHeightPx,
           baselineLabel: baselineLabel,
           showMarker: showMarker,
-          theme: theme
+          theme: theme,
+          disableTruncation: disableTruncation
         }, segment.key ?? `segment-${index}`);
       })
     })]

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -5,7 +5,7 @@ import { PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react
 import Svg, { Circle, Line, Path } 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';
 import { buildAreaPath, buildLineSegments, createLinearScale, extent, nearestIndex, niceTicks, resolvePoints } from './chartMath';
 
@@ -116,7 +116,8 @@ function AreaLineChart({
   modes: propModes = EMPTY_MODES,
   style,
   children,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -236,8 +237,9 @@ function AreaLineChart({
     formatX,
     formatY,
     showDots,
-    modes
-  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes]);
+    modes,
+    disableTruncation
+  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes, disableTruncation]);
   const isMultiSeries = resolvedSeries.length > 1;
   const resolvedFormatValue = formatValue ?? (v => formatY(v));
   return /*#__PURE__*/_jsx(ChartContext.Provider, {
@@ -378,7 +380,8 @@ function ChartYAxis({
     yScale,
     yTicks,
     formatY,
-    modes
+    modes,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatY;
@@ -406,7 +409,7 @@ function ChartYAxis({
           },
           children: showLabels ? /*#__PURE__*/_jsx(Text, {
             style: typo.style,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: format(t)
           }) : null
         }, `yl-${t}`);
@@ -457,7 +460,8 @@ function ChartXAxis({
     formatX,
     modes,
     activeIndex,
-    setActiveIndex
+    setActiveIndex,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatX;
@@ -503,7 +507,7 @@ function ChartXAxis({
             color: activeColor,
             fontWeight: '700'
           } : null],
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: format(label, i)
         });
         return /*#__PURE__*/_jsx(View, {

package/lib/module/components/Badge/Badge.js

@@ -3,23 +3,36 @@
 import React from 'react';
 import { View, Text, Pressable } 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 Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
-import { jsx as _jsx } from "react/jsx-runtime";
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }) {
-  // Resolve token values (fall back to sensible defaults)
+  const isGlass = type === 'glass';
+  const hasLeading = leading != null;
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
   const backgroundColor = getVariableByName('badge/color/background', modes) || '#d8effe';
-  const labelColor = getVariableByName('badge/color/label', modes) || '#000000';
+  const glassBackground = getVariableByName('badge/glass/color/background', modes) || '#ffffff26';
+  const glassLabelColor = getVariableByName('badge/glass/color/label', modes) || '#ffffff';
+  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes) || '#000000';
   const fontSize = Number(getVariableByName('badge/label/fontSize', modes)) || 12;
   const fontFamily = getVariableByName('badge/fontFamily', modes) || undefined;
   const fontWeight = getVariableByName('badge/label/fontWeight', modes) || '600';
@@ -27,6 +40,9 @@ function Badge({
   const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
   const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
   const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)) || 29)));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -49,13 +65,25 @@ function Badge({
   }
   const Container = onPress ? Pressable : View;
   const containerStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? {
+      flexDirection: 'row',
+      gap: 4
+    } : null),
+    ...(isGlass ? {
+      overflow: 'hidden'
+    } : null),
     ...(style || {})
   };
   const textStyle = {
@@ -68,19 +96,30 @@ function Badge({
     ...(labelStyle || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || label;
-  return /*#__PURE__*/_jsx(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     style: containerStyle,
     accessibilityRole: onPress ? 'button' : 'text',
     accessibilityLabel: undefined,
     onPress: onPress,
     ...rest,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [isGlass ? /*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: glassIntensity ?? blurIntensity,
+      overlayColor: glassOverlayColor ?? glassBackground,
+      androidTintWash: false
+    }) : null, hasLeading ? /*#__PURE__*/_jsx(View, {
+      style: LEADING_WRAP,
+      children: leading
+    }) : null, /*#__PURE__*/_jsx(Text, {
       style: textStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: false,
       children: label
-    })
+    })]
   });
 }
+const LEADING_WRAP = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 export default Badge;

package/lib/module/components/BrandChip/BrandChip.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Pressable, 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 Avatar from '../Avatar/Avatar';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const toNumber = (value, fallback) => {
@@ -89,7 +89,8 @@ function BrandChip({
   modes: propModes = EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -120,8 +121,7 @@ function BrandChip({
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [avatarNode, /*#__PURE__*/_jsx(Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       children: label
     })]
   });

package/lib/module/components/Button/Button.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Platform, Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
@@ -170,6 +170,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -214,7 +215,7 @@ function ButtonImpl({
   } else {
     content = /*#__PURE__*/_jsx(Text, {
       style: activeLabelStyle,
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     });
   }

package/lib/module/components/CardAdvisory/CardAdvisory.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar';
 import Nudge from '../Nudge/Nudge';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -120,6 +120,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -157,7 +158,7 @@ function CardAdvisory({
         children: [/*#__PURE__*/_jsxs(View, {
           style: tokens.headerStyle,
           children: [/*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [tokens.titleStyle, titleStyle],
             children: title
           }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/_jsx(Icon, {