@12-apps/ui 6.78.3 → 6.79.0

package/src/components/data-display/Table/TableParts.tsx

@@ -1,3 +1,5 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Checkbox from '@mui/material/Checkbox/index.js';
 import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
@@ -12,7 +14,13 @@ import { rem } from '../../../tokens/relative';
 
 import { tableRowHeight } from './Table.helpers';
 import { useTableRowRenderer } from './TableParts.hooks';
-import type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';
+import type {
+  ColumnConfig,
+  TableBodyProps,
+  TableHeaderProps,
+  TableLabels,
+  VirtualWindow,
+} from './Table.types';
 
 // Mirrors the visible sort indicator for assistive technology; undefined when
 // the column is not sorted, which is what removes the attribute entirely.
@@ -33,11 +41,12 @@ const columnLength = (theme: Theme, value: number | string | undefined): string
 // One header cell. Sorting is offered when the table is sortable and the column
 // has not opted out; aria-sort mirrors the visible indicator.
 const HeaderCell: React.FC<{
+  labels: TableLabels;
   column: ColumnConfig;
   sortable?: boolean;
   sortConfig?: { key: string; direction: 'asc' | 'desc' };
   onSort: (columnKey: string) => void;
-}> = ({ column, sortable, sortConfig, onSort }) => {
+}> = ({ column, sortable, sortConfig, onSort, labels }) => {
   const theme = useTheme();
   const canSort = Boolean(sortable) && column.sortable !== false;
   const isSorted = sortConfig?.key === column.key;
@@ -57,7 +66,7 @@ const HeaderCell: React.FC<{
           direction={isSorted ? sortConfig?.direction : 'asc'}
           onClick={() => onSort(column.key)}
           data-testid="sort-indicator"
-          aria-label={`Sort by ${column.label}`}
+          aria-label={labels.sortBy(column.label)}
         >
           {column.label}
         </TableSortLabel>
@@ -77,7 +86,9 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
   selectable,
   selectedRows = [],
   onSelectAll,
+  labels: labelOverrides,
   headRef }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.table, labelOverrides);
   const handleSort = useCallback(
     (columnKey: string) => {
       if (!sortable || !onSortChange) return;
@@ -106,13 +117,14 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
               indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}
               checked={selectedRows.length === data.length && data.length > 0}
               onChange={handleSelectAll}
-              inputProps={{ 'aria-label': 'select all' }}
+              inputProps={{ 'aria-label': labels.selectAllRows }}
             />
           </TableCell>
         )}
         {columns.map((column) => (
           <HeaderCell
             key={column.key}
+            labels={labels}
             column={column}
             sortable={sortable}
             sortConfig={sortConfig}
@@ -194,6 +206,7 @@ export const TableDataRow: React.FC<{
   /** Whether the row is one of a virtual window's. */
   virtualised: boolean;
   renderCell?: TableBodyProps['renderCell'];
+  labels: TableLabels;
 }> = ({
   rowData,
   rowKey,
@@ -207,6 +220,7 @@ export const TableDataRow: React.FC<{
   onRowBlur,
   onSelect,
   virtualised,
+  labels,
   renderCell }) => {
   const theme = useTheme();
   const pitch = tableRowHeight(rowHeight);
@@ -237,7 +251,7 @@ export const TableDataRow: React.FC<{
                 checked={selected}
                 onChange={(event) => onSelect(event, rowKey)}
                 onClick={(event) => event.stopPropagation()}
-                inputProps={{ 'aria-label': `select row ${index + 1}` }}
+                inputProps={{ 'aria-label': labels.selectRow(index + 1) }}
               />,
             )}
           </TableCell>

package/src/components/data-display/Timeline/Timeline.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 { alpha, styled } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
@@ -42,7 +44,9 @@ export const Timeline: FC<TimelineProps> = ({
   showConnector = true,
   animated = true,
   alternating = false,
-  onItemClick }) => {
+  onItemClick,
+  labels: labelOverrides }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.timeline, labelOverrides);
   const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());
 
   const handleExpandClick = (itemId: string, event: React.MouseEvent) => {
@@ -77,6 +81,7 @@ export const Timeline: FC<TimelineProps> = ({
           isExpanded={expandedItems.has(item.id)}
           onItemClick={onItemClick}
           onExpandClick={handleExpandClick}
+          labels={labels}
         />
       ))}
     </TimelineContainer>

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

@@ -1,3 +1,4 @@
+import type { TimelineLabels } from '../../../copy/labels';
 import type React from 'react';
 
 export interface TimelineItem {
@@ -23,4 +24,6 @@ export interface TimelineProps {
   animated?: boolean;
   alternating?: boolean;
   onItemClick?: (item: TimelineItem) => void;
+  /** The expand toggle's and each card's accessible names; the English pack answers for any key left out. */
+  labels?: Partial<TimelineLabels>;
 }

package/src/components/data-display/Timeline/TimelineRow.tsx

@@ -1,3 +1,4 @@
+import type { TimelineLabels } from '../../../copy/labels';
 import DotIcon from '@mui/icons-material/Circle';
 import ExpandIcon from '@mui/icons-material/ExpandMore';
 import Box from '@mui/material/Box/index.js';
@@ -196,7 +197,8 @@ const TimelineCardHeader: React.FC<{
   variant: NonNullable<TimelineProps['variant']>;
   isExpanded: boolean;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
-}> = ({ item, variant, isExpanded, onExpandClick }) => (
+  labels: TimelineLabels;
+}> = ({ item, variant, isExpanded, onExpandClick, labels }) => (
   <Box
     sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}
   >
@@ -216,7 +218,7 @@ const TimelineCardHeader: React.FC<{
       <IconButton
         size="small"
         onClick={(e) => onExpandClick(item.id, e)}
-        aria-label={isExpanded ? 'Collapse item details' : 'Expand item details'}
+        aria-label={isExpanded ? labels.collapseDetails : labels.expandDetails}
         sx={{
           transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           transition: 'transform 0.3s ease',
@@ -237,13 +239,14 @@ const TimelineRowCard: React.FC<{
   isExpanded: boolean;
   onItemClick?: (item: TimelineItem) => void;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
-}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => (
+  labels: TimelineLabels;
+}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick, labels }) => (
   <TimelineCard
     timelineVariant={variant}
     isClickable={isClickable}
     onClick={isClickable ? () => onItemClick?.(item) : undefined}
     role="article"
-    aria-label={`Timeline item: ${item.title}`}
+    aria-label={labels.item(item.title)}
     data-testid="timeline-card"
   >
     <CardContent>
@@ -253,6 +256,7 @@ const TimelineRowCard: React.FC<{
           variant={variant}
           isExpanded={isExpanded}
           onExpandClick={onExpandClick}
+          labels={labels}
         />
 
         {variant === 'compact' && item.description && (
@@ -282,6 +286,7 @@ export const TimelineRow: React.FC<{
   isExpanded: boolean;
   onItemClick?: (item: TimelineItem) => void;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
+  labels: TimelineLabels;
 }> = ({
   item,
   index,
@@ -294,6 +299,7 @@ export const TimelineRow: React.FC<{
   isExpanded,
   onItemClick,
   onExpandClick,
+  labels,
 }) => {
 
     
@@ -341,6 +347,7 @@ export const TimelineRow: React.FC<{
         isExpanded={isExpanded}
         onItemClick={onItemClick}
         onExpandClick={onExpandClick}
+        labels={labels}
       />
     </TimelineItemContainer>
   );

package/src/components/feedback/Dialog/Dialog.base.ts

@@ -27,6 +27,11 @@ export interface DialogBaseProps {
   title?: ReactNode;
   description?: string;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as it always read;
+   * a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   /** Ignored by BOTH renderers today; see `Dialog.metrics.ts`. */
   backdrop?: boolean;
   /** Refuses to close on a backdrop press or Escape. */
@@ -47,6 +52,11 @@ export interface DialogHeaderBaseProps {
   title?: ReactNode;
   subtitle?: ReactNode;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as it always read;
+   * a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   onClose?: () => void;
   dataTestId?: string;
   testID?: string;

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -87,6 +87,7 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
     title,
     description,
     showCloseButton,
+    closeLabel,
     backdrop: _backdrop,
     persistent,
     glass,
@@ -144,6 +145,7 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
                 title={title}
                 subtitle={description}
                 showCloseButton={showCloseButton}
+                closeLabel={closeLabel}
                 onClose={onClose}
                 dataTestId={testID}
               />

package/src/components/feedback/Dialog/Dialog.tsx

@@ -11,6 +11,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 { focusDialogOnEntered } from './Dialog.focus';
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
 import {
@@ -180,6 +181,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
     title,
     description,
     showCloseButton,
+    closeLabel,
     backdrop,
     persistent,
     glass,
@@ -210,6 +212,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
       title={title}
       subtitle={description}
       showCloseButton={showCloseButton}
+      closeLabel={closeLabel}
       onClose={onClose}
       dataTestId={testId}
     />
@@ -247,6 +250,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
   title,
   subtitle,
   showCloseButton = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   onClose,
   ...others
 }) => {
@@ -296,7 +300,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
       </Box>
       {showCloseButton && onClose && (
         <IconButton
-          aria-label="close"
+          aria-label={closeLabel}
           onClick={onClose}
           data-testid={childTestId(others, 'close', 'dialog')}
           sx={{

package/src/components/feedback/Dialog/DialogParts.native.tsx

@@ -23,6 +23,7 @@ import type {
   DialogContentProps,
   DialogHeaderProps,
 } from './Dialog.types.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { Icon } from '../../../icons/Icon.native';
 import { childTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { renderTextChildren } from '../../../platform/text-children';
@@ -67,12 +68,20 @@ export const dialogSubtitleStyle = (theme: UiTheme): TextStyle => ({
   marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits),
 });
 
-function CloseButton({ onPress, testID }: { onPress: () => void; testID: string }): React.JSX.Element {
+function CloseButton({
+  onPress,
+  testID,
+  label,
+}: {
+  onPress: () => void;
+  testID: string;
+  label: string;
+}): React.JSX.Element {
   const theme = useUiTheme();
   return (
     <Pressable
       role="button"
-      aria-label="close"
+      aria-label={label}
       testID={testID}
       onPress={onPress}
       style={({ pressed }) => [
@@ -90,6 +99,7 @@ export function DialogHeader({
   title,
   subtitle,
   showCloseButton = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   onClose,
   ...others
 }: DialogHeaderProps): React.JSX.Element {
@@ -139,7 +149,11 @@ export function DialogHeader({
         {subtitle ? <RNText style={dialogSubtitleStyle(theme)}>{subtitle}</RNText> : null}
       </View>
       {showCloseButton && onClose ? (
-        <CloseButton onPress={onClose} testID={childTestId(others, 'close', 'dialog')} />
+        <CloseButton
+          onPress={onClose}
+          label={closeLabel}
+          testID={childTestId(others, 'close', 'dialog')}
+        />
       ) : null}
     </View>
   );

package/src/components/feedback/Sonner/Sonner.tsx

@@ -1,3 +1,4 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
@@ -81,7 +82,12 @@ export const SonnerProvider: React.FC<{
    * word cannot be a per-call argument without changing what they are for.
    */
   dismissLabel: string;
-}> = ({ children, dismissLabel }) => {
+  /**
+   * The "+N more" line when more toasts are queued than fit. Defaults to the
+   * labels pack's `sonner.hiddenCount`.
+   */
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ children, dismissLabel, hiddenCountLabel }) => {
   const [toasts, setToasts] = useState<SonnerItem[]>([]);
   const toastCounter = useRef(0);
 
@@ -152,7 +158,7 @@ export const SonnerProvider: React.FC<{
   return (
     <SonnerContext.Provider value={contextValue}>
       {children}
-      <SonnerToaster toasts={toasts} onDismiss={dismiss} />
+      <SonnerToaster toasts={toasts} onDismiss={dismiss} hiddenCountLabel={hiddenCountLabel} />
     </SonnerContext.Provider>
   );
 };
@@ -171,7 +177,8 @@ import { SonnerToast } from './SonnerToast';
 const SonnerToaster: React.FC<{
   toasts: SonnerItem[];
   onDismiss: (id: string) => void;
-}> = ({ toasts, onDismiss }) => {
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ toasts, onDismiss, hiddenCountLabel = EN_US_UI_LABELS.sonner.hiddenCount }) => {
   // Limit visible toasts to prevent overflow
   const MAX_VISIBLE_TOASTS = 5;
   const visibleToasts = toasts.slice(-MAX_VISIBLE_TOASTS);
@@ -202,7 +209,7 @@ const SonnerToaster: React.FC<{
               color: 'text.secondary',
               pointerEvents: 'none' }}
           >
-            +{hiddenCount} more
+            {hiddenCountLabel(hiddenCount)}
           </Box>
         )}
         {visibleToasts.map((toast) => (
@@ -317,6 +324,9 @@ export const Toaster: React.FC<{
   richColors?: boolean;
   closeButton?: boolean;
   dismissLabel: string;
-}> = ({ children, dismissLabel }) => (
-  <SonnerProvider dismissLabel={dismissLabel}>{children}</SonnerProvider>
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ children, dismissLabel, hiddenCountLabel }) => (
+  <SonnerProvider dismissLabel={dismissLabel} hiddenCountLabel={hiddenCountLabel}>
+    {children}
+  </SonnerProvider>
 );

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -178,8 +178,10 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
           ...buildToastStyles(theme, variant, visible),
           p: 2,
           mb: 1,
-          minWidth: sxRem(356),
-          maxWidth: sxRem(400),
+          // 356–400 on desktop; on a phone, the viewport less the toaster's 16px
+          // inset on each side, so the stack never starts off the left edge.
+          minWidth: `min(${rem(theme, 356)}, calc(100vw - ${rem(theme, 32)}))`,
+          maxWidth: `min(${rem(theme, 400)}, calc(100vw - ${rem(theme, 32)}))`,
           display: 'flex',
           alignItems: 'flex-start',
           gap: 1.5,

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

@@ -11,6 +11,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { styled, useTheme } from '@mui/material/styles/index.js';
 import type { ElementType, FC, ReactNode } from 'react';
 import React from 'react';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 import { safeAreaBottom } from '../../../utils/viewport';
 import {
@@ -126,6 +127,8 @@ interface ModalHeaderProps {
   onBack: () => void;
   /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
   backLabel: string;
+  /** The ✕'s accessible name; `close` when the host names none. */
+  closeLabel?: string;
   onClose: () => void;
   /** Renders the bar without its ✕ — the panel's content owns the dismiss. */
   hideClose?: boolean;
@@ -142,9 +145,25 @@ interface ModalHeaderProps {
 const HeaderLeadingButton: FC<
   Pick<
     ModalHeaderProps,
-    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'
+    | 'canGoBack'
+    | 'onBack'
+    | 'backLabel'
+    | 'closeLabel'
+    | 'onClose'
+    | 'hideClose'
+    | 'rtl'
+    | 'dataTestId'
   >
-> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
+> = ({
+  canGoBack,
+  onBack,
+  backLabel,
+  closeLabel = EN_US_UI_LABELS.common.close,
+  onClose,
+  hideClose,
+  rtl,
+  dataTestId,
+}) => {
   if (canGoBack) {
     return (
       <IconButton
@@ -166,7 +185,7 @@ const HeaderLeadingButton: FC<
       edge="start"
       color="inherit"
       onClick={onClose}
-      aria-label="close"
+      aria-label={closeLabel}
       size="small"
       data-testid={testId(dataTestId, 'close-button')}
     >
@@ -183,6 +202,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   onClose,
   hideClose,
   backLabel,
+  closeLabel,
   headerActions,
   rtl,
   dataTestId,
@@ -207,6 +227,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
         canGoBack={canGoBack}
         onBack={onBack}
         backLabel={backLabel}
+        closeLabel={closeLabel}
         onClose={onClose}
         hideClose={hideClose}
         rtl={rtl}

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

@@ -78,7 +78,7 @@ const useUnnamedDialogWarning = (unnamed: boolean): void => {
 
 const StackedModalPanel: FC<ResolvedProps> = (props) => {
   const {
-    open, onClose, glass, navigationTitle, backLabel, hideClose, hideHeader, children, actions, modalId,
+    open, onClose, glass, navigationTitle, backLabel, closeLabel, hideClose, hideHeader, children, actions, modalId,
     closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, size, panelWidth, disableBackdrop,
     disableFocusTrap, keepMounted, rtl, dataTestId,
     'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps
@@ -128,6 +128,7 @@ const StackedModalPanel: FC<ResolvedProps> = (props) => {
     >
       <ModalPanelContents
         backLabel={backLabel}
+        closeLabel={closeLabel}
         showSkeleton={showSkeleton}
         loadingText={loadingText}
         titleId={titleId}

package/src/components/feedback/StackedModal/StackedModal.types.ts

@@ -31,6 +31,11 @@ export interface PanelWidth {
 export interface StackedModalProps {
   /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
   backLabel: string;
+  /**
+   * The ✕'s accessible name — it carries a glyph only. Defaults to `close`, as
+   * it always read; a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   /** Controls the visibility of the modal */
   open: boolean;
   /** Callback fired when the component requests to be closed */

package/src/components/feedback/Toast/Toast.tsx

@@ -15,6 +15,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React, { createContext, useCallback,useContext, useState } from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 
 import type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';
@@ -166,6 +167,7 @@ export const Toast: React.FC<ToastProps> = ({
   message,
   variant = 'default',
   closable = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   action,
   glass = false,
   onClose,
@@ -200,7 +202,7 @@ export const Toast: React.FC<ToastProps> = ({
           {closable && (
             <IconButton
               data-testid={`${dataTestId}-close`}
-              aria-label="close"
+              aria-label={closeLabel}
               color="inherit"
               size="small"
               onClick={handleClose}
@@ -218,6 +220,7 @@ export const Toast: React.FC<ToastProps> = ({
 };
 
 export const ToastContainer: React.FC<ToastContainerProps> = ({
+  closeLabel,
   position = 'top-right',
   maxToasts = 5,
   gap,
@@ -281,7 +284,7 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({
             style={{ pointerEvents: 'auto' }}
           >
             <Box data-testid={`${dataTestId}-item-${index}`}>
-              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />
+              <Toast closeLabel={closeLabel} {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />
             </Box>
           </Slide>
         ))}

package/src/components/feedback/Toast/Toast.types.ts

@@ -16,6 +16,9 @@ export interface ToastProps {
   duration?: number;
   persistent?: boolean;
   closable?: boolean;
+  /** The close button's accessible name; defaults to `UI_LABELS['en-US'].common.close`;
+   *  a host passes `CHROME_COPY[locale].dismissToast`. */
+  closeLabel?: string;
   action?: {
     label: string;
     onClick: () => void;
@@ -31,6 +34,8 @@ export interface ToastProps {
 }
 
 export interface ToastContainerProps {
+  /** Applied to every toast that sets no `closeLabel` of its own. */
+  closeLabel?: string;
   position?: ToastPosition;
   maxToasts?: number;
   gap?: number;

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -85,7 +85,9 @@ const Spotlight = styled(Box, {
 const TooltipContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({
   position: 'absolute',
-  maxWidth: rem(theme, 360),
+  // 360 on desktop; on a phone, the viewport less the 16px the placement keeps
+  // clear on each side (`calculateTooltipPosition`).
+  maxWidth: `min(${rem(theme, 360)}, calc(100vw - ${rem(theme, 32)}))`,
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: `blur(${rem(theme, 20)})`,

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -1,3 +1,4 @@
+import { EN_US_TUTORIAL_COPY } from '../../../en-US.feedback';
 import CompleteIcon from '@mui/icons-material/CheckCircle';
 import CloseIcon from '@mui/icons-material/Close';
 import PrevIcon from '@mui/icons-material/NavigateBefore';
@@ -43,6 +44,9 @@ const StepDot = styled(Box, {
 // Title, body copy, the step dots and the navigation row.
 
 // The step's controls: skip/restart on the left, previous/next on the right.
+// On a phone the row wraps rather than widening the card past the screen, and
+// the second group keeps to the right edge when it drops to its own line. From
+// `sm` up it stays one row, as it always was.
 const TutorialStepNav: React.FC<{
   copy: TutorialCopy;
   currentStep: number;
@@ -68,7 +72,9 @@ const TutorialStepNav: React.FC<{
         <Stack
           direction="row"
           spacing={1}
+          useFlexGap
           justifyContent="space-between"
+          sx={(theme) => ({ flexWrap: 'wrap', [theme.breakpoints.up('sm')]: { flexWrap: 'nowrap' } })}
           data-testid="tutorial-navigation"
         >
           <Stack direction="row" spacing={1}>
@@ -89,7 +95,7 @@ const TutorialStepNav: React.FC<{
             )}
           </Stack>
 
-          <Stack direction="row" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ ml: 'auto' }}>
             {stepCount > 1 && currentStep > 0 && (
               <Button
                 size="small"
@@ -153,8 +159,9 @@ const TutorialStepHeader: React.FC<{
   title: React.ReactNode;
   currentStep: number;
   allowSkip: boolean;
+  closeLabel: string;
   onSkip: () => void;
-}> = ({ title, currentStep, allowSkip, onSkip }) => (
+}> = ({ title, currentStep, allowSkip, closeLabel, onSkip }) => (
         <Box
           sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}
         >
@@ -172,6 +179,7 @@ const TutorialStepHeader: React.FC<{
               size="small"
               onClick={onSkip}
               sx={{ ml: 1, mt: -1, mr: -1 }}
+              aria-label={closeLabel}
               data-testid="tutorial-close-button"
             >
               <CloseIcon fontSize="small" />
@@ -213,6 +221,7 @@ export const TutorialStepBody: React.FC<{
           title={step.title}
           currentStep={currentStep}
           allowSkip={allowSkip}
+          closeLabel={copy.close ?? EN_US_TUTORIAL_COPY.close}
           onSkip={onSkip}
         />
 
@@ -227,7 +236,7 @@ export const TutorialStepBody: React.FC<{
 
         {showProgress && (
           <Typography variant="caption" color="text.secondary" align="center">
-            {currentStep + 1} of {stepCount}
+            {(copy.progress ?? EN_US_TUTORIAL_COPY.progress)(currentStep + 1, stepCount)}
           </Typography>
         )}