@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/onboarding-step/contract.ts

@@ -20,6 +20,36 @@ export type OnboardingStepSettings = HeaderConfig & LoadCopy & {
   skippedIdx: number[];
   /** The primary when a step has no `ctaLabel`. */
   primaryLabel: string;
+  /** "Step {n} of {total}" — the chip and the card's eyebrow. */
+  stepCountLabel: string;
+  /** Footer hint with `{count}` steps left: one, and other. */
+  stepsLeftOneHint: string;
+  stepsLeftOtherHint: string;
+  /** Footer hint on the last step. */
+  lastStepHint: string;
+  /** The chip once every step is finished. */
+  setUpChipLabel: string;
+  skipLabel: string;
+  /** The primary while a step runs. */
+  workingLabel: string;
+  /** The primary once finished. */
+  doneLabel: string;
+  /** Before the next step's title: "Up next · …". */
+  upNextLabel: string;
+  /** The dots row's accessible name. */
+  progressLabel: string;
+  /** Each dot's accessible name: `{n}`, `{title}`, `{state}` (one of the dot*Text words). */
+  dotLabel: string;
+  dotDoneText: string;
+  dotCurrentText: string;
+  dotUpcomingText: string;
+  dotSkippedText: string;
+  /** Shown while steps are skipped: `{steps}` is their numbers joined by `stepListJoinText`. */
+  skipNoteText: string;
+  /** The done body when steps were skipped: `{steps}` as above. */
+  doneSkippedBody: string;
+  /** Joins skipped step numbers ("2 and 4"). */
+  stepListJoinText: string;
   doneTitle: string;
   doneBody: string;
   doneHint: string;

package/src/components/onboarding/onboarding-step/engine.ts

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { OnboardingStepSettings, StepScene } from './contract';
 
 /** **The Onboarding Step engine** — pure: the current step, what was skipped, and finishing. */
@@ -39,16 +40,20 @@ export function stepView(c: OnboardingStepSettings, s: OnboardingStepState) {
   const fin = s.finished;
   const dots: DotState[] = c.steps.map((_, i) => (s.skipped.includes(i) ? 'skipped' : i === s.current && !fin ? 'current' : i < s.current || fin ? 'done' : 'upcoming'));
   const skippedNums = [...s.skipped].sort((a, b) => a - b).map(i => i + 1);
+  const steps = skippedNums.join(c.stepListJoinText);
   const next = !fin && s.current < n - 1 ? c.steps[s.current + 1]! : null;
   const left = n - s.current - 1;
+  const dotText: Record<DotState, string> = { done: c.dotDoneText, current: c.dotCurrentText, upcoming: c.dotUpcomingText, skipped: c.dotSkippedText };
   return {
     dots,
+    dotLabels: c.steps.map((st, i) => fill(c.dotLabel, { n: i + 1, title: st.title, state: dotText[dots[i]!] })),
+    stepCount: fill(c.stepCountLabel, { n: s.current + 1, total: n }),
     next,
-    skipNote: skippedNums.length && !fin ? `Skipped step ${skippedNums.join(' and ')} · you can come back to it` : '',
-    doneBody: skippedNums.length ? `You skipped step ${skippedNums.join(' and ')}. You can finish it from Settings.` : c.doneBody,
-    chip: fin ? { tone: 'success' as const, label: 'Set up', dot: true } : { tone: 'neutral' as const, label: `Step ${s.current + 1} of ${n}`, dot: false },
-    footerHint: fin ? c.doneHint : s.current === n - 1 ? 'Last step' : `${left} ${left === 1 ? 'step' : 'steps'} after this`,
-    primaryLabel: s.phase === 'working' ? 'Working…' : fin ? 'Done' : c.steps[s.current]!.ctaLabel || c.primaryLabel,
+    skipNote: skippedNums.length && !fin ? fill(c.skipNoteText, { steps }) : '',
+    doneBody: skippedNums.length ? fill(c.doneSkippedBody, { steps }) : c.doneBody,
+    chip: fin ? { tone: 'success' as const, label: c.setUpChipLabel, dot: true } : { tone: 'neutral' as const, label: fill(c.stepCountLabel, { n: s.current + 1, total: n }), dot: false },
+    footerHint: fin ? c.doneHint : s.current === n - 1 ? c.lastStepHint : fill(left === 1 ? c.stepsLeftOneHint : c.stepsLeftOtherHint, { count: left }),
+    primaryLabel: s.phase === 'working' ? c.workingLabel : fin ? c.doneLabel : c.steps[s.current]!.ctaLabel || c.primaryLabel,
     canSkip: c.skippable && !fin,
     scene: (fin ? 'done' : s.current === n - 1 ? 'final' : 'current') as StepScene,
   };

package/src/components/onboarding/onboarding-step/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "onboarding-step",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -15,6 +17,24 @@
     "skippable": true,
     "skippedIdx": [],
     "primaryLabel": "Do it",
+    "stepCountLabel": "Step {n} of {total}",
+    "stepsLeftOneHint": "{count} step after this",
+    "stepsLeftOtherHint": "{count} steps after this",
+    "lastStepHint": "Last step",
+    "setUpChipLabel": "Set up",
+    "skipLabel": "Skip",
+    "workingLabel": "Working…",
+    "doneLabel": "Done",
+    "upNextLabel": "Up next",
+    "progressLabel": "Setup progress",
+    "dotLabel": "Step {n}: {title}, {state}",
+    "dotDoneText": "done",
+    "dotCurrentText": "current",
+    "dotUpcomingText": "upcoming",
+    "dotSkippedText": "skipped",
+    "skipNoteText": "Skipped step {steps} · you can come back to it",
+    "doneSkippedBody": "You skipped step {steps}. You can finish it from Settings.",
+    "stepListJoinText": " and ",
     "steps": [
       {
         "type": "agent",

package/src/components/onboarding/password-expiry/PasswordExpiryView.tsx

@@ -95,7 +95,7 @@ function Valid({
         <Box gap="s2">
           <Text nativeID={`pe-req-${config.credential.replace(/\W/g, '')}`} variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{config.reqTitle}</Text>
           <Box role="list" aria-labelledby={`pe-req-${config.credential.replace(/\W/g, '')}`} gap="s1">
-            {config.requirements.map((r, i) => <RequirementRow key={r.label} label={r.label} met={Boolean(state.met[i])} />)}
+            {config.requirements.map((r, i) => <RequirementRow key={r.label} label={r.label} met={Boolean(state.met[i])} metText={config.metText} notMetText={config.notMetText} />)}
           </Box>
         </Box>
         {state.change === 'failed' ? <Callout alert strong title={config.failTitle}>{v.failBody}</Callout> : null}
@@ -105,7 +105,7 @@ function Valid({
 }
 
 /** D7: a 16px circle — mint soft with a mint check (scale .6 → 1, M7) when met, a muted ring when not. */
-function RequirementRow({ label, met }: { label: string; met: boolean }) {
+function RequirementRow({ label, met, metText, notMetText }: { label: string; met: boolean; metText: string; notMetText: string }) {
   const { colors } = useDs();
   const t = useTween(met ? 1 : 0);
   return (
@@ -123,7 +123,7 @@ function RequirementRow({ label, met }: { label: string; met: boolean }) {
         </MotionView>
       </Box>
       <Text variant="caption" style={{ fontSize: 13, flexShrink: 1, color: met ? colors.textPrimary : colors.textSecondary }}>{label}</Text>
-      <Hidden>{met ? ', met' : ', not met'}</Hidden>
+      <Hidden>{met ? metText : notMetText}</Hidden>
     </Box>
   );
 }

package/src/components/onboarding/password-expiry/contract.ts

@@ -35,6 +35,30 @@ export type PasswordExpirySettings = HeaderConfig & LoadCopy & {
   timeHint: string;
   changedHint: string;
   failTitle: string;
+  /** Headline templates — `{n}` is the number of days. */
+  expiresInText: string;
+  expiresTomorrowText: string;
+  expiresTodayText: string;
+  /** Expired, one day ago / more days ago. */
+  expiredAgoOneText: string;
+  expiredAgoOtherText: string;
+  /** The status chip's words. */
+  expiringChipLabel: string;
+  expiredChipLabel: string;
+  upToDateChipLabel: string;
+  /** The strength words. */
+  weakLabel: string;
+  moderateLabel: string;
+  strongLabel: string;
+  /** The footer hint once expired. */
+  expiredHint: string;
+  /** The primary once changed. */
+  doneLabel: string;
+  /** The failure body — `{credential}` is the credential. */
+  failBodyText: string;
+  /** Read after each requirement by a screen reader. */
+  metText: string;
+  notMetText: string;
   /** Demo-only: the scene this case ships in (B2-9). */
   ship?: PasswordScene;
 };

package/src/components/onboarding/password-expiry/engine.ts

@@ -1,4 +1,6 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
+import { PASSWORD_PRESETS } from './contract';
 import type { PasswordExpirySettings, PasswordScene, Strength } from './contract';
 
 /** **The Password Expiry engine** — pure: days left, strength, which requirements are met, and the change. */
@@ -40,34 +42,47 @@ export function reducePasswordExpiry(s: PasswordExpiryState, a: PasswordExpiryAc
   }
 }
 
-export const STRENGTH_WORD: Record<Strength, string> = { weak: 'Weak', moderate: 'Moderate', strong: 'Strong' };
+/** The English strength words (the base preset's); the view uses the config's own. */
+export const STRENGTH_WORD: Record<Strength, string> = strengthWords(PASSWORD_PRESETS.base as PasswordExpirySettings);
 export const STRENGTH_SHARE: Record<Strength, number> = { weak: 0.33, moderate: 0.66, strong: 1 };
 
+export function strengthWords(c: Pick<PasswordExpirySettings, 'weakLabel' | 'moderateLabel' | 'strongLabel'>): Record<Strength, string> {
+  return { weak: c.weakLabel, moderate: c.moderateLabel, strong: c.strongLabel };
+}
+
+type HeadlineCopy = Pick<PasswordExpirySettings, 'expiresInText' | 'expiresTomorrowText' | 'expiresTodayText' | 'expiredAgoOneText' | 'expiredAgoOtherText'>;
+
+/** The headline in the config's words. */
+export function headlineIn(c: HeadlineCopy, days: number): string {
+  if (days < 0) return fill(days === -1 ? c.expiredAgoOneText : c.expiredAgoOtherText, { n: -days });
+  if (days === 0) return c.expiresTodayText;
+  if (days === 1) return c.expiresTomorrowText;
+  return fill(c.expiresInText, { n: days });
+}
+
+/** The headline in the base preset's English. */
 export function headlineFor(days: number): string {
-  if (days < 0) return `Expired ${-days} ${days === -1 ? 'day' : 'days'} ago`;
-  if (days === 0) return 'Expires today';
-  if (days === 1) return 'Expires tomorrow';
-  return `Expires in ${days} days`;
+  return headlineIn(PASSWORD_PRESETS.base as PasswordExpirySettings, days);
 }
 
 export function passwordView(c: PasswordExpirySettings, s: PasswordExpiryState) {
   const changed = s.change === 'changed';
   const expired = s.days < 0 && !changed;
   const chip: { tone: StateChipTone; label: string } = s.change === 'changing' ? { tone: 'neutral', label: c.busyLabel }
-    : changed ? { tone: 'success', label: 'Up to date' }
-    : { tone: 'attention', label: s.days < 0 ? 'Expired' : 'Expiring' };
+    : changed ? { tone: 'success', label: c.upToDateChipLabel }
+    : { tone: 'attention', label: s.days < 0 ? c.expiredChipLabel : c.expiringChipLabel };
   return {
     expired,
-    headline: headlineFor(s.days),
+    headline: headlineIn(c, s.days),
     subline: changed ? c.changedLine : expired ? c.expiredCopy : c.policyNote,
-    strengthWord: STRENGTH_WORD[s.strength],
+    strengthWord: strengthWords(c)[s.strength],
     share: STRENGTH_SHARE[s.strength],
     strong: s.strength === 'strong',
     chip,
-    footerHint: changed ? c.changedHint : expired ? 'Required before you can sign in' : c.timeHint,
-    primaryLabel: s.change === 'changing' ? c.busyLabel : changed ? 'Done' : s.change === 'failed' ? c.retryLabel : c.primaryLabel,
+    footerHint: changed ? c.changedHint : expired ? c.expiredHint : c.timeHint,
+    primaryLabel: s.change === 'changing' ? c.busyLabel : changed ? c.doneLabel : s.change === 'failed' ? c.retryLabel : c.primaryLabel,
     canChange: s.change !== 'changing' && s.change !== 'changed',
-    failBody: `Your current ${c.credential} still works. Retry in a moment.`,
+    failBody: fill(c.failBodyText, { credential: c.credential }),
     scene: (s.change !== 'idle' ? s.change : expired ? 'expired' : 'expiring') as PasswordScene,
   };
 }

package/src/components/onboarding/password-expiry/index.ts

@@ -3,7 +3,7 @@ export {
   type PasswordExpirySettings, type PasswordScene, type Requirement, type Strength,
 } from './contract';
 export {
-  STRENGTH_SHARE, STRENGTH_WORD, headlineFor, initialPasswordExpiry, metFor, passwordSeed, passwordView, reducePasswordExpiry,
+  STRENGTH_SHARE, STRENGTH_WORD, headlineFor, headlineIn, initialPasswordExpiry, strengthWords, metFor, passwordSeed, passwordView, reducePasswordExpiry,
   type ChangePhase, type PasswordExpiryAction, type PasswordExpirySeed, type PasswordExpiryState,
 } from './engine';
 export { PasswordExpiry, type PasswordExpiryOperations, type PasswordExpiryProps } from './PasswordExpiryView';

package/src/components/onboarding/password-expiry/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "password-expiry",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -43,6 +45,22 @@
     "timeHint": "Takes about a minute",
     "changedHint": "You’ll stay signed in on this device",
     "failTitle": "Couldn’t change your password",
+    "expiresInText": "Expires in {n} days",
+    "expiresTomorrowText": "Expires tomorrow",
+    "expiresTodayText": "Expires today",
+    "expiredAgoOneText": "Expired {n} day ago",
+    "expiredAgoOtherText": "Expired {n} days ago",
+    "expiringChipLabel": "Expiring",
+    "expiredChipLabel": "Expired",
+    "upToDateChipLabel": "Up to date",
+    "weakLabel": "Weak",
+    "moderateLabel": "Moderate",
+    "strongLabel": "Strong",
+    "expiredHint": "Required before you can sign in",
+    "doneLabel": "Done",
+    "failBodyText": "Your current {credential} still works. Retry in a moment.",
+    "metText": ", met",
+    "notMetText": ", not met",
     "emptyTitle": "Nothing is expiring",
     "emptyBody": "All your credentials are up to date.",
     "emptyCta": "Refresh"

package/src/components/onboarding/payment-alert/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "payment-alert",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/permissions-setup/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "permissions-setup",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/plan-selection/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "plan-selection",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/queue-status/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "queue-status",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/quick-actions/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "quick-actions",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/rate-limit/RateLimitView.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Box, Icon, Select, Text } from '../../../core';
 import { Callout, ProgressBar } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { FieldLabel, OnboardingCard } from '../shared/OnboardingCard';
@@ -87,7 +87,7 @@ function Valid({
             <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.usageLabel}</Text>
             <CrossFadeText value={v.usageText} style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }} />
           </Box>
-          <ProgressBar bare track="surface" label={config.usageLabel} value={v.pct} tone={v.warn ? 'attention' : 'ink'} format={() => `${v.pct}% of the limit${v.warn ? ` · ${v.chip.label.toLowerCase()}` : ''}`} />
+          <ProgressBar bare track="surface" label={config.usageLabel} value={v.pct} tone={v.warn ? 'attention' : 'ink'} format={() => fill(v.warn ? config.usageBarWarnText : config.usageBarText, { pct: v.pct, status: v.chip.label.toLowerCase() })} />
           {v.warn ? (
             <Box row gap="s2" align="flex-start">
               <Icon name="alert" size={14} color={colors.status.needsUser} />

package/src/components/onboarding/rate-limit/contract.ts

@@ -36,6 +36,24 @@ export type RateLimitSettings = HeaderConfig & LoadCopy & {
   savedHint: string;
   saveErrorTitle: string;
   saveErrorBody: string;
+  /** Chip and primary while saving, and once saved. */
+  savingLabel: string;
+  savedLabel: string;
+  /** Chip per usage mode; `{pct}` is the share of the limit used. */
+  usedPercentLabel: string;
+  nearLimitLabel: string;
+  atLimitLabel: string;
+  overLimitLabel: string;
+  /** The warning under the bar; `{pct}`, `{usage}`, `{noun}` (`unitNoun`), `{outcome}` (the overage option's). */
+  nearNoteText: string;
+  atNoteText: string;
+  belowNoteText: string;
+  /** Read out for the usage bar; `{status}` is the chip's label, lower-cased. */
+  usageBarText: string;
+  usageBarWarnText: string;
+  /** Footer hint with and without unsaved changes. */
+  unsavedHint: string;
+  noChangesHint: string;
 };
 
 export const RATE_LIMIT_PRESETS = presetsJson as unknown as PresetsFile<RateLimitSettings>;

package/src/components/onboarding/rate-limit/engine.ts

@@ -1,5 +1,5 @@
 import type { StateChipTone } from '../../../ds';
-import type { SavePhase } from '../shared/contract';
+import { fill, type SavePhase } from '../shared/contract';
 import type { RateLimitScene, RateLimitSettings } from './contract';
 
 /** **The Rate Limit engine** — pure: the chosen limit and overage against what is saved, and usage. */
@@ -62,24 +62,24 @@ export function rateLimitView(c: RateLimitSettings, s: RateLimitState) {
   const opt = c.overageOptions.find(o => o.value === s.overage) ?? c.overageOptions[0]!;
   const dirty = s.limit !== s.saved.limit || s.overage !== s.saved.overage;
   const n = (x: number) => x.toLocaleString('en-US');
-  const chipLabel = s.save === 'saved' ? 'Saved' : mode === 'below' ? 'Over limit' : mode === 'at' ? 'At limit' : mode === 'near' ? 'Near limit' : `${Math.round(r * 100)}% used`;
+  const pct = Math.round(r * 100);
+  const chipLabel = s.save === 'saved' ? c.savedLabel : mode === 'below' ? c.overLimitLabel : mode === 'at' ? c.atLimitLabel : mode === 'near' ? c.nearLimitLabel : fill(c.usedPercentLabel, { pct });
+  const words = { pct, usage: n(s.usage), noun: c.unitNoun, outcome: opt.outcome };
   return {
     mode,
     warn,
     pct: Math.min(100, Math.round(r * 100)),
     usageText: `${n(s.usage)} / ${n(s.limit)} ${c.unit}`,
     option: opt,
-    note: mode === 'below' ? `Current usage (${n(s.usage)}) is above this limit. Extra ${c.unitNoun} will be ${opt.outcome} straight away.`
-      : mode === 'at' ? `You’ve reached the limit. New ${c.unitNoun} are ${opt.outcome}.`
-      : mode === 'near' ? `You’re at ${Math.round(r * 100)}% of the limit. At 100%, new ${c.unitNoun} will be ${opt.outcome}.` : '',
+    note: mode === 'below' ? fill(c.belowNoteText, words) : mode === 'at' ? fill(c.atNoteText, words) : mode === 'near' ? fill(c.nearNoteText, words) : '',
     scene: (s.save !== 'idle' ? s.save : mode === 'below' ? 'below' : mode === 'at' ? 'atLimit' : mode === 'near' ? 'near' : 'default') as RateLimitScene,
     chip: {
       tone: (s.save === 'saving' ? 'neutral' : warn ? 'attention' : s.save === 'saved' ? 'success' : 'neutral') as StateChipTone,
-      label: s.save === 'saving' ? 'Saving…' : chipLabel,
+      label: s.save === 'saving' ? c.savingLabel : chipLabel,
     },
     dirty,
-    footerHint: s.save === 'saved' && !dirty ? c.savedHint : dirty ? 'Unsaved changes' : 'No changes yet',
-    primaryLabel: s.save === 'saving' ? 'Saving…' : s.save === 'saved' && !dirty ? 'Saved' : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
+    footerHint: s.save === 'saved' && !dirty ? c.savedHint : dirty ? c.unsavedHint : c.noChangesHint,
+    primaryLabel: s.save === 'saving' ? c.savingLabel : s.save === 'saved' && !dirty ? c.savedLabel : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
     canSave: (dirty || s.save === 'failed') && s.save !== 'saving',
   };
 }

package/src/components/onboarding/rate-limit/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "rate-limit",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -49,6 +51,19 @@
     "savedHint": "Saved · applies within a minute",
     "saveErrorTitle": "Couldn’t save the limit",
     "saveErrorBody": "Your previous limit is still in place. Retry when you’re ready.",
+    "savingLabel": "Saving…",
+    "savedLabel": "Saved",
+    "usedPercentLabel": "{pct}% used",
+    "nearLimitLabel": "Near limit",
+    "atLimitLabel": "At limit",
+    "overLimitLabel": "Over limit",
+    "nearNoteText": "You’re at {pct}% of the limit. At 100%, new {noun} will be {outcome}.",
+    "atNoteText": "You’ve reached the limit. New {noun} are {outcome}.",
+    "belowNoteText": "Current usage ({usage}) is above this limit. Extra {noun} will be {outcome} straight away.",
+    "usageBarText": "{pct}% of the limit",
+    "usageBarWarnText": "{pct}% of the limit · {status}",
+    "unsavedHint": "Unsaved changes",
+    "noChangesHint": "No changes yet",
     "emptyTitle": "No usage yet",
     "emptyBody": "Make your first request to see usage and set a limit.",
     "emptyCta": "Refresh"

package/src/components/onboarding/receipt-printer/ReceiptPrinterView.tsx

@@ -3,7 +3,7 @@ import { Box, Input, Select, Text, useReduceMotion } from '../../../core';
 import { Button, Callout, Checkbox, IconButton } from '../../../ds';
 import { useDs, type DensityName } from '../../../tokens';
 import { useOperationRunner } from '../../../runtime/operations';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { FieldLabel, OnboardingCard } from '../shared/OnboardingCard';
@@ -11,7 +11,7 @@ import { Hidden } from '../shared/parts';
 import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
 import { guarded } from '../shared/guard';
 import {
-  RECEIPT_MAX_LENGTH, RECEIPT_PRINTER_PRESETS, validateReceiptPrinter,
+  RECEIPT_MAX_LENGTH, RECEIPT_MESSAGES, RECEIPT_PRINTER_PRESETS, messagesOf, validateReceiptPrinter,
   type ReceiptField, type ReceiptFieldDef, type ReceiptItemField, type ReceiptPrinterSettings, type ReceiptValues,
 } from './contract';
 import {
@@ -259,7 +259,7 @@ function Valid({
                 aria-labelledby={`${id('paymentMethod')}-label`}
               />
             ), 140)}
-            {cell('date', field('date', { placeholder: 'YYYY-MM-DD' }), 140)}
+            {cell('date', field('date', { placeholder: messagesOf(config).datePlaceholder }), 140)}
             {cell('message', field('message'), 140)}
           </Box>
           <Box align="center" style={{ flexGrow: 1, flexBasis: 240, minWidth: 0 }}>
@@ -270,7 +270,7 @@ function Valid({
               phase={v.phase}
               reduceMotion={reduceMotion}
               onPrinted={job => send({ type: 'fed', job })}
-              label={v.phase === 'idle' ? 'Receipt printer, ready' : `Receipt printer, ${v.phase === 'printing' ? 'printing' : 'printed'} receipt`}
+              label={v.phase === 'idle' ? messagesOf(config).printerReady : v.phase === 'printing' ? messagesOf(config).printerPrinting : messagesOf(config).printerPrinted}
               maxWidth={STAGE_WIDTH[size] ?? STAGE_WIDTH.medium}
             />
           </Box>
@@ -278,7 +278,7 @@ function Valid({
         {state.run === 'failed' ? <Callout alert title={config.failTitle}>{state.failMessage || config.failBody}</Callout> : null}
         <Box role="status" aria-live="polite">
           {state.run === 'printing' ? <Hidden>{config.printingHint}</Hidden> : null}
-          {state.run === 'printed' && state.printed ? <Hidden>{receiptSpeech(state.printed)}</Hidden> : null}
+          {state.run === 'printed' && state.printed ? <Hidden>{receiptSpeech(state.printed, messagesOf(config).printedAnnouncement)}</Hidden> : null}
         </Box>
       </Box>
     </OnboardingCard>
@@ -379,7 +379,7 @@ function FieldsEditor({
                 aria-labelledby={`${uid}-field-${i}-label`}
                 aria-describedby={err(i, 'value') || err(i, 'label') || err(i, 'key') ? `${uid}-field-${i}-error` : undefined}
               />
-              {errorText(`${uid}-field-${i}-error`, [err(i, 'value'), err(i, 'label') || err(i, 'key') ? `${labelOf(config, 'editFieldsLabel')} to fix its label or key.` : ''].filter(Boolean).join(' ') || undefined)}
+              {errorText(`${uid}-field-${i}-error`, [err(i, 'value'), err(i, 'label') || err(i, 'key') ? fill(messagesOf(config).fixFieldDefinition, { editFields: labelOf(config, 'editFieldsLabel') }) : ''].filter(Boolean).join(' ') || undefined)}
             </Box>
           ))}
         </Box>
@@ -467,10 +467,10 @@ function ItemsEditor({
 }
 
 /** The printed receipt, as one sentence for a screen reader. */
-export function receiptSpeech(l: ReceiptLines): string {
+export function receiptSpeech(l: ReceiptLines, announcement = RECEIPT_MESSAGES.printedAnnouncement): string {
   const items = l.items.map(it => `${it.line}, ${it.amount}`).join('; ');
   const details = l.details.map(d => `${d.label}: ${d.value}`).join(', ');
-  return `Receipt printed. ${l.title ? `${l.title}, ` : ''}${l.meta}. ${details ? `${details}. ` : ''}${items}. ${l.paymentLabel} ${l.paymentMethod}. ${l.totalLabel} ${l.total}.${l.message ? ` ${l.message}` : ''}`;
+  return `${announcement} ${l.title ? `${l.title}, ` : ''}${l.meta}. ${details ? `${details}. ` : ''}${items}. ${l.paymentLabel} ${l.paymentMethod}. ${l.totalLabel} ${l.total}.${l.message ? ` ${l.message}` : ''}`;
 }
 
 /** Receipt Printer, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */

package/src/components/onboarding/receipt-printer/contract.ts

@@ -96,9 +96,49 @@ export type ReceiptPrinterSettings = HeaderConfig & LoadCopy & Omit<ReceiptValue
   printedChip: string;
   failTitle: string;
   failBody: string;
+  /** Every other sentence the component says — form errors, chips, the printer's spoken name. Templates: `{max}`, `{key}`, `{label}`, `{code}`, `{count}`… */
+  messages?: Partial<ReceiptMessages>;
+  /** The date's month, as the receipt prints it — twelve, January first. */
+  monthNames?: string[];
   ship?: ReceiptPrinterScene;
 };
 
+/** The words behind `messages`, in English. A config's `messages` overrides any of them. */
+export const RECEIPT_MESSAGES = {
+  labelMissing: "Give the field a label.",
+  labelTooLong: "Keep the label to {max} characters.",
+  keyInvalid: "A key starts with a letter and uses letters, digits and _.",
+  keyTaken: "{key} is already a key.",
+  valueMissing: "Enter {label}.",
+  valueMissingNoLabel: "Enter a value.",
+  tooLong: "Keep it to {max} characters — it has to fit the receipt.",
+  noItems: "Add at least one item.",
+  tooManyItems: "A receipt prints at most {max} lines.",
+  itemNameMissing: "Enter what was paid for.",
+  quantityInvalid: "Enter a whole number from 1 to {max}.",
+  amountInvalid: "Enter an amount above zero.",
+  amountTooLarge: "Enter an amount up to {max}.",
+  noMinorUnit: "{code} has no minor unit — enter a whole amount.",
+  tooManyDecimals: "{code} has {decimals} decimal places at most.",
+  currencyMissing: "Choose a currency.",
+  paymentMethodMissing: "Choose how it was paid.",
+  dateInvalid: "Enter a date as YYYY-MM-DD, like 2026-09-27.",
+  datePlaceholder: "YYYY-MM-DD",
+  failedChip: "Didn’t print",
+  toFixOne: "{count} to fix",
+  toFixMany: "{count} to fix",
+  fixFieldDefinition: "{editFields} to fix its label or key.",
+  printerReady: "Receipt printer, ready",
+  printerPrinting: "Receipt printer, printing receipt",
+  printerPrinted: "Receipt printer, printed receipt",
+  printedAnnouncement: "Receipt printed.",
+  itemLine: "{quantity}X {name}",
+};
+export type ReceiptMessages = typeof RECEIPT_MESSAGES;
+/** The config's messages over the English ones. */
+export const messagesOf = (c: Pick<ReceiptPrinterSettings, 'messages'>): ReceiptMessages => ({ ...RECEIPT_MESSAGES, ...c.messages });
+export const RECEIPT_MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+
 export const RECEIPT_PRINTER_PRESETS = presetsJson as unknown as PresetsFile<ReceiptPrinterSettings>;
 
 /** The built-in single-value fields, in form order. The host's own fields and the items are lists. */
@@ -131,6 +171,8 @@ export function validateReceiptPrinter(c: ReceiptPrinterSettings): OnboardingIss
   const methods = Array.isArray(c?.paymentMethods) ? c.paymentMethods : [];
   const items = Array.isArray(c?.items) ? c.items : [];
   const fields = Array.isArray(c?.fields) ? c.fields : [];
+  if (c?.messages !== undefined && (!c.messages || typeof c.messages !== 'object' || Object.values(c.messages).some(x => typeof x !== 'string'))) issues.push({ path: 'messages', message: 'messages is an object of text.' });
+  if (c?.monthNames !== undefined && (!Array.isArray(c.monthNames) || c.monthNames.length !== 12 || !c.monthNames.every(isText))) issues.push({ path: 'monthNames', message: 'monthNames is a list of twelve names, January first.' });
   const codes = new Set<string>();
   currencies.forEach((cur, i) => {
     if (!isText(cur?.code)) issues.push({ path: `currencies[${i}].code`, message: 'Each currency needs a code, like INR.' });