@oxy.so/bloom 4.16.1 → 4.18.0

package/src/checkout-summary/types.ts

@@ -89,6 +89,12 @@ export interface CheckoutConfirmProps {
    * press commits to and the press are one decision.
    */
   amount?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of `amount` — the buyer's currency beside
+   * the shop's, `"≈ 12,00 €"` — drawn de-emphasised, centred under the button.
+   * Named like `PriceLine.secondaryAmount`; drawn as given, nothing converts.
+   */
+  secondaryAmount?: string;
   /**
    * The terms line under the button — a string, or a node with links in it.
    * `null` draws none.

package/src/chip/Chip.tsx

@@ -242,8 +242,10 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     // WHICH attribute is a property of the ROLE, not a preference — a `radio`
     // carries `aria-checked` and a `tab` `aria-selected`; `aria-pressed` on
     // either is invalid, and `aria-selected` on a `button` is too.
+    // A `checkbox` (a multi-select filter chip) reads `aria-checked` like a
+    // `radio`; what differs is that its group allows several at once.
     const stateProps =
-      role === 'radio'
+      role === 'radio' || role === 'checkbox'
         ? { accessibilityState: { checked: selected, disabled }, 'aria-checked': selected }
         : role === 'tab'
           ? { accessibilityState: { selected, disabled }, 'aria-selected': selected }

package/src/chip/types.ts

@@ -26,10 +26,11 @@ export type ChipHue = 'lime' | 'rose' | 'yellow' | 'cyan' | 'blue' | 'purple' |
 
 /**
  * What a pressable chip IS, which decides the state ARIA reads it by:
- * a toggle `button` (`aria-pressed`), a `radio` in a radiogroup
- * (`aria-checked`), or a `tab` in a tablist (`aria-selected`).
+ * a toggle `button` (`aria-pressed`), a `checkbox` in a multi-select filter
+ * group (`aria-checked`), a `radio` in a radiogroup (`aria-checked`), or a
+ * `tab` in a tablist (`aria-selected`).
  */
-export type ChipRole = 'button' | 'radio' | 'tab';
+export type ChipRole = 'button' | 'checkbox' | 'radio' | 'tab';
 
 export interface ChipProps {
   appearance?: BloomAppearance;
@@ -84,9 +85,10 @@ export interface ChipProps {
   selected?: boolean;
   /**
    * What a pressable chip is to assistive technology. Default `button`
-   * (`aria-pressed`). Use `radio` inside a `radiogroup` and `tab` inside a
-   * `tablist` — the state attribute follows the role, and a `radio` announcing
-   * `aria-pressed` is invalid.
+   * (`aria-pressed`). Use `checkbox` for a multi-select filter chip (in a
+   * `group`), `radio` inside a `radiogroup` and `tab` inside a `tablist` — the
+   * state attribute follows the role, and a `radio` announcing `aria-pressed`
+   * is invalid.
    */
   role?: ChipRole;
   /** Whether the chip is disabled. */

package/src/dialog/Dialog.tsx

@@ -28,6 +28,7 @@ import Animated, {
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { Backdrop, OverlayRoot } from '../overlay';
 import { useTheme } from '../theme/use-theme';
+import { useIsRtl } from '../hooks/use-is-rtl';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { StyledView } from '../styles/styled-primitives';
 import { SurfaceLevelProvider } from '../styles/surface-levels';
@@ -51,6 +52,8 @@ import {
   PANEL_RADIUS,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
+  physicalDialogSide,
+  type DialogSidePlacement,
 } from './placement';
 import type {
   DialogAction,
@@ -137,9 +140,9 @@ function CenteredOrSideDialog({
   containerClassName,
   label,
   children,
-}: Omit<DialogProps, 'placement'> & { placement: 'center' | 'left' | 'right' }) {
+}: Omit<DialogProps, 'placement'> & { placement: 'center' | DialogSidePlacement }) {
   const isControlled = controlledOpen !== undefined;
-  const isSide = placement === 'left' || placement === 'right';
+  const isSide = placement !== 'center';
   const headerController = useDialogHeaderController();
   const scrollableResolved = scrollable ?? true;
   const { height: viewportHeight } = useWindowDimensions();
@@ -422,7 +425,7 @@ function SideSheet({
 }: {
   open: boolean;
   onDismiss: () => void;
-  side: 'left' | 'right';
+  side: DialogSidePlacement;
   width: number;
   inset?: DialogInset;
   dismissOnBackdrop: boolean;
@@ -453,8 +456,16 @@ function SideSheet({
   const insetBottom = inset?.bottom ?? 0;
   const insetLeft = inset?.left ?? 0;
   const insetRight = inset?.right ?? 0;
-  const anchorInset = side === 'left' ? insetLeft : insetRight;
-  const oppositeInset = side === 'left' ? insetRight : insetLeft;
+  // `start`/`end` resolve to the physical edge they land on for everything a
+  // layout engine does not mirror: the slide sign, and which `inset` applies.
+  const rtl = useIsRtl();
+  const edge = physicalDialogSide(side, rtl);
+  // The POSITION of a logical placement is a logical key, resolved by Yoga
+  // against `I18nManager` — a physical `left`/`right` here would be swapped by
+  // React Native's default `swapLeftAndRightInRTL` and land on the wrong edge.
+  const anchorKey = side === 'start' ? 'insetInlineStart' : side === 'end' ? 'insetInlineEnd' : side;
+  const anchorInset = edge === 'left' ? insetLeft : insetRight;
+  const oppositeInset = edge === 'left' ? insetRight : insetLeft;
 
   const sideWidth = useMemo(() => {
     const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
@@ -491,7 +502,7 @@ function SideSheet({
     if (dismissOnBackdrop) onDismiss();
   }, [dismissOnBackdrop, onDismiss]);
 
-  const hiddenSign = side === 'left' ? -1 : 1;
+  const hiddenSign = edge === 'left' ? -1 : 1;
   const panelAnimatedStyle = useAnimatedStyle(() => {
     const hidden = 1 - progress.value;
     return {
@@ -513,11 +524,11 @@ function SideSheet({
       ({
         top: insetTop,
         bottom: insetBottom,
-        [side]: anchorInset,
+        [anchorKey]: anchorInset,
         width: sideWidth,
         borderRadius: PANEL_RADIUS,
       }),
-    [insetTop, insetBottom, side, anchorInset, sideWidth],
+    [insetTop, insetBottom, anchorKey, anchorInset, sideWidth],
   );
 
   if (!mounted) return null;

package/src/dialog/Dialog.web.tsx

@@ -45,6 +45,7 @@ import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
+import { useIsRtl } from '../hooks/use-is-rtl';
 import { Context, useDialogContext, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
@@ -69,6 +70,8 @@ import {
   PANEL_RADIUS,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
+  physicalDialogSide,
+  type DialogSidePlacement,
 } from './placement';
 import type {
   DialogAction,
@@ -196,7 +199,7 @@ function CenterOrSideDialog({
   containerClassName,
   label,
   children,
-}: Omit<DialogProps, 'placement'> & { placement: 'center' | 'left' | 'right' }) {
+}: Omit<DialogProps, 'placement'> & { placement: 'center' | DialogSidePlacement }) {
   // Inject the required @keyframes on mount (before the panel ever appears —
   // this component renders once with `isOpen=false` prior to opening, so the
   // stylesheet is present by the time the animated surface mounts).
@@ -647,7 +650,7 @@ function SheetSurface({
   actions?: DialogAction[];
   header?: DialogProps['header'];
   scrollable?: boolean;
-  placement: 'left' | 'right';
+  placement: DialogSidePlacement;
   shown: boolean;
   width: number;
   inset?: DialogInset;
@@ -666,6 +669,7 @@ function SheetSurface({
   const descriptionId = useId();
   const headerController = useDialogHeaderController();
   const { width: viewportWidth } = useWindowDimensions();
+  const rtl = useIsRtl();
 
   // Defer the entry transition by a frame so the start state paints before the
   // browser animates to `shown`. `entered` is false on the first committed
@@ -707,22 +711,26 @@ function SheetSurface({
     const insetBottom = inset?.bottom ?? 0;
     const insetLeft = inset?.left ?? 0;
     const insetRight = inset?.right ?? 0;
-    const anchorInset = placement === 'left' ? insetLeft : insetRight;
-    const oppositeInset = placement === 'left' ? insetRight : insetLeft;
+    // `start`/`end` land on a physical edge read from `useIsRtl()`. The drawer
+    // is portaled outside any `dir` context, so react-native-web would resolve
+    // a logical key left-to-right; the physical edge is the one that is right.
+    const edge = physicalDialogSide(placement, rtl);
+    const anchorInset = edge === 'left' ? insetLeft : insetRight;
+    const oppositeInset = edge === 'left' ? insetRight : insetLeft;
     const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
     const cappedWidth = Math.max(0, Math.min(width, available));
-    const hiddenSign = placement === 'left' ? '-100%' : '100%';
+    const hiddenSign = edge === 'left' ? '-100%' : '100%';
 
     return {
       top: insetTop,
       bottom: insetBottom,
-      [placement]: anchorInset,
+      [edge]: anchorInset,
       width: cappedWidth,
       borderRadius: PANEL_RADIUS,
       transform: [{ translateX: visible ? 0 : hiddenSign }],
       opacity: visible ? 1 : 0,
     };
-  }, [visible, placement, width, inset, viewportWidth]);
+  }, [visible, placement, rtl, width, inset, viewportWidth]);
 
   const handleBackdropPress = useCallback(() => {
     if (dismissOnBackdrop) onDismiss();

package/src/dialog/placement.ts

@@ -7,10 +7,27 @@ import { BREAKPOINTS } from '../styles/breakpoints';
  * Anchor a `<Dialog>` can render against.
  *
  * - `'center'` — the default centered modal card (current behavior).
- * - `'left'` / `'right'` — an anchored side-sheet / drawer.
+ * - `'left'` / `'right'` — an anchored side-sheet / drawer on that PHYSICAL edge.
+ * - `'start'` / `'end'` — the same drawer on the LOGICAL edge: `start` is the
+ *   left in a left-to-right layout and the right in a right-to-left one, and it
+ *   slides in from that edge. Resolved with `useIsRtl()`.
  * - `'bottom'` — a bottom-sheet (drag handle, slide-up).
  */
-export type DialogPlacement = 'center' | 'left' | 'right' | 'bottom';
+export type DialogPlacement = 'center' | 'left' | 'right' | 'start' | 'end' | 'bottom';
+
+/** The four side-sheet placements, physical and logical. */
+export type DialogSidePlacement = 'left' | 'right' | 'start' | 'end';
+
+/**
+ * The PHYSICAL edge a side placement lands on. `left`/`right` are themselves;
+ * `start` is `left` left-to-right and `right` right-to-left, `end` the reverse.
+ * The panel's `translateX` sign, which no layout engine mirrors, follows this.
+ */
+export function physicalDialogSide(side: DialogSidePlacement, rtl: boolean): 'left' | 'right' {
+  if (side === 'start') return rtl ? 'right' : 'left';
+  if (side === 'end') return rtl ? 'left' : 'right';
+  return side;
+}
 
 /**
  * A `<Dialog>` placement that may vary by viewport width.

package/src/dialog/types.ts

@@ -256,8 +256,9 @@ export type DialogProps = React.PropsWithChildren<{
   actions?: DialogAction[];
   /**
    * Surface anchor. Defaults to `'center'` (the centered modal — current
-   * behavior). `'left'`/`'right'` render an anchored side-sheet, `'bottom'` a
-   * bottom-sheet. A responsive map resolves by viewport width, e.g.
+   * behavior). `'left'`/`'right'` render an anchored side-sheet on that
+   * physical edge; `'start'`/`'end'` on the logical edge (mirrored, with its
+   * slide-in, in a right-to-left layout); `'bottom'` a bottom-sheet. A responsive map resolves by viewport width, e.g.
    * `{ base: 'bottom', md: 'left' }` (drawer on wide, sheet on narrow).
    */
   placement?: ResponsiveDialogPlacement;

package/src/icons/index.ts

@@ -4,5 +4,7 @@
 // rewrites an app's imports.
 export type { IconStyle, Props } from './shared';
 export type { BloomIconComponent } from './icon-component';
+export type { BloomIconPaint, BloomIconRenderer } from './render-icon';
+export { resolveIconSlot } from './render-icon';
 export { sizes, useCommonSVGProps } from './shared';
 export * from './remix';

package/src/icons/render-icon.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+
+/**
+ * What a Bloom component tells an icon slot to draw: the box, and the colour of
+ * the glyph in the CURRENT state (rest, hover, pressed, disabled, checked).
+ *
+ * `color` carries the same value the component would have passed as `fill`. It
+ * is spelled `color` because this object is handed to CALLER code, and an app's
+ * own icon set almost always names it that.
+ */
+export interface BloomIconPaint {
+  size: number;
+  color: string;
+}
+
+/**
+ * A caller-owned glyph that still follows the control's state.
+ *
+ * Bloom's own icon slots take a {@link BloomIconComponent} and tint it by
+ * passing `fill`. An app whose icons paint from a `color` prop — which most app
+ * icon sets do — cannot be handed to one of those slots directly: the props
+ * have nothing in common, so it does not typecheck, and were it cast it would
+ * render at its default size in its default colour, silently.
+ *
+ * Passing `color` alongside `fill` is not the fix, and deliberately so:
+ * `frosted-icon-button/shared.ts` records why — "the prop is not ours to
+ * claim", because components use `color` for semantic variants (`color="danger"`).
+ *
+ * Nor can the function form share the existing prop. A component is a function
+ * too, so a slot accepting both could not tell an app's ADAPTER component —
+ * `({ width, fill }) => <Glyph size={width} color={fill} />`, which works today
+ * and is the documented way to do this — from a paint callback. It would break
+ * exactly the callers who already did the right thing. Hence its own prop.
+ *
+ * ```tsx
+ * <ButtonGroupItem
+ *   iconOnly
+ *   renderLeadingIcon={({ size, color }) => <AppSearchIcon size={size} color={color} />}
+ *   accessibilityLabel="Search"
+ * />
+ * ```
+ *
+ * This is `GlyphButton`'s `children?: ReactNode | ((foreground: string) => ReactNode)`
+ * generalised to the slots that take an icon rather than a child — including
+ * its precedence rule: where a family offers both, the renderer wins over the
+ * icon component.
+ */
+export type BloomIconRenderer = (paint: BloomIconPaint) => ReactNode;
+
+/**
+ * Resolve an icon slot that offers both forms.
+ *
+ * `render` wins when present, matching `GlyphButton`, where the caller-painted
+ * glyph wins over `icon`. Returns `null` when neither is set, so a call site
+ * stays a single expression.
+ */
+export function resolveIconSlot(
+  render: BloomIconRenderer | undefined,
+  size: number,
+  color: string,
+  fallback: () => ReactNode,
+): ReactNode {
+  if (render) return render({ size, color });
+  return fallback();
+}

package/src/loading/Loading.tsx

@@ -18,7 +18,7 @@ import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
 import { animation } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
-import { bindLoading, SIZE_CONFIG, styles } from './LoadingBase';
+import { bindLoading, LoadingRoot, SIZE_CONFIG, styles } from './LoadingBase';
 import { SpinnerIcon } from './SpinnerIcon';
 import type { TopLoadingProps } from './types';
 
@@ -31,6 +31,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   iconSize,
   heightOffset = 0,
   spinnerIcon,
+  accessibilityLabel,
   testID,
 }) => {
   const theme = useTheme();
@@ -69,7 +70,10 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   return (
     <Animated.View style={[styles.topContainer, containerAnimated]} testID={testID}>
       <Animated.View style={[styles.topLoadingView, { height: targetHeight }, innerAnimated, style]}>
-        {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+        {/* Named only while it is showing: a collapsed bar is not a wait. */}
+        <LoadingRoot accessibilityLabel={showLoading ? accessibilityLabel : undefined}>
+          {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+        </LoadingRoot>
       </Animated.View>
     </Animated.View>
   );

package/src/loading/Loading.web.tsx

@@ -16,7 +16,7 @@ import { useBloomAppearance } from '../appearance';
 import { animation } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
-import { bindLoading, SIZE_CONFIG, styles } from './LoadingBase';
+import { bindLoading, LoadingRoot, SIZE_CONFIG, styles } from './LoadingBase';
 import { SpinnerIcon } from './SpinnerIcon.web';
 import type { TopLoadingProps } from './types';
 
@@ -41,6 +41,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   iconSize,
   heightOffset = 0,
   spinnerIcon,
+  accessibilityLabel,
   testID,
 }) => {
   const theme = useTheme();
@@ -84,7 +85,10 @@ const TopLoading: React.FC<TopLoadingProps> = ({
           style,
         ]}
       >
-        {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+        {/* Named only while it is showing: a collapsed bar is not a wait. */}
+        <LoadingRoot accessibilityLabel={showLoading ? accessibilityLabel : undefined}>
+          {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+        </LoadingRoot>
       </View>
     </View>
   );

package/src/loading/LoadingBase.tsx

@@ -23,7 +23,7 @@ import { normalizeBloomSize } from '../appearance/legacy';
 import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import type {
@@ -41,6 +41,54 @@ export const SIZE_CONFIG = {
   lg: { spinner: 44, text: 16 },
 } as const;
 
+/**
+ * The indicator's root: an indeterminate, NAMED `progressbar` when the caller
+ * gave `accessibilityLabel`, a plain view (today's behaviour) when not.
+ *
+ * Flat `aria-*` because react-native-web drops `accessibilityState` /
+ * `accessibilityValue`; React Native folds them back. `aria-valuenow` is
+ * deliberately absent (`undefined`): that is what makes a progressbar
+ * INDETERMINATE in ARIA, and a spinner has no amount done to report. The role
+ * is a literal on its own branch so `aria-state-source-census.test.ts` can read
+ * it; a computed role would be invisible to it.
+ */
+export function LoadingRoot({
+  accessibilityLabel,
+  style,
+  testID,
+  children,
+}: {
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children: React.ReactNode;
+}) {
+  if (accessibilityLabel) {
+    return (
+      <View
+        role="progressbar"
+        accessible
+        accessibilityLabel={accessibilityLabel}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={undefined}
+        aria-busy
+        style={style}
+        testID={testID}
+      >
+        {children}
+      </View>
+    );
+  }
+  // Nothing to carry (the `top` variant's inner slot): no extra node at all.
+  if (style === undefined && testID === undefined) return <>{children}</>;
+  return (
+    <View style={style} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
 /** The two platform pieces a fork supplies. */
 export interface LoadingPlatform {
   /** Forked: react-native-svg on native, a DOM `<svg>` on web. */
@@ -61,6 +109,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     showText = true,
     iconSize,
     spinnerIcon,
+    accessibilityLabel,
     testID,
   }) => {
     const theme = useTheme();
@@ -71,7 +120,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     const textColor = color ?? theme.colors.textSecondary;
 
     return (
-      <View style={[styles.container, style]} testID={testID}>
+      <LoadingRoot accessibilityLabel={accessibilityLabel} style={[styles.container, style]} testID={testID}>
         {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
         {showText && text && (
           <Text
@@ -84,7 +133,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
             {text}
           </Text>
         )}
-      </View>
+      </LoadingRoot>
     );
   };
 
@@ -96,6 +145,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     style,
     textStyle,
     spinnerIcon,
+    accessibilityLabel,
     testID,
   }) => {
     const theme = useTheme();
@@ -105,7 +155,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     const textColor = theme.colors.textSecondary;
 
     return (
-      <View style={[styles.inlineContainer, style]} testID={testID}>
+      <LoadingRoot accessibilityLabel={accessibilityLabel} style={[styles.inlineContainer, style]} testID={testID}>
         {spinnerIcon ?? <SpinnerIcon size={sizeConfig.spinner} color={spinnerColor} />}
         {text && (
           <Text
@@ -117,7 +167,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
             {text}
           </Text>
         )}
-      </View>
+      </LoadingRoot>
     );
   };
 

package/src/loading/types.ts

@@ -20,6 +20,17 @@ interface BaseLoadingProps {
   style?: ViewStyle;
   /** Whether loading is active (for animated variants) */
   showLoading?: boolean;
+  /**
+   * Names the indicator and makes it an indeterminate `progressbar` to
+   * assistive technology (`role="progressbar"` with `aria-label` and
+   * `aria-busy` on web; the same role, label and busy state natively). A
+   * spinner draws no words, so nothing else can say what is loading.
+   *
+   * Opt-in: without it the indicator carries no role, as before — which is
+   * right when it sits INSIDE a named progressbar already (an upload overlay),
+   * where a second one would announce the same wait twice.
+   */
+  accessibilityLabel?: string;
   testID?: string;
 }
 

package/src/page-header/PageHeader.tsx

@@ -416,7 +416,12 @@ function PageHeaderComponent({
       style={[
         styles.container,
         { paddingTop: padTop },
-        overlay ? [styles.overlay, { zIndex: Z_INDEX.floating }] : null,
+        overlay ? [styles.overlay, {
+          zIndex: Z_INDEX.floating,
+          // Android's native scroll surfaces also participate in elevation.
+          // Keep this local chrome above its sibling list without a portal.
+          ...(!isWeb ? { elevation: Z_INDEX.floating } : {}),
+        }] : null,
         containerWeb,
         placement === 'overlap' ? { marginBottom: -height, zIndex: Z_INDEX.floating } : null,
         style,

package/src/price-breakdown/PriceSummary.tsx

@@ -82,6 +82,7 @@ function PriceSummaryComponent({
               label={line.label}
               sublabel={line.sublabel}
               amount={line.amount}
+              secondaryAmount={line.secondaryAmount}
               tone={line.tone}
               state={line.state}
               info={line.info}
@@ -137,6 +138,15 @@ function PriceSummaryComponent({
               >
                 {total.amount ?? pendingPlaceholder}
               </Text>
+              {total.secondaryAmount ? (
+                <Text
+                  variant="body-2-regular"
+                  testID={testID ? `${testID}-total-secondary-amount` : undefined}
+                  style={{ color: paint.textSecondary, fontVariant: ['tabular-nums'], textAlign: 'right' }}
+                >
+                  {total.secondaryAmount}
+                </Text>
+              ) : null}
               {totalCaveat ? (
                 <Text
                   variant="caption-1-regular"

package/src/price-breakdown/PriceSummaryLine.tsx

@@ -27,6 +27,8 @@ import type { PriceSummaryLineProps } from './types';
  *   state     "Estimated" / "Pending" in caption-1 under the amount, so the
  *             caveat travels with the NUMBER rather than with the label; the
  *             row keeps its own reading order for a screen reader
+ *   secondary `secondaryAmount` (a second currency) in body-2-regular
+ *             secondary under the amount, tabular, right-aligned
  *   info      a 32 round glyph after the label, opening a `Popover`
  *   height    32 minimum, whether or not the line has the info affordance
  *
@@ -38,6 +40,7 @@ function PriceSummaryLineComponent({
   label,
   sublabel,
   amount,
+  secondaryAmount,
   tone = 'default',
   state = 'final',
   info,
@@ -120,6 +123,15 @@ function PriceSummaryLineComponent({
         >
           {amount ?? pendingPlaceholder}
         </Text>
+        {secondaryAmount ? (
+          <Text
+            variant="body-2-regular"
+            testID={testID ? `${testID}-secondary-amount` : undefined}
+            style={{ color: paint.textSecondary, fontVariant: ['tabular-nums'], textAlign: 'right' }}
+          >
+            {secondaryAmount}
+          </Text>
+        ) : null}
         {caveat ? (
           <Text
             variant="caption-1-regular"

package/src/price-breakdown/types.ts

@@ -32,6 +32,12 @@ export interface PriceLine {
    * app owns currency, locale and the minus sign. Omit it for a `pending` line.
    */
   amount?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of the same amount, drawn de-emphasised
+   * under it — the buyer's currency beside the shop's: `"≈ 12,00 €"`. Like
+   * `ListingPriceLine.secondary`, it is drawn as given; nothing converts.
+   */
+  secondaryAmount?: string;
   /** Default `default`. */
   tone?: PriceLineTone;
   /** Default `final`. */
@@ -54,6 +60,12 @@ export interface PriceTotal {
   label: string;
   /** PRE-FORMATTED, like every other amount here. */
   amount?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of the same amount, drawn de-emphasised
+   * under it — the buyer's currency beside the shop's: `"≈ 12,00 €"`. Like
+   * `ListingPriceLine.secondary`, it is drawn as given; nothing converts.
+   */
+  secondaryAmount?: string;
   /** A quieter line under the total — "Includes taxes". */
   note?: string;
   /** Default `final`. */