@12-apps/ui 6.78.4 → 6.80.0

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

@@ -68,6 +68,7 @@ export const CarouselChrome: React.FC<CarouselChromeProps> = ({
 
     {showIndicators && (
       <CarouselIndicators
+        copy={copy}
         count={items.length}
         activeIndex={activeIndex}
         onSelect={onSelect}

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

@@ -10,6 +10,7 @@ import React from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';
 
+import { EN_US_CAROUSEL_COPY } from '../../../en-US.data-display';
 import { neutralTones } from '../../../tokens/ink';
 import { accentFor, muiSize, rem } from '../../../tokens/scales';
 
@@ -51,26 +52,27 @@ const INDICATOR_POSITIONS = (theme: Theme): Record<IndicatorPosition, CSSObject>
 
 interface IndicatorProps {
   index: number;
+  label: string;
   isActive: boolean;
   color: Color;
   onSelect: () => void;
 }
 
 /** Attributes every indicator variant carries, whatever it draws. */
-const indicatorAttrs = (index: number, isActive: boolean) => ({
-  'aria-label': `Go to slide ${index + 1}`,
+const indicatorAttrs = (index: number, isActive: boolean, label: string) => ({
+  'aria-label': label,
   'data-testid': `carousel-indicator-${index}`,
   'data-active': isActive,
 });
 
-const LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {
+const LineIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
 
   return (
     <Box
       role="button"
       tabIndex={0}
-      {...indicatorAttrs(index, isActive)}
+      {...indicatorAttrs(index, isActive, label)}
       sx={{
         width: rem(theme, isActive ? 30 : 20),
         height: rem(theme, 3),
@@ -87,14 +89,14 @@ const LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSel
   );
 };
 
-const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {
+const NumberIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
 
   return (
     <Box
       role="button"
       tabIndex={0}
-      {...indicatorAttrs(index, isActive)}
+      {...indicatorAttrs(index, isActive, label)}
       sx={{
         width: rem(theme, 24),
         height: rem(theme, 24),
@@ -118,13 +120,13 @@ const NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onS
   );
 };
 
-const DotIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {
+const DotIndicator: React.FC<IndicatorProps> = ({ index, label, isActive, color, onSelect }) => {
   const theme = useTheme();
 
   return (
     <IconButton
       size="small"
-      {...indicatorAttrs(index, isActive)}
+      {...indicatorAttrs(index, isActive, label)}
       onClick={onSelect}
       sx={{
         p: 0.5,
@@ -151,13 +153,14 @@ const INDICATORS_DEFAULTS = {
 } satisfies Partial<CarouselIndicatorsProps>;
 
 export const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) => {
-  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(
+  const { count, activeIndex, onSelect, position, color, variant, className, style, copy } = withDefaults(
     props,
     INDICATORS_DEFAULTS,
   ) as CarouselIndicatorsProps & Required<Pick<CarouselIndicatorsProps, keyof typeof INDICATORS_DEFAULTS>>;
 
   const theme = useTheme();
   const Indicator = INDICATORS[variant] ?? DotIndicator;
+  const goToSlide = copy?.goToSlide ?? EN_US_CAROUSEL_COPY.goToSlide;
 
   return (
     <Box
@@ -176,6 +179,7 @@ export const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) =>
         <Indicator
           key={index}
           index={index}
+          label={goToSlide(index + 1)}
           isActive={index === activeIndex}
           color={color}
           onSelect={() => onSelect(index)}

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

@@ -59,6 +59,8 @@ export interface CarouselIndicatorsProps {
   position?: 'top' | 'bottom' | 'left' | 'right';
   color?: ColorValue;
   variant?: 'dots' | 'lines' | 'numbers';
+  /** Names each indicator through `goToSlide`; the English pack's wording when omitted. */
+  copy?: CarouselCopy;
   className?: string;
   style?: CSSProperties;
 }

package/src/components/data-display/Chip/Chip.native.tsx

@@ -22,6 +22,7 @@ import {
 } from './Chip.look.native';
 import { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';
 import type { ChipProps, ChipVariant } from './Chip.types.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { Icon } from '../../../icons/Icon.native';
 import { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
@@ -75,10 +76,12 @@ function DeleteSlot({
   variant,
   color,
   onDelete,
+  deleteLabel = EN_US_UI_LABELS.common.delete,
   disabled,
   testID,
 }: SlotArgs & {
   color: string;
+  deleteLabel?: string;
   onDelete?: () => void;
   disabled?: boolean;
   testID: string;
@@ -87,7 +90,7 @@ function DeleteSlot({
     <Pressable
       testID={testID}
       role="button"
-      aria-label="delete"
+      aria-label={deleteLabel}
       disabled={disabled}
       onPress={onDelete}
       style={chipDeleteSlotStyle(metrics, variant)}
@@ -106,6 +109,7 @@ interface ChipBodyProps extends SlotArgs {
   deletable?: boolean;
   disabled?: boolean;
   onDelete?: () => void;
+  deleteLabel?: string;
   idFor: (suffix: string) => string;
 }
 
@@ -121,6 +125,7 @@ function ChipBody({
   deletable,
   disabled,
   onDelete,
+  deleteLabel,
   idFor,
 }: ChipBodyProps): React.JSX.Element {
   const theme = useUiTheme();
@@ -147,6 +152,7 @@ function ChipBody({
           variant={variant}
           color={paint.deleteColor}
           onDelete={onDelete}
+          deleteLabel={deleteLabel}
           disabled={disabled}
           testID={idFor('delete')}
         />
@@ -208,6 +214,7 @@ export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
     onClick,
     onPress,
     onDelete,
+    deleteLabel,
     dataTestId,
     testID,
     style,
@@ -260,6 +267,7 @@ export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
         deletable={deletable}
         disabled={disabled}
         onDelete={onDelete}
+        deleteLabel={deleteLabel}
         idFor={makeTestId(chipId)}
       />
     </Pressable>

package/src/components/data-display/Chip/Chip.types.native.ts

@@ -24,5 +24,7 @@ export type { ChipBaseProps, ChipColor, ChipSize, ChipVariant } from './Chip.bas
 export type ChipProps = ChipBaseProps &
   Omit<PressableProps, keyof ChipBaseProps | 'style' | 'onPress'> & {
     onPress?: (event: GestureResponderEvent) => void;
+    /** The delete button's accessible name; defaults to `UI_LABELS['en-US'].common.delete`. */
+    deleteLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/data-display/DataViews/DeleteViewDialog.tsx

@@ -25,7 +25,7 @@ export function DeleteViewDialog({
   onClose,
   onConfirm,
   /** What this table holds, for the "your records are safe" line. */
-  entityLabel = "Os registros",
+  entityLabel,
   testIdPrefix = "view",
 }: {
   view: SavedViewSummary | null;
@@ -58,7 +58,7 @@ export function DeleteViewDialog({
           )}
 
           <Text variant="body" color="secondary" as="p">
-            {copy.deleteView.rowsUnaffected(entityLabel)}
+            {copy.deleteView.rowsUnaffected(entityLabel ?? copy.deleteView.entityFallback)}
           </Text>
 
           <Stack direction="row" spacing={1.5} sx={{ justifyContent: "flex-end", pt: 0.5 }}>

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

@@ -39,6 +39,8 @@ export interface DeleteViewCopy {
   sharedWarning: string;
   /** `entityLabel` is the host's own noun for the rows — never this package's. */
   rowsUnaffected(entityLabel: string): string;
+  /** `entityLabel` when the host names no noun for its rows: "The records". */
+  entityFallback: string;
   confirm: string;
   /** The way out, beside the destructive button. */
   cancel: string;
@@ -170,6 +172,12 @@ export interface DataViewsGridCopy extends DataGridCopy {
   emptyFilteredTitle: string;
   emptyFilteredHint: string;
   emptyFilteredAction: string;
+  /**
+   * The two orders every sortable column offers when a page supplies no sort
+   * fields of its own.
+   */
+  sortAscending: string;
+  sortDescending: string;
 }
 
 export interface DataViewsFiltersCopy {
@@ -252,6 +260,9 @@ export interface DataViewsSelectionCopy {
 export interface DataViewsNavCopy {
   mainView: string;
   defaultTag: string;
+  /** The glyphs' names beside a view that is pinned, or shared with the team. */
+  pinnedTag: string;
+  sharedTag: string;
   viewOptions(viewName: string): string;
   emptyHint: string;
   setDefault: string;

package/src/components/data-display/DataViews/data-views-grid-helpers.tsx

@@ -2,6 +2,7 @@
 
 import type { Theme } from "@mui/material/styles/index.js";
 
+import type { DataViewsGridCopy } from "./data-views-copy";
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { type GridColumn } from "../DataGrid";
 import { type SortFieldDefinition } from "../../layout/ContentToolbar";
@@ -133,9 +134,13 @@ function renderAutoKebab<T extends Record<string, unknown>>(
   );
 }
 
-/** Sort options derived from the sortable columns when a page supplies none. */
+/**
+ * Sort options derived from the sortable columns when a page supplies none,
+ * each offering the two orders in the host's words.
+ */
 export function defaultSortFields<T extends Record<string, unknown>>(
   columns: DataViewColumn<T>[],
+  copy: Pick<DataViewsGridCopy, "sortAscending" | "sortDescending">,
 ): SortFieldDefinition[] {
   return columns
     .filter(
@@ -150,8 +155,8 @@ export function defaultSortFields<T extends Record<string, unknown>>(
       value: col.id,
       label: col.header as string,
       orderOptions: [
-        { value: "asc", label: "Crescente" },
-        { value: "desc", label: "Decrescente" },
+        { value: "asc", label: copy.sortAscending },
+        { value: "desc", label: copy.sortDescending },
       ],
     }));
 }

package/src/components/data-display/DataViews/data-views-view-nav.tsx

@@ -114,10 +114,10 @@ export function ViewsList({
                 <StarOutlineRoundedIcon fontSize="small" sx={{ color: "warning.main" }} titleAccess={copy.nav.defaultTag} />
               )}
               {view.pinned && (
-                <PushPinOutlinedIcon fontSize="small" sx={{ color: "text.disabled" }} titleAccess="Fixada" />
+                <PushPinOutlinedIcon fontSize="small" sx={{ color: "text.disabled" }} titleAccess={copy.nav.pinnedTag} />
               )}
               {view.shared && (
-                <GroupOutlinedIcon fontSize="small" sx={{ color: "text.disabled" }} titleAccess="Compartilhada" />
+                <GroupOutlinedIcon fontSize="small" sx={{ color: "text.disabled" }} titleAccess={copy.nav.sharedTag} />
               )}
               {active && <CheckRoundedIcon fontSize="small" />}
             </Box>

package/src/components/data-display/DataViews/use-data-views-state.ts

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { type GridColumn } from "../DataGrid";
 import { type SortFieldDefinition } from "../../layout/ContentToolbar";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { filterRows } from "./data-views-filter";
 import {
   useColumnsWithActions,
@@ -316,6 +317,7 @@ export function useDataViewsState<T extends Record<string, unknown>>({
   scopeFieldId,
 }: UseDataViewsStateArgs<T>): DataViewsController<T> {
   useScopeConfigChecks(scopes, fields.map((field) => field.id), scopeFieldId, server !== undefined);
+  const copy = useDataViewsCopy();
   const { columnsWithActions, allColumnIds } = useColumnsWithActions(columns, {
     rowActions,
     rowActionsLeading,
@@ -347,7 +349,7 @@ export function useDataViewsState<T extends Record<string, unknown>>({
   );
   // Server mode is where `matched` is a PAGE — see `useSelection` (FUT-942).
   const selection = useSelection(matched, getRowId, { rememberOffPage: Boolean(server) });
-  const resolvedSortFields = sortFields ?? defaultSortFields(columns);
+  const resolvedSortFields = sortFields ?? defaultSortFields(columns, copy.grid);
 
   return {
     state,

package/src/components/data-display/EmptyState/EmptyState.native.tsx

@@ -39,6 +39,7 @@ import { alpha } from '../../../tokens/color';
 import { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';
 import type { UiTheme } from '../../../tokens/theme';
 import { Button } from '../../form/Button/Button.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 /** MUI's `h6` as an `h3`, medium weight, in the body ink, wrapping at 400px. */
 export function titleStyle(theme: UiTheme): TextStyle {
@@ -207,8 +208,8 @@ export const EmptyState: React.FC<EmptyStateProps> = React.memo(function EmptySt
     description,
     illustration,
     helpLink,
-    refreshLabel = 'Refresh',
-    createLabel = 'Create New',
+    refreshLabel = EN_US_UI_LABELS.emptyState.refresh,
+    createLabel = EN_US_UI_LABELS.emptyState.create,
     primaryAction: _primary,
     secondaryAction: _secondary,
     onCreate: _onCreate,

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

@@ -28,6 +28,7 @@ import {
 import type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';
 import { resolveTestId } from '../../../platform/test-id';
 import { rem, sxRem } from '../../../tokens/relative';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 /** The shared action list names its glyph; the web draws it with MUI's icon. */
 const ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {
@@ -165,8 +166,8 @@ export const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {
     description,
     illustration,
     helpLink,
-    refreshLabel = 'Refresh',
-    createLabel = 'Create New',
+    refreshLabel = EN_US_UI_LABELS.emptyState.refresh,
+    createLabel = EN_US_UI_LABELS.emptyState.create,
     className,
   } = props;
   const theme = useTheme();

package/src/components/data-display/ErrorState/ErrorState.native.tsx

@@ -24,6 +24,7 @@ import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';
 import type { UiTheme } from '../../../tokens/theme';
 import { Button } from '../../form/Button/Button.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -130,7 +131,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorSt
     message,
     title,
     onRetry,
-    retryLabel = 'Retry',
+    retryLabel = EN_US_UI_LABELS.errorState.retry,
     severity = 'error',
     icon,
     style,

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

@@ -25,6 +25,7 @@ import {
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
 import { resolveTestId } from '../../../platform/test-id';
 import { rem, sxRem } from '../../../tokens/relative';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -108,7 +109,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
     message,
     title,
     onRetry,
-    retryLabel = 'Retry',
+    retryLabel = EN_US_UI_LABELS.errorState.retry,
     severity = 'error',
     icon,
     className,

package/src/components/data-display/LazyImage/LazyImage.hooks.ts

@@ -68,7 +68,7 @@ const OWN_PROPS = new Set([
   'threshold', 'fadeIn', 'fadeInDuration', 'onLoad', 'onError', 'onLoadStart',
   'retryOnError', 'maxRetries', 'retryDelay', 'decoding', 'loading', 'fetchPriority',
   'skeletonProps', 'spinnerProps', 'sx', 'className', 'data-testid', 'aria-label',
-  'aria-describedby', 'role',
+  'aria-describedby', 'role', 'placeholderAlt', 'fallbackAlt',
 ]);
 
 export const imgPassThrough = (props: ResolvedLazyImageProps): Record<string, unknown> =>

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

@@ -3,9 +3,9 @@ import CircularProgress from '@mui/material/CircularProgress/index.js';
 import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { Skeleton } from '../../layout/Skeleton';
-import type { ResolvedLazyImageProps } from './LazyImage.hooks';
-import { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';
+import { imgPassThrough, resolveLazyImageProps, useLazyImage, type ResolvedLazyImageProps } from './LazyImage.hooks';
 import type { LazyImageProps } from './LazyImage.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sheen } from '../../../tokens/ink';
 import { rem } from '../../../tokens/relative';
 import { fieldHeight } from '../../../tokens/field-height';
@@ -238,7 +238,7 @@ const PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> =
   return (
     <StyledImage
       src={props.placeholder}
-      alt={`${props.alt} (loading)`}
+      alt={props.placeholderAlt ?? EN_US_UI_LABELS.lazyImage.loadingAlt(props.alt)}
       style={metrics}
       decoding={props.decoding}
       loading={props.lazy ? 'lazy' : props.loading}
@@ -286,7 +286,7 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
     return (
       <StyledImage
         src={fallback}
-        alt={`${alt} (fallback)`}
+        alt={props.fallbackAlt ?? EN_US_UI_LABELS.lazyImage.fallbackAlt(alt)}
         style={metrics}
         fadeIn={false}
         isLoaded={true}

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

@@ -14,6 +14,18 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
    */
   alt: string;
 
+  /**
+   * The placeholder image's `alt` while the real one loads. Defaults to
+   * `UI_LABELS['en-US'].lazyImage.loadingAlt(alt)`, i.e. `<alt> (loading)`.
+   */
+  placeholderAlt?: string;
+
+  /**
+   * The string `fallback` image's `alt` after the real one failed. Defaults to
+   * `UI_LABELS['en-US'].lazyImage.fallbackAlt(alt)`, i.e. `<alt> (fallback)`.
+   */
+  fallbackAlt?: string;
+
   /**
    * Width of the image. A number above 1 is design px, scaled with the theme's
    * type scale. A number above 0 and up to 1 is a fraction of the

package/src/components/data-display/LoadingState/LoadingState.base.ts

@@ -1,3 +1,4 @@
+import type { LoadingStateLabels } from '../../../copy/labels';
 import type { SizeValue } from '../../../tokens/vocabulary';
 
 /**
@@ -22,6 +23,13 @@ export interface LoadingStateBaseProps {
    */
   message?: string;
 
+  /**
+   * The accessible name while no `message` is given, per variant. Optional: a
+   * host that names nothing hears "Loading content" / "Loading", as it always
+   * did; a pt-BR host passes `UI_LABELS['pt-BR'].loadingState`.
+   */
+  labels?: Partial<LoadingStateLabels>;
+
   /**
    * Size of the loading indicator
    * @default 'md'

package/src/components/data-display/LoadingState/LoadingState.native.tsx

@@ -28,6 +28,9 @@ import {
   SPINNER_SIZES,
 } from './LoadingState.metrics';
 import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types.native';
+import type { LoadingStateLabels } from '../../../copy/labels';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import { alpha } from '../../../tokens/color';
@@ -51,6 +54,7 @@ function spinnerSize(px: number): number | 'small' | 'large' {
 
 interface ViewArgs {
   message?: string;
+  labels: LoadingStateLabels;
   size: LoadingStateSize;
   skeletonRows: number;
   testIds: LoadingStateTestIds;
@@ -96,13 +100,13 @@ function SkeletonRows({ size, skeletonRows, testIds }: Pick<ViewArgs, 'size' | '
   );
 }
 
-function SkeletonView({ message, size, skeletonRows, testIds, style, rest }: ViewArgs): React.JSX.Element {
+function SkeletonView({ message, labels, size, skeletonRows, testIds, style, rest }: ViewArgs): React.JSX.Element {
   const theme = useUiTheme();
   return (
     <View
       role="status"
       aria-busy
-      aria-label={message || 'Loading content'}
+      aria-label={message || labels.skeleton}
       testID={testIds.base}
       style={[styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style]}
       {...rest}
@@ -118,13 +122,13 @@ function SkeletonView({ message, size, skeletonRows, testIds, style, rest }: Vie
   );
 }
 
-function SpinnerView({ message, size, testIds, style, rest }: ViewArgs): React.JSX.Element {
+function SpinnerView({ message, labels, size, testIds, style, rest }: ViewArgs): React.JSX.Element {
   const theme = useUiTheme();
   return (
     <View
       role="status"
       aria-busy
-      aria-label={message || 'Loading'}
+      aria-label={message || labels.spinner}
       testID={testIds.base}
       style={[
         styles.spinner,
@@ -149,9 +153,10 @@ function SpinnerView({ message, size, testIds, style, rest }: ViewArgs): React.J
 
 export const LoadingState: React.FC<LoadingStateProps> = React.memo(function LoadingState(rawProps) {
   const resolved = resolveLoadingStateProps(rawProps);
-  const { variant, message, size, skeletonRows, style, ...others } = resolved;
+  const { variant, message, labels, size, skeletonRows, style, ...others } = resolved;
   const args: ViewArgs = {
     message,
+    labels: resolveLabels(EN_US_UI_LABELS.loadingState, labels),
     size,
     skeletonRows,
     style,

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

@@ -25,11 +25,15 @@ import {
   SPINNER_PADDING_UNITS,
 } from './LoadingState.metrics';
 import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';
+import type { LoadingStateLabels } from '../../../copy/labels';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { resolveTestId } from '../../../platform/test-id';
 import { rem } from '../../../tokens/relative';
+import { resolveLabels } from '../../../utils/resolve-labels';
 
 interface ViewProps {
   message?: string;
+  labels: LoadingStateLabels;
   size: LoadingStateSize;
   skeletonRows: number;
   className?: string;
@@ -55,6 +59,7 @@ const LoadingMessage: React.FC<{
 
 const SkeletonView: React.FC<ViewProps> = ({
   message,
+  labels,
   size,
   skeletonRows,
   className,
@@ -66,7 +71,7 @@ const SkeletonView: React.FC<ViewProps> = ({
     <Box
       role="status"
       aria-busy="true"
-      aria-label={message || 'Loading content'}
+      aria-label={message || labels.skeleton}
       className={className}
       data-testid={testIds.base}
       sx={{
@@ -98,14 +103,14 @@ const SkeletonView: React.FC<ViewProps> = ({
   );
 };
 
-const SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {
+const SpinnerView: React.FC<ViewProps> = ({ message, labels, size, className, testIds }) => {
   const theme = useTheme();
 
   return (
     <Box
       role="status"
       aria-busy="true"
-      aria-label={message || 'Loading'}
+      aria-label={message || labels.spinner}
       className={className}
       data-testid={testIds.base}
       sx={{
@@ -132,6 +137,7 @@ export const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) =
   const { variant, message, size, skeletonRows, className } = resolved;
   const viewProps: ViewProps = {
     message,
+    labels: resolveLabels(EN_US_UI_LABELS.loadingState, resolved.labels),
     size,
     skeletonRows,
     className,

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

@@ -11,6 +11,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
+import { resolveMapCopy } from './MapPreview.helpers';
 import type { MapType } from './MapPreview.types';
 import type { MapPreviewCopy } from '../../../copy';
 import { rem } from '../../../tokens/relative';
@@ -70,7 +71,9 @@ export const MapControlBar: FC<MapControlBarProps> = ({
   onCenter,
   onToggleMapType,
   onToggleFullscreen,
-}) => (
+}) => {
+  const text = resolveMapCopy(copy);
+  return (
   <MapControls data-testid="map-controls">
     <Tooltip title={copy.zoomIn} placement="left">
       <ControlButton
@@ -104,7 +107,7 @@ export const MapControlBar: FC<MapControlBarProps> = ({
         <CenterIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title={`Map type: ${mapType}`} placement="left">
+    <Tooltip title={text.mapTypeTitle(text.mapTypeNames[mapType])} placement="left">
       <ControlButton
         size="small"
         onClick={onToggleMapType}
@@ -125,4 +128,5 @@ export const MapControlBar: FC<MapControlBarProps> = ({
       </ControlButton>
     </Tooltip>
   </MapControls>
-);
+  );
+};

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

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { HEATMAP_VIEWBOX } from './MapPreview.constants';
-import type { ResolvedMapPreviewProps } from './MapPreview.helpers';
+import { resolveMapCopy, type ResolvedMapPreviewProps } from './MapPreview.helpers';
 import type { MapType } from './MapPreview.types';
 import { MapControlBar } from './MapControlBar';
 import { HeatmapOverlay, RouteOverlay } from './MapOverlays';
@@ -47,7 +47,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
         <MapSearchBar
           label={settings.copy.search}
           value={search.searchValue}
-          placeholder={settings.searchPlaceholder}
+          placeholder={settings.searchPlaceholder ?? resolveMapCopy(settings.copy).searchPlaceholder}
           isSearching={search.isSearching}
           onChange={search.setSearchValue}
           onSubmit={search.handleSearch}