jfs-components 0.1.51 → 0.1.55

package/.cursor/D2C-SCREEN.md

@@ -52,7 +52,8 @@ Resolve modes:
 3. Merge root → leaf; deeper entries override.
 4. Match name/position; use `nodeId` for duplicates.
 
-If `unresolved` exists, report every item/reason and stop:
+If `unresolved` exists, report every item/reason to the user, then ignore those
+entries and continue with the resolved modes:
 
 - `local collection`: packaged data cannot resolve a file-local collection.
 - `key not in variables JSON` / `mode not in collection`: packaged tokens stale.

package/.cursor/commands/D2C.md

@@ -9,7 +9,8 @@ implementation.**
 - User-stated behavior is authoritative. Figma defines visuals and designed
   states, not unspecified product logic.
 - Use Figma MCP. Never recreate an unreadable design from assumptions.
-- Use real package exports/props and extracted modes. Stop on unresolved modes.
+- Use real package exports/props and extracted modes. On unresolved modes,
+  notify the user then continue without them.
 - Fake demos stay local unless the user explicitly requests a service.
 - This may be recorded: present a clean first implementation. Never mention
   prior attempts, cached knowledge, mistakes, or “fixes.” Be concise:

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.55] - 2026-07-27
+
+- D2C playbooks (`.cursor/commands/D2C.md`, `.cursor/D2C-FLOW.md`, `.cursor/D2C-SCREEN.md`) — on unresolved mode pairs, notify the user then continue with resolved modes (no longer stop execution).
+
+---
+
+## [0.1.54] - 2026-07-27
+
+- Token / mode resolution pass against Figma Code Connect + Coin Variables:
+  - Tooltip / Slider — `tooltip/radius` / `tooltip/maxWidth` → bound `radius` / `maxWidth`
+  - Nudge — `nudge/radius` → `nudge/borderRadius` (repaired alias target in Coin Variables)
+  - Badge — System intent label color uses published Emphasis tokens; size mode `Badge / Size` → `Badge Size`
+  - Remapped invalid mode keys across Accordion, ActionTile, Button, ButtonGroup, IconButton, IconCapsule, ListItem, PortfolioHero, Avatar consumers, and story Theme leftovers
+- CategoryCard updates (stories / MDX / assets)
+
+---
+
 ## [0.1.51] - 2026-07-26
 
 - Packages the Cursor D2C playbooks with the npm release: `.cursor/commands/D2C.md`, `.cursor/D2C-FLOW.md`, and `.cursor/D2C-SCREEN.md` (replacing the removed root `D2C.md` entry in `package.json` `files`).

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -6,13 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _shadow = require("../../utils/shadow");
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _Slot = _interopRequireDefault(require("../Slot/Slot"));
+var _Stack = _interopRequireDefault(require("../Stack/Stack"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+// Native sticky pinning is the product contract. Web/Storybook stays in normal
+// document flow so stories and docs layouts are not yanked out of their cards.
+const STICKY_BY_DEFAULT = !IS_WEB;
+
+// Fallback row height used only until the first onLayout measurement lands.
+// Matches the common Button / IconButton intrinsic height in this library.
+const FALLBACK_ACTION_ROW_HEIGHT = 48;
+
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -40,172 +53,343 @@ const STRETCH_STYLE = {
   flexBasis: 0,
   minWidth: 0
 };
+const COMPOSITE_STRETCH_STYLE = {
+  alignSelf: 'stretch',
+  width: '100%'
+};
 
 // Upward drop shadow routed through the unified helper: native `boxShadow` on
 // web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+// Values match `actionFooter/shadow/primary|secondary/*` tokens.
 const SHADOW = (0, _shadow.boxShadow)('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
   elevation: 16
 });
-
-// The runtime token a slot child must equal (by reference) to be treated as
-// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
-// element.type identity comparison works for both `<IconButton />` from the
-// same module and any `React.memo`-wrapped re-export. The fallback check
-// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
-// `memo` wrapping which can happen when consumers re-export the component.
-function isIconButtonElement(element) {
+const SHELL_STYLE = {
+  // Fill the parent's cross axis without forcing callers to pass width: '100%'.
+  alignSelf: 'stretch',
+  // In a column flex parent, absorb free space above us so the footer sits on
+  // the bottom edge even when siblings above it are short. Harmless when a
+  // sibling already owns `flex: 1` (e.g. FullscreenModal's ScrollView).
+  marginTop: 'auto'
+};
+const PINNED_STYLE = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+function isElementOfType(element, component) {
   const t = element.type;
-  if (t === _IconButton.default) return true;
-  if (t && typeof t === 'object' && t.type === _IconButton.default) return true;
+  if (t === component) return true;
+  // `React.memo` / one extra `forwardRef` layer (re-exports).
+  if (t && typeof t === 'object' && t.type === component) return true;
   return false;
 }
+function isIconButtonElement(element) {
+  return isElementOfType(element, _IconButton.default);
+}
 
 /**
- * ActionFooter — a sticky bottom container for primary screen actions.
- *
- * Layout contract:
- *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
- *     it fills the parent regardless of whether the parent is a flex column,
- *     a ScrollView contentContainer, or a plain View.
- *   - The inner slot is a single row sized by its tallest child. It does NOT
- *     use `flex: 1` — that previously caused the row to collapse to zero on
- *     the first Yoga pass on native, taking the button labels with it.
- *   - `IconButton` children keep their intrinsic square size.
- *   - Every other child is auto-stretched with the Yoga-safe stretch style
- *     above so two `<Button>` siblings render at equal width on iOS, Android,
- *     and Web.
- *
- * The `modes` prop is automatically pushed down to every slot child via
- * {@link cloneChildrenWithModes}; explicit child-level modes win over the
- * parent's modes.
- *
- * @example
- * ```tsx
- * <ActionFooter modes={modes}>
- *   <IconButton iconName="ic_split" />
- *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
- *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
- * </ActionFooter>
- * ```
+ * Figma nests `Stack → Slot → ButtonGroup` under ActionFooter. In code, Slot
+ * still exists as a parallel primitive and Stack is the preferred successor —
+ * treat all three as "composites that own their own layout" so we never
+ * double-apply the loose-button stretch math and break their internals.
  */
-function ActionFooter({
-  children,
-  modes = _reactUtils.EMPTY_MODES,
-  style,
-  accessibilityLabel
-}) {
-  // -------------------------------------------------------------------------
-  // Keep the footer locked in place behind the software keyboard (Android).
-  // -------------------------------------------------------------------------
-  //
-  // The Android activity is configured with `windowSoftInputMode="adjustResize"`,
-  // which shrinks the app window by the keyboard height when the keyboard
-  // opens. A bottom-anchored footer therefore gets lifted UP by the keyboard
-  // height — exactly the jump the design does not want.
-  //
-  // To counteract that, we translate the footer back DOWN by the same keyboard
-  // height so it visually stays exactly where it was (now sitting behind the
-  // keyboard). iOS does not resize the window for the keyboard, so the footer
-  // already stays put there; we only run this on Android to avoid pushing the
-  // footer off-screen on platforms that don't lift it in the first place.
-  const keyboardOffset = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  (0, _react.useEffect)(() => {
-    if (_reactNative.Platform.OS !== 'android') return undefined;
-    const animateTo = (toValue, duration) => {
-      _reactNative.Animated.timing(keyboardOffset, {
-        toValue,
-        // Match the OS keyboard animation so the resize and our counter-shift
-        // cancel out smoothly with no visible footer movement.
-        duration: typeof duration === 'number' && duration > 0 ? duration : 150,
-        useNativeDriver: true
-      }).start();
-    };
-    const showSub = _reactNative.Keyboard.addListener('keyboardDidShow', e => {
-      animateTo(e?.endCoordinates?.height ?? 0, e?.duration);
-    });
-    const hideSub = _reactNative.Keyboard.addListener('keyboardDidHide', e => {
-      animateTo(0, e?.duration);
-    });
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [keyboardOffset]);
+function isCompositeActionElement(element) {
+  return isElementOfType(element, _ButtonGroup.default) || isElementOfType(element, _Stack.default) || isElementOfType(element, _Slot.default);
+}
+function resolveChrome(modes) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/background', modes) ?? '#ffffff';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/horizontal', modes) ?? 16;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/top', modes) ?? 10;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes) ?? 41;
+  const borderRadius = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/radius', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('radius/actionFooter', modes) ?? 0;
 
-  // All token reads collapsed into a single useMemo keyed on `modes`. With
-  // the shared `EMPTY_MODES` default this resolves once for the common path
-  // and never re-allocates the container/slot style objects between renders.
-  const {
-    containerStyle,
-    slotStyle
-  } = (0, _react.useMemo)(() => {
-    const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/background', modes) ?? '#ffffff';
-    const gap = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/gap', modes) ?? 8;
-    const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/horizontal', modes) ?? 16;
-    const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/top', modes) ?? 10;
-    const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes) ?? 41;
-    const container = {
-      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
-      // parent's cross axis" — in the common case (column parent) this gives
-      // us full-width without the caller needing to pass `width: '100%'`.
+  // Title wrap reuses the Drawer title tokens in Figma (same binding ContentSheet
+  // uses) so the three bottom surfaces stay typographically aligned.
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes) ?? '#0d0d0f';
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes) ?? 14;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) ?? 17;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? String(titleFontWeightRaw) : titleFontWeightRaw;
+  const titleWrapPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/top', modes) ?? 16;
+  const titleWrapPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes) ?? 8;
+  const titleWrapPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/horizontal', modes) ?? 0;
+  return {
+    containerStyle: {
       alignSelf: 'stretch',
       backgroundColor,
       paddingLeft: paddingHorizontal,
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
+      borderRadius,
       ...SHADOW
-    };
-    const slot = {
+    },
+    slotStyle: {
       flexDirection: 'row',
       // Vertically center the IconButton against the slightly taller Buttons
       // so the row reads as a single optical baseline.
       alignItems: 'center',
+      alignSelf: 'stretch',
       gap
-    };
+    },
+    titleWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+      textAlign: 'center'
+    },
+    // Seed the in-flow spacer so the first frame already reserves room and
+    // scroll siblings never paint under an unmeasured footer.
+    estimatedHeight: paddingTop + paddingBottom + FALLBACK_ACTION_ROW_HEIGHT
+  };
+}
+
+/**
+ * Legacy loose-children path — identical stretch semantics to the original
+ * ActionFooter so existing call sites keep pixel parity.
+ */
+function enhanceLooseChildren(children, modes) {
+  const flat = (0, _reactUtils.flattenChildren)(children);
+  const withModes = (0, _reactUtils.cloneChildrenWithModes)(flat, modes);
+  return withModes.map((child, index) => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+    const element = child;
+    if (isIconButtonElement(element)) return element;
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      key: element.key ?? `action-footer-item-${index}`,
+      style: [STRETCH_STYLE, element.props.style]
+    });
+  });
+}
+function enhanceCompositeChild(element, modes) {
+  const childModes = element.props.modes ?? _reactUtils.EMPTY_MODES;
+  return /*#__PURE__*/_react.default.cloneElement(element, {
+    modes: {
+      ...modes,
+      ...childModes
+    },
+    style: [COMPOSITE_STRETCH_STYLE, element.props.style]
+  });
+}
+/**
+ * Shared chrome for web + native. On native (`sticky`), an in-flow shell locks
+ * the footer's height into the parent layout while the visible chrome is
+ * absolutely pinned to that shell's bottom edge — so the footer cannot scroll
+ * away or float mid-screen, and keyboard translation never collapses siblings.
+ */
+function ActionFooterChrome({
+  children,
+  title,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  sticky,
+  animatedStyle
+}) {
+  const {
+    containerStyle,
+    slotStyle,
+    titleWrapStyle,
+    titleStyle,
+    estimatedHeight
+  } = (0, _react.useMemo)(() => resolveChrome(modes), [modes]);
+  const showTitle = typeof title === 'string' && title.length > 0;
+
+  // Decide once whether the caller passed the Figma composite shape
+  // (ButtonGroup / Stack / Slot) or the legacy loose-button list. This keeps
+  // both APIs working without forcing a migration.
+  const {
+    actionsBody,
+    estimatedActionsHeight
+  } = (0, _react.useMemo)(() => {
+    const flat = (0, _reactUtils.flattenChildren)(children);
+    const sole = flat.length === 1 && /*#__PURE__*/_react.default.isValidElement(flat[0]) ? flat[0] : null;
+    if (sole && isCompositeActionElement(sole)) {
+      return {
+        actionsBody: enhanceCompositeChild(sole, modes),
+        estimatedActionsHeight: FALLBACK_ACTION_ROW_HEIGHT
+      };
+    }
     return {
-      containerStyle: container,
-      slotStyle: slot
+      actionsBody: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: slotStyle,
+        children: enhanceLooseChildren(children, modes)
+      }),
+      estimatedActionsHeight: FALLBACK_ACTION_ROW_HEIGHT
     };
-  }, [modes]);
+  }, [children, modes, slotStyle]);
+  const body = (0, _react.useMemo)(() => {
+    if (!showTitle) {
+      // No title → identical tree shape to the pre-title ActionFooter for the
+      // loose-children path (just the actions row / composite). No extra Stack
+      // wrapper, so existing layouts cannot regress from an added gap node.
+      return actionsBody;
+    }
 
-  // Process children once per (children, modes) tuple:
-  //   1. Flatten Fragments so each action is its own keyed sibling.
-  //   2. Push `modes` down so callers don't have to thread it manually.
-  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
-  //
-  // The result identity is stable across re-renders when the inputs don't
-  // change, which keeps the `React.memo`-wrapped Button/IconButton children
-  // from re-rendering for no reason.
-  const enhancedChildren = (0, _react.useMemo)(() => {
-    const flat = (0, _reactUtils.flattenChildren)(children);
-    const withModes = (0, _reactUtils.cloneChildrenWithModes)(flat, modes);
-    return withModes.map((child, index) => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
-      const element = child;
-      if (isIconButtonElement(element)) return element;
-      return /*#__PURE__*/_react.default.cloneElement(element, {
-        key: element.key ?? `action-footer-item-${index}`,
-        style: [STRETCH_STYLE, element.props.style]
-      });
+    // Figma: title wrap (sibling) + Stack → Slot → ButtonGroup. We mount a
+    // vertical Stack only when the title is present so the gap between title
+    // and actions is token-driven (`slot/gap` via Stack, cascaded modes).
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
+      layoutDirection: "vertical",
+      fillWidth: true,
+      modes: modes,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: titleWrapStyle,
+        accessibilityRole: "header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: titleStyle,
+          children: title
+        })
+      }), actionsBody]
     });
