@12-apps/ui 6.79.0 → 6.80.0

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/Sheet/Sheet.body.tsx

@@ -12,6 +12,7 @@ export interface SheetBodyProps extends Pick<
   | 'title'
   | 'description'
   | 'showCloseButton'
+  | 'closeLabel'
   | 'showHandle'
   | 'header'
   | 'footer'
@@ -67,6 +68,7 @@ export const SheetBody: React.FC<SheetBodyProps> = (props) => {
     title,
     description,
     showCloseButton,
+    closeLabel,
     showHandle,
     header,
     footer,
@@ -108,6 +110,7 @@ export const SheetBody: React.FC<SheetBodyProps> = (props) => {
           title={title}
           description={description}
           showCloseButton={showCloseButton}
+          closeLabel={closeLabel}
           onClose={onClose}
           showHandle={showHandle && isVerticalSheet}
           isDraggable={isDraggableVariant && isVerticalSheet}

package/src/components/data-display/Sheet/Sheet.md

@@ -72,6 +72,7 @@ A vertical sheet's **width** is one rule rather than one per preset: `min(100%,
 - **closeOnOverlayClick** (boolean): Close sheet when the veil outside it is tapped (default: true). The drawer's own backdrop is an invisible catcher (`sheet-click-catcher`) that routes the tap here, so `persistent` still holds the sheet open. This holds with `showOverlay={false}` too: an outside tap still closes the sheet unless `closeOnOverlayClick={false}`. The catcher's test id is `<dataTestId>-click-catcher`.
 - **closeOnEscape** (boolean): Close sheet on Escape key press (default: true)
 - **showCloseButton** (boolean): Show close button in header (default: true)
+- **closeLabel** (string): The close button's accessible name (default: `close`, as the Dialog's; pass `UI_LABELS['pt-BR'].common.close` for pt-BR)
 
 ### Event Handlers
 

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

@@ -9,6 +9,7 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { scrim, sheen } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
@@ -84,6 +85,7 @@ const SheetHandle: React.FC<{ isDraggable: boolean }> = ({ isDraggable }) => {
 };
 
 const HEADER_DEFAULTS: Partial<SheetHeaderProps> = {
+  closeLabel: EN_US_UI_LABELS.common.close,
   isDraggable: false,
   dataTestId: 'sheet-header',
 };
@@ -93,6 +95,7 @@ export const SheetHeader: React.FC<SheetHeaderProps> = (props) => {
     title,
     description,
     showCloseButton,
+    closeLabel,
     onClose,
     showHandle,
     isDraggable,
@@ -137,6 +140,7 @@ export const SheetHeader: React.FC<SheetHeaderProps> = (props) => {
         {showCloseButton && (
           <IconButton
             onClick={onClose}
+            aria-label={closeLabel}
             size="small"
             sx={{ ml: 1, mt: -0.5 }}
             data-testid={`${dataTestId}-close-button`}

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

@@ -28,6 +28,11 @@ export interface SheetProps {
   closeOnOverlayClick?: boolean;
   closeOnEscape?: boolean;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as the Dialog's
+   * does; a pt-BR host passes `UI_LABELS['pt-BR'].common.close`.
+   */
+  closeLabel?: string;
   showHandle?: boolean;
   swipeable?: boolean;
   snapPoints?: number[];
@@ -64,6 +69,11 @@ export interface SheetHeaderProps {
   title?: string;
   description?: string;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as the Dialog's
+   * does; a pt-BR host passes `UI_LABELS['pt-BR'].common.close`.
+   */
+  closeLabel?: string;
   onClose?: () => void;
   showHandle?: boolean;
   isDraggable?: boolean;

package/src/components/feedback/StackedModal/StackedModal.tsx

@@ -9,6 +9,7 @@ import { modalAriaIds, ModalPanelContents, resolveModalContent } from './Stacked
 import type { PanelStyleProps } from './StackedModal.styles';
 import { dialogRootStyles, STYLE_ONLY_PROPS } from './StackedModal.styles';
 import type { StackedModalProps } from './StackedModal.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 const StyledDialog = styled(Dialog, {
   shouldForwardProp: (prop) => !STYLE_ONLY_PROPS.includes(prop as string),
@@ -32,7 +33,7 @@ const DEFAULTS: Partial<StackedModalProps> = {
   closeOnClickOutside: true,
   closeOnEsc: true,
   loading: false,
-  loadingText: 'Loading...',
+  loadingText: EN_US_UI_LABELS.stackedModal.loading,
   maxWidth: false,
   disableBackdrop: false,
   disableFocusTrap: false,

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { CommandItem, CommandProps } from './Command.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 type CommandDefaultedKeys =
   | 'open'
@@ -27,7 +28,7 @@ type ResolvedCommandProps = CommandProps &
 const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   open: false,
   items: [],
-  placeholder: 'Type a command or search...',
+  placeholder: EN_US_UI_LABELS.command.placeholder,
   value: '',
   variant: 'default',
   size: 'md',
@@ -36,7 +37,7 @@ const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   pulse: false,
   loading: false,
   disabled: false,
-  emptyMessage: 'No results found',
+  emptyMessage: EN_US_UI_LABELS.command.empty,
   showCategories: true,
   showShortcuts: true,
   showDescriptions: true,

package/src/components/form/Command/Command.parts.tsx

@@ -11,9 +11,10 @@ import type {
   CommandSeparatorProps,
 } from './Command.types';
 import { rem } from '../../../tokens/relative';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 export const CommandEmpty: React.FC<CommandEmptyProps> = ({
-  message = 'No results found',
+  message = EN_US_UI_LABELS.command.empty,
   className,
   style,
   dataTestId,
@@ -33,7 +34,7 @@ export const CommandEmpty: React.FC<CommandEmptyProps> = ({
   );
 
 export const CommandLoading: React.FC<CommandLoadingProps> = ({
-  message = 'Loading...',
+  message = EN_US_UI_LABELS.command.loading,
   className,
   style,
   dataTestId,

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -8,6 +8,7 @@
  * {@link DateRangeStatus} and keeps its own confirm button shut.
  */
 import { isoToMasked } from '../../data-display/DataViews/data-views-day-input';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 import { dayCount, isAfterDay } from './DateRangePicker.dates';
 import type {
@@ -66,7 +67,7 @@ export function defaultMessages(): DateRangePickerMessages {
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
     summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,
-    calendarLabel: 'Calendar',
+    calendarLabel: EN_US_UI_LABELS.dateRangePicker.calendar,
     dayMask,
   };
 }

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

@@ -16,6 +16,7 @@ import { countriesByDisplayName, countryDisplayName } from './countries';
 import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
+import { EN_US_PHONE_INPUT_COPY } from '../../../en-US.form';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
@@ -165,8 +166,8 @@ const definedProps = (props: PhoneInputProps): 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' });
+  label: copy.label ?? EN_US_PHONE_INPUT_COPY.label,
+  placeholder: copy.placeholder ?? EN_US_PHONE_INPUT_COPY.placeholder });
 
 const CountryAdornment: React.FC<{
   country?: CountryData;

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/FilterTrigger.tsx

@@ -7,6 +7,7 @@ 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';
@@ -28,7 +29,9 @@ 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',

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/Dashboard/Dashboard.tsx

@@ -261,7 +261,10 @@ const DashboardFilters = ({ children, className }: DashboardFiltersProps): React
 DashboardFilters.displayName = 'Dashboard.Filters';
 (DashboardFilters as SlottedComponent).dashboardSlot = 'filters';
 
-const DashboardMoreFilters = ({ children, label = 'More filters' }: DashboardMoreFiltersProps): React.JSX.Element => {
+const DashboardMoreFilters = ({
+  children,
+  label = EN_US_UI_LABELS.dashboard.moreFilters,
+}: DashboardMoreFiltersProps): React.JSX.Element => {
   const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();
   return (
     <Box>

package/src/components/layout/Drawer/Drawer.tsx

@@ -8,6 +8,7 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { shadowInk } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -166,7 +167,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         <IconButton
           onClick={onClose}
           edge="end"
-          aria-label={closeLabel ?? 'Close drawer'}
+          aria-label={closeLabel ?? EN_US_UI_LABELS.drawer.close}
           data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}
         >
           <Close />

package/src/components/layout/SettingsLayout/SettingsLayout.md

@@ -206,6 +206,7 @@ does not ask.
 | atIndex           | boolean                                                | `false`             | `drilldown`: the router is at the area's index, not in a section    |
 | indexHref         | string                                                 | -                   | `drilldown`: where the back link goes                              |
 | backLabel         | string                                                 | `'Back'`            | Label on the back control                                          |
+| navigationLabel   | string                                                 | `'Settings'`        | The navigation's accessible name while `title` is not plain text   |
 | sectionChips      | SettingsNavItem[]                                      | -                   | Sections carried by the narrow-width chip strip                    |
 
 ### SettingsNavGroup

package/src/components/layout/SettingsLayout/SettingsLayout.rail.tsx

@@ -23,6 +23,8 @@ import type {
 
 interface RailToggleProps {
   title?: React.ReactNode;
+  /** The navigation's accessible name, resolved by the layout from `title`. */
+  ariaLabel: string;
   activeLabel?: string;
   open: boolean;
   onToggle: () => void;
@@ -37,6 +39,7 @@ interface RailToggleProps {
  */
 function SettingsRailToggle({
   title,
+  ariaLabel,
   activeLabel,
   open,
   onToggle,
@@ -49,7 +52,7 @@ function SettingsRailToggle({
       type="button"
       onClick={onToggle}
       aria-expanded={open}
-      aria-label={typeof title === 'string' ? title : 'Settings'}
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-toggle`}
       sx={(theme) => ({
         ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),
@@ -238,6 +241,8 @@ function SettingsRailBody({
 /** Props for {@link SettingsRail}: the rail body's inputs plus the mobile chrome. */
 export type SettingsRailProps = RailBodyProps & {
   title?: React.ReactNode;
+  /** The navigation's accessible name, resolved by the layout from `title`. */
+  ariaLabel: string;
   activeLabel?: string;
   onToggleNav: () => void;
   /** Scroll inside the rail rather than with the page. See `fillHeight`. */
@@ -268,6 +273,7 @@ function railColumnSx(theme: Theme, railVariant: SettingsRailVariant): Record<st
 /** The navigation column: title, the `switcher`'s disclosure, and the body. */
 export function SettingsRail({
   title,
+  ariaLabel,
   activeLabel,
   navOpen,
   onToggleNav,
@@ -287,7 +293,7 @@ export function SettingsRail({
   return (
     <Box
       component="nav"
-      aria-label={typeof title === 'string' ? title : 'Settings'}
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-rail`}
       data-rail-variant={railVariant}
       sx={(theme) => ({
@@ -326,6 +332,7 @@ export function SettingsRail({
       {variant === 'switcher' ? (
         <SettingsRailToggle
           title={title}
+          ariaLabel={ariaLabel}
           activeLabel={activeLabel}
           open={navOpen}
           onToggle={onToggleNav}

package/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useMemo, useState } from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { withDefaults } from '../../../utils/withDefaults';
 import { activeItemLabel, filterGroups } from './SettingsLayout.filters';
 import { SettingsRail } from './SettingsLayout.rail';
@@ -32,18 +33,20 @@ type ResolvedProps = SettingsLayoutProps &
       | 'navVariant'
       | 'atIndex'
       | 'backLabel'
+      | 'navigationLabel'
     >
   >;
 
 const DEFAULTS = {
-  searchPlaceholder: 'Search settings',
+  searchPlaceholder: EN_US_UI_LABELS.settingsLayout.searchPlaceholder,
   defaultQuery: '',
-  emptySearchLabel: 'No settings match your search.',
+  emptySearchLabel: EN_US_UI_LABELS.settingsLayout.emptySearch,
   testIdPrefix: 'settings',
   railBreakpoint: 'md',
   navVariant: 'switcher',
   atIndex: false,
-  backLabel: 'Back',
+  backLabel: EN_US_UI_LABELS.settingsLayout.back,
+  navigationLabel: EN_US_UI_LABELS.settingsLayout.navigation,
 } satisfies Partial<SettingsLayoutProps>;
 
 /**
@@ -57,6 +60,14 @@ function railLookOf({
   return { searchable, railVariant };
 }
 
+/**
+ * The navigation's accessible name: a plain-string `title`, else the host's
+ * `navigationLabel`, else "Settings".
+ */
+function navigationNameOf({ title, navigationLabel = DEFAULTS.navigationLabel }: SettingsLayoutProps): string {
+  return typeof title === 'string' ? title : navigationLabel;
+}
+
 /** Stacked below the rail's breakpoint, two columns at and above it. */
 function shellSx(
   breakpoint: SettingsLayoutProps['railBreakpoint'],
@@ -136,7 +147,6 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
   const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
 
   const drilldown = navVariant === 'drilldown';
-  const ariaLabel = typeof title === 'string' ? title : 'Settings';
 
   return (
     <Box
@@ -147,6 +157,7 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
     >
       <SettingsRail
         title={title}
+        ariaLabel={navigationNameOf(props)}
         activeLabel={activeLabel}
         navOpen={navOpen}
         onToggleNav={() => setNavOpen((open) => !open)}
@@ -176,7 +187,7 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
         sectionTitle={props.sectionTitle}
         sectionDescription={props.sectionDescription}
         backLabel={backLabel}
-        ariaLabel={ariaLabel}
+        ariaLabel={navigationNameOf(props)}
         sectionChips={sectionChips}
         activeItemId={activeItemId}
         linkComponent={linkComponent}

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

@@ -200,6 +200,12 @@ export interface SettingsLayoutProps {
   indexHref?: string;
   /** Label on the back control. Defaults to `"Back"`. */
   backLabel?: string;
+  /**
+   * The navigation's accessible name while `title` is not plain text (a node,
+   * or nothing). Defaults to `"Settings"`; a plain-string `title` names it
+   * instead, whatever this says.
+   */
+  navigationLabel?: string;
   /**
    * The open section's own name.
    *

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

@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React, { useRef, useState } from 'react';
 
 import { TableFilterContext, useTableFilterContext } from './TableFilterContext';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import type {
   TableFilterCheckboxFieldProps,
   TableFilterKeywordProps,
@@ -96,7 +97,7 @@ TableFilterMain.displayName = 'TableFilter.Main';
 const TableFilterPanel = ({
   children,
   onClearAll,
-  ariaLabel = 'Filters',
+  ariaLabel = EN_US_UI_LABELS.tableFilter.filters,
   clearTestId,
 }: TableFilterPanelProps): React.JSX.Element => {
   const { open, copy } = useTableFilterContext();
@@ -158,8 +159,8 @@ TableFilterPanel.displayName = 'TableFilter.Panel';
 const TableFilterKeyword = ({
   value,
   onChange,
-  placeholder = 'Press Enter to filter',
-  label = 'Filter by keyword',
+  placeholder = EN_US_UI_LABELS.tableFilter.keywordPlaceholder,
+  label = EN_US_UI_LABELS.tableFilter.keywordLabel,
   testId,
 }: TableFilterKeywordProps): React.JSX.Element => {
   const { copy } = useTableFilterContext();

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -9,6 +9,7 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { rem, sxRem } from '../../../tokens/relative';
+import { PT_BR_UI_LABELS } from '../../../pt-BR.labels';
 import { accentFor, type SizeValue } from '../../../tokens/scales';
 
 import { AppHeaderBrand } from './AppHeader.brand';
@@ -215,7 +216,7 @@ const IdentityText: React.FC<
           onClick={onDisclose}
           aria-haspopup="dialog"
           aria-expanded={disclosed}
-          aria-label={discloseLabel ?? `Detalhes de ${title}`}
+          aria-label={discloseLabel ?? PT_BR_UI_LABELS.appHeader.disclose(title)}
           sx={discloseSx}
         >
           {name}

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

@@ -87,7 +87,11 @@ export interface AppHeaderIdentityProps
   onDisclose?: () => void;
   /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
   disclosed?: boolean;
-  /** Accessible name of the disclosure. @default `Detalhes de {title}` */
+  /**
+   * Accessible name of the disclosure. @default `Detalhes de {title}`, as it
+   * always read (`UI_LABELS['pt-BR'].appHeader.disclose`); a host in another
+   * locale passes its own pack's `appHeader.disclose(title)`.
+   */
   discloseLabel?: string;
   /**
    * The identity is still being resolved — hold a skeleton the size of the real

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

@@ -11,6 +11,7 @@ import {
   breadcrumbsBarStyles,
   sizeIconMap } from './Breadcrumbs.styles';
 import { BreadcrumbEntry } from './BreadcrumbEntry';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import type { BreadcrumbItem,BreadcrumbsProps } from './Breadcrumbs.types';
 import { sxRem } from '../../../tokens/relative';
 
@@ -174,7 +175,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
         color={color}
         visualStyle={variant}
         elevation={elevation}
-        aria-label={ariaLabel || 'breadcrumb navigation'}
+        aria-label={ariaLabel || EN_US_UI_LABELS.breadcrumbs.navigation}
         role="navigation"
         data-testid={dataTestId || 'breadcrumbs'}
         {...props}

package/src/components/navigation/NavigationMenu/NavigationStandardBody.tsx

@@ -47,7 +47,7 @@ const CollapseControl: FC<{
 }> = ({
   collapsed,
   label = EN_US_UI_LABELS.navigationMenu.collapse,
-  expandLabel = EN_US_UI_LABELS.navigationMenu.expand ?? 'Expand',
+  expandLabel = EN_US_UI_LABELS.navigationMenu.expand,
   onToggle,
 }) => (
   // Collapsed, the control is its icon alone, so the name has to be given.

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 import { iconSx, sizeConfigs } from './AnimatedIcon.styles';
 import type { IconStyleFlags } from './AnimatedIcon.styles';
@@ -61,7 +62,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
       className={className}
       style={style}
       role="img"
-      aria-label={ariaLabel || `Animated ${variant} icon`}
+      aria-label={ariaLabel || EN_US_UI_LABELS.animatedIcon.name(variant)}
       onClick={onClick}
       tabIndex={tabIndex}
       onFocus={onFocus}

package/src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx

@@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 
 import type { InfiniteScrollProps } from './InfiniteScroll.types';
@@ -38,9 +39,12 @@ export const DefaultEndMessage: React.FC<{ endText: string }> = ({ endText }) =>
   </Box>
 );
 
-export const DefaultError: React.FC<{ error: Error }> = ({ error }) => (
+export const DefaultError: React.FC<{ error: Error; errorText?: string }> = ({
+  error,
+  errorText = EN_US_UI_LABELS.infiniteScroll.loadFailed,
+}) => (
   <Alert severity="error" sx={{ m: 2 }}>
-    {error.message || 'An error occurred while loading more items'}
+    {error.message || errorText}
   </Alert>
 );