@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-N32RGOA5.js → chunk-LKFC4CS7.js}

@@ -1,12 +1,58 @@
-import { Badge } from './chunk-SBMNWWBV.js';
-import { useSurfaceAnnounce } from './chunk-RW6ZL2FQ.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { useSurfaceAnnounce } from './chunk-HJLPZA4X.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React2 from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { confidenceTone, confidenceLabel } from '@btndprojects/loam-analyzer';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_CAPTURE_RESULT_LABELS = {
+  result: "Result",
+  scanAnother: "Scan another",
+  dismissResult: "Dismiss result",
+  frozenFrame: "frozen frame \xB7 placeholder",
+  retake: "Retake",
+  analyse: "Analyse",
+  usePhoto: "Use photo",
+  lastCapture: "Last capture",
+  noCapture: "No capture yet",
+  confidence: "confidence",
+  orPossibly: "Or possibly",
+  closestWeGot: "The closest we got",
+  estimate: "Estimate",
+  quantity: "Quantity",
+  noProduct: "No product matched this code.",
+  severity: { none: "no damage", minor: "minor", moderate: "moderate" },
+  analysing: "Analysing",
+  readingAngles: "Reading six angles",
+  cancel: "Cancel",
+  stageStatus: { pending: "pending", active: "active", done: "done", failed: "failed" },
+  stageNote: (status, where) => `, ${status}, runs on ${where}`
+};
+var NONE = {};
+function useCaptureResultLabels(own) {
+  const merged = useLabels("captureResult", DEFAULT_CAPTURE_RESULT_LABELS, own);
+  const provided = useLabels("captureResult", NONE);
+  return React2.useMemo(
+    () => ({
+      ...merged,
+      severity: {
+        ...DEFAULT_CAPTURE_RESULT_LABELS.severity,
+        ...provided.severity,
+        ...own?.severity
+      },
+      stageStatus: {
+        ...DEFAULT_CAPTURE_RESULT_LABELS.stageStatus,
+        ...provided.stageStatus,
+        ...own?.stageStatus
+      }
+    }),
+    [merged, provided, own]
+  );
+}
 var TONE_ICON = {
   good: "check-circle",
   warn: "alert-triangle",
@@ -15,10 +61,12 @@ var TONE_ICON = {
 var ROW_CENTRED = { alignSelf: "center" };
 function ConfidenceBadge({
   value,
-  label = "confidence",
+  label,
+  labels,
   size = "sm",
   icon = false
 }) {
+  const t = useCaptureResultLabels(labels);
   const tone = confidenceTone(value);
   const text = confidenceLabel(value);
   return /* @__PURE__ */ jsx(
@@ -27,21 +75,19 @@ function ConfidenceBadge({
       variant: tone,
       size,
       leadingIcon: icon ? TONE_ICON[tone] : void 0,
-      accessibilityLabel: `${text} ${label}`,
+      accessibilityLabel: `${text} ${label ?? t.confidence}`,
       style: ROW_CENTRED,
       children: text
     }
   );
 }
-function PhaseAnnouncement({
-  message
-}) {
+function PhaseAnnouncement({ message }) {
   const surface = useSurfaceAnnounce();
-  const [own, setOwn] = React.useState("");
+  const [own, setOwn] = React2.useState("");
   const { styles } = useStyles(sharedSheet);
-  const sink = React.useRef(setOwn);
+  const sink = React2.useRef(setOwn);
   sink.current = surface ?? setOwn;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (message) sink.current(message);
   }, [message]);
   if (surface) return null;
@@ -57,31 +103,41 @@ function PhaseAnnouncement({
   );
 }
 function NoteBlock({ title, description }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("capture-result");
   const { styles } = useStyles(sharedSheet);
-  return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: `${title} ${description}`, style: styles.note, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
-    /* @__PURE__ */ jsxs(View, { style: styles.noteText, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.noteTitle, children: title }),
-      /* @__PURE__ */ jsx(Text, { style: styles.noteBody, children: description })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: NAMED_ROLE,
+      accessibilityLabel: `${title} ${description}`,
+      style: styles.note,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
+        /* @__PURE__ */ jsxs(View, { style: styles.noteText, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.noteTitle, children: title }),
+          /* @__PURE__ */ jsx(Text, { style: styles.noteBody, children: description })
+        ] })
+      ]
+    }
+  );
 }