-  }, [children, modes]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [containerStyle, style,
-    // Counter-translate by the keyboard height on Android so `adjustResize`
-    // can't lift the footer above the keyboard (no-op on iOS/web where the
-    // value stays at 0).
-    {
-      transform: [{
-        translateY: keyboardOffset
-      }]
-    }],
+  }, [showTitle, actionsBody, modes, title, titleWrapStyle, titleStyle]);
+  const [footerHeight, setFooterHeight] = (0, _react.useState)(estimatedHeight + (showTitle ? 41 : 0));
+
+  // Token / title presence changes should re-seed the spacer immediately;
+  // the next onLayout then corrects to the true measured height.
+  (0, _react.useEffect)(() => {
+    setFooterHeight(estimatedHeight + (showTitle ? 41 : 0));
+  }, [estimatedHeight, showTitle, estimatedActionsHeight]);
+  const onFooterLayout = event => {
+    const next = Math.ceil(event.nativeEvent.layout.height);
+    if (next > 0 && next !== footerHeight) {
+      setFooterHeight(next);
+    }
+  };
+  const chrome = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [sticky ? PINNED_STYLE : null, containerStyle, style, animatedStyle],
+    onLayout: sticky ? onFooterLayout : undefined,
     accessibilityRole: "toolbar",
     accessibilityLabel: accessibilityLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: slotStyle,
