@oxy.so/bloom 5.0.0 → 5.1.1

package/src/cart-panel/messages.ts

@@ -0,0 +1,206 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * Every fixed string the cart panel draws or announces, in each Bloom
+ * language. Prices and names arrive formatted. A caller's `*Label`,
+ * `emptyTitle`, `emptyDescription` and `accessibilityLabel` still win.
+ */
+export interface CartPanelMessages {
+  /** Names the panel. */
+  basket: string;
+  checkout: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  /** A line that cannot be ordered. */
+  soldOut: string;
+  /** Names a line's remove control, or an applied code's: "Remove Margherita". */
+  removeItem: (name: string) => string;
+  /** A discounted price in a line's name: "€9, originally €12". */
+  originally: (price: string, original: string) => string;
+  promoCode: string;
+  apply: string;
+  tip: string;
+}
+
+export const CART_PANEL_MESSAGES: MessageCatalog<CartPanelMessages> = {
+  en: {
+    basket: 'Basket',
+    checkout: 'Go to checkout',
+    emptyTitle: 'Your basket is empty',
+    emptyDescription: 'Add something from the menu and it will show up here.',
+    soldOut: 'Sold out',
+    removeItem: (name) => `Remove ${name}`,
+    originally: (price, original) => `${price}, originally ${original}`,
+    promoCode: 'Promo code',
+    apply: 'Apply',
+    tip: 'Tip',
+  },
+  es: {
+    basket: 'Cesta',
+    checkout: 'Ir a pagar',
+    emptyTitle: 'Tu cesta está vacía',
+    emptyDescription: 'Añade algo del menú y aparecerá aquí.',
+    soldOut: 'Agotado',
+    removeItem: (name) => `Quitar ${name}`,
+    originally: (price, original) => `${price}, antes ${original}`,
+    promoCode: 'Código promocional',
+    apply: 'Aplicar',
+    tip: 'Propina',
+  },
+  ca: {
+    basket: 'Cistella',
+    checkout: 'Ves al pagament',
+    emptyTitle: 'La cistella és buida',
+    emptyDescription: 'Afegeix alguna cosa del menú i apareixerà aquí.',
+    soldOut: 'Esgotat',
+    removeItem: (name) => `Treu ${name}`,
+    originally: (price, original) => `${price}, abans ${original}`,
+    promoCode: 'Codi promocional',
+    apply: 'Aplica',
+    tip: 'Propina',
+  },
+  de: {
+    basket: 'Warenkorb',
+    checkout: 'Zur Kasse',
+    emptyTitle: 'Dein Warenkorb ist leer',
+    emptyDescription: 'Füge etwas aus der Speisekarte hinzu, dann erscheint es hier.',
+    soldOut: 'Ausverkauft',
+    removeItem: (name) => `${name} entfernen`,
+    originally: (price, original) => `${price}, statt ${original}`,
+    promoCode: 'Gutscheincode',
+    apply: 'Einlösen',
+    tip: 'Trinkgeld',
+  },
+  fr: {
+    basket: 'Panier',
+    checkout: 'Passer au paiement',
+    emptyTitle: 'Votre panier est vide',
+    emptyDescription: 'Ajoutez un article depuis le menu et il apparaîtra ici.',
+    soldOut: 'Épuisé',
+    removeItem: (name) => `Retirer ${name}`,
+    originally: (price, original) => `${price}, au lieu de ${original}`,
+    promoCode: 'Code promo',
+    apply: 'Appliquer',
+    tip: 'Pourboire',
+  },
+  it: {
+    basket: 'Carrello',
+    checkout: 'Vai al pagamento',
+    emptyTitle: 'Il carrello è vuoto',
+    emptyDescription: 'Aggiungi qualcosa dal menu e comparirà qui.',
+    soldOut: 'Esaurito',
+    removeItem: (name) => `Rimuovi ${name}`,
+    originally: (price, original) => `${price}, prima ${original}`,
+    promoCode: 'Codice promozionale',
+    apply: 'Applica',
+    tip: 'Mancia',
+  },
+  pt: {
+    basket: 'Sacola',
+    checkout: 'Ir para o pagamento',
+    emptyTitle: 'Sua sacola está vazia',
+    emptyDescription: 'Adicione algo do cardápio e ele aparecerá aqui.',
+    soldOut: 'Esgotado',
+    removeItem: (name) => `Remover ${name}`,
+    originally: (price, original) => `${price}, antes ${original}`,
+    promoCode: 'Cupom',
+    apply: 'Aplicar',
+    tip: 'Gorjeta',
+  },
+  ru: {
+    basket: 'Корзина',
+    checkout: 'К оформлению',
+    emptyTitle: 'Корзина пуста',
+    emptyDescription: 'Добавьте что-нибудь из меню, и это появится здесь.',
+    soldOut: 'Нет в наличии',
+    removeItem: (name) => `Удалить «${name}»`,
+    originally: (price, original) => `${price}, вместо ${original}`,
+    promoCode: 'Промокод',
+    apply: 'Применить',
+    tip: 'Чаевые',
+  },
+  tr: {
+    basket: 'Sepet',
+    checkout: 'Ödemeye geç',
+    emptyTitle: 'Sepetin boş',
+    emptyDescription: 'Menüden bir şey ekle, burada görünecek.',
+    soldOut: 'Tükendi',
+    removeItem: (name) => `${name} ürününü kaldır`,
+    originally: (price, original) => `${price}, önceki fiyat ${original}`,
+    promoCode: 'Promosyon kodu',
+    apply: 'Uygula',
+    tip: 'Bahşiş',
+  },
+  ja: {
+    basket: 'カート',
+    checkout: 'レジに進む',
+    emptyTitle: 'カートは空です',
+    emptyDescription: 'メニューから追加するとここに表示されます。',
+    soldOut: '売り切れ',
+    removeItem: (name) => `${name}を削除`,
+    originally: (price, original) => `${price}（通常 ${original}）`,
+    promoCode: 'プロモーションコード',
+    apply: '適用',
+    tip: 'チップ',
+  },
+  zh: {
+    basket: '购物车',
+    checkout: '去结算',
+    emptyTitle: '购物车是空的',
+    emptyDescription: '从菜单中添加商品后会显示在这里。',
+    soldOut: '已售罄',
+    removeItem: (name) => `移除${name}`,
+    originally: (price, original) => `${price}，原价 ${original}`,
+    promoCode: '优惠码',
+    apply: '使用',
+    tip: '小费',
+  },
+  ar: {
+    basket: 'السلة',
+    checkout: 'المتابعة إلى الدفع',
+    emptyTitle: 'سلتك فارغة',
+    emptyDescription: 'أضف شيئًا من القائمة وسيظهر هنا.',
+    soldOut: 'نفدت الكمية',
+    removeItem: (name) => `إزالة ${name}`,
+    originally: (price, original) => `${price}، بدلًا من ${original}`,
+    promoCode: 'رمز الخصم',
+    apply: 'تطبيق',
+    tip: 'إكرامية',
+  },
+  hi: {
+    basket: 'बास्केट',
+    checkout: 'चेकआउट पर जाएँ',
+    emptyTitle: 'आपकी बास्केट खाली है',
+    emptyDescription: 'मेन्यू से कुछ जोड़ें, वह यहाँ दिखेगा।',
+    soldOut: 'बिक गया',
+    removeItem: (name) => `${name} हटाएँ`,
+    originally: (price, original) => `${price}, पहले ${original}`,
+    promoCode: 'प्रोमो कोड',
+    apply: 'लागू करें',
+    tip: 'टिप',
+  },
+  bn: {
+    basket: 'ঝুড়ি',
+    checkout: 'চেকআউটে যান',
+    emptyTitle: 'আপনার ঝুড়ি খালি',
+    emptyDescription: 'মেনু থেকে কিছু যোগ করুন, তা এখানে দেখা যাবে।',
+    soldOut: 'বিক্রি শেষ',
+    removeItem: (name) => `${name} সরান`,
+    originally: (price, original) => `${price}, আগে ছিল ${original}`,
+    promoCode: 'প্রোমো কোড',
+    apply: 'প্রয়োগ করুন',
+    tip: 'টিপ',
+  },
+  id: {
+    basket: 'Keranjang',
+    checkout: 'Lanjut ke pembayaran',
+    emptyTitle: 'Keranjangmu kosong',
+    emptyDescription: 'Tambahkan sesuatu dari menu dan akan muncul di sini.',
+    soldOut: 'Habis',
+    removeItem: (name) => `Hapus ${name}`,
+    originally: (price, original) => `${price}, sebelumnya ${original}`,
+    promoCode: 'Kode promo',
+    apply: 'Terapkan',
+    tip: 'Tip',
+  },
+};

