@12-apps/ui 6.78.3 → 6.79.0

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -18,13 +18,20 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
-const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
-  { value: 'grid', label: 'Grid View', icon: GridIcon },
-  { value: 'list', label: 'List View', icon: ListIcon },
+interface ViewOption {
+  value: ViewMode;
+  label: string;
+  icon: typeof SvgIcon;
+}
+
+const viewOptions = (gridViewLabel: string, listViewLabel: string): ViewOption[] => [
+  { value: 'grid', label: gridViewLabel, icon: GridIcon },
+  { value: 'list', label: listViewLabel, icon: ListIcon },
 ];
 
 /**
@@ -37,10 +44,13 @@ export function ViewSelector({
   zoom,
   onZoomChange,
   cardSizeLabel,
+  gridViewLabel = EN_US_UI_LABELS.contentToolbar.gridView,
+  listViewLabel = EN_US_UI_LABELS.contentToolbar.listView,
 }: ViewSelectorProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
-  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;
+  const options = viewOptions(gridViewLabel, listViewLabel);
+  const activeOption = options.find((option) => option.value === viewMode) ?? options[0]!;
   const ActiveIcon = activeOption.icon;
 
   return (
@@ -82,7 +92,7 @@ export function ViewSelector({
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
       >
-        {VIEW_OPTIONS.map((option) => {
+        {options.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
           return (

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -31,6 +31,7 @@ import type {
   DashboardMoreFiltersProps,
   DashboardProps,
 } from './Dashboard.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sxRem } from '../../../tokens/relative';
 
 /**
@@ -160,6 +161,7 @@ Dashboard.displayName = 'Dashboard';
 const DashboardBreadcrumb = ({
   items,
   renderLink,
+  ariaLabel = EN_US_UI_LABELS.dashboard.breadcrumb,
   className,
 }: DashboardBreadcrumbProps): React.JSX.Element => {
   const { testIdPrefix } = useDashboardContext();
@@ -167,7 +169,7 @@ const DashboardBreadcrumb = ({
     <MuiBreadcrumbs
       separator={<NavigateNextIcon fontSize="small" />}
       className={className}
-      aria-label="breadcrumb"
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-breadcrumb`}
       sx={{ fontSize: sxRem(14), color: 'text.secondary' }}
     >

package/src/components/layout/Dashboard/Dashboard.types.ts

@@ -33,6 +33,11 @@ export interface DashboardBreadcrumbProps {
   items: DashboardBreadcrumbItem[];
   /** Render function for links, e.g. a Next.js `<Link>`. Defaults to `<a>`. */
   renderLink?: (item: DashboardBreadcrumbItem, children: ReactNode) => ReactNode;
+  /**
+   * The trail's landmark name. @default "breadcrumb" — a host passes
+   * `UI_LABELS[locale].dashboard.breadcrumb`.
+   */
+  ariaLabel?: string;
   className?: string;
 }
 

package/src/components/navigation/CommandPalette/CommandPalette.helpers.ts

@@ -1,3 +1,4 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
 import type Fuse from 'fuse.js';
 import type React from 'react';
 
