@12-apps/ui 6.5.0 → 6.7.0

package/src/components/data-display/AsyncStateContainer/AsyncStateContainer.types.ts

@@ -1,6 +1,12 @@
 import type React from 'react';
 
 export interface AsyncStateContainerProps {
+  /**
+   * What an EMPTY result reads as, when the caller supplies no
+   * `emptyComponent` of its own. REQUIRED — the fallback was the English
+   * "No data available", on the package every host renders.
+   */
+  emptyTitle: string;
   /**
    * Whether the container is in a loading state
    * @default false

package/src/components/data-display/Banner/Banner.tsx

@@ -202,8 +202,9 @@ const BannerTrailing: React.FC<{
   variant: BannerVariant;
   dismissible: boolean;
   onDismissClick: () => void;
+  dismissLabel: string;
   dataTestId?: string;
-}> = ({ actions, variant, dismissible, onDismissClick, dataTestId }) => (
+}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (
   <Box display="flex" alignItems="center" gap={1}>
     {actions && actions.length > 0 && (
       <Box className="banner-actions">
@@ -223,7 +224,7 @@ const BannerTrailing: React.FC<{
         className="banner-dismiss"
         size="small"
         onClick={onDismissClick}
-        aria-label="Dismiss banner"
+        aria-label={dismissLabel}
         data-testid={testIdFor(dataTestId, 'close')}
         sx={{ transition: 'all 0.2s ease' }}
       >
@@ -241,6 +242,7 @@ export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
       description,
       icon,
       dismissible = false,
+      dismissLabel,
       onDismiss,
       actions,
       sticky = false,
@@ -295,6 +297,7 @@ export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
           variant={variant}
           dismissible={dismissible}
           onDismissClick={handleDismiss}
+          dismissLabel={dismissLabel}
           dataTestId={dataTestId}
         />
       </StyledBanner>

package/src/components/data-display/Banner/Banner.types.ts

@@ -14,6 +14,8 @@ export interface BannerAction {
 }
 
 export interface BannerProps {
+  /** The dismiss button's accessible name — it carries a glyph only. REQUIRED. */
+  dismissLabel: string;
   /** Message severity type */
   variant?: BannerVariant;
   /** Main message title text */

package/src/components/data-display/CardKit/card-actions-context.tsx

@@ -37,6 +37,7 @@ export function CardActionsProvider({
   tenantSlug,
   onRefresh,
   errorTitle,
+  errorDismissLabel,
   autoHideMs = 6_000,
   children,
 }: {
@@ -50,6 +51,8 @@ export function CardActionsProvider({
    * MESSAGE beside it comes from whatever failed, which is already the host's.
    */
   errorTitle: string;
+  /** The dismiss on that alert, which carries a glyph only. REQUIRED. */
+  errorDismissLabel: string;
   /** How long the snackbar stays up. */
   autoHideMs?: number;
   children: ReactNode;
@@ -72,6 +75,7 @@ export function CardActionsProvider({
             title={errorTitle}
             description={error ?? ''}
             closable
+            closeLabel={errorDismissLabel}
             onClose={() => setError(null)}
             data-testid="card-action-error"
           />

package/src/components/data-display/Carousel/Carousel.chrome.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { CarouselArrows, CarouselIndicators, CarouselThumbnails } from './Carousel.parts';
+import type { CarouselCopy } from '../../../copy';
 import type {
   CarouselArrowsProps,
   CarouselIndicatorsProps,
@@ -12,6 +13,8 @@ type IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;
 type Color = NonNullable<CarouselIndicatorsProps['color']>;
 
 export interface CarouselChromeProps {
+  /** The two arrows' accessible names, from the mount. */
+  copy: CarouselCopy;
   items: CarouselItem[];
   activeIndex: number;
   loop: boolean;
@@ -34,6 +37,7 @@ export interface CarouselChromeProps {
  * as three conditional blocks inside the carousel's own render.
  */
 export const CarouselChrome: React.FC<CarouselChromeProps> = ({
+  copy,
   items,
   activeIndex,
   loop,
@@ -52,6 +56,7 @@ export const CarouselChrome: React.FC<CarouselChromeProps> = ({
   <>
     {showArrows && !disabled && (
       <CarouselArrows
+        copy={copy}
         onPrev={onPrev}
         onNext={onNext}
         position={arrowPosition}

package/src/components/data-display/Carousel/Carousel.parts.tsx

@@ -212,7 +212,8 @@ const arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => (
 
 export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
   const {
-    onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className, style,
+    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,
+    style,
   } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &
     Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;
 
@@ -227,7 +228,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
         disabled={disabled || disablePrev}
         size={muiSize(size)}
         className={className}
-        aria-label="Previous slide"
+        aria-label={copy.previous}
         data-testid="carousel-prev-button"
         sx={{ ...sx, left: offset, ...style }}
       >
@@ -237,7 +238,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
       <IconButton
         onClick={onNext}
         disabled={disabled || disableNext}
-        aria-label="Next slide"
+        aria-label={copy.next}
         size={muiSize(size)}
         className={className}
         data-testid="carousel-next-button"

package/src/components/data-display/Carousel/Carousel.types.ts

@@ -1,5 +1,6 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties, ReactNode } from 'react';
+import type { CarouselCopy } from '../../../copy';
 
 export interface CarouselItem {
   id: string;
@@ -11,6 +12,11 @@ export interface CarouselItem {
 }
 
 export interface CarouselProps {
+  /**
+   * The two arrows' accessible names. They render a glyph and nothing else,
+   * so this pair IS what a screen reader announces for them. REQUIRED.
+   */
+  copy: CarouselCopy;
   items: CarouselItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'cards';
   size?: SizeValue;
@@ -58,6 +64,7 @@ export interface CarouselIndicatorsProps {
 }
 
 export interface CarouselArrowsProps {
+  copy: CarouselCopy;
   onPrev: () => void;
   onNext: () => void;
   position?: 'inside' | 'outside' | 'overlay';

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -122,6 +122,11 @@ export interface DataViewsDisplayCopy {
   densityUnavailableNarrow: string;
   /** The control that opens this panel. */
   trigger: string;
+  /** The two column headings inside the panel: which field, and in what shape. */
+  fieldHeading: string;
+  formatHeading: string;
+  /** The card-grid zoom slider, which carries a glyph at each end and no label. */
+  cardZoom: string;
 }
 
 export interface DataViewsExportCopy {
@@ -130,6 +135,12 @@ export interface DataViewsExportCopy {
   visibleColumns(columnCount: number): string;
   /** The control that opens the menu. */
   trigger: string;
+  /**
+   * The word ON that control when the bar has room for it. `trigger` is its
+   * accessible name and its compact tooltip; this is what the eye reads, and
+   * it was a literal — so a host could set one and not the other.
+   */
+  triggerLabel: string;
 }
 
 export interface DataViewsGridCopy {
@@ -151,9 +162,21 @@ export interface DataViewsGridCopy {
 export interface DataViewsFiltersCopy {
   moreFilters(count: number): string;
   moreFiltersApplied(count: number, appliedCount: number): string;
+  /**
+   * The overflow control's own two words: the one ON the button, and the
+   * heading of the sheet it opens. `moreFilters` is the accessible name and
+   * counts; these are what the eye reads.
+   */
+  moreTriggerLabel: string;
+  moreHeading: string;
   overflowNote: string;
   rangeEnd: string;
   rangeInvalid: string;
+  /**
+   * A day range includes BOTH endpoints, which a reader cannot tell from two
+   * dates alone — and getting it wrong silently drops or adds a day's rows.
+   */
+  rangeInclusiveNote: string;
   /** The day-range presets' labels, keyed by preset id. */
   rangePresets: Readonly<Record<string, string>>;
   scopesLabel: string;
@@ -208,6 +231,8 @@ export interface DataViewsNavCopy {
   reset: string;
   /** The inline error when a view could not be refreshed or saved. */
   updateFailed: string;
+  /** The dismiss on that failure's alert — a glyph with no visible label. */
+  dismissError: string;
   saveFailed: string;
   /** Reopen the save dialog over an existing view. */
   editView: string;

package/src/components/data-display/DataViews/data-views-display-tabs.tsx

@@ -151,7 +151,7 @@ export function SortTab({
       </Box>
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-          Campo
+          {copy.display.fieldHeading}
         </Box>
       </Text>
       {fields.map((field) => (
@@ -326,7 +326,7 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
     <Box sx={{ p: 1 }}>
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-          Formato
+          {copy.display.formatHeading}
         </Box>
       </Text>
       <Box

package/src/components/data-display/DataViews/data-views-export.tsx

@@ -110,7 +110,7 @@ function ExportTrigger({
         {busy ? <CircularProgress size={14} /> : <DownloadRoundedIcon fontSize="small" />}
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-            Exportar
+            {copy.export.triggerLabel}
           </Box>
         )}
         {/* Dropped with the label — see the note on the Exibir trigger. */}

package/src/components/data-display/DataViews/data-views-layout-context.tsx

@@ -7,6 +7,7 @@ import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
 import { Slider } from "../../form/Slider";
 import { Box } from "../../../mui/Box";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from "./data-views-types";
 
 /**
@@ -322,6 +323,7 @@ export function useDataViewsLayout(): DataViewsLayoutValue {
  */
 export function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {
   const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
   if (layout !== "cards" && layout !== "board") return null;
   return (
     <Box
@@ -342,7 +344,7 @@ export function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }):
           max={100}
           step={5}
           onChange={(_event, next) => setZoom(Array.isArray(next) ? (next[0] ?? 0) : next)}
-          aria-label="Tamanho dos cards"
+          aria-label={copy.display.cardZoom}
           data-testid={`${testIdPrefix}-card-zoom`}
         />
       </Box>

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -86,7 +86,7 @@ function MoreTrigger({
         <FilterAltRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-            Mais
+            {copy.filters.moreTriggerLabel}
           </Box>
         )}
         <Box
@@ -126,7 +126,7 @@ function MoreHeading(): React.JSX.Element {
     >
       <Text variant="caption" as="span">
         <Box component="span" sx={{ textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }}>
-          Mais filtros
+          {copy.filters.moreHeading}
         </Box>
       </Text>
       <Text variant="caption" as="span">

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -133,7 +133,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
           data-testid={`${testId}-inclusive`}
           sx={{ mt: 0.75, fontSize: '0.75rem', color: 'text.disabled' }}
         >
-          Ambas as datas entram no resultado.
+          {copy.filters.rangeInclusiveNote}
         </Typography>
       )}
     </Box>

package/src/components/data-display/DataViews/data-views-table-parts.tsx

@@ -36,6 +36,7 @@ export function ViewMutationErrorAlert({
       title={copy.nav.updateFailed}
       description={error}
       closable
+      closeLabel={copy.nav.dismissError}
       onClose={onClose}
       data-testid={`${testIdPrefix}-views-mutation-error`}
     />

package/src/components/data-display/Lightbox/Lightbox.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { makeTestId } from './Lightbox.constants';
 import { resolveLightboxProps } from './Lightbox.helpers';
+import { LightboxCopyProvider } from './lightbox-copy-context';
 import type { LightboxProps, LightboxRef } from './Lightbox.types';
 import { LightboxCurrentMedia } from './LightboxCurrentMedia';
 import { LightboxOverlay } from './LightboxOverlay';
@@ -32,6 +33,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
   const { currentIndex, currentItem, zoom } = lightbox;
 
   return (
+    <LightboxCopyProvider copy={props.copy}>
     <Dialog
       open={isOpen}
       onClose={lightbox.close}
@@ -98,6 +100,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
         }
       />
     </Dialog>
+    </LightboxCopyProvider>
   );
 });
 

package/src/components/data-display/Lightbox/Lightbox.types.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { LightboxCopy } from '../../../copy';
 
 export interface LightboxItem {
   src: string;
@@ -12,6 +13,14 @@ export interface AutoplayConfig {
 }
 
 export interface LightboxProps {
+  /**
+   * Every word this viewer renders — all of them aria-labels on glyph-only
+   * controls, so this object IS what a screen-reader user hears for the whole
+   * component. REQUIRED: a default could only be one language read aloud to
+   * everybody else's users, and the sighted path looks identical either way,
+   * which is why the English literals survived so long.
+   */
+  copy: LightboxCopy;
   /** Controls visibility; must lock body scroll when true */
   isOpen: boolean;
   /** Fired on close button, backdrop click, Esc, and swipe-down (mobile) */

package/src/components/data-display/Lightbox/LightboxControls.tsx

@@ -11,22 +11,26 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';
+import { useLightboxCopy } from './lightbox-copy-context';
 
 type TestId = (suffix: string) => string;
 
 export const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> = ({
   testId,
   onClose,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <IconButton
     onClick={onClose}
     sx={{ ...overlayButtonSx, position: 'absolute', top: 16, right: 16, zIndex: OVERLAY_Z_INDEX }}
-    aria-label="Close lightbox"
+    aria-label={copy.close}
     data-testid={testId('close')}
   >
     <CloseIcon />
   </IconButton>
-);
+  );
+};
 
 const arrowSx = (side: 'left' | 'right') =>
   ({
@@ -52,13 +56,15 @@ export const LightboxNavButtons: FC<LightboxNavButtonsProps> = ({
   atEnd,
   onPrev,
   onNext,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <>
     <IconButton
       onClick={onPrev}
       disabled={atStart}
       sx={arrowSx('left')}
-      aria-label="Previous item"
+      aria-label={copy.previous}
       data-testid={testId('prev')}
     >
       <PrevIcon />
@@ -68,13 +74,14 @@ export const LightboxNavButtons: FC<LightboxNavButtonsProps> = ({
       onClick={onNext}
       disabled={atEnd}
       sx={arrowSx('right')}
-      aria-label="Next item"
+      aria-label={copy.next}
       data-testid={testId('next')}
     >
       <NextIcon />
     </IconButton>
   </>
-);
+  );
+};
 
 export interface LightboxZoomControlsProps {
   testId: TestId;
@@ -88,7 +95,9 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
   onZoomIn,
   onZoomOut,
   onResetZoom,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <Box
     sx={{
       position: 'absolute',
@@ -101,13 +110,13 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
     }}
     data-testid={testId('zoom-controls')}
   >
-    <IconButton onClick={onZoomIn} sx={overlayButtonSx} aria-label="Zoom in" data-testid={testId('zoom-in')}>
+    <IconButton onClick={onZoomIn} sx={overlayButtonSx} aria-label={copy.zoomIn} data-testid={testId('zoom-in')}>
       <ZoomInIcon />
     </IconButton>
     <IconButton
       onClick={onZoomOut}
       sx={overlayButtonSx}
-      aria-label="Zoom out"
+      aria-label={copy.zoomOut}
       data-testid={testId('zoom-out')}
     >
       <ZoomOutIcon />
@@ -115,13 +124,14 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
     <IconButton
       onClick={onResetZoom}
       sx={overlayButtonSx}
-      aria-label="Reset zoom"
+      aria-label={copy.resetZoom}
       data-testid={testId('zoom-reset')}
     >
       <ResetZoomIcon />
     </IconButton>
   </Box>
-);
+  );
+};
 
 export interface LightboxAutoplayButtonProps {
   testId: TestId;
@@ -133,7 +143,9 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
   testId,
   isAutoPlaying,
   onToggle,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <IconButton
     onClick={onToggle}
     sx={{
@@ -144,9 +156,10 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
       transform: 'translateX(-50%)',
       zIndex: OVERLAY_Z_INDEX,
     }}
-    aria-label={isAutoPlaying ? 'Pause slideshow' : 'Start slideshow'}
+    aria-label={isAutoPlaying ? copy.pause : copy.play}
     data-testid={testId('autoplay')}
   >
     {isAutoPlaying ? <PauseIcon /> : <PlayIcon />}
   </IconButton>
-);
+  );
+};

package/src/components/data-display/Lightbox/lightbox-copy-context.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import React from 'react';
+
+import type { LightboxCopy } from '../../../copy';
+
+/**
+ * The lightbox's words, for the four control components that render them.
+ *
+ * A CONTEXT rather than props: the viewer is `Lightbox` → `LightboxOverlay` →
+ * three separate control clusters, and threading one object down three hops is
+ * how a copy port comes to exist, be required, and go unread. It stays a
+ * single REQUIRED prop at the mount, which is the only place a host answers.
+ */
+const LightboxCopyContext = createContext<LightboxCopy | null>(null);
+
+export function LightboxCopyProvider({
+  copy,
+  children,
+}: {
+  copy: LightboxCopy;
+  children: ReactNode;
+}): React.JSX.Element {
+  return <LightboxCopyContext.Provider value={copy}>{children}</LightboxCopyContext.Provider>;
+}
+
+/**
+ * The words this viewer renders — THROWS outside a provider rather than
+ * falling back.
+ *
+ * Every one of them is an aria-label on a glyph, so a fallback would be the
+ * one failure nobody sees in review: the sighted path renders identically
+ * whichever language it is in.
+ */
+export function useLightboxCopy(): LightboxCopy {
+  const copy = useContext(LightboxCopyContext);
+  if (!copy) {
+    throw new Error('useLightboxCopy must be rendered inside a <LightboxCopyProvider>');
+  }
+  return copy;
+}

package/src/components/data-display/MapPreview/MapControlBar.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
 import type { MapType } from './MapPreview.types';
+import type { MapPreviewCopy } from '../../../copy';
 
 // Kept module-local: the inferred type of a styled() component cannot be named
 // across a module boundary here (TS2742).
@@ -41,6 +42,12 @@ const ControlButton = styled(IconButton)(({ theme }) => ({
 }));
 
 export interface MapControlBarProps {
+  /**
+   * The six controls' names. Every one is a glyph with a `title` AND an
+   * `aria-label`, so this object is both the tooltip and what a screen reader
+   * reads — REQUIRED, because a default is one language for every adopter.
+   */
+  copy: MapPreviewCopy;
   zoom: number;
   mapType: MapType;
   onZoomIn: () => void;
@@ -51,6 +58,7 @@ export interface MapControlBarProps {
 }
 
 export const MapControlBar: FC<MapControlBarProps> = ({
+  copy,
   zoom,
   mapType,
   onZoomIn,
@@ -60,33 +68,33 @@ export const MapControlBar: FC<MapControlBarProps> = ({
   onToggleFullscreen,
 }) => (
   <MapControls data-testid="map-controls">
-    <Tooltip title="Zoom in" placement="left">
+    <Tooltip title={copy.zoomIn} placement="left">
       <ControlButton
         size="small"
         onClick={onZoomIn}
-        aria-label="Zoom in"
+        aria-label={copy.zoomIn}
         data-testid="zoom-in-button"
         disabled={zoom >= MAX_ZOOM}
       >
         <ZoomInIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Zoom out" placement="left">
+    <Tooltip title={copy.zoomOut} placement="left">
       <ControlButton
         size="small"
         onClick={onZoomOut}
-        aria-label="Zoom out"
+        aria-label={copy.zoomOut}
         data-testid="zoom-out-button"
         disabled={zoom <= MIN_ZOOM}
       >
         <ZoomOutIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Center map" placement="left">
+    <Tooltip title={copy.center} placement="left">
       <ControlButton
         size="small"
         onClick={onCenter}
-        aria-label="Center map"
+        aria-label={copy.center}
         data-testid="center-button"
       >
         <CenterIcon fontSize="small" />
@@ -96,17 +104,17 @@ export const MapControlBar: FC<MapControlBarProps> = ({
       <ControlButton
         size="small"
         onClick={onToggleMapType}
-        aria-label="Change map type"
+        aria-label={copy.mapType}
         data-testid="map-type-button"
       >
         <LayersIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Toggle fullscreen" placement="left">
+    <Tooltip title={copy.fullscreen} placement="left">
       <ControlButton
         size="small"
         onClick={onToggleFullscreen}
-        aria-label="Toggle fullscreen"
+        aria-label={copy.fullscreen}
         data-testid="fullscreen-button"
       >
         <FullscreenIcon fontSize="small" />

package/src/components/data-display/MapPreview/MapLayers.tsx

@@ -46,6 +46,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showSearch && (
         <MapSearchBar
+          label={settings.copy.search}
           value={search.searchValue}
           placeholder={settings.searchPlaceholder}
           isSearching={search.isSearching}
@@ -56,6 +57,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showControls && (
         <MapControlBar
+          copy={settings.copy}
           zoom={zoom}
           mapType={mapType}
           onZoomIn={controls.handleZoomIn}

package/src/components/data-display/MapPreview/MapPreview.types.ts

@@ -1,3 +1,5 @@
+import type { MapPreviewCopy } from '../../../copy';
+
 export type MapType = 'roadmap' | 'satellite' | 'hybrid' | 'terrain';
 
 export interface LatLng {
@@ -20,6 +22,14 @@ export interface HeatmapPoint {
 }
 
 export interface MapPreviewProps {
+  /**
+   * The control bar's six names and the search field's own. Every control is a
+   * glyph carrying a `title` and an `aria-label`, so this is both the tooltip
+   * and what a screen reader reads. REQUIRED — `searchPlaceholder` beside it
+   * shows the shape this replaces: an English default that read as
+   * configurable right up until nobody configured it.
+   */
+  copy: MapPreviewCopy;
   /** Map center coordinates */
   center?: { lat: number; lng: number };
   /** Legacy coordinates prop (use center instead) */