@oxy.so/bloom 5.0.0 → 5.1.1

package/src/label/Label.tsx

@@ -37,6 +37,7 @@ const LabelComponent = function Label({
   nativeID,
   htmlFor,
   required = false,
+  requiredLabel,
   disabled = false,
   size: sizeProp,
   style,
@@ -69,7 +70,7 @@ const LabelComponent = function Label({
       {required ? (
         <Text
           variant={SIZE_VARIANT[size]}
-          accessibilityLabel={messages.required}
+          accessibilityLabel={requiredLabel ?? messages.required}
           // `gap-0.5`: an inline margin on web; a nested native
           // `Text` ignores margins, so a thin space stands in for it there.
           style={[{ color: palette.error }, IS_WEB ? { marginLeft: TEXT_FIELD_LEADING_GAP } : null]}>

package/src/label/types.ts

@@ -24,6 +24,8 @@ export interface LabelProps {
    * after the label text. Defaults to `false`.
    */
   required?: boolean;
+  /** Accessible name of the required marker; defaults to the current locale. */
+  requiredLabel?: string;
   /** Visually subdued label (e.g. for optional fields). Defaults to `false`. */
   disabled?: boolean;
   /**

package/src/lead-score/LeadScoreCard.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { Card } from '../card';
+import { useMessages } from '../locale/messages';
 import { MeterRing } from '../stat-bar';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { resolveAccentColors } from '../theme/accent-colors';
@@ -27,6 +28,7 @@ import {
   resolveLeadScoreBand,
   resolveLeadScorePaint,
 } from './shared';
+import { LEAD_SCORE_MESSAGES } from './messages';
 import type { LeadScoreCardProps } from './types';
 
 /**
@@ -67,13 +69,16 @@ function LeadScoreCardComponent({
   bandLabel,
   accessibilityLabel,
   valueText,
-  title = 'Lead score',
+  title: titleProp,
   factors,
-  factorsLabel = 'What it is made of',
+  factorsLabel: factorsLabelProp,
   trend,
   style,
   testID,
 }: LeadScoreCardProps) {
+  const { messages } = useMessages(LEAD_SCORE_MESSAGES);
+  const title = titleProp ?? messages.title;
+  const factorsLabel = factorsLabelProp ?? messages.factors;
   const theme = useTheme();
   const resolvedBand = band ?? resolveLeadScoreBand(score, max);
   const bandSpec = LEAD_SCORE_BAND[resolvedBand];
@@ -139,7 +144,7 @@ function LeadScoreCardComponent({
                     style={{ flexShrink: 1, color: paint.headerText.text }}
                     testID={id('band')}
                   >
-                    {bandLabel ?? bandSpec.label}
+                    {bandLabel ?? messages.bands[resolvedBand]}
                   </Text>
                 </View>
                 {trend && TrendIcon ? (

package/src/lead-score/constants.ts

@@ -9,6 +9,7 @@ import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { RiTempHotLine } from '../icons/remix/RiTempHotLine';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
+import { LEAD_SCORE_MESSAGES } from './messages';
 import type { LeadScoreBand, LeadScoreTrend } from './types';
 
 /**
@@ -28,9 +29,9 @@ export const LEAD_SCORE_BAND: Record<
   LeadScoreBand,
   { tone: AccentTone; label: string; icon: BloomIconComponent }
 > = {
-  cold: { tone: 'info', label: 'Cold', icon: RiSnowflakeLine },
-  warm: { tone: 'warning', label: 'Warm', icon: RiTempHotLine },
-  hot: { tone: 'success', label: 'Hot', icon: RiFireLine },
+  cold: { tone: 'info', label: LEAD_SCORE_MESSAGES.en.bands.cold, icon: RiSnowflakeLine },
+  warm: { tone: 'warning', label: LEAD_SCORE_MESSAGES.en.bands.warm, icon: RiTempHotLine },
+  hot: { tone: 'success', label: LEAD_SCORE_MESSAGES.en.bands.hot, icon: RiFireLine },
 };
 
 /**

package/src/lead-score/messages.ts

@@ -0,0 +1,32 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { LeadScoreBand } from './types';
+
+/**
+ * The lead score card's fixed words in each Bloom language. `title`,
+ * `factorsLabel` and `bandLabel` still win.
+ */
+export interface LeadScoreMessages {
+  title: string;
+  /** The heading over the factors. */
+  factors: string;
+  /** Each band's word, drawn under the score. */
+  bands: Record<LeadScoreBand, string>;
+}
+
+export const LEAD_SCORE_MESSAGES: MessageCatalog<LeadScoreMessages> = {
+  en: { title: 'Lead score', factors: 'What it is made of', bands: { cold: 'Cold', warm: 'Warm', hot: 'Hot' } },
+  es: { title: 'Puntuación del lead', factors: 'De qué se compone', bands: { cold: 'Frío', warm: 'Templado', hot: 'Caliente' } },
+  ca: { title: 'Puntuació del lead', factors: 'De què es compon', bands: { cold: 'Fred', warm: 'Tebi', hot: 'Calent' } },
+  de: { title: 'Lead-Score', factors: 'Woraus er sich zusammensetzt', bands: { cold: 'Kalt', warm: 'Warm', hot: 'Heiß' } },
+  fr: { title: 'Score du prospect', factors: 'Ce qui le compose', bands: { cold: 'Froid', warm: 'Tiède', hot: 'Chaud' } },
+  it: { title: 'Punteggio lead', factors: 'Da cosa è composto', bands: { cold: 'Freddo', warm: 'Tiepido', hot: 'Caldo' } },
+  pt: { title: 'Pontuação do lead', factors: 'Do que é composta', bands: { cold: 'Frio', warm: 'Morno', hot: 'Quente' } },
+  ru: { title: 'Оценка лида', factors: 'Из чего складывается', bands: { cold: 'Холодный', warm: 'Тёплый', hot: 'Горячий' } },
+  tr: { title: 'Potansiyel müşteri puanı', factors: 'Nelerden oluşuyor', bands: { cold: 'Soğuk', warm: 'Ilık', hot: 'Sıcak' } },
+  ja: { title: 'リードスコア', factors: 'スコアの内訳', bands: { cold: 'コールド', warm: 'ウォーム', hot: 'ホット' } },
+  zh: { title: '线索评分', factors: '评分构成', bands: { cold: '冷', warm: '温', hot: '热' } },
+  ar: { title: 'تقييم العميل المحتمل', factors: 'مكوّنات التقييم', bands: { cold: 'بارد', warm: 'دافئ', hot: 'ساخن' } },
+  hi: { title: 'लीड स्कोर', factors: 'यह किससे बना है', bands: { cold: 'ठंडा', warm: 'गर्म', hot: 'बहुत गर्म' } },
+  bn: { title: 'লিড স্কোর', factors: 'এটি কী দিয়ে তৈরি', bands: { cold: 'ঠান্ডা', warm: 'উষ্ণ', hot: 'গরম' } },
+  id: { title: 'Skor prospek', factors: 'Komponen skornya', bands: { cold: 'Dingin', warm: 'Hangat', hot: 'Panas' } },
+};

package/src/lead-score/types.ts

@@ -49,11 +49,11 @@ export interface LeadScoreCardProps {
    * number ("72 of 100, hot"), which is otherwise announced as a percentage.
    */
   valueText?: string;
-  /** The heading over the ring. Default `"Lead score"`. */
+  /** The heading over the ring (`"Lead score"` in English). */
   title?: string;
   /** What the score is made of. */
   factors?: readonly LeadScoreFactor[];
-  /** The heading over the factors. Default `"What it is made of"`. */
+  /** The heading over the factors (`"What it is made of"` in English). */
   factorsLabel?: string;
   trend?: LeadScoreTrend;
   style?: StyleProp<ViewStyle>;

package/src/listing-card/ListingCard.tsx

@@ -27,7 +27,7 @@ import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { OfferingBadge } from '../offering-badge/OfferingBadge';
-import { OFFERING_LABELS } from '../offering-badge/shared';
+import { OFFERING_BADGE_MESSAGES, type OfferingBadgeMessages } from '../offering-badge/messages';
 import { FavoriteButton } from './FavoriteButton';
 import {
   ListingFacts,
@@ -298,13 +298,17 @@ function BadgePill({ label, paint }: { label: string; paint: ListingCardPaint })
 //  Text
 // ---------------------------------------------------------------------------
 
-function composeName(props: ListingCardProps, messages: ListingCardMessages): string {
+function composeName(
+  props: ListingCardProps,
+  messages: ListingCardMessages,
+  offerings: OfferingBadgeMessages['offerings'],
+): string {
   const parts: string[] = [props.title];
   const status = statusLabelFor(props.status, props.statusLabel, messages.statuses);
   if (status) parts.push(status);
   if (typeof props.badge === 'string' && props.badge) parts.push(props.badge);
   for (const offering of uniqueOfferings(props.offerings)) {
-    parts.push(props.offeringLabels?.[offering] ?? OFFERING_LABELS[offering]);
+    parts.push(props.offeringLabels?.[offering] ?? offerings[offering]);
   }
   if (props.rating !== undefined) {
     const rated = props.rating !== null && props.rating !== '';
@@ -683,6 +687,7 @@ function ListingCardComponent(props: ListingCardProps) {
     testID,
   } = props;
   const { messages } = useMessages(LISTING_CARD_MESSAGES);
+  const { messages: offeringText } = useMessages(OFFERING_BADGE_MESSAGES);
   const previousPhotoLabel = previousPhotoLabelProp ?? messages.previousPhoto;
   const nextPhotoLabel = nextPhotoLabelProp ?? messages.nextPhoto;
   const theme = useTheme();
@@ -746,7 +751,7 @@ function ListingCardComponent(props: ListingCardProps) {
   if (loading) return <ListingCardSkeleton layout={layout} compact={compact} style={style} testID={testID} />;
 
   const horizontal = layout === 'horizontal';
-  const name = accessibilityLabel ?? composeName(props, messages);
+  const name = accessibilityLabel ?? composeName(props, messages, offeringText.offerings);
   const shownStatus = statusLabelFor(status, statusLabel, messages.statuses);
   const hasBadge = badge != null && badge !== '';
   const offeringList = uniqueOfferings(offerings);

package/src/listing-details/AmenityList.tsx

@@ -5,7 +5,7 @@ import { Button } from '../button';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { AMENITY_LIST_TWO_COLUMN_MIN_WIDTH } from './constants';
-import { resolveListingPalette } from './shared';
+import { surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
 import { useMessages } from '../locale/messages';
 import { LISTING_DETAILS_MESSAGES } from './messages';
 import type { AmenityListProps } from './types';
@@ -39,7 +39,8 @@ function AmenityListComponent({
   const { messages } = useMessages(LISTING_DETAILS_MESSAGES);
   const unavailableLabel = unavailableLabelProp ?? messages.unavailable;
   const theme = useTheme();
-  const palette = useMemo(() => resolveListingPalette(theme), [theme]);
+  const surface = useSurfaceFill();
+  const palette = useMemo(() => surfaceTextOn(theme, surface), [theme, surface]);
   const { width, onLayout } = useContainerWidth();
 
   const count =
@@ -70,7 +71,7 @@ function AmenityListComponent({
             }}
           >
             {Icon ? (
-              <Icon width={24} height={24} fill={available ? palette.text : palette.muted} />
+              <Icon width={24} height={24} fill={available ? palette.text : palette.textTertiary} />
             ) : null}
             <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
               <Text

package/src/listing-editor/OfferingEditor.tsx

@@ -95,7 +95,7 @@ function OfferingEditorComponent({
   style,
   testID,
 }: OfferingEditorProps) {
-  const { messages } = useMessages(LISTING_EDITOR_MESSAGES);
+  const { locale, messages } = useMessages(LISTING_EDITOR_MESSAGES);
   const theme = useTheme();
   const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
   const labels = useMemo(() => ({ ...messages.offering, ...labelsProp }), [messages, labelsProp]);
@@ -118,7 +118,7 @@ function OfferingEditorComponent({
       ? labels.pricePerAreaEmpty
       : formatPricePerArea
         ? formatPricePerArea(perArea)
-        : `${currencySymbol}${groupThousands(perArea)} / ${areaUnit}`;
+        : `${currencySymbol}${groupThousands(perArea, locale)} / ${areaUnit}`;
 
   const fields: Record<OfferingKind, () => React.ReactNode> = {
     rent: () => (

package/src/locale/format-date.ts

@@ -26,3 +26,17 @@ export function formatGregorian(
     }
   }
 }
+
+const ENGLISH_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+/**
+ * The twelve month names, January first, in the locale's words on the
+ * Gregorian calendar: `long` ("January", "enero", "январь") or `short`
+ * ("Jan", "ene", "янв."). Falls back to English when the runtime cannot format.
+ */
+export function monthNames(locale: string | undefined, width: 'long' | 'short' = 'long'): string[] {
+  return ENGLISH_MONTHS.map(
+    (english, month) =>
+      formatGregorian(new Date(2024, month, 15), locale, { month: width }) ?? (width === 'long' ? english : english.slice(0, 3)),
+  );
+}

package/src/locale/format-number.ts

@@ -0,0 +1,185 @@
+import type { MessageCatalog } from './messages';
+import { pickMessages } from './messages';
+
+/**
+ * Numbers, money, percentages and file sizes in the reader's locale.
+ *
+ * Grouping and decimal marks are not one convention: `1,234.5` in English is
+ * `1.234,5` in German and Spanish, `1 234,5` in French, `12,34,567` in Hindi,
+ * and Spanish does not group four digits at all (`1234`). A percentage is
+ * `%25` in Turkish, a euro amount `385.000 €` in Spanish and `€385,000` in
+ * English. So every helper here goes through `Intl.NumberFormat` for the
+ * resolved locale — which Hermes implements (unlike `PluralRules`) — and falls
+ * back to plain English formatting if an engine rejects the locale or an
+ * option, so nothing ever throws or renders empty.
+ *
+ * `locale` is what `useMessages`/`useBloomLocale` resolved; `undefined` means the
+ * runtime's.
+ */
+
+function numberFormat(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat | null {
+  try {
+    return new Intl.NumberFormat(locale, options);
+  } catch {
+    try {
+      return new Intl.NumberFormat(undefined, options);
+    } catch {
+      return null;
+    }
+  }
+}
+
+/** English grouping with up to `maximumFractionDigits` (default 3) — the fallback only. */
+function plainNumber(value: number, maximumFractionDigits = 3): string {
+  if (!Number.isFinite(value)) return String(value);
+  const factor = 10 ** maximumFractionDigits;
+  const fixed = (Math.round(Math.abs(value) * factor) / factor).toString();
+  const [int = '0', frac] = fixed.split('.');
+  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  const sign = value < 0 && Number(fixed) !== 0 ? '-' : '';
+  return frac ? `${sign}${grouped}.${frac}` : `${sign}${grouped}`;
+}
+
+/** `12500` → `12,500` (en), `12.500` (de), `12 500` (fr). Up to three fraction digits unless told otherwise. */
+export function formatNumber(value: number, locale?: string, options: Intl.NumberFormatOptions = {}): string {
+  const format = numberFormat(locale, { maximumFractionDigits: 3, ...options });
+  return format ? format.format(value) : plainNumber(value, options.maximumFractionDigits ?? 3);
+}
+
+/** A whole number with grouping: `1234567.8` → `1,234,568` (en). */
+export function formatInteger(value: number, locale?: string): string {
+  return formatNumber(Math.round(value), locale, { maximumFractionDigits: 0 });
+}
+
+/**
+ * The short form an axis or a badge wants: `12.5K` (en), `12,5 mil` (es),
+ * `1.3万` (ja). Below a thousand, the rounded number. An engine without compact
+ * notation shows the full grouped number, which is longer but never wrong.
+ */
+export function formatCompactNumber(value: number, locale?: string): string {
+  if (Math.abs(value) < 1000) return formatInteger(value, locale);
+  const format = numberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 });
+  if (format) return format.format(value);
+  return value >= 1000 ? `${Math.round(value / 100) / 10}K`.replace('.0K', 'K') : String(Math.round(value));
+}
+
+/** A ratio as a percentage: `0.25` → `25%` (en), `25 %` (es, fr), `%25` (tr). */
+export function formatPercent(ratio: number, locale?: string, fractionDigits = 0): string {
+  const format = numberFormat(locale, {
+    style: 'percent',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+  return format ? format.format(ratio) : `${(ratio * 100).toFixed(fractionDigits)}%`;
+}
+
+/**
+ * A signed change as a percentage, sign always shown: `0.052` → `+5.2%`.
+ * Zero has no sign.
+ */
+export function formatSignedPercent(
+  ratio: number,
+  locale?: string,
+  fractionDigits: number | { minimum: number; maximum: number } = 1,
+): string {
+  const [minimum, maximum] =
+    typeof fractionDigits === 'number' ? [fractionDigits, fractionDigits] : [fractionDigits.minimum, fractionDigits.maximum];
+  const format = numberFormat(locale, {
+    style: 'percent',
+    signDisplay: 'exceptZero',
+    minimumFractionDigits: minimum,
+    maximumFractionDigits: maximum,
+  });
+  if (format) return format.format(ratio);
+  const fixed = String(Math.round(Math.abs(ratio) * 100 * 10 ** maximum) / 10 ** maximum);
+  return `${ratio > 0 ? '+' : ratio < 0 ? '-' : ''}${fixed}%`;
+}
+
+/**
+ * Money in an ISO 4217 `currency`, placed and spaced the locale's way:
+ * `formatCurrency(385000, 'EUR', 'es')` → `385.000 €`, in `en` → `€385,000`.
+ * Whole units unless `fractionDigits` says otherwise.
+ */
+export function formatCurrency(
+  amount: number,
+  currency: string,
+  locale?: string,
+  fractionDigits: number | { minimum: number; maximum: number } = 0,
+): string {
+  const [minimum, maximum] = typeof fractionDigits === 'number' ? [fractionDigits, fractionDigits] : [fractionDigits.minimum, fractionDigits.maximum];
+  const format = numberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: minimum,
+    maximumFractionDigits: maximum,
+  });
+  return format ? format.format(amount) : `${currency} ${plainNumber(amount, maximum)}`;
+}
+
+/**
+ * Money in the compact form an axis wants: `€385K`, `385 mil €`. Up to one
+ * decimal by default (`$2.5K`); `0` rounds to whole units of the scale (`$6K`).
+ */
+export function formatCompactCurrency(amount: number, currency: string, locale?: string, maximumFractionDigits = 1): string {
+  if (Math.abs(amount) < 1000) return formatCurrency(amount, currency, locale);
+  const format = numberFormat(locale, { style: 'currency', currency, notation: 'compact', maximumFractionDigits });
+  return format ? format.format(amount) : `${currency} ${formatCompactNumber(amount)}`;
+}
+
+interface SizeUnits {
+  byte: string;
+  kilobyte: string;
+  megabyte: string;
+  gigabyte: string;
+}
+
+/** Byte-size unit symbols: French writes `Ko`/`Mo`/`Go`, Russian `КБ`/`МБ`/`ГБ`. */
+const FILE_SIZE_UNITS: MessageCatalog<SizeUnits> = {
+  en: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  es: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  ca: { byte: 'B', kilobyte: 'kB', megabyte: 'MB', gigabyte: 'GB' },
+  de: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  fr: { byte: 'o', kilobyte: 'Ko', megabyte: 'Mo', gigabyte: 'Go' },
+  it: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  pt: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  ru: { byte: 'Б', kilobyte: 'КБ', megabyte: 'МБ', gigabyte: 'ГБ' },
+  tr: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  ja: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  zh: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  ar: { byte: 'بايت', kilobyte: 'ك.ب', megabyte: 'م.ب', gigabyte: 'غ.ب' },
+  hi: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  bn: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+  id: { byte: 'B', kilobyte: 'KB', megabyte: 'MB', gigabyte: 'GB' },
+};
+
+/**
+ * `2400000` → `2.4 MB` (en), `2,4 MB` (es), `2,4 Mo` (fr). One decimal under
+ * ten, whole above; never less than 1 KB for a non-empty file.
+ */
+export function formatFileSize(bytes: number, locale?: string): string {
+  const units = pickMessages(FILE_SIZE_UNITS, locale);
+  const scaled = (value: number) => formatNumber(value >= 10 ? Math.round(value) : Math.round(value * 10) / 10, locale, { maximumFractionDigits: 1 });
+  const gb = bytes / 1024 ** 3;
+  if (gb >= 1) return `${scaled(gb)} ${units.gigabyte}`;
+  const mb = bytes / 1024 ** 2;
+  if (mb >= 1) return `${scaled(mb)} ${units.megabyte}`;
+  if (bytes <= 0) return `0 ${units.byte}`;
+  return `${formatInteger(Math.max(1, Math.round(bytes / 1024)), locale)} ${units.kilobyte}`;
+}
+
+/**
+ * A running time as a clock: `83` → `1:23`, `3723` → `1:02:03`. The same in
+ * every locale — a media timestamp is not localised prose.
+ */
+export function formatClock(totalSeconds: number): string {
+  const safe = Number.isFinite(totalSeconds) ? Math.max(0, Math.floor(totalSeconds)) : 0;
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = String(safe % 60).padStart(2, '0');
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`;
+}
+
+/** A multiplier such as a playback speed: `1.5` → `1.5×` (en), `1,5×` (es); up to two decimals. */
+export function formatMultiplier(value: number, locale?: string): string {
+  return `${formatNumber(value, locale, { maximumFractionDigits: 2 })}×`;
+}

package/src/media-controls/shared.ts

@@ -3,6 +3,7 @@ import { Platform } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
 import type { Theme } from '../theme/types';
+import { formatClock } from '../locale/format-number';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -12,12 +13,7 @@ export const IS_WEB = Platform.OS === 'web';
  * infinite input draw `0:00`.
  */
 export function formatDuration(seconds: number): string {
-  const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
-  const h = Math.floor(total / 3600);
-  const m = Math.floor((total % 3600) / 60);
-  const s = total % 60;
-  const ss = String(s).padStart(2, '0');
-  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${ss}` : `${m}:${ss}`;
+  return formatClock(seconds);
 }
 
 /** Every colour the family paints, from the theme only. */

package/src/media-player/PlaybackSpeedMenu.tsx

@@ -21,11 +21,12 @@ export function PlaybackSpeedRows({
   rate,
   onRateChange,
   rates = PLAYBACK_RATES,
-  formatRate = formatPlaybackRate,
+  formatRate: formatRateProp,
   label: labelProp,
   testID,
 }: Pick<PlaybackSpeedMenuProps, 'rate' | 'onRateChange' | 'rates' | 'formatRate' | 'label' | 'testID'>) {
-  const { messages } = useMessages(MEDIA_PLAYER_MESSAGES);
+  const { locale, messages } = useMessages(MEDIA_PLAYER_MESSAGES);
+  const formatRate = formatRateProp ?? ((rate: number) => formatPlaybackRate(rate, locale));
   const label = labelProp ?? messages.playbackSpeed;
   const theme = useTheme();
   return (
@@ -57,7 +58,7 @@ function PlaybackSpeedMenuComponent({
   rate,
   onRateChange,
   rates,
-  formatRate = formatPlaybackRate,
+  formatRate: formatRateProp,
   label: labelProp,
   children,
   open,
@@ -66,7 +67,8 @@ function PlaybackSpeedMenuComponent({
   disabled,
   testID,
 }: PlaybackSpeedMenuProps) {
-  const { messages } = useMessages(MEDIA_PLAYER_MESSAGES);
+  const { locale, messages } = useMessages(MEDIA_PLAYER_MESSAGES);
+  const formatRate = formatRateProp ?? ((rate: number) => formatPlaybackRate(rate, locale));
   const label = labelProp ?? messages.playbackSpeed;
   const g = TRANSPORT_GEOMETRY[size];
   return (

package/src/media-player/shared.ts

@@ -10,6 +10,7 @@ import {
   darkenUntilContrast,
   relativeLuminance,
 } from '../styles/color-contrast';
+import { formatMultiplier } from '../locale/format-number';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -28,8 +29,8 @@ export const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3] as cons
 export const SLEEP_TIMER_MINUTES = [5, 10, 15, 30, 45, 60] as const;
 
 /** `1` → `"1×"`, `1.25` → `"1.25×"`, `0.5` → `"0.5×"`. */
-export function formatPlaybackRate(rate: number): string {
-  return `${Number(rate.toFixed(2))}×`;
+export function formatPlaybackRate(rate: number, locale?: string): string {
+  return formatMultiplier(rate, locale);
 }
 
 /** Menu values are strings; a rate or a timer value round-trips through one. */

package/src/menu-item/MenuItemOptions.tsx

@@ -5,6 +5,7 @@ import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { Divider } from '../divider';
 import { Field } from '../field';
+import { useMessages } from '../locale/messages';
 import { RadioGroup } from '../radio';
 import type { RadioOption } from '../radio';
 import { StepperRow } from '../stepper';
@@ -12,6 +13,7 @@ import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { MENU_ITEM_GROUP_GAP } from './constants';
+import { MENU_ITEM_MESSAGES } from './messages';
 import {
   describeOptionRule,
   optionDisabled,
@@ -80,8 +82,9 @@ function OptionGroup({
   secondary: string;
   testID?: string;
 }) {
+  const { messages } = useMessages(MENU_ITEM_MESSAGES);
   const rule = optionGroupRule(group);
-  const ruleText = describeOptionRule(group);
+  const ruleText = describeOptionRule(group, messages);
   const label = <GroupLabel title={group.title} rule={ruleText} color={secondary} />;
 
   const body = rule.multiple ? (
@@ -140,17 +143,21 @@ function MenuItemOptionsComponent({
   onValueChange,
   quantity,
   onQuantityChange,
-  quantityLabel = 'Quantity',
+  quantityLabel: quantityLabelProp,
   total,
   onSubmit,
-  submitLabel = 'Add to basket',
+  submitLabel: submitLabelProp,
   submitDisabled = false,
   disabled = false,
   header,
-  accessibilityLabel = 'Options',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: MenuItemOptionsProps) {
+  const { messages } = useMessages(MENU_ITEM_MESSAGES);
+  const quantityLabel = quantityLabelProp ?? messages.quantity;
+  const submitLabel = submitLabelProp ?? messages.addToBasket;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.options;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveMenuItemPaint(theme, surface), [theme, surface]);

package/src/menu-item/MenuItemRow.tsx

@@ -6,6 +6,7 @@ import { Button } from '../button';
 import { RiAddLine } from '../icons/remix/RiAddLine';
 import { Item } from '../item';
 import { ListingPriceLines } from '../listing-card/parts';
+import { useMessages } from '../locale/messages';
 import { Stepper } from '../stepper';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { space } from '../styles/tokens';
@@ -13,6 +14,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { MENU_ITEM_GEOMETRY } from './constants';
 import { MenuItemDiets, MenuItemSpice, MenuItemThumb } from './parts';
+import { MENU_ITEM_MESSAGES } from './messages';
 import { composeMenuItemName, resolveMenuItemPaint, spiceLevel } from './shared';
 import type { MenuItemRowProps } from './types';
 
@@ -66,7 +68,7 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
     onAdd,
     addLabel,
     unavailable = false,
-    unavailableLabel = 'Sold out',
+    unavailableLabel: unavailableLabelProp,
     onPress,
     density = 'comfortable',
     accessibilityLabel,
@@ -74,6 +76,8 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
     testID,
   } = props;
 
+  const { messages } = useMessages(MENU_ITEM_MESSAGES);
+  const unavailableLabel = unavailableLabelProp ?? messages.soldOut;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveMenuItemPaint(theme, surface), [theme, surface]);
@@ -98,7 +102,7 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
       size="small"
       iconOnly
       leadingIcon={RiAddLine}
-      accessibilityLabel={addLabel ?? `Add ${name}`}
+      accessibilityLabel={addLabel ?? messages.addItem(name)}
       onPress={onAdd}
       testID={testID ? `${testID}-add` : undefined}
     />
@@ -212,7 +216,7 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
       onPress={unavailable ? undefined : onPress}
       disabled={unavailable}
       density={density}
-      accessibilityLabel={accessibilityLabel ?? composeMenuItemName(props)}
+      accessibilityLabel={accessibilityLabel ?? composeMenuItemName(props, messages)}
       // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand
       // for the reason its own file records, and a shorthand here would outrank
       // it on web and not on native.

package/src/menu-item/constants.ts

@@ -1,3 +1,4 @@
+import { MENU_ITEM_MESSAGES } from './messages';
 import type { MenuItemDensity, MenuItemDiet } from './types';
 
 /** Every diet, in the order a dish lists them. */
@@ -10,15 +11,11 @@ export const MENU_ITEM_DIETS: readonly MenuItemDiet[] = [
   'kosher',
 ];
 
-/** The English words. Apps in other languages pass `dietLabels`. */
-export const MENU_ITEM_DIET_LABELS: Readonly<Record<MenuItemDiet, string>> = {
-  vegetarian: 'Vegetarian',
-  vegan: 'Vegan',
-  'gluten-free': 'Gluten-free',
-  'dairy-free': 'Dairy-free',
-  halal: 'Halal',
-  kosher: 'Kosher',
-};
+/**
+ * The English words. The row speaks `MENU_ITEM_MESSAGES` in the resolved
+ * locale; `dietLabels` still wins.
+ */
+export const MENU_ITEM_DIET_LABELS: Readonly<Record<MenuItemDiet, string>> = MENU_ITEM_MESSAGES.en.diets;
 
 /**
  * The two diets that are about what the dish is MADE OF get a glyph; the other