jfs-components 0.1.36 → 0.1.49

package/src/components/CompareTable/CompareTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import {
     View,
     Text,
@@ -151,25 +151,42 @@ export type CompareTableProps = {
      *    horizontal `ScrollView`s whose scroll events are **chained** — moving
      *    one moves every other in lockstep (the cards always stay aligned with
      *    the cells beneath them).
-     *  - The cards row becomes a **sticky header** at the top: it pins in place
-     *    on the vertical axis (does not scroll away) while the sections scroll
-     *    beneath it. Requires the host to give `CompareTable` a bounded height.
-     *  - The gray table-header rows (each section's `header`) are rendered
-     *    full-width **outside** the horizontal scroll, so they stay put
-     *    horizontally (they don't slide with the cells) while still scrolling
-     *    vertically with the table.
+     *  - Selection cards stick on the vertical axis by default (`stickyCards`).
+     *    Accordion titles also stick by default (`stickyAccordionTitles`) and
+     *    replace each other under the pinned cards as you scroll. Gray
+     *    table-header rows can stick via `stickyHeaders`. Sticky header labels
+     *    stay put horizontally when `stickyHeaderLabel` is on. Requires the
+     *    host to give `CompareTable` a bounded height.
      *
      * Omit to keep the original flex layout (columns share the available width,
      * no scrolling). @default undefined
      */
     columnWidth?: number;
     /**
-     * When `true` (default), each section's header row (the gray header label)
-     * sticks to the top of the viewport when scrolling vertically, with multiple
-     * sticky headers stacking up as each reaches the top. Only applies in
-     * fixed-width scroll mode (`columnWidth` is set).
+     * When `true`, the selection-cards row is pinned above the vertical scroll
+     * surface (not inside it), so cards never scroll away. Sticky accordion
+     * titles then stick under the pinned cards, replacing each other as each
+     * section reaches the top. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
+     * @default true
+     */
+    stickyCards?: boolean;
+    /**
+     * When `true`, each section's accordion title sticks to the top of the
+     * viewport when scrolling vertically (under sticky cards when
+     * `stickyCards` is also on), with titles replacing each other as each
+     * reaches the top. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
      * @default true
      */
+    stickyAccordionTitles?: boolean;
+    /**
+     * When `true`, each section's header row (the gray header label) sticks to
+     * the top of the viewport when scrolling vertically, with multiple sticky
+     * headers stacking up as each reaches the top. Only applies in fixed-width
+     * scroll mode (`columnWidth` is set).
+     * @default false
+     */
     stickyHeaders?: boolean;
     /**
      * When `true` (default), the section header label stays fixed on the left
@@ -220,7 +237,9 @@ function CompareTable({
     style,
     disableTruncation,
     columnWidth,
-    stickyHeaders = true,
+    stickyCards = true,
+    stickyAccordionTitles = true,
+    stickyHeaders = false,
     stickyHeaderLabel = true,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
@@ -235,11 +254,10 @@ function CompareTable({
     const cardLabelFontFamily = (getVariableByName('selectionCard/label/fontfamily', modes) as string) ?? 'JioType Var'
     const cardLabelFontWeight = (getVariableByName('selectionCard/label/fontweight', modes) as number | string) ?? 700
     const imageRadius = (getVariableByName('image/radius', modes) as number) ?? 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) as number) ?? 0
+    // Selection cards are square — no corner radius (Figma compare-table
+    // treatment). Ignore `selectionCard/radius` so a non-zero token value
+    // cannot round the card edges.
+    const cardRadius = 0
 
     // --- add-a-card icon button tokens ---------------------------------------
     // padding/size/border come from the shared iconButton tokens; the filled
@@ -301,6 +319,16 @@ function CompareTable({
     const draggingSource = useRef<'cards' | number | null>(null)
     const lastSyncX = useRef(0)
 
+    // Controlled expand state for sticky accordion titles (header + body are
+    // split across two Accordion instances that must stay in sync).
+    const [expandedByIndex, setExpandedByIndex] = useState<Record<number, boolean>>(() => {
+        const initial: Record<number, boolean> = {}
+        sections.forEach((section, index) => {
+            initial[index] = section.defaultExpanded ?? index === 0
+        })
+        return initial
+    })
+
     const syncOthers = useCallback((source: 'cards' | number, x: number) => {
         if (source !== 'cards' && cardsScrollRef.current) {
             cardsScrollRef.current.scrollTo({ x, animated: false })
@@ -420,6 +448,10 @@ function CompareTable({
         minHeight: 147,
         backgroundColor: cardBg,
         borderRadius: cardRadius,
+        borderTopLeftRadius: cardRadius,
+        borderTopRightRadius: cardRadius,
+        borderBottomLeftRadius: cardRadius,
+        borderBottomRightRadius: cardRadius,
         alignItems: 'center',
         justifyContent: 'center',
         gap: cardGap,
@@ -692,6 +724,7 @@ function CompareTable({
         backgroundColor: cardBg,
         borderWidth: 1,
         borderColor: '#e8e8e8',
+        borderRadius: 0,
         overflow: 'hidden',
     }
 
@@ -723,17 +756,17 @@ function CompareTable({
     }
 
     // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-    // Build children and stickyHeaderIndices for the vertical ScrollView.
-    // When stickyHeaders is on, section headers are injected as direct children
-    // so React Native's stickyHeaderIndices can pin them with stacking.
-    const scrollChildren: React.ReactNode[] = []
-    const stickyIndices: number[] = []
-
-    if (showCardsRow) {
-        stickyIndices.push(scrollChildren.length)
-        scrollChildren.push(
+    // Sticky cards are pinned *outside* the vertical ScrollView (sibling above
+    // it) so they cannot scroll away — `stickyHeaderIndices` is unreliable for
+    // a nested horizontal ScrollView on Fabric. Sticky accordion titles /
+    // table headers still use stickyHeaderIndices inside the scroll surface
+    // and therefore stick directly under the pinned cards.
+    const renderCardsRow = () => (
+        <View
+            key="cards-row"
+            style={{ width: '100%', backgroundColor: cardBg, zIndex: 2 }}
+        >
             <ScrollView
-                key="cards-row"
                 ref={cardsScrollRef}
                 horizontal
                 showsHorizontalScrollIndicator={false}
@@ -747,13 +780,59 @@ function CompareTable({
                     {columns.map(renderCard)}
                     {showAddCard && renderAddCard()}
                 </View>
-            </ScrollView>,
-        )
+            </ScrollView>
+        </View>
+    )
+
+    const scrollChildren: React.ReactNode[] = []
+    const stickyIndices: number[] = []
+
+    // Non-sticky cards scroll away with the sections (inside the ScrollView).
+    if (showCardsRow && !stickyCards) {
+        scrollChildren.push(renderCardsRow())
     }
 
     sections.forEach((section, index) => {
         const sectionKey = section.key ?? section.title ?? index
         const headerContent = renderHeaderContent(section)
+        const expanded = expandedByIndex[index] ?? (section.defaultExpanded ?? index === 0)
+        const onExpandedChange = (next: boolean) => {
+            setExpandedByIndex((prev) => ({ ...prev, [index]: next }))
+        }
+
+        const inlineHeader =
+            !stickyHeaders && headerContent != null
+                ? stickyHeaderLabel
+                    ? headerContent
+                    : (
+                        <ScrollView
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                        >
+                            <View style={{ width: contentWidth }}>
+                                {headerContent}
+                            </View>
+                        </ScrollView>
+                    )
+                : null
+
+        if (stickyAccordionTitles) {
+            stickyIndices.push(scrollChildren.length)
+            scrollChildren.push(
+                <View
+                    key={`sticky-accordion-title-${sectionKey}`}
+                    style={{ width: '100%', backgroundColor: cardBg }}
+                >
+                    <Accordion
+                        title={section.title}
+                        expanded={expanded}
+                        onExpandedChange={onExpandedChange}
+                        modes={modes}
+                        showContent={false}
+                    />
+                </View>,
+            )
+        }
 
         if (stickyHeaders && headerContent != null) {
             stickyIndices.push(scrollChildren.length)
@@ -778,34 +857,41 @@ function CompareTable({
             )
         }
 
-        scrollChildren.push(
-            <Accordion
-                key={sectionKey}
-                title={section.title}
-                defaultExpanded={section.defaultExpanded ?? index === 0}
-                modes={modes}
-            >
-                {!stickyHeaders && headerContent != null && (
-                    stickyHeaderLabel ? headerContent : (
-                        <ScrollView
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                        >
-                            <View style={{ width: contentWidth }}>
-                                {headerContent}
-                            </View>
-                        </ScrollView>
-                    )
-                )}
-                {renderBodyContent(section, index)}
-            </Accordion>,
-        )
+        if (stickyAccordionTitles) {
+            scrollChildren.push(
+                <Accordion
+                    key={sectionKey}
+                    title={section.title}
+                    expanded={expanded}
+                    onExpandedChange={onExpandedChange}
+                    modes={modes}
+                    showHeader={false}
+                >
+                    {inlineHeader}
+                    {renderBodyContent(section, index)}
+                </Accordion>,
+            )
+        } else {
+            scrollChildren.push(
+                <Accordion
+                    key={sectionKey}
+                    title={section.title}
+                    defaultExpanded={section.defaultExpanded ?? index === 0}
+                    modes={modes}
+                >
+                    {inlineHeader}
+                    {renderBodyContent(section, index)}
+                </Accordion>,
+            )
+        }
     })
 
     return (
         <View style={[outerStyle, style, { flexDirection: 'column', flex: 1 }]}>
+            {showCardsRow && stickyCards ? renderCardsRow() : null}
             <ScrollView
                 style={{ width: '100%', flex: 1 }}
+                contentContainerStyle={{ flexGrow: 1 }}
                 stickyHeaderIndices={stickyIndices}
                 showsVerticalScrollIndicator={false}
                 directionalLockEnabled

package/src/components/FormField/FormField.tsx

@@ -521,6 +521,9 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
       fontWeight: tokens.inputFontWeight,
       padding: 0,
       margin: 0,
+      // Match the caret to the tokenized input text color on web (native uses
+      // cursorColor / selectionColor on the TextInput below).
+      caretColor: tokens.inputTextColor,
       // Remove the default web focus ring; the input row's border acts as the
       // focus indicator via the FormField States cascade.
       outlineStyle: 'none' as TextStyle['outlineStyle'],
@@ -601,6 +604,10 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
           onSubmitEditing={onSubmitEditing}
           placeholder={placeholder ?? ''}
           placeholderTextColor={placeholderColor}
+          // Kill platform accent cursors (Android Material green, iOS system
+          // blue) — match NoteInput/MoneyValue and use the tokenized text color.
+          cursorColor={tokens.inputTextColor}
+          selectionColor={tokens.inputTextColor}
           editable={interactive}
           maxLength={maxLength}
           autoFocus={autoFocus}

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -270,22 +270,15 @@ function FullscreenModal({
 
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes))
 
-  // Safe-area insets so the floating chrome clears the system bars: the close
-  // button drops below the status bar / notch, and the sticky footer keeps its
-  // designed bottom padding ON TOP of the bottom inset (home indicator /
-  // Android gesture or nav bar). On web — and anywhere without a
-  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  // Safe-area inset so the floating close button clears the status bar / notch.
+  // Footer padding stays at the design-token value from ActionFooter — no
+  // extra inset is layered on top (the token already accounts for bottom chrome).
+  // On web — and anywhere without a SafeAreaProvider — insets.top is 0.
   const insets = useSafeAreaInsets()
   const closeButtonInsetStyle = useMemo<ViewStyle>(
     () => ({ top: 12 + insets.top + closeOffsetY }),
     [insets.top, closeOffsetY]
   )
-  // Extend (not replace) the footer's token bottom padding by the bottom inset
-  // so the action button never sits under the system navigation area.
-  const footerInsetStyle = useMemo<ViewStyle>(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes))
-    return { paddingBottom: base + insets.bottom }
-  }, [modes, insets.bottom])
 
   // Drives the background's parallax-free sync with the scroll. The hero media
   // lives at the ROOT (so it is never clipped to the content height and sits
@@ -471,9 +464,7 @@ function FullscreenModal({
       </Animated.ScrollView>
 
       {footerContent ? (
-        <ActionFooter modes={modes} style={footerInsetStyle}>
-          {footerContent}
-        </ActionFooter>
+        <ActionFooter modes={modes}>{footerContent}</ActionFooter>
       ) : null}
 
       {showClose ? (

package/src/components/HelloJioInput/HelloJioInput.tsx

@@ -85,7 +85,15 @@ const STATE_FALLBACKS: Record<
     iconColor: '#24262b',
   },
   IdleJioPlus: {
-    background: '#f5f5f5',
+    // Glass fill. In Figma the IdleJioPlus surface resolves
+    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
+    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
+    // MainPage mode gives). Painted over the backdrop blur, an opaque value
+    // would read as a solid bar and hide the blur entirely — so, matching the
+    // translucent glass fallbacks the sibling GlassFill consumers use
+    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
+    // this fallback carries alpha so the frost tints the blurred content.
+    background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
     iconColor: '#545961',
@@ -113,9 +121,10 @@ export type HelloJioInputProps = {
   leadingIconName?: string
   /**
    * Slot replacing the default leading icon (Figma Slot "start"). Receives
-   * `modes` recursively.
+   * `modes` recursively. Pass `null` to hide the leading icon entirely
+   * (the design's `startSlot={false}`), mirroring `trailing`.
    */
-  leading?: React.ReactNode
+  leading?: React.ReactNode | null
   /**
    * Slot replacing the default send `IconButton` (Figma Slot "end").
    * Pass `null` to hide the trailing control entirely.
@@ -246,7 +255,11 @@ function resolveHelloJioInputTokens(
       // Glass keeps the container transparent so GlassFill shows through.
       backgroundColor: useGlass ? 'transparent' : background,
       borderColor,
-      borderWidth: strokeWidth,
+      // The Figma IdleJioPlus variant is a borderless frosted pill — it has no
+      // `border/color`/`strokeWidth` tokens. Drawing the Idle border color here
+      // would leave a faint light ring the design doesn't have, so drop the
+      // border entirely in the glass state.
+      borderWidth: useGlass ? 0 : strokeWidth,
       borderStyle: 'solid',
       borderRadius,
       paddingLeft,
@@ -382,15 +395,21 @@ const HelloJioInput = forwardRef<RNTextInput, HelloJioInputProps>(
       [onBlur]
     )
 
+    // Symmetric with `trailing`: an explicit `null` hides the leading icon
+    // (the design's `startSlot={false}`); `undefined` falls back to the
+    // default brand icon.
     const leadingElement =
-      leading ??
-      (leadingIconName ? (
-        <Icon
-          name={leadingIconName}
-          size={tokens.iconSize}
-          color={tokens.iconColor}
-        />
-      ) : null)
+      leading === undefined
+        ? leadingIconName
+          ? (
+              <Icon
+                name={leadingIconName}
+                size={tokens.iconSize}
+                color={tokens.iconColor}
+              />
+            )
+          : null
+        : leading
 
     const processedLeading = leadingElement
       ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes)

package/src/components/PageHero/PageHero.tsx

@@ -93,6 +93,7 @@ export type PageHeroProps = {
  *   eyebrow="Upgrade to JioFinance+"
  *   headline="Resume earning cashback, extra points, and 1% gold"
  *   supportingText="₹999/year · ₹0 until 2027"
+ *   body="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
  *   modes={{ 'Page type': 'JioPlus' }}
@@ -124,6 +125,9 @@ function PageHero({
   )
 
   const gap = Number(getVariableByName('PageHero/gap', modes))
+  const paddingHorizontal = Number(
+    getVariableByName('PageHero/padding/horizontal', modes)
+  )
   const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes))
 
   // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
@@ -218,6 +222,7 @@ function PageHero({
     flexDirection: 'column',
     alignItems: 'center',
     gap,
+    paddingHorizontal,
     width: '100%',
   }
 

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -51,6 +51,13 @@ export interface ProductMerchandisingCardProps {
      * `undefined` and no `badge` override is provided.
      */
     badgeLabel?: string
+    /**
+     * Optional leading node (icon/image) rendered before the header badge
+     * label, inside the badge surface. Maps to `Badge`'s `leading` slot — the
+     * same pattern as `specialBadgeIcon` for the footer badge. Ignored when a
+     * full `badge` override is supplied.
+     */
+    badgeIcon?: React.ReactNode
     /**
      * Full override for the header badge. Takes precedence over `badgeLabel`.
      */
@@ -122,6 +129,7 @@ function ProductMerchandisingCard({
     title = 'Title',
     subtitle = 'Subtitle',
     badgeLabel,
+    badgeIcon,
     badge,
     showAvatar = true,
     avatarSource,
@@ -175,25 +183,27 @@ function ProductMerchandisingCard({
     )
 
     const headerBadge =
-        badge ?? (badgeLabel != null ? <Badge label={badgeLabel} modes={badgeModes} /> : null)
+        badge ??
+        (badgeLabel != null ? (
+            <Badge label={badgeLabel} leading={badgeIcon} modes={badgeModes} />
+        ) : null)
 
     const headerAvatar = showAvatar
         ? avatar ?? (
               <Avatar
                   style={avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image'}
-                  imageSource={avatarSource}
-                  monogram={avatarMonogram}
+                  {...(avatarSource != null ? { imageSource: avatarSource } : {})}
+                  {...(avatarMonogram != null ? { monogram: avatarMonogram } : {})}
                   modes={avatarModes}
               />
           )
         : 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.
+    // The footer "special badge" is the shared <Badge type="glass">. Overlay +
+    // blur come from `badge/glass/*` + `blur/minimal`; box/gap from
+    // `productMerchandisingcard/specialbadge/*`; label color/weight from the
+    // glass badge tokens (Figma: white / 600). Optional `specialBadgeIcon`
+    // maps to Badge's `leading` slot.
     const footerSpecialBadge =
         specialBadge ??
         (specialBadgeLabel != null ? (
@@ -201,10 +211,10 @@ function ProductMerchandisingCard({
                 type="glass"
                 label={specialBadgeLabel}
                 leading={specialBadgeIcon}
-                glassOverlayColor={SPECIAL_BADGE_BG}
-                glassIntensity={SPECIAL_BADGE_INTENSITY}
+                glassOverlayColor={tokens.specialBadgeBg}
+                glassIntensity={tokens.specialBadgeIntensity}
                 modes={modes}
-                style={styles.specialBadge}
+                style={tokens.specialBadge}
                 labelStyle={tokens.specialBadgeText}
                 {...(disableTruncation != null ? { disableTruncation } : null)}
             />
@@ -219,7 +229,13 @@ function ProductMerchandisingCard({
     )
 
     const footerCta =
-        cta ?? <Button label={ctaLabel} modes={ctaModes} onPress={onCtaPress} />
+        cta ?? (
+            <Button
+                label={ctaLabel}
+                modes={ctaModes}
+                {...(onCtaPress != null ? { onPress: onCtaPress } : {})}
+            />
+        )
 
     const content = (
         <>
@@ -372,11 +388,6 @@ function ProductMerchandisingCard({
 // intentionally small to match the design's subtle "minimal" blur.
 const BLUR_INTENSITY_FACTOR = 1.0
 
-// Special badge ("frosted" pill) — values are literals in the Figma node
-// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
-const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)'
-const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
-
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
@@ -386,7 +397,10 @@ interface ResolvedTokens {
     textWrap: ViewStyle
     title: TextStyle
     subtitle: TextStyle
+    specialBadge: ViewStyle
     specialBadgeText: TextStyle
+    specialBadgeBg: string
+    specialBadgeIntensity: number
 }
 
 function asNum(raw: unknown, fallback: number): number {
@@ -410,6 +424,7 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16)
     const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16)
     const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2)
+    const textWrapMinWidth = asNum(getVariableByName('productMerchandisingcard/footer/textWrap/minWidth', modes), 100)
     const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29)
 
     const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff')
@@ -424,7 +439,20 @@ function resolveTokens(modes: Modes): ResolvedTokens {
 
     const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12)
     const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
-    const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500')
+    // No dedicated `specialbadge/text/fontweight` in the collection — Figma
+    // binds the glass badge label to `badge/label/fontWeight` (600).
+    const sbWeight = asStr(getVariableByName('badge/label/fontWeight', modes), '600')
+    const sbPadH = asNum(getVariableByName('productMerchandisingcard/specialbadge/padding/horizontal', modes), 6)
+    const sbGap = asNum(getVariableByName('productMerchandisingcard/specialbadge/gap', modes), 4)
+    const sbPadV = asNum(getVariableByName('badge/padding/vertical', modes), 4)
+    const sbRadius = asNum(getVariableByName('badge/radius', modes), 4)
+    const sbLabelColor = asStr(getVariableByName('badge/glass/color/label', modes), '#ffffff')
+
+    // The special badge is a `type="glass"` Badge: its overlay + blur come
+    // straight from the shared badge-glass tokens the design references
+    // (`badge/glass/color/background` and the `glass/minimal` → `blur/minimal`
+    // effect), so it frosts at the same strength as the footer.
+    const specialBadgeBg = asStr(getVariableByName('badge/glass/color/background', modes), 'rgba(255,255,255,0.15)')
 
     // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
     // an identical Gaussian on iOS, Android and web — so unlike the old
@@ -437,6 +465,10 @@ function resolveTokens(modes: Modes): ResolvedTokens {
         radius,
         blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
         imageBlurStdDeviation,
+        specialBadgeBg,
+        // Same `blur/minimal`-derived intensity the footer glass uses, so the
+        // special badge frosts consistently with the surface behind it.
+        specialBadgeIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
         header: {
             flexDirection: 'row',
             alignItems: 'flex-start',
@@ -454,6 +486,9 @@ function resolveTokens(modes: Modes): ResolvedTokens {
         },
         textWrap: {
             flex: 1,
+            // The Figma footer pins the text column to a minimum width so a long
+            // CTA can never squeeze the title/subtitle away (`footer/textWrap/minWidth`).
+            minWidth: textWrapMinWidth,
             gap: textGap,
             justifyContent: 'center',
         },
@@ -473,8 +508,16 @@ function resolveTokens(modes: Modes): ResolvedTokens {
             lineHeight: Math.round(subtitleSize * 1.2),
             includeFontPadding: false as any,
         },
+        // Pin the special-badge box to the card collection tokens so a parent
+        // `Badge Size` mode cannot inflate/deflate this pill away from Figma.
+        specialBadge: {
+            paddingHorizontal: sbPadH,
+            paddingVertical: sbPadV,
+            borderRadius: sbRadius,
+            gap: sbGap,
+        },
         specialBadgeText: {
-            color: '#ffffff',
+            color: sbLabelColor,
             fontSize: sbSize,
             fontFamily: sbFamily,
             fontWeight: sbWeight as TextStyle['fontWeight'],
@@ -501,16 +544,6 @@ 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: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
     pressed: {
         opacity: 0.92,
     },