-      children: enhancedChildren
-    })
+    children: body
+  });
+  if (!sticky) {
+    return chrome;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [SHELL_STYLE, {
+      height: footerHeight
+    }],
+    pointerEvents: "box-none",
+    children: chrome
+  });
+}
+
+/**
+ * UI-thread keyboard tracking. Lifts by `keyboard.height - layoutShrink` so:
+ *   - iOS / Android `adjustPan` / `adjustNothing` → full keyboard height
+ *   - Android `adjustResize` (this app's default) → ~0 (window already shrank)
+ * Never double-counts, never depends on callers wiring KeyboardAvoidingView.
+ */
+function KeyboardAwareActionFooter(props) {
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const maxWindowHeight = (0, _reactNativeReanimated.useSharedValue)(windowHeight);
+  const layoutShrink = (0, _reactNativeReanimated.useSharedValue)(0);
+  const keyboard = (0, _reactNativeReanimated.useAnimatedKeyboard)();
+
+  // Orientation / split-screen width changes invalidate the height baseline.
+  // Intentionally NOT keyed on `windowHeight` — Android `adjustResize` shrinks
+  // height when the keyboard opens, and resetting the baseline there would
+  // collapse `layoutShrink` to 0 and double-lift the footer.
+  (0, _react.useEffect)(() => {
+    maxWindowHeight.value = windowHeight;
+    layoutShrink.value = 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- width-only baseline
+  }, [windowWidth]);
+
+  // Track how much of the keyboard inset the window has already absorbed.
+  // Shared values keep the keyboard worklet free of React re-render lag.
+  (0, _react.useEffect)(() => {
+    if (windowHeight > maxWindowHeight.value) {
+      maxWindowHeight.value = windowHeight;
+    }
+    layoutShrink.value = Math.max(0, maxWindowHeight.value - windowHeight);
+  }, [windowHeight, maxWindowHeight, layoutShrink]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const lift = Math.max(0, keyboard.height.value - layoutShrink.value);
+    return {
+      transform: [{
+        translateY: -lift
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionFooterChrome, {
+    ...props,
+    sticky: true,
+    animatedStyle: animatedStyle
+  });
+}
+
+/**
+ * ActionFooter — sticky bottom container for primary screen actions.
+ *
+ * Layout contract (native):
+ *   - Self-pins to the bottom of its flex-column screen via `marginTop: 'auto'`
+ *     plus an absolutely positioned chrome inside a height-locked shell.
+ *   - The shell keeps scroll/flex siblings from painting under the footer —
+ *     callers do not need to hand-maintain `paddingBottom`.
+ *   - Keyboard avoidance is owned here: the footer moves up by exactly the
+ *     keyboard height that layout has not already absorbed. Host
+ *     `KeyboardAvoidingView` is unnecessary and should not wrap this.
+ *
+ * Layout contract (web):
+ *   - In-flow stretch container (Storybook / docs friendly). No keyboard inset.
+ *
+ * Content contract:
+ *   - Optional centered `title` (Figma title wrap; Drawer title tokens).
+ *   - Loose `IconButton`/`Button` children keep the original equal-stretch row.
+ *   - A sole `ButtonGroup` / `Stack` / `Slot` child is treated as the Figma
+ *     composite and is not re-stretched internally.
+ *
+ * @example
+ * ```tsx
+ * // Legacy — still the recommended simple path
+ * <ActionFooter>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
+ * </ActionFooter>
+ *
+ * // Figma shape + title
+ * <ActionFooter title="Confirm payment">
+ *   <ButtonGroup>
+ *     <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *     <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
+ *   </ButtonGroup>
+ * </ActionFooter>
+ * ```
+ */
+function ActionFooter({
+  avoidKeyboard = true,
+  ...props
+}) {
+  // Distinct component types keep `useAnimatedKeyboard` hook order stable
+  // (same pattern as ContentSheet). Web never mounts the keyboard path.
+  if (STICKY_BY_DEFAULT && avoidKeyboard) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardAwareActionFooter, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionFooterChrome, {
+    ...props,
+    sticky: STICKY_BY_DEFAULT
   });
 }
 var _default = exports.default = /*#__PURE__*/_react.default.memo(ActionFooter);

package/lib/commonjs/components/Badge/Badge.js

@@ -13,6 +13,25 @@ var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Figma still binds `badge/color/label`, but that alias is broken for
+ * `Semantic Intent=System` + `Emphasis=High` (missing VariableID:2811:2401).
+ * Use the published tokens that the chain is supposed to land on:
+ * - Brand → `Emphasis/badge/brand/fg`
+ * - System + High → `Emphasis/badge/high/fg Copy` (AppearanceSystem)
+ * - System + Medium/Low → `Emphasis/badge/system/fg`
+ */
+function badgeLabelColorToken(modes) {
+  const intent = modes['Semantic Intent'] ?? 'Brand';
+  const emphasis = modes.Emphasis ?? 'High';
+  if (intent === 'System' && emphasis === 'High') {
+    return 'Emphasis/badge/high/fg Copy';
+  }
+  if (intent === 'System') {
+    return 'Emphasis/badge/system/fg';
+  }
+  return 'Emphasis/badge/brand/fg';
+}
 function Badge({
   label = 'Label',
   type = 'default',
@@ -37,7 +56,7 @@ function Badge({
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes);
   const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes);
   const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes);
-  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)(badgeLabelColorToken(modes), modes);
   const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes));
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes);
   const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes);