@12-apps/ui 6.78.3 → 6.79.0

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -10,9 +10,9 @@ import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
-import React, {  } from 'react';
+import React, { useMemo } from 'react';
 
-import { countries } from './countries';
+import { countriesByDisplayName, countryDisplayName } from './countries';
 import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
@@ -144,11 +144,10 @@ const PhoneField: React.FC<{
 
 const PHONE_INPUT_DEFAULTS = {
   variant: 'outlined',
-  label: 'Phone Number',
-  placeholder: 'Enter phone number',
   icon: <PhoneIcon />,
   defaultValue: '',
-  countryCode: 'US',
+  // The owner's market: a host that names no country starts at Brazil.
+  countryCode: 'BR',
   floating: false,
   error: false,
   disabled: false,
@@ -163,6 +162,12 @@ const definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>
     Object.entries(props).filter(([, value]) => value !== undefined),
   ) as Partial<PhoneInputProps>;
 
+// The label and placeholder a host passes as props win; then the copy pack's;
+// then the English the field has always shown.
+const copyDefaults = (copy: PhoneInputCopy): Pick<PhoneInputProps, 'label' | 'placeholder'> => ({
+  label: copy.label ?? 'Phone Number',
+  placeholder: copy.placeholder ?? 'Enter phone number' });
+
 const CountryAdornment: React.FC<{
   country?: CountryData;
   menuOpen: boolean;
@@ -227,8 +232,10 @@ const CountryPicker: React.FC<{
   selectedCode?: CountryData['code'];
   onClose: () => void;
   onSelect: (country: CountryData) => void;
-}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {
+  countryName?: PhoneInputCopy['countryName'];
+}> = ({ anchorEl, selectedCode, onClose, onSelect, countryName }) => {
   const theme = useTheme();
+  const listed = useMemo(() => countriesByDisplayName(countryName), [countryName]);
 
   return (
         <CountryMenu
@@ -243,7 +250,7 @@ const CountryPicker: React.FC<{
             horizontal: 'left' }}
           data-testid="country-menu"
         >
-          {countries.map((country) => (
+          {listed.map((country) => (
             <MenuItem
               key={country.code}
               onClick={() => onSelect(country)}
@@ -259,7 +266,7 @@ const CountryPicker: React.FC<{
                 </Typography>
               </ListItemIcon>
               <ListItemText
-                primary={country.name}
+                primary={country.displayName}
                 secondary={country.dial}
                 primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}
                 secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}
@@ -315,7 +322,10 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     errorMessage,
     disabled,
     required,
-    fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
+    fullWidth } = {
+    ...PHONE_INPUT_DEFAULTS,
+    ...copyDefaults(copy),
+    ...definedProps(props) };
   const {
     value,
     selectedCountry,
@@ -337,7 +347,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     value,
     isFocused,
     helper,
-    countryName: selectedCountry?.name,
+    countryName: selectedCountry && countryDisplayName(selectedCountry, copy.countryName),
     copy });
 
   const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
@@ -371,6 +381,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
         selectedCode={selectedCountry?.code}
         onClose={handleCountryClose}
         onSelect={handleCountrySelect}
+        countryName={copy.countryName}
       />
     </Box>
   );

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

@@ -13,6 +13,7 @@ export interface PhoneInputProps {
   placeholder?: string;
   icon?: React.ReactNode;
   defaultValue?: string;
+  /** The country the picker starts on. @default 'BR' */
   countryCode?: CountryCode;
   floating?: boolean;
   onChange?: (value: string, isValid: boolean, countryCode?: CountryCode) => void;

package/src/components/form/PhoneInput/countries.ts

@@ -2,7 +2,8 @@ import type { CountryCode } from 'libphonenumber-js';
 
 import type { CountryData } from './PhoneInput.types';
 
-// Dial codes and flags for the countries the input offers, sorted by name.
+// Dial codes and flags for the countries the input offers, sorted by name. The
+// `name` is the English one; the picker shows `copy.countryName` when a pack has it.
 export const countries: CountryData[] = [
   { code: 'US' as CountryCode, name: 'United States', dial: '+1', flag: '🇺🇸' },
   { code: 'GB' as CountryCode, name: 'United Kingdom', dial: '+44', flag: '🇬🇧' },
@@ -52,3 +53,19 @@ export const countries: CountryData[] = [
   { code: 'AE' as CountryCode, name: 'United Arab Emirates', dial: '+971', flag: '🇦🇪' },
   { code: 'SA' as CountryCode, name: 'Saudi Arabia', dial: '+966', flag: '🇸🇦' },
 ].sort((a, b) => a.name.localeCompare(b.name));
+
+/** A country's name as the host's pack spells it, else the English one above. */
+export const countryDisplayName = (
+  country: CountryData,
+  countryName?: (code: string, englishName: string) => string,
+): string => (countryName ? countryName(country.code, country.name) : country.name);
+
+/** The picker's list, sorted by the names it actually shows. */
+export const countriesByDisplayName = (
+  countryName?: (code: string, englishName: string) => string,
+): Array<CountryData & { displayName: string }> =>
+  countryName
+    ? countries
+        .map((country) => ({ ...country, displayName: countryDisplayName(country, countryName) }))
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+    : countries.map((country) => ({ ...country, displayName: country.name }));

package/src/components/form/RichTextEditor/RichTextEditor.dom.ts

@@ -1,3 +1,4 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 // Selection surgery for the editor. Each of these mutates the DOM around a
 // Range and then rebuilds the selection, so the caret ends up where the user
 // expects rather than at the start of the document.
@@ -85,11 +86,11 @@ const removeFromList = (block: globalThis.Element) => {
   );
 };
 
-const wrapInList = (range: globalThis.Range, listType: 'ol' | 'ul') => {
+const wrapInList = (range: globalThis.Range, listType: 'ol' | 'ul', listItemText: string) => {
   const list = document.createElement(listType);
   const listItem = document.createElement('li');
 
-  listItem.appendChild(document.createTextNode(range.toString() || 'List item'));
+  listItem.appendChild(document.createTextNode(range.toString() || listItemText));
   list.appendChild(listItem);
 
   range.deleteContents();
@@ -109,6 +110,7 @@ export const toggleList = (
   range: globalThis.Range,
   listType: 'ol' | 'ul',
   editor: HTMLElement | null,
+  listItemText: string = EN_US_UI_LABELS.richTextEditor.listItem,
 ) => {
   if (!editor) return;
 
@@ -120,5 +122,5 @@ export const toggleList = (
     return;
   }
 
-  wrapInList(range, listType);
+  wrapInList(range, listType, listItemText);
 };

package/src/components/form/RichTextEditor/RichTextEditor.format.ts

@@ -26,7 +26,9 @@ export const applyFormatToRange = ({
   value,
   range,
   editor,
+  listItemText,
 }: {
+  listItemText?: string;
   formatType: string;
   value?: string;
   range: globalThis.Range;
@@ -40,7 +42,7 @@ export const applyFormatToRange = ({
 
   const listTag = LIST_TAGS[formatType];
   if (listTag) {
-    toggleList(range, listTag, editor);
+    toggleList(range, listTag, editor, listItemText);
     return;
   }
 

package/src/components/form/RichTextEditor/RichTextEditor.hooks.ts

@@ -96,6 +96,7 @@ export const useRichTextEditor = ({
   disabled,
   readOnly,
   maxLength,
+  listItemText,
 }: {
   value?: string;
   onChange?: (value: string) => void;
@@ -104,6 +105,7 @@ export const useRichTextEditor = ({
   disabled?: boolean;
   readOnly?: boolean;
   maxLength?: number;
+  listItemText?: string;
 }) => {
   const editorRef = useRef<HTMLDivElement>(null);
   const { content, handleContentChange } = useEditorContent({
@@ -130,12 +132,13 @@ export const useRichTextEditor = ({
         value: formatValue,
         range: selection.getRangeAt(0),
         editor: editorRef.current,
+        listItemText,
       });
 
       handleContentChange();
       editorRef.current.focus();
     },
-    [disabled, readOnly, handleContentChange],
+    [disabled, readOnly, handleContentChange, listItemText],
   );
 
   const sanitizedContent = sanitize(content);

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -1,3 +1,5 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
@@ -27,7 +29,6 @@ const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<Toolb
 
 const RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {
   value: '',
-  placeholder: 'Start typing...',
   disabled: false,
   readOnly: false,
   toolbar: {} };
@@ -89,7 +90,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
     const {
       value,
       onChange,
-      placeholder,
+      placeholder: placeholderProp,
+      labels: labelOverrides,
       disabled,
       readOnly,
       toolbar,
@@ -105,6 +107,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
     } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;
 
     const theme = useTheme();
+    const labels = resolveLabels(EN_US_UI_LABELS.richTextEditor, labelOverrides);
+    const placeholder = placeholderProp ?? labels.placeholder;
     const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
     const editor = useRichTextEditor({
       value,
@@ -113,7 +117,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
       onBlur,
       disabled,
       readOnly,
-      maxLength });
+      maxLength,
+      listItemText: labels.listItem });
 
     return (
       <Paper
@@ -132,6 +137,7 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
           characterCount={editor.characterCount}
           editorRef={editor.editorRef}
           onFormat={editor.applyFormat}
+          labels={labels}
         />
 
         <Box
@@ -141,7 +147,7 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
           onFocus={editor.handleFocus}
           onBlur={editor.handleBlur}
           role="textbox"
-          aria-label={ariaLabel || 'Rich text editor'}
+          aria-label={ariaLabel || labels.ariaLabel}
           aria-describedby={ariaDescribedBy}
           aria-multiline="true"
           tabIndex={disabled ? -1 : 0}

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

@@ -1,3 +1,4 @@
+import type { RichTextEditorLabels } from '../../../copy/labels';
 import type { ReactNode } from 'react';
 
 export interface RichTextEditorProps {
@@ -5,8 +6,13 @@ export interface RichTextEditorProps {
   value?: string;
   /** Callback when the content changes */
   onChange?: (value: string) => void;
-  /** Placeholder text when empty */
+  /** Placeholder text when empty. Defaults to `labels.placeholder`. */
   placeholder?: string;
+  /**
+   * The toolbar's tooltips, prompts, default placeholder and accessible name;
+   * the English pack answers for any key left out.
+   */
+  labels?: Partial<RichTextEditorLabels>;
   /** Whether the editor is disabled */
   disabled?: boolean;
   /** Whether the editor is read-only */

package/src/components/form/RichTextEditor/RichTextEditorToolbar.tsx

@@ -1,3 +1,4 @@
+import type { RichTextEditorLabels } from '../../../copy/labels';
 import Code from '@mui/icons-material/Code';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
@@ -27,15 +28,15 @@ type ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &
 
 // The button groups, in render order. A separator is drawn between two groups
 // only when both actually have something switched on.
-const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tooltip: string; command: string; commandValue?: string }>> = [
+const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; label: keyof RichTextEditorLabels; command: string; commandValue?: string }>> = [
   [
-    { key: 'bold', icon: <FormatBold />, tooltip: 'Bold', command: 'bold' },
-    { key: 'italic', icon: <FormatItalic />, tooltip: 'Italic', command: 'italic' },
-    { key: 'underline', icon: <FormatUnderlined />, tooltip: 'Underline', command: 'underline' },
+    { key: 'bold', icon: <FormatBold />, label: 'bold', command: 'bold' },
+    { key: 'italic', icon: <FormatItalic />, label: 'italic', command: 'italic' },
+    { key: 'underline', icon: <FormatUnderlined />, label: 'underline', command: 'underline' },
     {
       key: 'strikethrough',
       icon: <FormatStrikethrough />,
-      tooltip: 'Strikethrough',
+      label: 'strikethrough',
       command: 'strikethrough',
     },
   ],
@@ -43,30 +44,30 @@ const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tool
     {
       key: 'orderedList',
       icon: <FormatListNumbered />,
-      tooltip: 'Numbered List',
+      label: 'numberedList',
       command: 'insertOrderedList',
     },
     {
       key: 'unorderedList',
       icon: <FormatListBulleted />,
-      tooltip: 'Bulleted List',
+      label: 'bulletedList',
       command: 'insertUnorderedList',
     },
   ],
   [
-    { key: 'link', icon: <Link />, tooltip: 'Insert Link', command: 'createLink' },
-    { key: 'image', icon: <Image />, tooltip: 'Insert Image', command: 'insertImage' },
+    { key: 'link', icon: <Link />, label: 'insertLink', command: 'createLink' },
+    { key: 'image', icon: <Image />, label: 'insertImage', command: 'insertImage' },
     {
       key: 'codeBlock',
       icon: <Code />,
-      tooltip: 'Code Block',
+      label: 'codeBlock',
       command: 'formatBlock',
       commandValue: 'pre',
     },
     {
       key: 'quote',
       icon: <FormatQuote />,
-      tooltip: 'Quote',
+      label: 'quote',
       command: 'formatBlock',
       commandValue: 'blockquote',
     },
@@ -74,9 +75,9 @@ const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tool
 ];
 
 // Link and image need a target before they can run.
-const PROMPTS: Record<string, { message: string; initial?: string }> = {
-  createLink: { message: 'Enter URL:', initial: 'https://' },
-  insertImage: { message: 'Enter image URL:' },
+const PROMPTS: Record<string, { message: 'linkPrompt' | 'imagePrompt'; initial?: string }> = {
+  createLink: { message: 'linkPrompt', initial: 'https://' },
+  insertImage: { message: 'imagePrompt' },
 };
 
 const Separator: FC = () => <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />;
@@ -89,6 +90,7 @@ export interface RichTextEditorToolbarProps {
   characterCount: number;
   editorRef: React.RefObject<HTMLDivElement | null>;
   onFormat: (command: string, value?: string) => void;
+  labels: RichTextEditorLabels;
 }
 
 const ToolbarGroups: FC<{
@@ -96,7 +98,8 @@ const ToolbarGroups: FC<{
   disabled: boolean;
   readOnly: boolean;
   onRun: (command: string, commandValue?: string) => void;
-}> = ({ config, disabled, readOnly, onRun }) => {
+  labels: RichTextEditorLabels;
+}> = ({ config, disabled, readOnly, onRun, labels }) => {
   const groupIsActive = (group: (typeof GROUPS)[number]) => group.some((item) => config[item.key]);
 
   return (
@@ -107,12 +110,12 @@ const ToolbarGroups: FC<{
           {group
             .filter((item) => config[item.key])
             .map((item) => (
-              <Tooltip key={item.key} title={item.tooltip}>
+              <Tooltip key={item.key} title={labels[item.label]}>
                 <IconButton
                   size="small"
                   onClick={() => onRun(item.command, item.commandValue)}
                   disabled={disabled || readOnly}
-                  aria-label={item.tooltip}
+                  aria-label={labels[item.label]}
                   data-testid={`toolbar-${item.key}`}
                 >
                   {item.icon}
@@ -133,6 +136,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
   characterCount,
   editorRef,
   onFormat,
+  labels,
 }) => {
   const run = (command: string, commandValue?: string) => {
     const prompt = PROMPTS[command];
@@ -141,7 +145,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
       return;
     }
 
-    const answer = window.prompt(prompt.message, prompt.initial);
+    const answer = window.prompt(labels[prompt.message], prompt.initial);
     if (answer) onFormat(command, answer);
   };
 
@@ -156,7 +160,13 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
         backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),
       }}
     >
-      <ToolbarGroups config={config} disabled={disabled} readOnly={readOnly} onRun={run} />
+      <ToolbarGroups
+        config={config}
+        disabled={disabled}
+        readOnly={readOnly}
+        onRun={run}
+        labels={labels}
+      />
 
       {config.customItems && config.customItems.length > 0 && (
         <>

package/src/components/form/Switch/Switch.native.tsx

@@ -40,6 +40,7 @@ import {
 } from './Switch.metrics';
 import type { SwitchProps } from './Switch.types.native';
 import { webKeyDown } from '../../../platform/aria';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { childTestId, resolveTestId } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import type { UiTheme } from '../../../tokens/theme';
@@ -156,7 +157,7 @@ function SwitchIcon({
 }
 
 interface ControlProps {
-  props: ResolvedSwitchProps;
+  props: ResolvedSwitchProps<SwitchProps>;
   theme: UiTheme;
   checked: boolean;
   inactive: boolean;
@@ -233,7 +234,7 @@ function SwitchControl({ props, theme, checked, inactive, onToggle, rest, testID
           <ActivityIndicator
             size={geometry.thumbSize * SWITCH_SPINNER.sizeRatio}
             color={palette.main}
-            accessibilityLabel="loading"
+            accessibilityLabel={props.loadingLabel ?? EN_US_UI_LABELS.common.loading}
           />
         ) : null}
       </Animated.View>
@@ -290,7 +291,7 @@ function labelRowStyle(theme: UiTheme, position: string): ViewStyle {
 export const Switch = React.forwardRef<View, SwitchProps>((rawProps, ref) => {
   const props = resolveSwitchProps(rawProps);
   const {
-    label, description, labelPosition, error, helperText, loading, disabled,
+    label, description, labelPosition, error, helperText, loading, loadingLabel: _loadingLabel, disabled,
     checked, defaultChecked, onChange, onClick, onPress, style, ...others
   } = props;
 

package/src/components/form/Switch/Switch.types.native.ts

@@ -30,5 +30,7 @@ export type SwitchProps = SwitchBaseProps &
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
+import { EN_US_RICH_EDITOR_TOOLBAR_COPY } from '../../../en-US.form';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
@@ -385,7 +386,7 @@ export const TextareaRichEditor: React.FC<{
         onMouseUp={updateActiveFormats}
         role="textbox"
         aria-multiline="true"
-        aria-label={placeholder || 'Rich text editor'}
+        aria-label={placeholder || (copy.editorLabel ?? EN_US_RICH_EDITOR_TOOLBAR_COPY.editorLabel)}
       />
 
       {characterLimit && (

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

@@ -2,6 +2,7 @@ import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 
 import type { UploadButtonProps, UploadButtonState } from './UploadButton.types';
+import { EN_US_UPLOAD_BUTTON_COPY } from '../../../en-US.form';
 
 /** The props {@link useUploadButton} reads — the component's own props. */
 type UploadButtonHookProps = UploadButtonProps;
@@ -27,15 +28,16 @@ type SetState = React.Dispatch<React.SetStateAction<UploadButtonState>>;
 function useFileValidator(
   maxSizeMB: number | undefined,
   validate: ((file: globalThis.File) => string | null) | undefined,
+  fileTooLarge: (maxSizeMB: number) => string,
 ): (file: globalThis.File) => string | null {
   return useCallback(
     (file: globalThis.File): string | null => {
       if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {
-        return `File size must be less than ${maxSizeMB}MB`;
+        return fileTooLarge(maxSizeMB);
       }
       return validate ? validate(file) : null;
     },
-    [maxSizeMB, validate],
+    [maxSizeMB, validate, fileTooLarge],
   );
 }
 
@@ -50,6 +52,7 @@ function useUploadRunner(
   onUpload: ((file: globalThis.File) => Promise<void>) | undefined,
   externalUploading: boolean,
   setState: SetState,
+  uploadFailed: string,
 ): (file: globalThis.File) => Promise<void> {
   return useCallback(
     async (file: globalThis.File) => {
@@ -80,11 +83,11 @@ function useUploadRunner(
           ...prev,
           isUploading: false,
           uploadProgress: 0,
-          error: error instanceof Error ? error.message : 'Upload failed',
+          error: error instanceof Error ? error.message : uploadFailed,
         }));
       }
     },
-    [onUpload, externalUploading, setState],
+    [onUpload, externalUploading, setState, uploadFailed],
   );
 }
 
@@ -106,6 +109,7 @@ interface UploadSelectionOptions {
   onUpload?: (file: globalThis.File) => Promise<void>;
   externalUploading: boolean;
   validateFile: (file: globalThis.File) => string | null;
+  uploadFailed: string;
 }
 
 /**
@@ -121,9 +125,10 @@ function useUploadSelection({
   onUpload,
   externalUploading,
   validateFile,
+  uploadFailed,
 }: UploadSelectionOptions): UploadSelection {
   const [state, setState] = useState<UploadButtonState>(INITIAL_STATE);
-  const runUpload = useUploadRunner(onUpload, externalUploading, setState);
+  const runUpload = useUploadRunner(onUpload, externalUploading, setState, uploadFailed);
 
   const selectOne = useCallback(
     (file: globalThis.File) => {
@@ -243,11 +248,15 @@ export function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {
     helperText,
     errorText,
     disabled = false,
+    copy,
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
   const inputId = `upload-button-${useId()}`;
-  const validateFile = useFileValidator(maxSizeMB, validate);
+  // The two errors the control raises itself: the host's pack, else English.
+  const fileTooLarge = copy.fileTooLarge ?? EN_US_UPLOAD_BUTTON_COPY.fileTooLarge;
+  const uploadFailed = copy.uploadFailed ?? EN_US_UPLOAD_BUTTON_COPY.uploadFailed;
+  const validateFile = useFileValidator(maxSizeMB, validate, fileTooLarge);
   const { state, setDragOver, handleFiles } = useUploadSelection({
     onSelect,
     multiple,
@@ -255,6 +264,7 @@ export function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {
     onUpload,
     externalUploading,
     validateFile,
+    uploadFailed,
   });
   const drag = useDragHandlers(disabled, setDragOver, handleFiles);
   const derived = useDerivedUploadState({

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

@@ -103,6 +103,13 @@ export interface ViewSelectorProps {
   zoom: number[];
   /** Called when the zoom slider changes. */
   onZoomChange: (value: number[]) => void;
+  /**
+   * The grid option's name, in the menu and on the trigger while it is active.
+   * @default "Grid View" — a host passes `UI_LABELS[locale].contentToolbar.gridView`.
+   */
+  gridViewLabel?: string;
+  /** The list option's name. @default "List View" */
+  listViewLabel?: string;
 }
 
 /* ── SortByDropdown ──────────────────────────────────────────────────────── */
@@ -228,6 +235,13 @@ export interface FilterTriggerProps {
   activeCount?: number;
   /** Button label. @default "Filtros" */
   label?: string;
+  /**
+   * The button's accessible name while the panel is closed.
+   * @default "Open filters" — a host passes `UI_LABELS[locale].contentToolbar.openFilters`.
+   */
+  openFiltersLabel?: string;
+  /** The button's accessible name while the panel is open. @default "Close filters" */
+  closeFiltersLabel?: string;
   'data-testid'?: string;
 }
 

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

@@ -6,10 +6,17 @@ import Button from '@mui/material/Button/index.js';
 import React from 'react';
 
 import type { FilterTriggerProps } from './ContentToolbar.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
+/** The toggle's accessible name for its state: the caller's, else the English one. */
+const toggleName = (open: boolean, openLabel?: string, closeLabel?: string): string =>
+  open
+    ? (closeLabel ?? EN_US_UI_LABELS.contentToolbar.closeFilters)
+    : (openLabel ?? EN_US_UI_LABELS.contentToolbar.openFilters);
+
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
  * controls) with a funnel icon and, when filters are active, a count badge — so
@@ -22,6 +29,8 @@ export function FilterTrigger({
   hasActiveFilters = false,
   activeCount = 0,
   label = 'Filtros',
+  openFiltersLabel,
+  closeFiltersLabel,
   'data-testid': testId = 'toggle-filters-btn',
 }: FilterTriggerProps): React.JSX.Element {
   const active = activeCount > 0 || hasActiveFilters;
@@ -32,7 +41,7 @@ export function FilterTrigger({
       color="inherit"
       data-testid={testId}
       aria-expanded={open}
-      aria-label={open ? 'Close filters' : 'Open filters'}
+      aria-label={toggleName(open, openFiltersLabel, closeFiltersLabel)}
       onClick={() => onOpenChange(!open)}
       startIcon={<FilterIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{