@12-apps/ui 6.78.4 → 6.79.0

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. */

package/src/copy/feedback.ts

@@ -27,6 +27,10 @@ export interface TutorialCopy {
   finish: string;
   /** The next/finish button's title while `requiresActionBeforeNext` blocks it. */
   requiresAction: string;
+  /** The "2 of 5" line under the step, when `showProgress` is on. Optional; the shipped packs carry it. */
+  progress?: (current: number, total: number) => string;
+  /** The close (×) button's accessible name, beside the title. Optional; the shipped packs carry it. */
+  close?: string;
 }
 
 /** Chrome that carries a glyph and no text, across several small surfaces. */

package/src/copy/form.ts

@@ -21,6 +21,31 @@ export interface AddressAutocompleteCopy {
   mapsLoadFailed: string;
   /** The pin button's tooltip, which is also its accessible name. */
   useCurrentLocation: string;
+  /**
+   * Everything below is optional so a host's existing pack keeps compiling; the
+   * shipped packs carry all of it and the field falls back to the English pack.
+   */
+  /** The field's label and placeholder, unless the `label`/`placeholder` props win. */
+  label?: string;
+  placeholder?: string;
+  /** The empty list's text: nothing typed yet, then typed with no match. */
+  typeToSearch?: string;
+  noAddressesFound?: string;
+  /** The list's row while suggestions are being fetched. */
+  loadingSuggestions?: string;
+  /** Shown as the field's helper text when Google Maps or Places fails. */
+  mapsApiLoadFailed?: string;
+  mapsServicesInitFailed?: string;
+  fetchSuggestionsFailed?: string;
+  addressDetailsNotFound?: string;
+  addressDetailsFailed?: string;
+  /** The current-location button's failures. */
+  noMockLocation?: string;
+  mockLocationNotFound?: string;
+  locationAddressFailed?: string;
+  geolocationUnsupported?: string;
+  geocoderUnavailable?: string;
+  locationFailed?: string;
 }
 
 /** What an `Autocomplete` renders that is not one of the host's own options. */
@@ -107,6 +132,12 @@ export interface RichEditorToolbarCopy {
   backgroundColor: string;
   /** The browser prompt the link button opens, asking for the URL. */
   linkPrompt: string;
+  /**
+   * The editing area's accessible name when the field has no placeholder to
+   * lend it. Optional; the shipped packs carry it and the field falls back to
+   * the English one.
+   */
+  editorLabel?: string;
 }
 
 /**
@@ -124,6 +155,24 @@ export interface PhoneInputCopy {
   invalidNumber(countryName: string): string;
   /** Stands in for the country's name before one has been resolved. */
   unknownCountry: string;
+  /**
+   * A country's name in the picker and in `invalidNumber`, from its ISO 3166
+   * code and the English name the field ships. Optional: without it the
+   * English name is shown, as it always was. The pt-BR pack answers through
+   * `Intl.DisplayNames`, so every country the field lists is covered.
+   */
+  countryName?: (code: string, englishName: string) => string;
+  /**
+   * The field's label when the host passes no `label` prop. Optional: without
+   * it the field reads "Phone Number", as it always did.
+   */
+  label?: string;
+  /**
+   * The field's placeholder when the host passes no `placeholder` prop.
+   * Optional: without it the field reads "Enter phone number", as it always
+   * did. Keep it short — it shares a 320px field with the country picker.
+   */
+  placeholder?: string;
 }
 
 /**
@@ -151,6 +200,15 @@ export interface UploadButtonCopy {
   uploadInProgress(percent: number): string;
   /** The component's own error, announced. Takes the message it wraps. */
   errorAnnouncement(message: string): string;
+  /**
+   * The two errors the control raises itself. Optional so a host's existing
+   * pack keeps compiling; the shipped packs carry both and the control falls
+   * back to the English one.
+   */
+  /** A file over `maxSizeMB`. */
+  fileTooLarge?: (maxSizeMB: number) => string;
+  /** `onUpload` rejected with something that is not an `Error`. */
+  uploadFailed?: string;
 }
 
 /**