@12-apps/ui 6.78.4 → 6.80.0

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/form/total-form/FormErrorSnackbar.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { Toast } from '../../feedback/Toast';
 import { useFormContext } from './FormContext';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 /** Props for {@link FormErrorSnackbar}. */
 export interface FormErrorSnackbarProps {
@@ -17,7 +18,7 @@ export interface FormErrorSnackbarProps {
  * error toast (testid `total-form-error-snackbar`) once any field has an error.
  */
 export function FormErrorSnackbar({
-  message = 'Please fix the highlighted fields and try again.',
+  message = EN_US_UI_LABELS.formErrorSnackbar.message,
 }: FormErrorSnackbarProps): React.ReactElement | null {
   const { errors } = useFormContext();
   const hasErrors = Object.values(errors).some(Boolean);

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

@@ -10,6 +10,7 @@ import MenuItem from '@mui/material/MenuItem/index.js';
 import React, { useState } from 'react';
 
 import type { ColumnVisibilityOption, ColumnsMenuProps } 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';
@@ -55,8 +56,8 @@ function ColumnRow({
 export function ColumnsMenu({
   columns,
   onToggle,
-  title = 'Columns',
-  ariaLabel = 'Toggle columns',
+  title = EN_US_UI_LABELS.columnsMenu.title,
+  ariaLabel = EN_US_UI_LABELS.columnsMenu.toggle,
   'data-testid': testId,
 }: ColumnsMenuProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

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,18 @@ 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 { PT_BR_UI_LABELS } from '../../../pt-BR.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
@@ -21,7 +29,11 @@ export function FilterTrigger({
   onOpenChange,
   hasActiveFilters = false,
   activeCount = 0,
-  label = 'Filtros',
+  // Portuguese by default, as it always rendered; the pack names it so a host
+  // passes `label` from its own locale's `contentToolbar.filters`.
+  label = PT_BR_UI_LABELS.contentToolbar.filters,
+  openFiltersLabel,
+  closeFiltersLabel,
   'data-testid': testId = 'toggle-filters-btn',
 }: FilterTriggerProps): React.JSX.Element {
   const active = activeCount > 0 || hasActiveFilters;
@@ -32,7 +44,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={{

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

@@ -18,6 +18,7 @@ import type {
   MultiSelectOption,
 } from './ContentToolbar.types';
 import { buildTriggerLabel, InlineTrigger, PillTrigger, StackedTrigger } from './MultiSelectTriggers';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { fieldTextFieldStyles } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
@@ -60,14 +61,14 @@ export function MultiSelectDropdown<TValue extends string = string>({
   selected,
   onToggle,
   onClear,
-  allLabel = 'All',
+  allLabel = EN_US_UI_LABELS.contentToolbar.all,
   clearLabel,
   clearText,
   extraOptionsHeading,
   extraOptions,
   searchable,
-  searchPlaceholder = 'Search…',
-  noResultsLabel = 'No results',
+  searchPlaceholder = EN_US_UI_LABELS.contentToolbar.search,
+  noResultsLabel = EN_US_UI_LABELS.contentToolbar.noResults,
   layout = 'inline',
   'data-testid': testId,
   onOpenChange,

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

@@ -18,13 +18,20 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } 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';
 
-const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
-  { value: 'grid', label: 'Grid View', icon: GridIcon },
-  { value: 'list', label: 'List View', icon: ListIcon },
+interface ViewOption {
+  value: ViewMode;
+  label: string;
+  icon: typeof SvgIcon;
+}
+
+const viewOptions = (gridViewLabel: string, listViewLabel: string): ViewOption[] => [
+  { value: 'grid', label: gridViewLabel, icon: GridIcon },
+  { value: 'list', label: listViewLabel, icon: ListIcon },
 ];
 
 /**
@@ -37,10 +44,13 @@ export function ViewSelector({
   zoom,
   onZoomChange,
   cardSizeLabel,
+  gridViewLabel = EN_US_UI_LABELS.contentToolbar.gridView,
+  listViewLabel = EN_US_UI_LABELS.contentToolbar.listView,
 }: ViewSelectorProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
-  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;
+  const options = viewOptions(gridViewLabel, listViewLabel);
+  const activeOption = options.find((option) => option.value === viewMode) ?? options[0]!;
   const ActiveIcon = activeOption.icon;
 
   return (
@@ -82,7 +92,7 @@ export function ViewSelector({
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
       >
-        {VIEW_OPTIONS.map((option) => {
+        {options.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
           return (