@12-apps/ui 6.7.0 → 6.8.0

package/src/components/form/UploadButton/UploadButton.types.ts

@@ -1,6 +1,14 @@
 import type { ReactNode } from 'react';
 
+import type { UploadButtonCopy } from '../../../copy';
+
 export interface UploadButtonProps {
+  /**
+   * What this control says beyond the host's own button label. REQUIRED: three
+   * of the four are announcements only a screen reader ever receives, which is
+   * how they stayed English through every language pass.
+   */
+  copy: UploadButtonCopy;
   /** Button variant style */
   variant?: 'default' | 'outline' | 'ghost' | 'dropzone';
 

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

@@ -28,6 +28,8 @@ type SelectionClusterProps = Pick<
   | 'clearAllTestId'
   | 'edgeAlign'
   | 'selectAllLabel'
+  | 'selectAllText'
+  | 'clearAllText'
 >;
 
 /** The left cluster: Select All + (when selecting) Clear All / count / actions. */
@@ -41,6 +43,8 @@ function SelectionCluster({
   clearAllTestId,
   edgeAlign = false,
   selectAllLabel,
+  selectAllText,
+  clearAllText,
 }: SelectionClusterProps): React.JSX.Element {
   const actionsSlot = actions !== undefined && (
     <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>
@@ -68,7 +72,7 @@ function SelectionCluster({
         data-testid={selectAllTestId}
         sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}
       >
-        Select All
+        {selectAllText}
       </Button>
       <Checkbox
         size="small"
@@ -88,7 +92,7 @@ function SelectionCluster({
             data-testid={clearAllTestId}
             sx={selectionButtonSx}
           >
-            Clear All
+            {clearAllText}
           </Button>
           <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
           <Typography
@@ -216,6 +220,8 @@ export function ContentToolbar({
   edgeAlign = false,
   exclusiveSelection = false,
   selectAllLabel,
+  selectAllText,
+  clearAllText,
 }: ContentToolbarProps): React.JSX.Element {
   // Under `exclusiveSelection` the two states are alternatives, not neighbours:
   // browsing shows the controls and no checkbox, selecting shows the checkbox
@@ -241,6 +247,8 @@ export function ContentToolbar({
     >
       {showSelection && (
         <SelectionCluster
+          selectAllText={selectAllText}
+          clearAllText={clearAllText}
           hasSelection={hasSelection}
           selectedCount={selectedCount}
           selectAll={selectAll}

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

@@ -4,6 +4,9 @@ import type { ReactNode } from 'react';
 
 /** Props for {@link ContentToolbar} — the shared content-page toolbar. */
 export interface ContentToolbarProps {
+  /** The two bulk-selection buttons, spelled out where the bar has room. */
+  selectAllText: string;
+  clearAllText: string;
   /**
    * The select-all checkbox's accessible name. It carries no visible label of
    * its own, so this is the only thing a screen reader gets for it. REQUIRED:
@@ -61,6 +64,8 @@ export type ViewMode = 'grid' | 'list';
 
 /** Props for {@link ViewSelector}. */
 export interface ViewSelectorProps {
+  /** The card-size control's accessible name — it renders icons only. */
+  cardSizeLabel: string;
   /** Current view mode. */
   viewMode: ViewMode;
   /** Called when the view mode changes. */
@@ -99,6 +104,10 @@ export interface SortFieldDefinition<TField extends string = string> {
 
 /** Props for {@link SortByDropdown}. */
 export interface SortByDropdownProps<TField extends string = string> {
+  /** The menu's two section headings, and the trigger's own prefix. */
+  orderHeading: string;
+  sortHeading: string;
+  triggerPrefix: string;
   fields: SortFieldDefinition<TField>[];
   activeField: TField;
   activeOrder?: string;
@@ -126,6 +135,9 @@ export interface MultiSelectExtraOption {
 
 /** Props for {@link MultiSelectDropdown}. */
 export interface MultiSelectDropdownProps<TValue extends string = string> {
+  /** The extra-options section heading, and the clear-selection action. */
+  extraOptionsHeading: string;
+  clearText: string;
   /** Label before the trigger (e.g. "Content Type"). */
   label: string;
   options: MultiSelectOption<TValue>[];

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

@@ -62,6 +62,8 @@ export function MultiSelectDropdown<TValue extends string = string>({
   onClear,
   allLabel = 'All',
   clearLabel,
+  clearText,
+  extraOptionsHeading,
   extraOptions,
   searchable,
   searchPlaceholder = 'Search…',
@@ -111,7 +113,7 @@ export function MultiSelectDropdown<TValue extends string = string>({
     <>
       {renderTrigger()}
       <MultiSelectMenu
-        anchorEl={anchorEl}
+        extraOptionsHeading={extraOptionsHeading} clearText={clearText} anchorEl={anchorEl}
         open={open}
         close={close}
         options={options}
@@ -184,6 +186,8 @@ interface MultiSelectMenuProps<TValue extends string> {
   onQueryChange: (value: string) => void;
   searchPlaceholder: string;
   noResultsLabel: string;
+  extraOptionsHeading: string;
+  clearText: string;
   /** Match the menu width to the trigger and left-align it (stacked select). */
   matchAnchorWidth?: boolean;
   testId?: string;
@@ -211,6 +215,8 @@ function MultiSelectMenu<TValue extends string>({
   selected,
   onToggle,
   extraOptions,
+  extraOptionsHeading,
+  clearText,
   clearDisabled,
   onClear,
   showSearch,
@@ -267,25 +273,30 @@ function MultiSelectMenu<TValue extends string>({
         ? [
             <Divider key="extra-divider" />,
             <ListSubheader key="extra-label" sx={{ px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600 }}>
-              Options
+              {extraOptionsHeading}
             </ListSubheader>,
             ...extraOptions.map((extra) => (
               <CheckboxRow key={extra.id} label={extra.label} checked={extra.checked} onToggle={(next) => extra.onCheckedChange(next)} />
             )),
           ]
         : null}
-      <MenuClearFooter clearDisabled={clearDisabled} onClear={onClear} close={close} testId={testId} />
+      <MenuClearFooter
+        clearText={clearText} clearDisabled={clearDisabled} onClear={onClear}
+        close={close} testId={testId}
+      />
     </Menu>
   );
 }
 
 /** The bottom "Clear" footer that resets the selection and closes the menu. */
 function MenuClearFooter({
+  clearText,
   clearDisabled,
   onClear,
   close,
   testId,
 }: {
+  clearText: string;
   clearDisabled: boolean;
   onClear: () => void;
   close: () => void;
@@ -320,7 +331,7 @@ function MenuClearFooter({
         }}
         sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: '0.75rem', fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}
       >
-        Clear
+        {clearText}
       </Button>
     </Box>
   );

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

@@ -103,6 +103,8 @@ interface SortMenuProps<TField extends string> {
   fields: SortFieldDefinition<TField>[];
   activeField: TField;
   onFieldSelect: (field: TField) => void;
+  orderHeading: string;
+  sortHeading: string;
 }
 
 /** The Order + Sort sections of the dropdown menu. */
@@ -116,6 +118,8 @@ function SortMenu<TField extends string>({
   fields,
   activeField,
   onFieldSelect,
+  orderHeading,
+  sortHeading,
 }: SortMenuProps<TField>): React.JSX.Element {
   return (
     <Menu
@@ -128,7 +132,7 @@ function SortMenu<TField extends string>({
     >
       {orderOptions.length > 0 && [
         <ListSubheader key="order-label" sx={sectionLabelSx}>
-          Order
+          {orderHeading}
         </ListSubheader>,
         ...orderOptions.map((option) => (
           <SortRow
@@ -141,7 +145,7 @@ function SortMenu<TField extends string>({
         )),
         <Divider key="order-divider" />,
       ]}
-      <ListSubheader sx={sectionLabelSx}>Sort</ListSubheader>
+      <ListSubheader sx={sectionLabelSx}>{sortHeading}</ListSubheader>
       {fields.map((field) => (
         <SortRow
           key={field.value}
@@ -167,6 +171,9 @@ export function SortByDropdown<TField extends string = string>({
   activeOrder,
   onFieldChange,
   onOrderChange,
+  orderHeading,
+  sortHeading,
+  triggerPrefix,
   'data-testid': testId,
 }: SortByDropdownProps<TField>): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -195,7 +202,7 @@ export function SortByDropdown<TField extends string = string>({
         component="span"
         sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: '0.875rem' }}
       >
-        Sort By:
+        {triggerPrefix}
       </Typography>
       <Button
         variant="text"
@@ -219,6 +226,8 @@ export function SortByDropdown<TField extends string = string>({
         <ChevronDownIcon sx={{ fontSize: 14 }} />
       </Button>
       <SortMenu
+        orderHeading={orderHeading}
+        sortHeading={sortHeading}
         anchorEl={anchorEl}
         open={open}
         close={close}

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

@@ -25,6 +25,7 @@ export function ViewSelector({
   onViewModeChange,
   zoom,
   onZoomChange,
+  cardSizeLabel,
 }: ViewSelectorProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
@@ -37,7 +38,7 @@ export function ViewSelector({
         <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>
           <Slider
             data-testid="resize-card-slider"
-            aria-label="Card size"
+            aria-label={cardSizeLabel}
             value={zoom[0] ?? 0}
             onChange={(_, value) => onZoomChange([value as number])}
             min={0}

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

@@ -75,6 +75,8 @@ interface DashboardSettingsBaseProps {
  * dialog rendering `children`. Mutually exclusive with link mode.
  */
 export interface DashboardSettingsDialogProps extends DashboardSettingsBaseProps {
+  /** The dialog's close button — a glyph with no visible label. REQUIRED. */
+  closeLabel: string;
   /** Dialog title. Defaults to `"Settings"`. */
   title?: ReactNode;
   /** Dialog body. */
@@ -89,6 +91,8 @@ export interface DashboardSettingsDialogProps extends DashboardSettingsBaseProps
  * exclusive with dialog mode, so `title`/`children` are not accepted.
  */
 export interface DashboardSettingsLinkProps extends DashboardSettingsBaseProps {
+  /** Link mode opens no dialog, so there is no close button to name. */
+  closeLabel?: never;
   /** Link target settings route. */
   href: string;
   /**

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

@@ -101,6 +101,7 @@ DashboardFilterToggle.displayName = 'Dashboard.FilterToggle';
 
 export const DashboardSettings = ({
   title = 'Settings',
+  closeLabel,
   children,
   ariaLabel = 'Settings',
   href,
@@ -146,7 +147,7 @@ export const DashboardSettings = ({
       <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth data-testid={`${testIdPrefix}-settings-dialog`}>
         <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
           {title}
-          <IconButton aria-label="Close" size="small" onClick={() => setOpen(false)}>
+          <IconButton aria-label={closeLabel} size="small" onClick={() => setOpen(false)}>
             <CloseIcon fontSize="small" />
           </IconButton>
         </DialogTitle>

package/src/components/layout/ScrollArea/ScrollArea.tsx

@@ -148,9 +148,18 @@ const LoadingOverlay: FC = () => (
   </Box>
 );
 
-const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void }> = ({
+// The label is guarded at the call site rather than defaulted: the props union
+// already makes it required alongside `scrollToTopButton`, and a fab with an
+// empty accessible name is the exact failure this port exists to remove.
+const ScrollToTopFab: FC<{
+  visible: boolean;
+  glass: boolean;
+  scrollToTopLabel: string;
+  onClick: () => void;
+}> = ({
   visible,
   glass,
+  scrollToTopLabel,
   onClick }) => {
   const theme = useTheme();
 
@@ -158,7 +167,7 @@ const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void
     <Zoom in={visible}>
       <Fab
         size="small"
-        aria-label="Scroll to top"
+        aria-label={scrollToTopLabel}
         onClick={onClick}
         sx={{
           position: 'absolute',
@@ -183,6 +192,8 @@ const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void
 export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
   const resolved = resolveScrollAreaProps(componentProps);
   const {
+    regionLabel,
+    scrollToTopLabel,
     children,
     width,
     height,
@@ -231,6 +242,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
     >
       <ScrollViewport
         {...resolved}
+        regionLabel={regionLabel}
         shouldShowScrollbar={shouldShowScrollbar}
         setScrollRef={setScrollRef}
         onScroll={handleScroll}
@@ -246,8 +258,9 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
 
       {loading && <LoadingOverlay />}
 
-      {scrollToTopButton && !disabled && !loading && (
+      {scrollToTopButton && scrollToTopLabel && !disabled && !loading && (
         <ScrollToTopFab
+          scrollToTopLabel={scrollToTopLabel}
           visible={showScrollToTop}
           glass={variant === 'glass'}
           onClick={scrollToTop}

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

@@ -5,7 +5,25 @@ export type ScrollOrientation = 'vertical' | 'horizontal' | 'both';
 export type ScrollbarSize = 'thin' | 'medium' | 'thick';
 export type ScrollAreaVariant = 'default' | 'overlay' | 'glass';
 
-export interface ScrollAreaProps extends Omit<BoxProps, 'ref'> {
+/**
+ * Conditionally-required copy for the scroll-to-top control. The fab only exists
+ * when `scrollToTopButton` is set, so only that side of the union owes a name —
+ * a host that never shows the button is not asked for a word it cannot place.
+ */
+type ScrollAreaScrollToTop =
+  | { scrollToTopButton?: false; scrollToTopLabel?: never }
+  | { scrollToTopButton: true; scrollToTopLabel: string };
+
+export type ScrollAreaProps = ScrollAreaBase & ScrollAreaScrollToTop;
+
+export interface ScrollAreaBase extends Omit<BoxProps, 'ref'> {
+  /**
+   * The scroll region's accessible name. REQUIRED: the viewport is a
+   * `role="region"`, so a screen reader announces this word and no other. The
+   * package cannot know whether it wraps a menu, a chat log or a table.
+   */
+  regionLabel: string;
+
   /** Content to be rendered inside the scrollable area */
   children: ReactNode;
 
@@ -45,9 +63,6 @@ export interface ScrollAreaProps extends Omit<BoxProps, 'ref'> {
   /** Scroll event handler */
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 
-  /** Show scroll-to-top button */
-  scrollToTopButton?: boolean;
-
   /** Threshold for showing scroll-to-top button (in pixels) */
   scrollToTopThreshold?: number;
 

package/src/components/layout/ScrollArea/ScrollViewport.tsx

@@ -20,6 +20,8 @@ export interface ScrollViewportProps
     | 'loading'
     | 'smoothScroll'
   > {
+  /** The scroll region's accessible name. REQUIRED. */
+  regionLabel: string;
   children: ReactNode;
   shouldShowScrollbar: boolean;
   setScrollRef: (node: HTMLDivElement | null) => void;
@@ -29,6 +31,7 @@ export interface ScrollViewportProps
 // The element that actually scrolls: its own overflow and scrollbar styling,
 // plus the disabled and loading treatments.
 export const ScrollViewport: FC<ScrollViewportProps> = ({
+  regionLabel,
   children,
   height,
   maxHeight,
@@ -52,7 +55,7 @@ export const ScrollViewport: FC<ScrollViewportProps> = ({
       ref={setScrollRef}
       onScroll={onScroll}
       role="region"
-      aria-label="Scrollable content"
+      aria-label={regionLabel}
       aria-busy={loading}
       tabIndex={disabled ? -1 : 0}
       sx={{

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -54,9 +54,10 @@ export function TableFilter({
   open,
   onOpenChange,
   hasActiveFilters = false,
+  copy,
 }: TableFilterProps): React.JSX.Element {
   return (
-    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters }}>
+    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters, copy }}>
       {children}
     </TableFilterContext.Provider>
   );
@@ -97,7 +98,7 @@ const TableFilterPanel = ({
   ariaLabel = 'Filters',
   clearTestId,
 }: TableFilterPanelProps): React.JSX.Element => {
-  const { open } = useTableFilterContext();
+  const { open, copy } = useTableFilterContext();
   return (
     <Box
       component="aside"
@@ -142,7 +143,7 @@ const TableFilterPanel = ({
               onClick={onClearAll}
               sx={{ fontSize: '0.75rem', color: 'text.secondary' }}
             >
-              Clear All Filters
+              {copy.clearAllFilters}
             </Link>
           </Box>
           {children}
@@ -160,6 +161,7 @@ const TableFilterKeyword = ({
   label = 'Filter by keyword',
   testId,
 }: TableFilterKeywordProps): React.JSX.Element => {
+  const { copy } = useTableFilterContext();
   const [draft, setDraft] = useState(value);
   const prevValue = useRef(value);
   if (prevValue.current !== value) {
@@ -204,7 +206,7 @@ const TableFilterKeyword = ({
               <InputAdornment position="end">
                 <IconButton
                   size="small"
-                  aria-label="Clear keyword filter"
+                  aria-label={copy.clearKeyword}
                   data-testid={testId ? `${testId}-clear` : undefined}
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={clearKeyword}
@@ -326,12 +328,18 @@ const TableFilterRangeField = ({
   onChange,
   unit,
   step,
-  minPlaceholder = 'min',
-  maxPlaceholder = 'max',
+  minPlaceholder,
+  maxPlaceholder,
   invalidLabel,
   testId,
 }: TableFilterRangeFieldProps): React.JSX.Element => {
+  const { copy } = useTableFilterContext();
   const invalid = isRangeInverted(value);
+  // A field may override any of the three; unset, they come from the root's
+  // table. Neither path reaches an English literal in this package.
+  const minText = minPlaceholder ?? copy.rangeMin;
+  const maxText = maxPlaceholder ?? copy.rangeMax;
+  const invalidText = invalidLabel ?? copy.invalidRange;
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>
       <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>
@@ -342,9 +350,9 @@ const TableFilterRangeField = ({
         <RangeBound
           bound={value.min}
           error={invalid}
-          placeholder={minPlaceholder}
+          placeholder={minText}
           step={step}
-          ariaLabel={`${label} ${minPlaceholder}`}
+          ariaLabel={`${label} ${minText}`}
           testId={testId ? `${testId}-min` : undefined}
           onChange={(min) => onChange({ ...value, min })}
         />
@@ -354,9 +362,9 @@ const TableFilterRangeField = ({
         <RangeBound
           bound={value.max}
           error={invalid}
-          placeholder={maxPlaceholder}
+          placeholder={maxText}
           step={step}
-          ariaLabel={`${label} ${maxPlaceholder}`}
+          ariaLabel={`${label} ${maxText}`}
           testId={testId ? `${testId}-max` : undefined}
           onChange={(max) => onChange({ ...value, max })}
         />
@@ -367,7 +375,7 @@ const TableFilterRangeField = ({
           data-testid={testId ? `${testId}-error` : undefined}
           sx={{ fontSize: '0.7rem', color: 'error.main' }}
         >
-          {invalidLabel}
+          {invalidText}
         </Typography>
       )}
     </Box>

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

@@ -1,8 +1,16 @@
 import type { ReactNode } from 'react';
 
+import type { TableFilterCopy } from '../../../copy';
+
 /** Props for the `<TableFilter>` root (provider). */
 export interface TableFilterProps {
   children: ReactNode;
+  /**
+   * Every word this compound renders. REQUIRED: this package ships no default
+   * copy, and the two ends of a range plus the panel's clear link are read by
+   * the store's own customer, in the store's own language.
+   */
+  copy: TableFilterCopy;
   /** Whether the panel is open. */
   open: boolean;
   /** Toggle the panel. */

package/src/components/layout/TableFilter/TableFilterContext.tsx

@@ -2,6 +2,8 @@
 
 import { createContext, useContext } from 'react';
 
+import type { TableFilterCopy } from '../../../copy';
+
 /** Open/close + active state shared by every `TableFilter` compound part. */
 export interface TableFilterContextValue {
   /** Whether the filter panel is expanded. */
@@ -10,6 +12,14 @@ export interface TableFilterContextValue {
   onOpenChange: (open: boolean) => void;
   /** When true, the trigger shows a filled indicator dot. */
   hasActiveFilters: boolean;
+  /**
+   * Every word the compound's parts render. Carried on the root's context
+   * rather than on each part's props because the parts are a TREE — a host
+   * composes `Panel`, `Keyword` and the fields under one root, and asking each
+   * one separately for its share of the same table is the shape that makes a
+   * host answer four times and get one of them wrong.
+   */
+  copy: TableFilterCopy;
 }
 
 /** Backing context. `null` outside a `<TableFilter>` root. */

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
 import type { BreadcrumbItem } from './Breadcrumbs.types';
+import type { BreadcrumbCopy } from '../../../copy';
 
 const BreadcrumbLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
@@ -96,10 +97,12 @@ const CollapsedMenu = ({
   items,
   size,
   visualStyle,
+  copy,
   dataTestId }: {
   items: BreadcrumbItem[];
   size: string;
   visualStyle?: string;
+  copy: BreadcrumbCopy;
   dataTestId?: string;
 }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -115,7 +118,7 @@ const CollapsedMenu = ({
 
   return (
     <>
-      <Tooltip title="Show more" arrow>
+      <Tooltip title={copy.showMore} arrow>
         <BreadcrumbLink
           onClick={handleClick}
           size={size}
@@ -174,10 +177,11 @@ const crumbIcon = ({
   );
 };
 
-const EllipsisCrumb: React.FC<{ label: string; dataTestId?: string }> = ({
+const EllipsisCrumb: React.FC<{ label: string; copy: BreadcrumbCopy; dataTestId?: string }> = ({
   label,
+  copy,
   dataTestId }) => (
-  <Tooltip title="More items" arrow>
+  <Tooltip title={copy.moreItems} arrow>
             <Box
               sx={{
                 px: 1,
@@ -237,6 +241,7 @@ export const BreadcrumbEntry: React.FC<{
   iconSize: 'small' | 'medium';
   size: string;
   variant: string;
+  copy: BreadcrumbCopy;
   dataTestId?: string;
 }> = ({
   item,
@@ -249,6 +254,7 @@ export const BreadcrumbEntry: React.FC<{
   iconSize,
   size,
   variant,
+  copy,
   dataTestId }) => {
   const testId = makeTestId(dataTestId);
   const isLast = index === itemCount - 1;
@@ -262,6 +268,7 @@ export const BreadcrumbEntry: React.FC<{
     return (
       <>
         <CollapsedMenu
+          copy={copy}
           items={collapsedItems}
           size={size}
           visualStyle={variant}
@@ -273,7 +280,7 @@ export const BreadcrumbEntry: React.FC<{
   }
 
   if (item.isEllipsis) {
-    return <EllipsisCrumb label={item.label} dataTestId={dataTestId} />;
+    return <EllipsisCrumb copy={copy} label={item.label} dataTestId={dataTestId} />;
   }
 
   const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -145,6 +145,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
       collapseBehavior,
       mobileMaxItems,
       ariaLabel,
+      copy,
       dataTestId,
       ...props
     } = resolveProps(componentProps);
@@ -181,6 +182,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
       >
         {displayItems.map((item, index) => (
           <BreadcrumbEntry
+            copy={copy}
             key={index}
             item={item}
             index={index}

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

@@ -1,6 +1,7 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material';
 import type { ReactNode } from 'react';
+import type { BreadcrumbCopy } from '../../../copy';
 
 export interface BreadcrumbItem {
   /**
@@ -57,6 +58,8 @@ export interface BreadcrumbItem {
 }
 
 export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'> {
+  /** The overflow control's tooltip, in its two spellings. REQUIRED. */
+  copy: BreadcrumbCopy;
   /**
    * The visual variant of the breadcrumbs container
    * - default: No special styling