@@ -33,11 +34,14 @@ export const filterCommands = ({
   return [...recent, ...commands.filter((command) => !recentCommandIds.includes(command.id))];
 };
 
-export const groupByCategory = (commands: PaletteCommand[]): Record<string, PaletteCommand[]> => {
+export const groupByCategory = (
+  commands: PaletteCommand[],
+  generalLabel: string = EN_US_COMMAND_PALETTE_COPY.general,
+): Record<string, PaletteCommand[]> => {
   const groups: Record<string, PaletteCommand[]> = {};
 
   for (const command of commands) {
-    const category = command.category || 'General';
+    const category = command.category || generalLabel;
     groups[category] = groups[category] ?? [];
     groups[category].push(command);
   }

package/src/components/navigation/CommandPalette/CommandPalette.hooks.ts

@@ -17,11 +17,13 @@ const useCommandSearch = ({
   searchQuery,
   showRecent,
   recentCommandIds,
+  generalLabel,
 }: {
   commands: PaletteCommand[];
   searchQuery: string;
   showRecent?: boolean;
   recentCommandIds: string[];
+  generalLabel?: string;
 }) => {
   const fuse = useMemo(
     () =>
@@ -38,7 +40,10 @@ const useCommandSearch = ({
     [searchQuery, commands, fuse, showRecent, recentCommandIds],
   );
 
-  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  const groupedCommands = useMemo(
+    () => groupByCategory(filteredCommands, generalLabel),
+    [filteredCommands, generalLabel],
+  );
 
   return { filteredCommands, groupedCommands };
 };
@@ -152,8 +157,10 @@ export const useCommandPalette = ({
   recentCommands,
   onCommandExecute,
   onClose,
+  generalLabel,
 }: {
   open: boolean;
+  generalLabel?: string;
   commands: PaletteCommand[];
   showRecent?: boolean;
   recentCommands: string[];
@@ -171,6 +178,7 @@ export const useCommandPalette = ({
     searchQuery,
     showRecent,
     recentCommandIds,
+    generalLabel,
   });
 
   const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -1,3 +1,5 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import CloseIcon from '@mui/icons-material/Close';
 import EnterIcon from '@mui/icons-material/KeyboardReturn';
 import SearchIcon from '@mui/icons-material/Search';
@@ -38,7 +40,9 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 
 const PaletteContainer = styled(Paper)(({ theme }) => ({
   width: '100%',
-  maxWidth: rem(theme, 640),
+  // 640 is the desktop width (FUT-3347); below it the palette takes the dialog's
+  // own width, which already keeps MUI's 32px gutters, so a phone sees it whole.
+  maxWidth: `min(${rem(theme, 640)}, 100%)`,
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: `blur(${rem(theme, 20)})`,
   WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
@@ -103,18 +107,22 @@ const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }
   copy,
 }) => {
   const theme = useTheme();
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
 
   return (
     <Box
       sx={{
         display: 'flex',
+        // Wraps the count under the hints on a phone; one row on desktop.
+        flexWrap: 'wrap',
+        gap: 1,
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: 1,
         borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
         background: alpha(theme.palette.background.default, 0.4) }}
     >
-      <Box sx={{ display: 'flex', gap: 1 }}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
         <ShortcutChip
           icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}
           label={copy.execute}
@@ -124,7 +132,7 @@ const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }
         <ShortcutChip label={copy.close} size="small" />
       </Box>
       <Typography variant="caption" color="text.secondary">
-        {commandCount} commands
+        {text.commandCount(commandCount)}
       </Typography>
     </Box>
   );
@@ -135,13 +143,14 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
   open,
   onClose,
   commands,
-  placeholder = 'Type a command or search...',
+  placeholder,
   width,
   maxHeight,
   showRecent = true,
   recentCommands = [],
   onCommandExecute,
   dataTestId = 'command-palette' }) => {
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
   const {
     searchQuery,
     setSearchQuery,
@@ -158,7 +167,8 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
     showRecent,
     recentCommands,
     onCommandExecute,
-    onClose });
+    onClose,
+    generalLabel: text.general });
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
@@ -177,7 +187,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
         <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>
           <PaletteSearch
             inputRef={searchInputRef}
-            placeholder={placeholder}
+            placeholder={placeholder ?? text.placeholder}
             value={searchQuery}
             dataTestId={dataTestId}
             onChange={handleSearchChange}

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -1,3 +1,5 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import RecentIcon from '@mui/icons-material/History';
 import Box from '@mui/material/Box/index.js';
 import Divider from '@mui/material/Divider/index.js';
@@ -128,7 +130,7 @@ export const PaletteResults: React.FC<{
     return (
       <NoResults data-testid={`${dataTestId}-no-results`}>
         <Typography variant="body2" color="text.secondary">
-          No commands found for "{searchQuery}"
+          {resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy).noCommandsFound(searchQuery)}
         </Typography>
         <Typography variant="caption" color="text.disabled" sx={{ mt: 1 }}>
           {copy.tryAnotherTerm}

package/src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx

@@ -213,10 +213,13 @@ export const MenuList: React.FC<PropsWithChildren<{ variant?: string; size?: str
   ...props
 }) => <StyledList {...props}>{children}</StyledList>;
 
-export const CollapseToggle: React.FC<PropsWithChildren<{ onClick: () => void }>> = ({
-  children,
-  onClick,
-}) => <CollapseButton onClick={onClick}>{children}</CollapseButton>;
+export const CollapseToggle: React.FC<
+  PropsWithChildren<{ onClick: () => void; ariaLabel?: string }>
+> = ({ children, onClick, ariaLabel }) => (
+  <CollapseButton onClick={onClick} aria-label={ariaLabel}>
+    {children}
+  </CollapseButton>
+);
 
 export const MegaSection: React.FC<{ children: ReactNode }> = ({ children }) => (
   <MegaMenuSection>{children}</MegaMenuSection>

package/src/components/navigation/NavigationMenu/NavigationMenu.tsx

@@ -121,6 +121,8 @@ export const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuPro
       collapsible,
       collapsed: controlledCollapsed,
       onCollapseChange,
+      collapseLabel,
+      expandLabel,
       logo,
       endContent,
       maxWidth,
@@ -179,6 +181,8 @@ export const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuPro
           items={items}
           logo={logo}
           endContent={endContent}
+          collapseLabel={collapseLabel}
+          expandLabel={expandLabel}
           onCollapseToggle={handleCollapseToggle}
         />
       </NavigationShell>

package/src/components/navigation/NavigationMenu/NavigationMenu.types.ts

@@ -107,6 +107,19 @@ export interface NavigationMenuProps {
    * Callback when collapse state changes
    */
   onCollapseChange?: (collapsed: boolean) => void;
+
+  /**
+   * The collapse control's text (vertical, `collapsible` only).
+   * @default "Collapse" — a host passes `UI_LABELS[locale].navigationMenu.collapse`.
+   */
+  collapseLabel?: string;
+
+  /**
+   * The collapse control's accessible name while the menu is collapsed, when it
+   * shows only its icon (vertical, `collapsible` only).
+   * @default "Expand" — a host passes `UI_LABELS[locale].navigationMenu.expand`.
+   */
+  expandLabel?: string;
   
   /**
    * Custom logo/brand element

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -225,6 +225,8 @@ const MenuItemContent: React.FC<{
         collapsed={collapsed}
         minimal={minimal}
         disabled={item.disabled}
+        // Collapsed, the row is its icon alone; the item's own label names it.
+        aria-label={collapsed ? item.label : undefined}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

package/src/components/navigation/NavigationMenu/NavigationStandardBody.tsx

@@ -13,6 +13,7 @@ import { CollapseToggle, LogoBar, MenuList } from './NavigationMenu.shell';
 import { slideIn } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { renderMenuItem } from './NavigationMenuItem';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sxRem } from '../../../tokens/relative';
 
 const DividerRule: FC = () => (
@@ -38,15 +39,23 @@ const VerticalLogo: FC<{ logo: ReactNode; collapsed: boolean }> = ({ logo, colla
   </LogoBar>
 );
 
-const CollapseControl: FC<{ collapsed: boolean; onToggle: () => void }> = ({
+const CollapseControl: FC<{
+  collapsed: boolean;
+  label?: string;
+  expandLabel?: string;
+  onToggle: () => void;
+}> = ({
   collapsed,
+  label = EN_US_UI_LABELS.navigationMenu.collapse,
+  expandLabel = EN_US_UI_LABELS.navigationMenu.expand ?? 'Expand',
   onToggle,
 }) => (
-  <CollapseToggle onClick={onToggle}>
+  // Collapsed, the control is its icon alone, so the name has to be given.
+  <CollapseToggle onClick={onToggle} ariaLabel={collapsed ? expandLabel : undefined}>
     <ListItemIcon sx={{ minWidth: collapsed ? 0 : sxRem(40), justifyContent: 'center' }}>
       <MenuIcon />
     </ListItemIcon>
-    {!collapsed && <ListItemText primary="Collapse" />}
+    {!collapsed && <ListItemText primary={label} />}
   </CollapseToggle>
 );
 
@@ -103,6 +112,10 @@ export interface NavigationStandardBodyProps {
   items: NavigationMenuItem[];
   logo?: ReactNode;
   endContent?: ReactNode;
+  /** The collapse control's text; English when the host names none. */
+  collapseLabel?: string;
+  /** Its accessible name while collapsed; English when the host names none. */
+  expandLabel?: string;
   onCollapseToggle: () => void;
 }
 
@@ -118,6 +131,8 @@ export const NavigationStandardBody: FC<NavigationStandardBodyProps> = ({
   items,
   logo,
   endContent,
+  collapseLabel,
+  expandLabel,
   onCollapseToggle,
 }) => {
   const isVertical = variant === 'vertical';
@@ -137,7 +152,12 @@ export const NavigationStandardBody: FC<NavigationStandardBodyProps> = ({
       {logo && isVertical && <VerticalLogo logo={logo} collapsed={collapsed} />}
 
       {collapsible && isVertical && (
-        <CollapseControl collapsed={collapsed} onToggle={onCollapseToggle} />
+        <CollapseControl
+          collapsed={collapsed}
+          label={collapseLabel}
+          expandLabel={expandLabel}
+          onToggle={onCollapseToggle}
+        />
       )}
 
       <MenuItems

package/src/components/typography/Code/Code.tsx

@@ -4,21 +4,32 @@ import Box from '@mui/material/Box/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Tooltip from '@mui/material/Tooltip/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
 import { modeInk, neutralTones } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 
+/**
+ * The badge's inset, its own height (12px type at the block's 1.5 line height,
+ * 2px padding and a 1px border, each twice) and a gap of the same inset again.
+ */
+const languageClearance = (theme: Theme): string =>
+  `calc(${theme.spacing(2)} + ${rem(theme, 12 * 1.5 + 4 + 2)})`;
+
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'copyable'].includes(prop as string),
+    !['customVariant', 'customSize', 'copyable', 'labelled'].includes(prop as string),
 })<{
   customVariant?: string;
   customSize?: string;
   copyable?: boolean;
+  /** A language badge sits in the top-left corner. */
+  labelled?: boolean;
   component?: React.ElementType;
-}>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
+}>(({ theme, customVariant = 'inline', customSize = 'md', copyable, labelled }) => {
   // Size mapping
   const sizeMap = {
     xs: { fontSize: rem(theme, 12), padding: rems(theme, 2, 4) },
@@ -87,7 +98,11 @@ const StyledCodeContainer = styled(Box, {
     },
   };
 
-  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline;
+  return {
+    ...(variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline),
+    // The first line starts below the language badge rather than under it.
+    ...(labelled && { paddingTop: languageClearance(theme) }),
+  };
 });
 
 const StyledCode = styled('code')({
@@ -188,7 +203,11 @@ const resolveCodeFlags = (
 // means the copied/not-copied branches do not count against the main render, and
 // the flash re-renders only the button. Non-string children are still a no-op on
 // click, exactly as before.
-const CodeCopyButton: React.FC<{ source: React.ReactNode }> = ({ source }) => {
+const CodeCopyButton: React.FC<{ source: React.ReactNode; copyLabel: string; copiedLabel: string }> = ({
+  source,
+  copyLabel,
+  copiedLabel,
+}) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -203,7 +222,7 @@ const CodeCopyButton: React.FC<{ source: React.ReactNode }> = ({ source }) => {
   };
 
   return (
-    <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+    <Tooltip title={copied ? copiedLabel : copyLabel}>
       <CopyButton onClick={handleCopy} size="small" color={copied ? 'success' : 'default'}>
         {copied ? <Check /> : <ContentCopy />}
       </CopyButton>
@@ -217,6 +236,8 @@ export const Code = React.forwardRef<HTMLElement, CodeProps>(
       variant = 'inline',
       language,
       copyable = false,
+      copyLabel = EN_US_UI_LABELS.code.copy,
+      copiedLabel = EN_US_UI_LABELS.code.copied,
       lineNumbers = false,
       size = 'md',
       children,
@@ -242,13 +263,14 @@ export const Code = React.forwardRef<HTMLElement, CodeProps>(
         customVariant={variant}
         customSize={size}
         copyable={showCopy}
+        labelled={showLanguage}
         {...props}
       >
         {showLanguage && <LanguageLabel>{language}</LanguageLabel>}
 
         <StyledCode>{processedChildren}</StyledCode>
 
-        {showCopy && <CodeCopyButton source={children} />}
+        {showCopy && <CodeCopyButton source={children} copyLabel={copyLabel} copiedLabel={copiedLabel} />}
       </StyledCodeContainer>
     );
   },

package/src/components/typography/Code/Code.types.ts

@@ -7,6 +7,10 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   variant?: CodeVariant;
   language?: string;
   copyable?: boolean;
+  /** The copy button's tooltip and name; defaults to `UI_LABELS['en-US'].code.copy`. */
+  copyLabel?: string;
+  /** The same button right after a copy; defaults to `UI_LABELS['en-US'].code.copied`. */
+  copiedLabel?: string;
   lineNumbers?: boolean;
   size?: SizeValue;
   children: React.ReactNode;

package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts

@@ -1,6 +1,9 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';
+import type { WorkflowStepLabels } from '../../../copy/labels';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import { neutralTones } from '../../../tokens/ink';
 import { paletteKey } from '../../../tokens/scales';
 
@@ -158,6 +161,10 @@ export const resolveWorkflowStepProps = (
 ): ResolvedWorkflowStepProps =>
   ({ ...WORKFLOW_DEFAULTS, ...definedProps(props) }) as ResolvedWorkflowStepProps;
 
+/** The caller's labels over the English ones, key by key. */
+export const workflowLabels = (labels?: Partial<WorkflowStepLabels>): WorkflowStepLabels =>
+  resolveLabels(EN_US_UI_LABELS.workflowStep, labels);
+
 /**
  * The progressbar's `aria-valuetext`: `Step N of M: <title>` while `currentStep`
  * names a step, and `Step N of M` when it does not (past the end, below zero, or
@@ -167,8 +174,9 @@ export const resolveWorkflowStepProps = (
 export const progressValueText = (
   steps: readonly WorkflowStepItem[],
   currentStep: number,
+  labels?: Partial<WorkflowStepLabels>,
 ): string => {
-  const position = `Step ${currentStep + 1} of ${steps.length}`;
+  const position = workflowLabels(labels).progress(currentStep + 1, steps.length);
   const step = steps[currentStep];
   return step === undefined ? position : `${position}: ${step.title}`;
 };

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef, useCallback } from 'react';
 
 import type { StepColors } from './WorkflowStep.helpers';
-import { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';
+import { indicatorSizeFor, stepColors, stepPalette, workflowLabels } from './WorkflowStep.helpers';
 import type {
   StepConnectorProps,
   StepContentProps,
@@ -227,6 +227,7 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
   animated,
   disabled,
   onClick,
+  labels,
   'data-testid': dataTestId,
 }, ref) => {
   const isDisabled = Boolean(disabled || step.disabled);
@@ -278,7 +279,7 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
       onKeyDown={handleKeyDown}
       role={interactive ? 'button' : undefined}
       tabIndex={!interactive ? undefined : isDisabled ? -1 : 0}
-      aria-label={`Step ${index + 1}: ${step.title}`}
+      aria-label={workflowLabels(labels).step(index + 1, step.title)}
       aria-current={isActive ? 'step' : undefined}
       aria-disabled={interactive && isDisabled ? true : undefined}
       data-testid={dataTestId}

package/src/components/utility/WorkflowStep/WorkflowStep.tsx

@@ -46,6 +46,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
     errorIcon,
     onStepClick,
     disabled,
+    labels,
     className,
     style,
     'data-testid': dataTestId,
@@ -75,7 +76,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
       aria-valuemin={0}
       aria-valuemax={valueMax}
       aria-valuenow={valueNow}
-      aria-valuetext={progressValueText(steps, currentStep)}
+      aria-valuetext={progressValueText(steps, currentStep, labels)}
       data-testid={dataTestId}
       {...other}
     >
@@ -98,6 +99,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
           animated={animated}
           disabled={disabled}
           onClick={handleStepClick}
+          labels={labels}
           dataTestId={dataTestId}
         />
       ))}

package/src/components/utility/WorkflowStep/WorkflowStep.types.ts

@@ -1,6 +1,8 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ComponentProps } from 'react';
 
+import type { WorkflowStepLabels } from '../../../copy/labels';
+
 /**
  * Status of an individual workflow step
  */
@@ -78,6 +80,12 @@ export interface WorkflowStepProps extends Omit<ComponentProps<'div'>, 'onError'
   onStepClick?: (stepIndex: number, step: WorkflowStepItem) => void;
   /** Disable all interactions */
   disabled?: boolean;
+  /**
+   * The indicators' accessible names and the progressbar's value text. Any key
+   * left out keeps its English wording; a host passes
+   * `UI_LABELS[locale].workflowStep`.
+   */
+  labels?: Partial<WorkflowStepLabels>;
   /** Additional CSS class names */
   className?: string;
   /** Inline styles */
@@ -106,6 +114,8 @@ export interface StepIndicatorProps {
   animated: boolean;
   disabled: boolean;
   onClick?: (index: number, step: WorkflowStepItem) => void;
+  /** Names the indicator; English when omitted. */
+  labels?: Partial<WorkflowStepLabels>;
   'data-testid'?: string;
 }
 

package/src/components/utility/WorkflowStep/WorkflowStepRow.tsx

@@ -25,6 +25,7 @@ interface StepRowProps {
   animated: boolean;
   disabled: boolean;
   onClick: (index: number, step: WorkflowStepItem) => void;
+  labels?: WorkflowStepProps['labels'];
   dataTestId?: string;
 }
 
@@ -46,6 +47,7 @@ export const StepRow: React.FC<StepRowProps> = ({
   animated,
   disabled,
   onClick,
+  labels,
   dataTestId,
 }) => {
   const isCompleted = step.status === 'completed';
@@ -69,6 +71,7 @@ export const StepRow: React.FC<StepRowProps> = ({
         animated={animated}
         disabled={disabled}
         onClick={onClick}
+        labels={labels}
         data-testid={`${dataTestId}-indicator-${index}`}
       />
 

package/src/copy/data-display.ts

@@ -44,12 +44,31 @@ export interface MapPreviewCopy {
   mapType: string;
   fullscreen: string;
   search: string;
+  /**
+   * Everything below is optional so a host's existing pack keeps compiling; the
+   * shipped packs always carry it and the component falls back to the English one.
+   */
+  /** The search field's placeholder, unless the `searchPlaceholder` prop wins. */
+  searchPlaceholder?: string;
+  /** The map's accessible name, read again whenever the view moves. */
+  viewDescription?: (lat: string, lng: string, zoom: number) => string;
+  /** The map-type button's tooltip, given the type's name from `mapTypeNames`. */
+  mapTypeTitle?: (name: string) => string;
+  mapTypeNames?: { roadmap: string; satellite: string; hybrid: string; terrain: string };
+  /** The marker caption under the map: coordinates, then the zoom level. */
+  coordinates?: (lat: string, lng: string) => string;
+  zoomLevel?: (zoom: number) => string;
 }
 
 /** The carousel's two arrows, which carry a glyph and nothing else. */
 export interface CarouselCopy {
   previous: string;
   next: string;
+  /**
+   * Each indicator's accessible name, from its 1-based position. Optional so a
+   * host's existing pack keeps compiling; the shipped packs always carry it.
+   */
+  goToSlide?: (position: number) => string;
 }
 
 /** The request-timing diagram's own words: its region, its phases, its totals. */