@12-apps/ui 6.41.2 → 6.43.0

package/dist/types/pt-BR.data-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pt-BR.data-display.d.ts","sourceRoot":"","sources":["../../src/pt-BR.data-display.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AACzF,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,iBAAiB,EAClB,MAAM,QAAQ,CAAC;AAQhB,eAAO,MAAM,mBAAmB,EAAE,YASjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cAOpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAGvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAMnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAkLnC,CAAC"}
+{"version":3,"file":"pt-BR.data-display.d.ts","sourceRoot":"","sources":["../../src/pt-BR.data-display.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AACzF,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,iBAAiB,EAClB,MAAM,QAAQ,CAAC;AAQhB,eAAO,MAAM,mBAAmB,EAAE,YAcjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,YAOlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cAOpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAUvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAMnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAmLnC,CAAC"}

package/dist/types/pt-BR.feedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pt-BR.feedback.d.ts","sourceRoot":"","sources":["../../src/pt-BR.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EACvB,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC;AAgBF,eAAO,MAAM,+BAA+B,EAAE,uBAoD7C,CAAC"}
+{"version":3,"file":"pt-BR.feedback.d.ts","sourceRoot":"","sources":["../../src/pt-BR.feedback.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EACvB,YAAY,EACb,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,YAQjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAQ/B,CAAC;AAgBF,eAAO,MAAM,+BAA+B,EAAE,uBAoD7C,CAAC"}

package/dist/typography/Heading.js

@@ -1,18 +1,18 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-X66E5WSX.js";
-import "../chunk-IWGW2E35.js";
-import "../chunk-CJ45OL7L.js";
+} from "../chunk-C4QKXFZN.js";
+import "../chunk-WF4XK5AS.js";
+import "../chunk-M2GVHVE4.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PT6TCWIW.js";
-import "../chunk-YFODI4KT.js";
-import "../chunk-VBP46YP4.js";
+import "../chunk-6WZUZHJM.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-26X4CZVR.js";
+import "../chunk-VBP46YP4.js";
 import "../chunk-O6MJWHU5.js";
+import "../chunk-26X4CZVR.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/dist/typography/Text.js

@@ -1,16 +1,16 @@
 import "../chunk-VUHLNYAE.js";
 import {
   Text
-} from "../chunk-MKLIMY3D.js";
-import "../chunk-PAT2BQOQ.js";
+} from "../chunk-YZHX2HTC.js";
+import "../chunk-6IWO7CM2.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-YFODI4KT.js";
-import "../chunk-VBP46YP4.js";
+import "../chunk-6WZUZHJM.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-26X4CZVR.js";
+import "../chunk-VBP46YP4.js";
 import "../chunk-O6MJWHU5.js";
+import "../chunk-26X4CZVR.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-YWJDUJAR.js";
+} from "./chunk-O6IF4BZT.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-NYFGFELX.js";
 import "./chunk-3ZVUNSFF.js";
@@ -19,20 +19,20 @@ import "./chunk-K6LNHHSH.js";
 import "./chunk-ZKWVCSAB.js";
 import "./chunk-LN46DSMF.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-MKLIMY3D.js";
-import "./chunk-PAT2BQOQ.js";
+import "./chunk-YZHX2HTC.js";
+import "./chunk-6IWO7CM2.js";
 import "./chunk-TYJR4GOF.js";
 import "./chunk-M47ZOUGF.js";
 import "./chunk-7FDU3FIN.js";
 import "./chunk-EPEJMTCQ.js";
 import "./chunk-GDN2LUTZ.js";
-import "./chunk-YFODI4KT.js";
-import "./chunk-VBP46YP4.js";
+import "./chunk-6WZUZHJM.js";
 import "./chunk-2BYKTBDL.js";
 import "./chunk-AG66JBNH.js";
 import "./chunk-FZXKH2ZT.js";
-import "./chunk-26X4CZVR.js";
+import "./chunk-VBP46YP4.js";
 import "./chunk-O6MJWHU5.js";
+import "./chunk-26X4CZVR.js";
 import "./chunk-FQ6UW7IY.js";
 import "./chunk-6JAIFIPW.js";
 import "./chunk-N3GAFIXG.js";

package/dist/utility/WorkflowStep.js

@@ -6,20 +6,20 @@ import "../chunk-7OO3BELX.js";
 import "../chunk-KJID4PRD.js";
 import "../chunk-RXNIOPOA.js";
 import "../chunk-ZSTSISM6.js";