-function MatchRow({ match, onPick }) {
+function MatchRow({ match, onPick, labels }) {
+  const t = useCaptureResultLabels(labels);
   const { styles } = useStyles(sharedSheet);
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(View, { style: styles.matchText, children: [
       /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchCommon, children: match.common }),
       /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchName, children: match.name })
     ] }),
-    /* @__PURE__ */ jsx(ConfidenceBadge, { value: match.confidence })
+    /* @__PURE__ */ jsx(ConfidenceBadge, { value: match.confidence, labels })
   ] });
   if (!onPick) return /* @__PURE__ */ jsx(View, { style: styles.matchRow, children: inner });
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: `${match.common}, ${match.name}, ${confidenceLabel(match.confidence)} confidence`,
+      accessibilityLabel: `${match.common}, ${match.name}, ${confidenceLabel(match.confidence)} ${t.confidence}`,
       style: styles.matchRow,
       onPress: () => onPick(match),
       children: inner
@@ -156,4 +212,4 @@ var sharedSheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement };
+export { ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement, useCaptureResultLabels };

package/dist/{chunk-YC6WORFL.js → chunk-LMPHCVJJ.js}

@@ -1,10 +1,11 @@
-import { Coachmark, CoachmarkDots } from './chunk-P23EQNRQ.js';
-import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-JUAMLEHX.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Coachmark, CoachmarkDots } from './chunk-YAAHPATV.js';
+import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-H7DWSL4O.js';
+import { Progress } from './chunk-5UTRIXQ6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { BackHandler, Pressable, View, Text } from 'react-native';
+import { BackHandler, AccessibilityInfo, Pressable, View, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { materializeTour, resolveText, stepsForSurface, kindFor, canAttachGate, isStepGated, highlightFor, shouldSkipMissingStep, hintRuns } from '@btndprojects/loam-engage';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -20,7 +21,10 @@ var DEFAULT_LABELS = {
   resume: "Resume tour",
   beacon: "Something new here",
   opening: "Opening",
-  step: "Step"
+  openingRoute: (route) => `Opening ${route}`,
+  step: "Step",
+  stepOf: (step, current, total) => `${step} ${current} of ${total}`,
+  resumeWithCounter: (label, counter) => `${label} \u2014 ${counter}`
 };
 var TourContext = React.createContext(null);
 function TourProvider({
@@ -28,7 +32,9 @@ function TourProvider({
   defaultActiveId = null
 }) {
   const [activeId, setActiveId] = React.useState(defaultActiveId);
-  const listeners = React.useRef(/* @__PURE__ */ new Set());
+  const listeners = React.useRef(
+    /* @__PURE__ */ new Set()
+  );
   const value = React.useMemo(
     () => ({
       activeId,
@@ -75,12 +81,14 @@ function Tour({
   onDismiss,
   onEvent,
   minimisable = true,
+  dismissOnBack = true,
+  renderCard,
   labels: labelOverrides,
   motion = "full"
 }) {
   const ctx = React.useContext(TourContext);
   const host = useTourHost();
-  const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const labels = useLabels("tour", DEFAULT_LABELS, labelOverrides);
   const touch = surface !== "pointer";
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const open = openProp ?? (id && ctx ? ctx.activeId === id : uncontrolledOpen);
@@ -187,7 +195,9 @@ function Tour({
       if (timer) clearTimeout(timer);
     };
   }, [anchorName, host]);
-  const needsRoute = Boolean(open && !minimised && step?.route && route !== void 0 && route !== step.route);
+  const needsRoute = Boolean(
+    open && !minimised && step?.route && route !== void 0 && route !== step.route
+  );
   const navigatedFor = React.useRef(null);
   React.useEffect(() => {
     if (!needsRoute || !onNavigate || !step?.route) return;
@@ -260,19 +270,28 @@ function Tour({
     if (want && route === want && before !== route) advanceRef.current("route");
   }, [route, open, minimised, advanceOn, step]);
   React.useEffect(() => {
-    if (!open || minimised) return;
+    if (!open || minimised || !dismissOnBack) return;
     const sub = BackHandler.addEventListener("hardwareBackPress", () => {
       close("back");
       return true;
     });
     return () => sub.remove();
-  }, [open, minimised, close]);
+  }, [open, minimised, dismissOnBack, close]);
+  const stepTitle = step ? t(step.title) : void 0;
+  const announced = React.useRef(index);
+  React.useEffect(() => {
+    if (!open || announced.current === index) return;
+    announced.current = index;
+    if (stepTitle)
+      AccessibilityInfo.announceForAccessibility(`${stepTitle}, ${index + 1} of ${total}`);
+  }, [open, index, total, stepTitle]);
   if (!open || !step || total === 0) return null;
   if (minimised) {
     return /* @__PURE__ */ jsx(
       TourLauncher,
       {
         label: labels.resume,
+        labels,
         counter: `${index + 1}/${total}`,
         motion,
         onPress: () => {
@@ -301,37 +320,34 @@ function Tour({
       )
     ] });
   }
+  const cardProps = {
+    step,
+    index,
+    total,
+    titles: visible.map((s) => t(s.title) ?? ""),
+    name,
+    target: variant === "anchored" ? resolved : void 0,
+    variant,
+    gated,
+    locale,
+    defaultLocale,
+    waiting: waiting ? step.route ? labels.openingRoute(step.route) : labels.opening : void 0,
+    labels,
+    motion,
+    onNext: () => advance("next"),
+    onBack: index > 0 ? () => setIndex(index - 1) : void 0,
+    onSkipStep: () => skipStep("user-skipped"),
+    onSelectStep: setIndex,
+    onClose: () => close("user"),
+    onMinimise: minimisable ? () => {
+      setMinimised(true);
+      emitRef.current("tour_minimised");
+    } : void 0,
+    onAction: onAction ? (action) => onAction(action, step) : void 0
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     resolved ? /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, padding: step.padding, motion }) : null,
-    /* @__PURE__ */ jsx(
-      TourStepCard,
-      {
-        step,
-        index,
-        total,
-        titles: visible.map((s) => t(s.title) ?? ""),
-        name,
-        target: variant === "anchored" ? resolved : void 0,
-        variant,
-        gated,
-        locale,
-        defaultLocale,
-        waiting: waiting ? `${labels.opening} ${step.route ?? ""}`.trim() : void 0,
-        labels,
-        motion,
-        onNext: () => advance("next"),
-        onBack: index > 0 ? () => setIndex(index - 1) : void 0,
-        onSkipStep: () => skipStep("user-skipped"),
-        onSelectStep: setIndex,
-        onClose: () => close("user"),
-        onMinimise: minimisable ? () => {
-          setMinimised(true);
-          emitRef.current("tour_minimised");
-        } : void 0,
-        onAction: onAction ? (action) => onAction(action, step) : void 0
-      },
-      index
-    )
+    /* @__PURE__ */ jsx(React.Fragment, { children: renderCard ? renderCard(cardProps) : /* @__PURE__ */ jsx(TourStepCard, { ...cardProps }) }, renderCard ? index : variant)
   ] });
 }
 function TourHint({ text }) {
@@ -362,9 +378,9 @@ function TourStepCard({
   defaultLocale,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tour");
   const { styles } = useStyles(sheet);
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const labels = useLabels("tour", DEFAULT_LABELS, labelOverrides);
   const t = (value) => resolveText(value, locale, defaultLocale);
   const isLast = index === total - 1;
   const kind = kindFor(step.kind, Boolean(step.anchor));
@@ -401,7 +417,16 @@ function TourStepCard({
       ] }),
       children: [
         typeof step.body !== "string" && step.body ? /* @__PURE__ */ jsx(Fragment, { children: step.body }) : null,
-        cta ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", trailingIcon: "arrow-right", onPress: () => onAction?.(cta.action), children: cta.label }) : null,
+        cta ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            trailingIcon: "arrow-right",
+            onPress: () => onAction?.(cta.action),
+            children: cta.label
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           TourProgress,
           {
@@ -409,6 +434,7 @@ function TourStepCard({
             total,
             titles,
             stepLabel: labels.step,
+            labels,
             onSelect: onSelectStep
           }
         )
@@ -421,9 +447,12 @@ function TourProgress({
   total,
   titles,
   onSelect,
-  stepLabel = "Step"
+  stepLabel: stepLabelProp,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
+  const labels = useLabels("tour", DEFAULT_LABELS, labelsProp);
+  const stepLabel = stepLabelProp ?? labels.step;
   return /* @__PURE__ */ jsxs(View, { style: styles.progress, children: [
     /* @__PURE__ */ jsx(
       Progress,
@@ -431,7 +460,7 @@ function TourProgress({
         size: "sm",
         value: index + 1,
         max: Math.max(1, total),
-        accessibilityLabel: `${stepLabel} ${index + 1} of ${total}`
+        accessibilityLabel: labels.stepOf(stepLabel, index + 1, total)
       }
     ),
     /* @__PURE__ */ jsxs(View, { style: styles.progressRail, children: [
@@ -454,19 +483,22 @@ function TourProgress({
   ] });
 }
 function TourLauncher({
-  label = "Resume tour",
+  label: labelProp,
   counter,
   onPress,
-  pinned = true
+  pinned = true,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tour");
+  const labels = useLabels("tour", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.resume;
   const { styles } = useStyles(sheet);
   const insets = useTourInsets();
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: counter ? `${label} \u2014 ${counter}` : label,
+      accessibilityLabel: counter ? labels.resumeWithCounter(label, counter) : label,
       onPress,
       style: ({ pressed }) => [
         styles.launcher,

package/dist/{chunk-3WPW4KUN.js → chunk-LQP4KEXZ.js}

@@ -1,37 +1,58 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, View, Pressable, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  tabWithBadge: (label, badge) => `${label}, ${badge}`
+};
 var INDICATOR_WIDTH = 28;
 var BADGE_MAX = 99;
 function Tab({
   item,
   selected,
   onPress,
-  motion
+  motion,
+  bounce,
+  labels
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tab-bar");
   const { styles } = useStyles(sheet);
   const fg = selected ? theme.color.accentStrong : theme.color.text3;
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => {
     if (motion === "none") return;
     Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
       toValue: to,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 4
+      useNativeDriver: true
     }).start();
   };
+  const badgeScale = React.useRef(new Animated.Value(1)).current;
+  const lastBadge = React.useRef(item.badge ?? 0);
+  React.useEffect(() => {
+    const now = item.badge ?? 0;
+    const rose = now > lastBadge.current;
+    lastBadge.current = now;
+    if (!rose || !bounce) return;
+    badgeScale.setValue(1.3);
+    Animated.spring(badgeScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 12
+    }).start();
+  }, [item.badge, bounce, badgeScale]);
   const showBadge = item.badge !== void 0 && item.badge > 0;
   const badgeText = item.badge !== void 0 && item.badge > BADGE_MAX ? `${BADGE_MAX}+` : `${item.badge}`;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
       accessibilityRole: "tab",
-      accessibilityLabel: item.label,
+      accessibilityLabel: showBadge ? labels.tabWithBadge(item.label, badgeText) : item.label,
       accessibilityState: { selected },
       onPress,
       onPressIn: () => spring(0.9),
@@ -40,7 +61,7 @@ function Tab({
       children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.tabInner, { transform: [{ scale }] }], children: [
         /* @__PURE__ */ jsxs(View, { style: styles.iconWrap, children: [
           /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 22, color: fg }),
-          showBadge ? /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, numberOfLines: 1, children: badgeText }) }) : null
+          showBadge ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.badge, { transform: [{ scale: badgeScale }] }], children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, numberOfLines: 1, children: badgeText }) }) : null
         ] }),
         /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, children: item.label })
       ] })
@@ -51,12 +72,15 @@ function TabBar({
   items,
   value,
   onValueChange,
+  onReselect,
   bottomInset = 0,
   showIndicator = true,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tab-bar");
+  const labels = useLabels("tabBar", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const activeIndex = Math.max(
     0,
@@ -88,7 +112,10 @@ function TabBar({
     Animated.multiply(progress, segmentWidth),
     (segmentWidth - theme.space[INDICATOR_WIDTH]) / 2
   );
-  const select = (next) => onValueChange?.(next);
+  const select = (next) => {
+    if (next === value && onReselect) onReselect(next);
+    else onValueChange?.(next);
+  };
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -101,7 +128,10 @@ function TabBar({
           Animated.View,
           {
             pointerEvents: "none",
-            style: [styles.indicator, { width: theme.space[INDICATOR_WIDTH], transform: [{ translateX }] }]
+            style: [
+              styles.indicator,
+              { width: theme.space[INDICATOR_WIDTH], transform: [{ translateX }] }
+            ]
           }
         ) : null,
         items.map((item) => /* @__PURE__ */ jsx(
@@ -110,7 +140,9 @@ function TabBar({
             item,
             selected: item.value === value,
             onPress: () => select(item.value),
-            motion
+            motion,
+            bounce: motion !== "none" && !theme.reduceMotion,
+            labels
           },
           item.value
         ))

package/dist/{chunk-TKQYWZ5V.js → chunk-LUMVGO2K.js}

@@ -1,20 +1,23 @@
-import { NumberRoll } from './chunk-CUMUNPXY.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  up: "Up",
+  down: "Down",
+  flat: "No change",
+  delta: (direction, text) => `${direction} ${text}`
+};
 var DIRECTION_GLYPH = {
   up: "arrow-up",
   down: "arrow-down",
   flat: "minus"
 };
-var DIRECTION_WORD = {
-  up: "Up",
-  down: "Down",
-  flat: "No change"
-};
 function resolveDirection(delta, deltaDirection) {
   if (deltaDirection) return deltaDirection;
   if (typeof delta === "number") return delta > 0 ? "up" : delta < 0 ? "down" : "flat";
@@ -25,10 +28,10 @@ function toneFor(direction, invert) {
   const isGood = direction === "up" ? !invert : invert;
   return isGood ? "good" : "bad";
 }
-function formatDelta(delta) {
+function formatDelta(delta, locale) {
   if (typeof delta === "string") return delta;
   const sign = delta > 0 ? "+" : delta < 0 ? "\u2212" : "";
-  return `${sign}${Math.abs(delta).toLocaleString()}`;
+  return `${sign}${Math.abs(delta).toLocaleString(locale)}`;
 }
 function Metric({
   label,
@@ -41,37 +44,50 @@ function Metric({
   caption,
   motion = "full",
   animateValue = false,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
   const hasDelta = delta !== void 0 && delta !== "";
   const direction = resolveDirection(delta, deltaDirection);
   const tone = toneFor(direction, invert);
-  const deltaText = hasDelta ? formatDelta(delta) : "";
+  const labels = useLabels("metric", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const deltaText = hasDelta ? formatDelta(delta, locale) : "";
+  const directionWord = labels[direction];
   const numeric = typeof value === "number";
   const willAnimateValue = animateValue && numeric && motion !== "none" && motion !== "reduced";
   const { styles } = useStyles(sheet, { size, tone });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("metric");
   const glyphColor = tone === "good" ? theme.status.doneOnSoft : tone === "bad" ? theme.status.crashedOnSoft : theme.status.pendingOnSoft;
   const iconSize = size === "sm" ? theme.icon.xs : size === "lg" ? theme.icon.md : theme.icon.sm;
-  return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityLabel, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
-    /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
-      willAnimateValue ? /* @__PURE__ */ jsx(NumberRoll, { value, textStyle: styles.value, motion }) : /* @__PURE__ */ jsx(Text, { style: styles.value, children: value }),
-      unit !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null
-    ] }),
-    hasDelta ? /* @__PURE__ */ jsxs(
-      View,
-      {
-        style: styles.delta,
-        accessibilityLabel: deltaText ? `${DIRECTION_WORD[direction]} ${deltaText}` : DIRECTION_WORD[direction],
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
-          deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
-        ]
-      }
-    ) : null,
-    caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.root,
+      ...accessibilityLabel ? { role: "group", accessibilityLabel } : null,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
+          willAnimateValue ? /* @__PURE__ */ jsx(NumberRoll, { value, textStyle: styles.value, motion }) : /* @__PURE__ */ jsx(Text, { style: styles.value, children: value }),
+          unit !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null
+        ] }),
+        hasDelta ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessible: true,
+            accessibilityRole: NAMED_ROLE,
+            style: styles.delta,
+            accessibilityLabel: deltaText ? labels.delta(directionWord, deltaText) : directionWord,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: DIRECTION_GLYPH[direction], size: iconSize, color: glyphColor }),
+              deltaText ? /* @__PURE__ */ jsx(Text, { style: styles.deltaText, children: deltaText }) : null
+            ]
+          }
+        ) : null,
+        caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+      ]
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   root: { alignItems: "flex-start", gap: theme.space.s1 },