jfs-components 0.1.8 → 0.1.12

package/src/components/ListItem/ListItem.tsx

@@ -13,7 +13,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 type ListItemProps = {
@@ -45,6 +45,12 @@ type ListItemProps = {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 
 // ---------------------------------------------------------------------------
@@ -230,6 +236,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: ListItemProps) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes])
@@ -314,7 +321,7 @@ function ListItemImpl({
             ? [tokens.supportTextStyle, verticalSupportTextOverride]
             : tokens.supportTextStyle
         }
-        numberOfLines={layout === 'Horizontal' ? 2 : undefined}
+        {...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined)}
       >
         {displayText}
       </Text>
@@ -382,7 +389,7 @@ function ListItemImpl({
         >
           <Text
             style={tokens.titleTextStyle}
-            numberOfLines={1}
+            {...resolveTruncation(disableTruncation, 1)}
           >
             {title}
           </Text>

package/src/components/MediaCard/MediaCard.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react'
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
-import GlassFill, { type GlassTint } from './GlassFill'
+import GlassFill, { type GlassTint } from '../../utils/GlassFill/GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -225,7 +225,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
             ]}
             pointerEvents="box-none"
         >
-            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} />
+            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} webBlurScale={0.3} webBlurMaxPx={30} />
 
             <View
                 style={{

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -7,7 +7,7 @@ import {
     type TextStyle,
 } 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 type { Modes } from '../../design-tokens'
 
 export type MetricLegendItemProps = {
@@ -39,6 +39,12 @@ export type MetricLegendItemProps = {
     labelStyle?: StyleProp<TextStyle>
     /** Override the value text styles. */
     valueStyle?: StyleProp<TextStyle>
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -59,6 +65,7 @@ function MetricLegendItem({
     indicatorStyle,
     labelStyle,
     valueStyle,
+    disableTruncation,
 }: MetricLegendItemProps) {
     const gap = (getVariableByName('metricLegendItem/gap', modes) as number | null) ?? 4
     const textWrapGap =
@@ -169,7 +176,7 @@ function MetricLegendItem({
                             },
                             valueStyle,
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {value}
                     </Text>

package/src/components/MonthlyStatusGrid/MonthlyStatusGrid.tsx

@@ -8,7 +8,7 @@ import {
 } 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'
 import type { Modes } from '../../design-tokens'
 
@@ -83,6 +83,12 @@ export type MonthlyStatusGridProps = {
   legendStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the entire component. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const DEFAULT_MONTH_LABELS: readonly string[] = [
@@ -170,6 +176,12 @@ export type CalendarGlyphProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `"{label}, {status}"`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 /**
@@ -186,6 +198,7 @@ function CalendarGlyph({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: CalendarGlyphProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -244,7 +257,7 @@ function CalendarGlyph({
       ]}
     >
       <Text
-        numberOfLines={1}
+        {...resolveTruncation(disableTruncation, 1)}
         style={[
           {
             color: foreground,
@@ -312,6 +325,7 @@ function MonthlyStatusGrid({
   labelStyle,
   legendStyle,
   accessibilityLabel,
+  disableTruncation,
 }: MonthlyStatusGridProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -391,6 +405,7 @@ function MonthlyStatusGrid({
                   label={label}
                   status={month.status}
                   modes={glyphModes}
+                  disableTruncation={disableTruncation}
                   {...(glyphStyle !== undefined ? { style: glyphStyle } : {})}
                   {...(labelStyle !== undefined ? { labelStyle } : {})}
                   {...(month.accessibilityLabel !== undefined

package/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -9,7 +9,7 @@ import {
 } 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, { type UnifiedSource } from '../../utils/MediaSource'
 import type { Modes } from '../../design-tokens'
 
@@ -65,6 +65,12 @@ export type PoweredByLabelProps = {
      * (which is decorative) does not need to be announced separately.
      */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const toNumber = (value: unknown, fallback: number): number => {
@@ -115,6 +121,7 @@ function PoweredByLabel({
     textStyle,
     imageStyle,
     accessibilityLabel,
+    disableTruncation,
 }: PoweredByLabelProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(
@@ -210,7 +217,7 @@ function PoweredByLabel({
                 style={[labelTextStyle, textStyle]}
                 accessibilityElementsHidden={true}
                 importantForAccessibility="no"
-                numberOfLines={1}
+                {...resolveTruncation(disableTruncation, 1)}
             >
                 {label}
             </Text>

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -4,21 +4,31 @@ import {
     Text,
     Pressable,
     StyleSheet,
+    Platform,
+    Image as RNImage,
     type ViewStyle,
     type TextStyle,
     type StyleProp,
     type ImageSourcePropType,
 } from 'react-native'
+import MaskedView from '@react-native-masked-view/masked-view'
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
 import Badge from '../Badge/Badge'
 import Button from '../Button/Button'
 import Image from '../Image/Image'
-import GlassFill from './GlassFill'
+import GlassFill from '../../utils/GlassFill/GlassFill'
 import type { Modes } from '../../design-tokens'
 
+function normalizeImageSource(
+    src: ImageSourcePropType | string | undefined
+): ImageSourcePropType | undefined {
+    if (src == null) return undefined
+    return typeof src === 'string' ? { uri: src } : src
+}
+
 export interface ProductMerchandisingCardProps {
     /**
      * Background media for the card. Accepts a URL string or any RN
@@ -73,6 +83,12 @@ export interface ProductMerchandisingCardProps {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -116,10 +132,15 @@ function ProductMerchandisingCard({
     modes = EMPTY_MODES,
     style,
     accessibilityLabel,
+    disableTruncation,
 }: ProductMerchandisingCardProps) {
-    // Unique gradient id so multiple cards on one (web) document never collide.
+    // Unique gradient ids so multiple cards on one (web) document never collide.
     const rawId = useId()
-    const scrimId = `pmc-footer-scrim-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`
+    const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '')
+    const scrimId = `pmc-footer-scrim-${safeId}`
+    const blurMaskId = `pmc-footer-blurmask-${safeId}`
+
+    const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource])
 
     const tokens = useMemo(() => resolveTokens(modes), [modes])
 
@@ -159,23 +180,26 @@ function ProductMerchandisingCard({
           )
         : null
 
+    // The footer "special badge" is now the shared <Badge type="glass">. The
+    // hardcoded literals that defined its look (warm frosted overlay, gentle
+    // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+    // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+    // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+    // instantiation renders byte-for-byte the same as before.
     const footerSpecialBadge =
         specialBadge ??
         (specialBadgeLabel != null ? (
-            <View style={styles.specialBadge}>
-                <GlassFill
-                    tint="light"
-                    intensity={SPECIAL_BADGE_INTENSITY}
-                    overlayColor={SPECIAL_BADGE_BG}
-                    style={styles.specialBadgeFill}
-                />
-                {specialBadgeIcon != null ? (
-                    <View style={styles.specialBadgeIcon}>{specialBadgeIcon}</View>
-                ) : null}
-                <Text style={tokens.specialBadgeText} numberOfLines={1}>
-                    {specialBadgeLabel}
-                </Text>
-            </View>
+            <Badge
+                type="glass"
+                label={specialBadgeLabel}
+                leading={specialBadgeIcon}
+                glassOverlayColor={SPECIAL_BADGE_BG}
+                glassIntensity={SPECIAL_BADGE_INTENSITY}
+                modes={modes}
+                style={styles.specialBadge}
+                labelStyle={tokens.specialBadgeText}
+                {...(disableTruncation != null ? { disableTruncation } : null)}
+            />
         ) : null)
 
     // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
@@ -209,11 +233,49 @@ function ProductMerchandisingCard({
             </View>
 
             <View style={tokens.footer} pointerEvents="box-none">
-                {/* Progressive background blur: clear at the top, ramping to a
-                    soft blur at the bottom (native MaskedView+BlurView / web
-                    backdrop-filter + mask-image). */}
-                <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
-                {/* Transparent -> black gradient scrim, identical on all platforms. */}
+                {/* Progressive blur — clear at the top of the footer, ramping to
+                    a soft blur at the bottom. Rather than the unmaintained native
+                    BlurView (which renders as a flat black tint on Android +
+                    Fabric and can hide the image on iOS), we reveal a *blurred
+                    copy of the card's own image* through a vertical gradient
+                    mask. `Image.blurRadius` is a built-in RN prop with a real
+                    Gaussian blur on BOTH iOS and Android and needs no native
+                    module. The blurred copy is pinned to the card's bottom at the
+                    full card height so it lines up pixel-for-pixel with the
+                    full-bleed background, and the mask makes the blur swell in
+                    smoothly toward the bottom (true progressive blur). */}
+                {normalizedImageSource != null ? (
+                    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+                        <MaskedView
+                            style={StyleSheet.absoluteFill}
+                            maskElement={
+                                <Svg width="100%" height="100%">
+                                    <Defs>
+                                        <LinearGradient id={blurMaskId} x1="0" y1="0" x2="0" y2="1">
+                                            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
+                                            <Stop offset="0.35" stopColor="#000000" stopOpacity={0.5} />
+                                            <Stop offset="0.7" stopColor="#000000" stopOpacity={0.92} />
+                                            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
+                                        </LinearGradient>
+                                    </Defs>
+                                    <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${blurMaskId})`} />
+                                </Svg>
+                            }
+                        >
+                            <RNImage
+                                source={normalizedImageSource}
+                                blurRadius={tokens.imageBlurRadius}
+                                resizeMode="cover"
+                                style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height }}
+                            />
+                        </MaskedView>
+                    </View>
+                ) : (
+                    <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
+                )}
+                {/* Transparent -> black gradient scrim for text legibility,
+                    identical on all platforms. Kept lighter than a solid fill so
+                    the blurred image stays visible behind the footer text. */}
                 <View style={[StyleSheet.absoluteFill, styles.scrim]} pointerEvents="none">
                     <Svg width="100%" height="100%">
                         <Defs>
@@ -230,11 +292,11 @@ function ProductMerchandisingCard({
 
                 <View style={styles.footerRow}>
                     <View style={tokens.textWrap}>
-                        <Text style={tokens.title} numberOfLines={1}>
+                        <Text style={tokens.title} {...resolveTruncation(disableTruncation, 1)}>
                             {title}
                         </Text>
                         {subtitle != null ? (
-                            <Text style={tokens.subtitle} numberOfLines={1}>
+                            <Text style={tokens.subtitle} {...resolveTruncation(disableTruncation, 1)}>
                                 {subtitle}
                             </Text>
                         ) : null}
@@ -286,6 +348,7 @@ const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
+    imageBlurRadius: number
     header: ViewStyle
     footer: ViewStyle
     textWrap: ViewStyle
@@ -331,9 +394,20 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
     const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500')
 
+    // `Image.blurRadius` is interpreted differently per platform — iOS applies a
+    // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
+    // numeric radius — so we tune each platform to land on the same perceived
+    // "minimal" frosted strength as the Figma design.
+    const imageBlurRadius = Platform.select({
+        ios: Math.max(6, Math.round(blurRadius * 0.5)),
+        android: Math.max(12, Math.round(blurRadius * 0.95)),
+        default: Math.max(8, Math.round(blurRadius * 0.6)),
+    }) as number
+
     return {
         radius,
         blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+        imageBlurRadius,
         header: {
             flexDirection: 'row',
             alignItems: 'flex-start',
@@ -398,22 +472,15 @@ const styles = StyleSheet.create({
         // the intended fade strength.
         opacity: 0.9,
     },
+    // Overrides layered on top of <Badge type="glass">. Badge already supplies
+    // the row layout + 4px gap (when a leading icon is present), `overflow:
+    // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
+    // pin the special badge's literal Figma box (6/2 padding, 4px radius)
+    // regardless of the badge size tokens resolved by the active modes.
     specialBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
-        overflow: 'hidden',
-        alignSelf: 'flex-start',
-    },
-    specialBadgeFill: {
-        borderRadius: 4,
-    },
-    specialBadgeIcon: {
-        justifyContent: 'center',
-        alignItems: 'center',
     },
     pressed: {
         opacity: 0.92,

package/src/components/ProductOverview/ProductOverview.tsx

@@ -8,7 +8,7 @@ import {
     type ImageSourcePropType,
 } 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 Image from '../Image/Image'
 import ProductLabel from '../ProductLabel/ProductLabel'
 import type { Modes } from '../../design-tokens'
@@ -47,6 +47,12 @@ export type ProductOverviewProps = {
      * for badges, callouts, etc. Receives the same `modes` as the parent.
      */
     children?: React.ReactNode
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_STATS: ProductOverviewStat[] = [
@@ -65,6 +71,7 @@ const ProductOverview = ({
     modes = EMPTY_MODES,
     style,
     children,
+    disableTruncation,
 }: ProductOverviewProps) => {
     const padding = (getVariableByName('productOverview/padding', modes) as number | null) ?? 24
     const gap = (getVariableByName('productOverview/gap', modes) as number | null) ?? 12
@@ -220,10 +227,10 @@ const ProductOverview = ({
                                 overflow: 'hidden',
                             }}
                         >
-                            <Text style={statValueStyle} numberOfLines={1}>
+                            <Text style={statValueStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.value}
                             </Text>
-                            <Text style={statLabelStyle} numberOfLines={1}>
+                            <Text style={statLabelStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.label}
                             </Text>
                         </View>

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ProgressBadgeProps = {
@@ -26,6 +26,12 @@ export type ProgressBadgeProps = {
     textStyle?: StyleProp<TextStyle>
     /** Accessibility label for screen readers */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 } & React.ComponentProps<typeof View>
 
 /**
@@ -51,6 +57,7 @@ function ProgressBadge({
     style,
     textStyle: textStyleOverride,
     accessibilityLabel,
+    disableTruncation,
     ...rest
 }: ProgressBadgeProps) {
     // Resolve layout tokens
@@ -158,8 +165,7 @@ function ProgressBadge({
                 ) : null}
                 <Text
                     style={[textStyle, textStyleOverride]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
+                    {...resolveTruncation(disableTruncation, 1, 'tail')}
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no"
                 >

package/src/components/ProjectionMarker/ProjectionMarker.tsx

@@ -7,7 +7,7 @@ import {
   type TextStyle,
 } 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 type { Modes } from '../../design-tokens'
 import Divider from '../Divider/Divider'
 
@@ -61,6 +61,12 @@ export type ProjectionMarkerProps = {
   rateStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole marker. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const isTextValue = (value: React.ReactNode): value is string | number =>
@@ -106,6 +112,7 @@ function ProjectionMarker({
   durationStyle,
   rateStyle,
   accessibilityLabel,
+  disableTruncation,
 }: ProjectionMarkerProps) {
   const titleColor =
     (getVariableByName('projectionMarker/title/color', modes) as string | null) ?? '#000000'
@@ -169,7 +176,7 @@ function ProjectionMarker({
     if (value === null || value === undefined) return null
     if (isTextValue(value)) {
       return (
-        <Text style={[titleTextStyle, overrideStyle]} numberOfLines={1}>
+        <Text style={[titleTextStyle, overrideStyle]} {...resolveTruncation(disableTruncation, 1)}>
           {value}
         </Text>
       )

package/src/components/Section/Section.tsx

@@ -14,7 +14,7 @@ import NavArrow from '../NavArrow/NavArrow'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import ListItem from '../ListItem/ListItem'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
@@ -366,6 +366,12 @@ type SectionProps = {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 
 /**
@@ -483,6 +489,7 @@ function Section({
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: SectionProps) {
   // Focus and hover are still mirrored in React because they are visible,
@@ -527,7 +534,7 @@ function Section({
       <View style={headerWrapStyle}>
         <Text
           style={tokens.titleStyle}
-          numberOfLines={1}
+          {...resolveTruncation(disableTruncation, 1)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >
@@ -540,7 +547,7 @@ function Section({
       {showSupportText && (
         <Text
           style={tokens.supportTextStyle}
-          numberOfLines={2}
+          {...resolveTruncation(disableTruncation, 2)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >

package/src/components/Slider/Slider.tsx

@@ -19,7 +19,7 @@ import {
 } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -100,6 +100,12 @@ export interface SliderProps {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for screen readers. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
@@ -151,6 +157,7 @@ const Slider = forwardRef<SliderHandle, SliderProps>(function Slider(
         modes = EMPTY_MODES,
         style,
         accessibilityLabel,
+        disableTruncation,
     },
     ref
 ) {
@@ -365,7 +372,7 @@ const Slider = forwardRef<SliderHandle, SliderProps>(function Slider(
             {renderTooltip ? (
                 renderTooltip(currentValue)
             ) : (
-                <Text style={tokens.tooltipLabel} numberOfLines={1}>
+                <Text style={tokens.tooltipLabel} {...resolveTruncation(disableTruncation, 1)}>
                     {valueText}
                 </Text>
             )}