-import "../chunk-DJKVSUXH.js";
 import "../chunk-7ZPUN7TV.js";
+import "../chunk-DJKVSUXH.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-M47ZOUGF.js";
 import "../chunk-7FDU3FIN.js";
 import "../chunk-EPEJMTCQ.js";
 import "../chunk-GDN2LUTZ.js";
-import "../chunk-YFODI4KT.js";
-import "../chunk-VBP46YP4.js";
+import "../chunk-6WZUZHJM.js";
 import "../chunk-2BYKTBDL.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
-import "../chunk-26X4CZVR.js";
+import "../chunk-VBP46YP4.js";
 import "../chunk-O6MJWHU5.js";
+import "../chunk-26X4CZVR.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.41.2",
+  "version": "6.43.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DataGrid/DataGrid.body.tsx

@@ -55,7 +55,7 @@ function HeaderControls<T extends Record<string, unknown>>({
                     : [],
                 )
               }
-              inputProps={{ 'aria-label': 'Select all rows' }}
+              inputProps={{ 'aria-label': props.copy.selectAllRows }}
             />
           )}
         </TableCell>
@@ -98,6 +98,7 @@ export function GridHeader<T extends Record<string, unknown>>(
             stickyHeader={stickyHeader}
             headerHeight={headerHeight}
             onSort={model.onSort}
+            copy={props.copy}
           />
         ))}
       </TableRow>

package/src/components/data-display/DataGrid/DataGrid.cells.tsx

@@ -24,6 +24,7 @@ import { rem } from '../../../tokens/relative';
 import { cellValue } from './DataGrid.rows';
 import type { DataGridModel } from './DataGrid.model';
 import type { DataGridProps, GridColumn, GridSort } from './DataGrid.types';