package/src/cart-panel/shared.ts

@@ -10,6 +10,7 @@
 import { hairlineOn, surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import { CART_OPTION_SEPARATOR } from './constants';
+import { CART_PANEL_MESSAGES, type CartPanelMessages } from './messages';
 import type { CartLineEntry } from './types';
 
 export interface CartPaint extends SurfaceTextPaint {
@@ -55,16 +56,17 @@ export function composeCartLineName(
     | 'unavailable'
     | 'unavailableLabel'
   >,
+  messages: CartPanelMessages = CART_PANEL_MESSAGES.en,
 ): string {
   const parts: string[] = [line.name];
   const options = optionsLine(line.options);
   if (options) parts.push(options);
   if (line.note) parts.push(line.note);
   parts.push(String(line.quantity));
-  if (line.originalPrice) parts.push(`${line.price}, originally ${line.originalPrice}`);
+  if (line.originalPrice) parts.push(messages.originally(line.price, line.originalPrice));
   else parts.push(line.price);
   // The second currency travels with the price it restates.
   if (line.secondaryPrice) parts.push(line.secondaryPrice);
-  if (line.unavailable) parts.push(line.unavailableLabel ?? 'Sold out');
+  if (line.unavailable) parts.push(line.unavailableLabel ?? messages.soldOut);
   return parts.join(', ');
 }

package/src/cart-panel/types.ts

@@ -40,7 +40,7 @@ export interface CartLineEntry {
   photoVariant?: string;
   /** The kitchen ran out after it went in the basket. */
   unavailable?: boolean;
-  /** Default `"Sold out"`. */
+  /** `"Sold out"` in English. */
   unavailableLabel?: string;
 }
 
@@ -49,7 +49,7 @@ export interface CartLineProps extends Omit<CartLineEntry, 'id'> {
   onQuantityChange?: (quantity: number) => void;
   /** The remove control. Without it no remove control is drawn. */
   onRemove?: () => void;
-  /** Names the remove control, which draws no text. Default `"Remove <name>"`. */
+  /** Names the remove control, which draws no text (`"Remove <name>"` in English). */
   removeLabel?: string;
   /**
    * Moves removal INTO the stepper: at quantity 1 its `−` becomes a trash button
@@ -79,7 +79,7 @@ export interface CartTipPickerProps {
   /** The chosen option's `id`, or `undefined` while nothing is chosen. */
   value?: string;
   onValueChange: (id: string) => void;
-  /** The question above the row. Default `"Tip"`. */
+  /** The question above the row (`"Tip"` in English). */
   label?: string;
   /** A quieter line under the row — "It goes to the courier, in full." */
   description?: string;
@@ -102,13 +102,13 @@ export interface CartPromoFieldProps {
   applied?: string;
   /** Removes the applied code. Without it the pill is not removable. */
   onRemove?: () => void;
-  /** Names the remove control. Default `"Remove <code>"`. */
+  /** Names the remove control (`"Remove <code>"` in English). */
   removeLabel?: string;
-  /** The field's label. Default `"Promo code"`. */
+  /** The field's label (`"Promo code"` in English). */
   label?: string;
   /** The input's placeholder. */
   placeholder?: string;
-  /** The apply control's label. Default `"Apply"`. */
+  /** The apply control's label (`"Apply"` in English). */
   applyLabel?: string;
   /** A rejection — "That code has expired". A non-empty string paints the field invalid. */
   error?: string | null;
@@ -181,21 +181,21 @@ export interface CartPanelProps {
 
   /** The checkout control. Without it no footer is drawn. */
   onCheckout?: () => void;
-  /** Default `"Go to checkout"`. */
+  /** `"Go to checkout"` in English. */
   checkoutLabel?: string;
   /** Blocks checkout — under the minimum, a line gone. */
   checkoutDisabled?: boolean;
 
   /** Replaces the whole empty block, drawn when `lines` is empty. */
   empty?: ReactNode;
-  /** Default `"Your basket is empty"`. */
+  /** `"Your basket is empty"` in English. */
   emptyTitle?: string;
-  /** Default `"Add something from the menu and it will show up here."` */
+  /** `"Add something from the menu and it will show up here."` in English. */
   emptyDescription?: string;
 
   /** Default `comfortable`. */
   density?: CartDensity;
-  /** Names the list of lines. Default `"Basket"`. */
+  /** Names the list of lines (`"Basket"` in English). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/chart-cards/ActivityRingsCard.tsx

@@ -12,6 +12,8 @@ import { TABULAR } from './primitives/ChartHeader';
 import { useActiveIndex } from './primitives/use-active-index';
 import { useChartCardSurfacePalette, useChartTones } from './primitives/use-chart-palette';
 import { useWebTransition } from './primitives/use-web-transition';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /** One goal ring and its stat tile. */
 export interface ActivityRing {
@@ -109,7 +111,7 @@ function useTween(target: readonly number[], ms: number): readonly number[] {
  */
 export function ActivityRingsCard({
   rings,
-  title = 'Activity',
+  title: titleProp,
   height = ACTIVITY_CARD_HEIGHT,
   activeIndex: controlledIndex,
   onActiveIndexChange,
@@ -117,6 +119,8 @@ export function ActivityRingsCard({
   style,
   testID,
 }: ActivityRingsCardProps) {
+  const { messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.activity;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
@@ -169,7 +173,7 @@ export function ActivityRingsCard({
   };
 
   const a11y =
-    accessibilityLabel ?? `${title}: ${shown.map((r) => `${r.label} ${r.value}, ${Math.round(clampPct(r.goalPct))}% of goal`).join('; ')}`;
+    accessibilityLabel ?? `${title}: ${shown.map((r) => chartText.ringItem(r.label, String(r.value), Math.round(clampPct(r.goalPct)))).join('; ')}`;
 
   return (
     <ChartCardSurface radius="radius-20"

package/src/chart-cards/AgentsChartCard.tsx

@@ -24,6 +24,9 @@ import { TABULAR } from './primitives/ChartHeader';
 import { FadeOnChange } from './primitives/FadeOnChange';
 import { useActiveIndex } from './primitives/use-active-index';
 import { useCountUp } from './use-count-up';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
+import { formatGregorian } from '../locale/format-date';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 /**
@@ -131,7 +134,7 @@ export function agentsColumnAt(x: number, width: number, count: number, gap = AG
 
 export function AgentsChartCard({
   data,
-  title = 'Agents',
+  title: titleProp,
   headline,
   format = defaultFormat,
   getPointTitle,
@@ -140,8 +143,8 @@ export function AgentsChartCard({
   onNextRange,
   prevRangeLabel,
   nextRangeLabel,
-  startLabel = 'Jun 14',
-  endLabel = 'Today',
+  startLabel: startLabelProp,
+  endLabel: endLabelProp,
   trackHeight = AGENTS_TRACK_HEIGHT,
   maxBarHeight = AGENTS_MAX_BAR,
   max,
@@ -153,6 +156,12 @@ export function AgentsChartCard({
   style,
   testID,
 }: AgentsChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.agents;
+  const endLabel = endLabelProp ?? chartText.today;
+  // The sample range's start (June 14), written the locale's way.
+  const startLabel =
+    startLabelProp ?? formatGregorian(new Date(2024, 5, 14), chartLocale, { month: 'short', day: 'numeric' }) ?? '6/14';
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const reducedMotion = useReducedMotion();
@@ -230,7 +239,7 @@ export function AgentsChartCard({
       : null;
 
   const summary =
-    accessibilityLabel ?? `${title} bar chart: ${data.map((d) => `${d.label} ${format(Math.round(d.value))}`).join(', ')}`;
+    accessibilityLabel ?? chartText.barChart(title, data.map((d) => `${d.label} ${format(Math.round(d.value))}`).join(', '));
 
   return (
     <Card

package/src/chart-cards/AreaChartCard.tsx

@@ -15,6 +15,8 @@ import { useChartRange } from './primitives/use-chart-range';
 import { resolveTone } from './palette';
 import type { AreaChartCardProps, AreaPoint, AreaSeries } from './types';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /**
  * `AreaChartCard`: a multi-series area chart — composition over time — in
@@ -63,7 +65,7 @@ function defaultAccessibilityLabel(title: string, variant: string, series: reado
 export function AreaChartCard({
   variant = 'stacked',
   shape = 'curved',
-  title = 'Visitors',
+  title: titleProp,
   data: dataProp,
   series: seriesProp,
   headline: headlineProp,
@@ -72,7 +74,7 @@ export function AreaChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   formatAxisValue,
   tiles = false,
   activeIndex: controlledIndex,
@@ -81,6 +83,9 @@ export function AreaChartCard({
   style,
   testID,
 }: AreaChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.visitors;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -149,7 +154,7 @@ export function AreaChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}
@@ -165,7 +170,7 @@ export function AreaChartCard({
           yAxisWidth={Y_AXIS_WIDTH}
           yDomain={yDomain}
           yTicks={yTicks}
-          formatYTick={formatAxisValue ?? (isPercent ? percentTick : compactNumber)}
+          formatYTick={formatAxisValue ?? ((value: number) => (isPercent ? percentTick(value, chartLocale) : compactNumber(value, chartLocale)))}
           grid
           outside="clear"
           onActiveIndexChange={setActiveIndex}

package/src/chart-cards/BarListCard.tsx

@@ -32,6 +32,8 @@ import {
   useMountedAfterDelay,
   type ChartIcon,
 } from './stage-parts';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /**
  * `BarListCard`: the analytics breakdown list (traffic by country, device,
@@ -124,9 +126,9 @@ export function BarListCard({
   tabs,
   items,
   title,
-  metricLabel = 'Visitors',
+  metricLabel: metricLabelProp,
   metric = 'share',
-  format = groupThousands,
+  format: formatProp,
   color,
   mono = false,
   limit = 5,
@@ -135,13 +137,16 @@ export function BarListCard({
   style,
   testID,
 }: BarListCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, chartLocale));
+  const metricLabel = metricLabelProp ?? chartText.titles.visitors;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const monoTone = useMonoTone();
   const mounted = useMountedAfterDelay();
   // Palette index 1 is chart-6, blue.
   const tone = mono ? monoTone : resolveTone(palettes, 1, color);
-  const lists: readonly BarListTab[] = tabs ?? [{ id: 'list', label: title ?? 'Breakdown', items: items ?? [] }];
+  const lists: readonly BarListTab[] = tabs ?? [{ id: 'list', label: title ?? chartText.titles.breakdown, items: items ?? [] }];
   const [selectedId, setSelectedId] = useState<string>(defaultTab ?? lists[0]?.id ?? 'list');
   const single = lists.length === 1 && !tabs;
   const current = lists.find((l) => l.id === selectedId) ?? lists[0];

package/src/chart-cards/ChartCard.tsx

@@ -11,6 +11,9 @@ import { ChartCardSurface } from './primitives/ChartCardSurface';
 import { ChartHeadline } from './primitives/ChartHeader';
 import { groupThousands } from './primitives/format';
 import type { ChartCardPoint, YearOverYearChartCardProps } from './types';
+import { CHART_CARDS_MESSAGES, type ChartCardsMessages } from './messages';
+import { useMessages } from '../locale/messages';
+import { monthTitle } from './LineChartCard';
 
 /**
  * The dashboard variant of the chart card chrome, shared by
@@ -32,33 +35,31 @@ export const CARD_HEIGHT = 344;
 const CARD_GAP = 24;
 const LEGEND_DOT = 8;
 
-const MONTHS: Record<string, string> = {
-  Jan: 'January',
-  Feb: 'February',
-  Mar: 'March',
-  Apr: 'April',
-  May: 'May',
-  Jun: 'June',
-  Jul: 'July',
-  Aug: 'August',
-  Sep: 'September',
-  Oct: 'October',
-  Nov: 'November',
-  Dec: 'December',
-};
-
-/** `"Jul"` → `"July"`, anything else unchanged. */
-export function defaultPointTitle(point: ChartCardPoint): string {
-  return MONTHS[point.label] ?? point.label;
+
+/**
+ * A point labelled with an English month abbreviation (`"Jul"`) is titled with
+ * that month's full name in `locale` (`"July"`, `"julio"`); any other label is
+ * the app's own and stays unchanged.
+ */
+export function defaultPointTitle(point: ChartCardPoint, locale?: string): string {
+  return monthTitle(point.label, locale);
 }
 
 export { groupThousands };
 export { useActiveIndex } from './primitives/use-active-index';
 export { useChartCardPalette } from './primitives/use-chart-palette';
 
-/** `"Revenue chart: this year against last year"`. */
-export function chartAccessibilityLabel(title: string, currentLabel = 'This year', previousLabel = 'Last year'): string {
-  return `${title} chart: ${currentLabel.toLowerCase()} against ${previousLabel.toLowerCase()}`;
+/**
+ * `"Revenue chart: this year against last year"`, in the language of `text`
+ * (English unless the card passes its locale's catalog).
+ */
+export function chartAccessibilityLabel(
+  title: string,
+  currentLabel?: string,
+  previousLabel?: string,
+  text: ChartCardsMessages = CHART_CARDS_MESSAGES.en,
+): string {
+  return text.chartVs(title, currentLabel ?? text.thisYear, previousLabel ?? text.lastYear);
 }
 
 // ---------------------------------------------------------------------------
@@ -87,10 +88,10 @@ export function ChartCardFrame({
   getPointTitle,
   formatValue,
   defaultFormatValue,
-  currentLabel = 'This year',
-  previousLabel = 'Last year',
-  totalComparisonLabel = 'last year',
-  pointComparisonLabel = 'a year earlier',
+  currentLabel: currentLabelProp,
+  previousLabel: previousLabelProp,
+  totalComparisonLabel: totalComparisonLabelProp,
+  pointComparisonLabel: pointComparisonLabelProp,
   seriesColor,
   comparisonColor,
   activeIndex,
@@ -99,6 +100,11 @@ export function ChartCardFrame({
   testID,
   children,
 }: ChartCardFrameProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const currentLabel = currentLabelProp ?? chartText.thisYear;
+  const previousLabel = previousLabelProp ?? chartText.lastYear;
+  const totalComparisonLabel = totalComparisonLabelProp ?? chartText.sinceLastYear;
+  const pointComparisonLabel = pointComparisonLabelProp ?? chartText.aYearEarlier;
   const { width: viewportWidth } = useWindowDimensions();
   const wide = viewportWidth >= BREAKPOINTS.sm;
   const format = formatValue ?? defaultFormatValue;
@@ -109,7 +115,7 @@ export function ChartCardFrame({
   const headlineValue = point ? point.current : totalCurrent;
   const comparison = point ? point.previous : totalPrevious;
   const delta = describeDelta(headlineValue, comparison);
-  const label = point ? (getPointTitle ?? defaultPointTitle)(point, activeIndex ?? 0) : (title ?? defaultTitle);
+  const label = point ? (getPointTitle ? getPointTitle(point, activeIndex ?? 0) : defaultPointTitle(point, chartLocale)) : (title ?? defaultTitle);
 
   return (
     <ChartCardSurface height={CARD_HEIGHT} gap={CARD_GAP} style={style} testID={testID}>

package/src/chart-cards/ComboChartCard.tsx

@@ -16,6 +16,8 @@ import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
 import { roundedBarPath, singleBarSlot } from './rounded-bar-geometry';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /**
  * `ComboChartCard`: a bar series on the left axis and a line series on its
@@ -122,7 +124,7 @@ function axisOf(values: readonly number[]): { domain: readonly [number, number];
 }
 
 export function ComboChartCard({
-  title = 'Sessions',
+  title: titleProp,
   data: dataProp,
   bar,
   line,
@@ -141,6 +143,8 @@ export function ComboChartCard({
   style,
   testID,
 }: ComboChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.sessions;
   const palette = useChartCardSurfacePalette(style);
   const tones = useChartTones();
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -150,7 +154,7 @@ export function ComboChartCard({
 
   const barTone = resolveTone(tones, 0, bar.color, bar.activeColor);
   const lineTone = resolveTone(tones, 1, line.color, line.activeColor);
-  const barFormat = bar.format ?? formatNumber;
+  const barFormat = bar.format ?? ((value: number) => formatNumber(value, chartLocale));
   const lineFormat = line.format ?? formatPercent;
 
   const [activeIndex, setActiveIndex] = useActiveIndex(data.length, controlledIndex, onActiveIndexChange);
@@ -202,7 +206,7 @@ export function ComboChartCard({
         label={label}
         value={headlineValue}
         format={fromLine ? lineFormat : barFormat}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}
@@ -216,13 +220,13 @@ export function ComboChartCard({
         <MultiAxisPlot
           categories={categories}
           xScale="band"
-          axis={{ width: LEFT_AXIS_WIDTH, domain: barAxis.domain, ticks: barAxis.ticks, format: compactNumber }}
+          axis={{ width: LEFT_AXIS_WIDTH, domain: barAxis.domain, ticks: barAxis.ticks, format: (value: number) => compactNumber(value, chartLocale) }}
           rightAxis={{ width: RIGHT_AXIS_WIDTH, domain: lineAxis.domain, ticks: lineAxis.ticks, format: lineFormat }}
           margin={MARGIN}
           outside="clear"
           onActiveIndexChange={setActiveIndex}
           palette={palette}
-          accessibilityLabel={accessibilityLabel ?? `${title} chart: ${bar.label} bars against ${line.label} line`}
+          accessibilityLabel={accessibilityLabel ?? chartText.comboChart(title, bar.label, line.label)}
           testID={testID ? `${testID}-plot` : undefined}>
           {({ size, box, x, band, y, yRight }) => {
             const slot = singleBarSlot(band, BAR_CATEGORY_GAP, MAX_BAR_SIZE);
@@ -325,13 +329,13 @@ export function ComboChartCard({
           testID={testID ? `${testID}-tiles` : undefined}
           items={[
             {
-              label: `${bar.label} · total`,
+              label: `${bar.label} · ${chartText.total}`,
               value: barFormat(hovering ? (barValues[activeIndex] ?? 0) : barTotal),
               color: barTone.color,
               activeColor: barTone.activeColor,
             },
             {
-              label: `${line.label} · ${hovering ? 'this month' : 'average'}`,
+              label: `${line.label} · ${hovering ? chartText.thisMonth : chartText.average}`,
               // Not `captionValue`: it holds the BAR total under
               // `headlineFrom="line"` ("83,200%"); the line's own reading is meant.
               value: lineFormat(hovering ? (lineValues[activeIndex] ?? 0) : lineAverage),