+import type { DataGridCopy } from '../../../copy';
 
 /** The glyph for a column's current sort state — unsorted included. */
 function SortIcon({ dir }: { dir: GridSort['dir'] | undefined }): React.JSX.Element {
@@ -68,6 +69,7 @@ export interface HeaderCellProps<T extends Record<string, unknown>> {
   /** The header row's height, as CSS. */
   headerHeight: string;
   onSort: (columnId: string) => void;
+  copy: DataGridCopy;
 }
 
 export function HeaderCell<T extends Record<string, unknown>>({
@@ -77,6 +79,7 @@ export function HeaderCell<T extends Record<string, unknown>>({
   stickyHeader,
   headerHeight,
   onSort,
+  copy,
 }: HeaderCellProps<T>): React.JSX.Element {
   const theme = useTheme();
   const content = column.headerCell ? column.headerCell(column) : column.header;
@@ -109,7 +112,7 @@ export function HeaderCell<T extends Record<string, unknown>>({
             '&:hover': { backgroundColor: 'transparent', opacity: 0.8 },
           }}
           endIcon={<SortIcon dir={sort?.dir} />}
-          aria-label={column.ariaLabel ?? `Sort by ${String(column.header)}`}
+          aria-label={column.ariaLabel ?? copy.sortBy(String(column.header))}
         >
           {content}
         </Button>
@@ -206,7 +209,7 @@ function RowControls<T extends Record<string, unknown>>({
           <Checkbox
             checked={isSelected}
             onChange={(event) => model.onToggleRow(rowId, event.target.checked)}
-            inputProps={{ 'aria-label': `Select row ${index + 1}` }}
+            inputProps={{ 'aria-label': props.copy.selectRow(index + 1) }}
           />
         </TableCell>
       )}
@@ -224,8 +227,8 @@ function RowControls<T extends Record<string, unknown>>({
               aria-expanded={isExpanded}
               aria-label={
                 isExpanded
-                  ? (expansion.collapseLabel ?? 'Collapse row')
-                  : (expansion.expandLabel ?? 'Expand row')
+                  ? (expansion.collapseLabel ?? props.copy.collapseRow)
+                  : (expansion.expandLabel ?? props.copy.expandRow)
               }
               data-slot="expand-toggle"
             >

package/src/components/data-display/DataGrid/DataGrid.model.ts

@@ -15,11 +15,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 
 import { rem, remPx } from '../../../tokens/relative';
+import { useDensity, type DensityLevel } from '../../../tokens/density';
 
 import { processRows } from './DataGrid.rows';
 import type {
   DataGridProps,
   GridColumn,
+  GridDensity,
   GridFilter,
   GridSort,
   SortDirection,
@@ -50,6 +52,13 @@ export interface VisibleRange {
 /** Everything the render needs, and nothing it has to derive. */
 export interface DataGridModel<T extends Record<string, unknown>> {
   containerRef: React.RefObject<HTMLDivElement | null>;
+  /**
+   * The density this render actually used: `props.density`, else the
+   * theme-driven default (FUT-2769, {@link mapThemeToGridDensity}). The same
+   * value `rowHeight` was scaled by — read it here rather than re-deriving it,
+   * so the reported default and the geometry can never disagree.
+   */
+  density: GridDensity;
   /** A row's height as CSS: the design height, density applied, through `rem`. */
   rowHeight: string;
   /**
@@ -82,6 +91,21 @@ function densityHeight(base: number, density: DataGridProps['density']): number
   return base;
 }
 
+/**
+ * The theme's density level, aliased to `GridDensity` (FUT-2769 — umbrella
+ * Decision 7, non-breaking): `GridDensity`'s three names are not the theme's
+ * three names, so this is an alias table rather than a verbatim read.
+ * `'normal'` (the theme's own default, and what a theme with no density at
+ * all resolves to) maps to `'comfortable'` — today's literal default,
+ * unchanged — so the mapping is a no-op exactly when nothing about density
+ * has been said.
+ */
+export function mapThemeToGridDensity(level: DensityLevel): GridDensity {
+  if (level === 'compact') return 'compact';
+  if (level === 'comfortable') return 'spacious';
+  return 'comfortable';
+}
+
 /** The rows this render should show, with every client-mode step resolved. */
 function useProcessedRows<T extends Record<string, unknown>>(
   props: DataGridProps<T>,
@@ -292,11 +316,15 @@ export function useDataGridModel<T extends Record<string, unknown>>(
 ): DataGridModel<T> {
   const { columns } = props;
   const theme = useTheme();
+  const themeDensity = useDensity();
   const containerRef = useRef<HTMLDivElement>(null);
   const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
   const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
+  // An explicit `density` prop wins; otherwise the theme's own level, aliased
+  // to this grid's three names (FUT-2769).
+  const density = props.density ?? mapThemeToGridDensity(themeDensity.level ?? 'normal');
   // 52 design px unless the caller says; the density scales it, then the type scale does.
-  const designRowHeight = densityHeight(props.rowHeight ?? 52, props.density);
+  const designRowHeight = densityHeight(props.rowHeight ?? 52, density);
   const rowPitch = remPx(theme, designRowHeight);
   const columnMap = useMemo(
     () => new Map(columns.map((column) => [column.id, column])),
@@ -311,6 +339,7 @@ export function useDataGridModel<T extends Record<string, unknown>>(
 
   return {
     containerRef,
+    density,
     rowHeight: rem(theme, designRowHeight),
     rowPitch,
     visibleColumns,

package/src/components/data-display/DataGrid/DataGrid.tsx

@@ -19,7 +19,7 @@ import type React from 'react';
 import { GridBody, GridHeader } from './DataGrid.body';
 import { useDataGridModel } from './DataGrid.model';
 import { DataGridEmpty, DataGridError, DataGridLoading } from './DataGrid.states';
-import type { DataGridProps } from './DataGrid.types';
+import type { DataGridProps, GridDensity } from './DataGrid.types';
 
 /**
  * The chrome every render needs, with the defaults resolved ONCE.
@@ -28,7 +28,10 @@ import type { DataGridProps } from './DataGrid.types';
  * a dozen branches: the gate counted them, correctly, as complexity the render
  * did not need to carry.
  */
-function resolveChrome<T extends Record<string, unknown>>(props: DataGridProps<T>): {
+function resolveChrome<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+  density: GridDensity,
+): {
   dataAttrs: Record<string, unknown>;
   placeholder: {
     dataTestId?: string;
@@ -43,7 +46,9 @@ function resolveChrome<T extends Record<string, unknown>>(props: DataGridProps<T
   return {
     dataAttrs: {
       'data-ui': 'datagrid',
-      'data-density': props.density ?? 'comfortable',
+      // The SAME resolved density the row-height geometry used (FUT-2769) —
+      // not re-derived here, so this attribute can never disagree with it.
+      'data-density': density,
       'data-size-mode': props.sizeMode ?? 'auto',
       'data-virtual-rows': props.virtualizeRows ?? true,
       'data-virtual-cols': props.virtualizeColumns ?? false,
@@ -51,7 +56,7 @@ function resolveChrome<T extends Record<string, unknown>>(props: DataGridProps<T
     },
     placeholder: {
       dataTestId,
-      ariaLabel: props.ariaLabel ?? 'Data grid',
+      ariaLabel: props.ariaLabel ?? props.copy.gridLabel,
       className,
       style,
       // Only the DOM-safe leftovers reach the element: every grid-specific prop
@@ -65,7 +70,7 @@ export const DataGrid = <T extends Record<string, unknown> = Record<string, unkn
   props: DataGridProps<T>,
 ): React.JSX.Element => {
   const model = useDataGridModel(props);
-  const { dataAttrs, placeholder } = resolveChrome(props);
+  const { dataAttrs, placeholder } = resolveChrome(props, model.density);
 
   if (props.loading) return <DataGridLoading {...placeholder} />;
   if (props.error) return <DataGridError {...placeholder} error={props.error} />;
@@ -117,6 +122,7 @@ export const DataGrid = <T extends Record<string, unknown> = Record<string, unkn
  * none reaches the DOM — the check that would have caught `emptyText` missing.
  */
 export const GRID_ONLY_PROPS = [
+  'copy',
   'rows',
   'columns',
   'getRowId',

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

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { DataGridCopy } from '../../../copy';
+
 export type GridSizeMode = 'auto' | 'fixed' | 'fill';
 export type GridDensity = 'compact' | 'comfortable' | 'spacious';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -83,9 +85,9 @@ export interface GridRowExpansion<T = Record<string, unknown>> {
    * toggle — a chevron that opens onto nothing is a promise the row cannot keep.
    */
   isRowExpandable?: (row: T) => boolean;
-  /** The chevron's accessible name while the row is collapsed. Default "Expand row". */
+  /** The chevron's accessible name while the row is collapsed. Defaults to `copy.expandRow`. */
   expandLabel?: string;
-  /** The chevron's accessible name while the row is expanded. Default "Collapse row". */
+  /** The chevron's accessible name while the row is expanded. Defaults to `copy.collapseRow`. */
   collapseLabel?: string;
 }
 
@@ -138,6 +140,15 @@ export interface DataGridProps<T = Record<string, unknown>> extends React.HTMLAt
    * "No data available", on the package every host renders.
    */
   emptyText: string;
+  /**
+   * Every fallback word the grid's own chrome renders — a sortable header's
+   * name, a row's selection checkbox, the select-all checkbox, the expand
+   * chevron's two states, and the grid's own accessible name. REQUIRED — the
+   * fallbacks were English literals with no way to localise them. A caller's
+   * `column.ariaLabel`, `expansion.expandLabel`/`collapseLabel` and the grid's
+   * own `ariaLabel` still win over it wherever both are given.
+   */
+  copy: DataGridCopy;
   /** Dataset (client mode uses this array; server mode renders current page) */
   rows: T[];
   /** Stable row id accessor */

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -1,4 +1,4 @@
-import type { CategorySelectCopy, ConfirmActionCopy, TableFilterCopy } from "../../../copy";
+import type { CategorySelectCopy, ConfirmActionCopy, DataGridCopy, TableFilterCopy } from "../../../copy";
 import type { SavedViewsLabels } from "../../layout/ContentToolbar/ContentToolbar.types";
 /**
  * Every word the DataViews family renders, as REQUIRED host config (FUT-760).
@@ -143,7 +143,13 @@ export interface DataViewsExportCopy {
   triggerLabel: string;
 }
 
-export interface DataViewsGridCopy {
+/**
+ * The table layout's own `<DataGrid>`, which this surface mounts but does not
+ * own — so it carries the grid's full `DataGridCopy` (its sortable headers,
+ * its row/select-all checkboxes, its expand chevron, its own accessible name)
+ * alongside the words DataViews renders around it.
+ */
+export interface DataViewsGridCopy extends DataGridCopy {
   /** The per-row kebab's accessible name. */
   rowActions: string;
   bulkActions(selectedCount: number): string;

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -85,6 +85,7 @@ function GridBody<T extends Record<string, unknown>>({
         data-testid={dataTestId}
         emptyState={emptyState}
         emptyText={copy.grid.emptyFilteredTitle}
+        copy={copy.grid}
       />
     </Box>
   );

package/src/components/data-display/DataViews/data-views-layout-context.tsx

@@ -7,6 +7,7 @@ import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
 import { Slider } from "../../form/Slider";
 import { Box } from "../../../mui/Box";
 import { sxRem } from "../../../tokens/relative";
+import { useDensity, type DensityLevel } from "../../../tokens/density";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from "./data-views-types";
@@ -166,6 +167,22 @@ function isDensity(value: unknown): value is DataViewsDensity {
   return DENSITIES.includes(value as DataViewsDensity);
 }
 
+/**
+ * The theme's density level, aliased to `DataViewsDensity` (FUT-2769 —
+ * umbrella Decision 7, non-breaking): `DataViewsDensity`'s three names are not
+ * the theme's three names, so this is an alias table rather than a verbatim
+ * read. `'normal'` (the theme's own default, and what a theme with no density
+ * at all resolves to) maps to `'cozy'` — today's literal default, unchanged —
+ * so the mapping is a no-op exactly when nothing about density has been said.
+ * The STORED per-viewer preference still wins over this default, unchanged
+ * from today (below).
+ */
+export function mapThemeToDataViewsDensity(level: DensityLevel): DataViewsDensity {
+  if (level === 'compact') return 'compact';
+  if (level === 'comfortable') return 'comfortable';
+  return 'cozy';
+}
+
 /** The remembered density, or undefined (no window, no value, junk). */
 function readStoredDensity(): DataViewsDensity | undefined {
   try {
@@ -258,6 +275,10 @@ export function DataViewsLayoutProvider({
   children,
 }: LayoutProviderProps): React.JSX.Element {
   const availability = { canUseCards, canUseList, canUseBoard };
+  // Read once, outside the lazy initializer below: a hook cannot be called
+  // from inside one (FUT-2769 — the theme is only a fallback when nothing is
+  // stored, same precedence as before this ticket).
+  const themeDensity = useDensity();
   const [layout, setLayoutState] = useState<DataViewsLayout>(() =>
     pinLayout(
       viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,
@@ -265,7 +286,9 @@ export function DataViewsLayoutProvider({
     ),
   );
   const [density, setDensityState] = useState<DataViewsDensity>(
-    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? "cozy",
+    () =>
+      (ignoreStoredLayout ? undefined : readStoredDensity()) ??
+      mapThemeToDataViewsDensity(themeDensity.level ?? "normal"),
   );
   const [zoom, setZoom] = useState(DEFAULT_ZOOM);
   // A newly applied view carrying a layout switches to it (its reference-change

package/src/components/data-display/Lightbox/Lightbox.tsx

@@ -22,7 +22,13 @@ const DIALOG_STATIC_PROPS = {
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
   PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },
-  'aria-label': 'Lightbox',
+  // `aria-labelledby` is the one accessible name for the modal itself: MUI
+  // forwards it (with `aria-modal` and its own `role="dialog"`) onto the
+  // Paper, the element that is actually the WAI-ARIA dialog. A plain
+  // `aria-label` alongside it would land on the OUTER root instead — a
+  // second, non-modal `role="dialog"` this component sets of its own accord
+  // — duplicating (and, as a static English literal, contradicting) the name
+  // the Paper already carries.
   'aria-labelledby': 'lightbox-title',
   role: 'dialog',
   'aria-modal': 'true',
@@ -51,7 +57,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
     >
       {/* Visually hidden title for screen readers */}
       <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: sxRem(-10000) }}>
-        Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}
+        {props.copy.dialogLabel} - {currentItem?.alt || props.copy.itemPosition(currentIndex + 1, items.length)}
       </Typography>
 
       <LightboxOverlay

package/src/components/data-display/Lightbox/LightboxMedia.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { useLightboxCopy } from './lightbox-copy-context';
 import type { LightboxItem } from './Lightbox.types';
 
 export interface LightboxMediaProps {
@@ -37,6 +38,8 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
   onWheel,
   onDoubleClick,
 }) => {
+  const copy = useLightboxCopy();
+
   if (item.type === 'video') {
     return (
       <video
@@ -45,7 +48,7 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
         style={{ maxWidth: '90vw', maxHeight: '80vh', objectFit: 'contain' }}
         onLoadStart={onLoadStart}
         onLoadedData={onLoaded}
-        aria-label={item.alt || `Video ${index + 1} of ${total}`}
+        aria-label={item.alt || copy.videoFallback(index + 1, total)}
         data-testid={testId('video')}
       />
     );
@@ -54,7 +57,7 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
   return (
     <img
       src={item.src}
-      alt={item.alt || `Image ${index + 1} of ${total}`}
+      alt={item.alt || copy.imageFallback(index + 1, total)}
       style={{
         // At 1x the image is bounded by the viewport; once zoomed it is allowed
         // to overflow so there is something to pan around.

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -5,6 +5,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { thumbnailStripSx } from './Lightbox.constants';
+import { useLightboxCopy } from './lightbox-copy-context';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -41,7 +42,9 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
   currentIndex,
   testId,
   onSelect,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <Box
     sx={{
       ...thumbnailStripSx,
@@ -78,11 +81,12 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
         ) : (
           <img
             src={item.src}
-            alt={item.alt || `Thumbnail ${index + 1}`}
+            alt={item.alt || copy.thumbnailFallback(index + 1)}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         )}
       </Box>
     ))}
   </Box>
-);
+  );
+};

package/src/components/data-display/Table/Table.helpers.ts

@@ -3,8 +3,9 @@ import type { Theme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
 import { rem } from '../../../tokens/relative';
+import type { DensityLevel } from '../../../tokens/density';
 
-import type { TableProps } from './Table.types';
+import type { TableDensity, TableProps } from './Table.types';
 
 /**
  * A virtualised row's height in design px: the caller's `rowHeight`, else 52.
@@ -13,6 +14,18 @@ import type { TableProps } from './Table.types';
  */
 export const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;
 
+/**
+ * `density`'s default (FUT-2769): the caller's own prop, else the theme's
+ * level — `'normal'` for a theme with no density at all (`useDensity()`'s own
+ * fallback) or an unnamed numeric one. `TableDensity` is a verbatim match for
+ * the theme's `DensityLevel`, so no alias table is needed, unlike `DataGrid`'s
+ * `mapThemeToGridDensity` or `DataViews`' `mapThemeToDataViewsDensity`.
+ */
+export const resolveTableDensity = (
+  explicit: TableDensity | undefined,
+  themeLevel: DensityLevel | undefined,
+): TableDensity => explicit ?? themeLevel ?? 'normal';
+
 /** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
 const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
   const box = containerHeight || 400;
@@ -71,6 +84,12 @@ export const virtualHeight = (p: TableProps): number | undefined =>
     ? p.containerHeight
     : undefined;
 
+// `density` is NOT here (FUT-2769): `TableDensity` is a verbatim match for
+// the theme's `DensityLevel`, so `Table.tsx` resolves it itself —
+// `props.density ?? (useDensity().level ?? 'normal')` — reading the theme
+// requires a hook, which this module-level constant cannot call. At
+// `theme.density` unset, or its level `'normal'`, that reproduces this
+// object's OTHER defaults' shape exactly: today's literal `'normal'`.
 export const TABLE_DEFAULTS: Partial<TableProps> = {
   variant: 'default',
   stripeColor: 'neutral',
@@ -78,7 +97,6 @@ export const TABLE_DEFAULTS: Partial<TableProps> = {
   pulse: false,
   hoverable: false,
   loading: false,
-  density: 'normal',
   stickyHeader: false,
   selectable: false,
   selectedRows: [],

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

@@ -24,6 +24,7 @@ import {
   containerStyle,
   definedProps,
   headerRefFor,
+  resolveTableDensity,
   scrollerRadiusStyle,
   tableDomProps,
   tableRowHeight,
@@ -32,9 +33,9 @@ import {
 import { useTableSelection, useVirtualScrolling } from './Table.hooks';
 import { EnhancedTableBody, EnhancedTableHeader } from './TableParts';
 import { EmptyRow, NoDataPlaceholder } from './TableStates';
-import {
-  tableStyles } from './Table.styles';
+import { tableStyles } from './Table.styles';
 import { rem } from '../../../tokens/relative';
+import { useDensity } from '../../../tokens/density';
 
 // Helper function to get stripe color from theme
 const StyledTable = styled(MuiTable, {
@@ -329,7 +330,9 @@ const TableEmptyState: React.FC<{
 
 export const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(
   (tableProps, ref) => {
+    const themeDensity = useDensity(); // FUT-2769 — density's default; see resolveTableDensity
     const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) } as TableProps;
+    resolved.density = resolveTableDensity(resolved.density, themeDensity.level);
     const {
       columns,
       data,