@gntik-ai/blocks 0.5.0 → 0.6.0

package/src/auth/SignUpForm/examples/CustomFields.tsx

@@ -0,0 +1,56 @@
+import { SignUpForm } from '../SignUpForm';
+
+/** Ordered text/email fields, kit validation, and values.fields keyed by these ids. */
+export default function CustomFields() {
+  return (
+    <SignUpForm
+      sso={null}
+      minPasswordLength={12}
+      passwordHelp={(minimum) => `Use at least ${minimum} characters.`}
+      fields={[
+        {
+          id: 'username',
+          label: 'Username',
+          placeholder: 'Account name',
+          help: 'Choose your account name.',
+          required: true,
+          type: 'text',
+          autoComplete: 'username',
+        },
+        {
+          id: 'displayName',
+          label: 'Display name',
+          placeholder: 'Avery Collins',
+          help: 'The name others will see.',
+          required: true,
+          autoComplete: 'name',
+        },
+        {
+          id: 'email',
+          label: 'Email',
+          placeholder: 'you@example.com',
+          help: 'For account notifications.',
+          required: true,
+          type: 'email',
+          autoComplete: 'email',
+        },
+        {
+          id: 'tenant',
+          label: 'Tenant identifier',
+          placeholder: 'Organization',
+          help: 'Your organization identifier.',
+          required: true,
+          autoComplete: 'off',
+        },
+        {
+          id: 'workspace',
+          label: 'Workspace identifier',
+          placeholder: 'Workspace',
+          help: 'Optional. Leave empty to choose later.',
+          required: false,
+          autoComplete: 'off',
+        },
+      ]}
+    />
+  );
+}

package/src/auth/SignUpForm/examples/Error.tsx

@@ -0,0 +1,5 @@
+import { SignUpForm } from '../SignUpForm';
+
+export default function Error() {
+  return <SignUpForm error="The account could not be created. Try again." sso={null} />;
+}

package/src/auth/SignUpForm/examples/Loading.tsx

@@ -0,0 +1,6 @@
+import { SignUpForm } from '../SignUpForm';
+
+/** Policy loading is separate from loading, which represents submitting an account. */
+export default function Loading() {
+  return <SignUpForm policyLoading />;
+}

package/src/auth/SignUpForm/examples/NoTerms.tsx

@@ -0,0 +1,6 @@
+import { SignUpForm } from '../SignUpForm';
+
+/** Explicit opt-out; omitting terms continues to require consent. */
+export default function NoTerms() {
+  return <SignUpForm terms={false} sso={null} passwordHelp={(minimum) => `Use at least ${minimum} characters.`} />;
+}

package/src/auth/SignUpForm/examples/Submitting.tsx

@@ -0,0 +1,5 @@
+import { SignUpForm } from '../SignUpForm';
+
+export default function Submitting() {
+  return <SignUpForm loading sso={null} />;
+}

package/src/auth/SignUpForm/examples/Unavailable.tsx

@@ -0,0 +1,15 @@
+import { Link } from '@gntik-ai/ui';
+import { SignUpForm } from '../SignUpForm';
+
+/** No account creation form or submit control while self-service is unavailable. */
+export default function Unavailable() {
+  return (
+    <SignUpForm
+      unavailable={{
+        title: 'Registration unavailable',
+        message: 'Contact your administrator to request an account.',
+        action: <Link href="mailto:admin@example.com">Request access</Link>,
+      }}
+    />
+  );
+}

package/src/auth/index.ts

@@ -13,3 +13,4 @@ export { meta as ssoButtonsMeta } from './SsoButtons/block.meta';
 export { ssoProviders } from './SsoButtons/fixtures';
 export { AuthHeader, AuthDivider, type AuthHeaderProps } from './shared';
 export type { AuthIdentifierConfig, AuthValidationMessages, AuthFormAccessibilityProps } from './shared';
+export type { AuthSignUpField, AuthUnavailableState, AuthSignUpValidationMessages } from './shared';

package/src/auth/shared.tsx

@@ -111,3 +111,37 @@ export function authIdentifierError(value: string, config?: AuthIdentifierConfig
     return messages?.identifierInvalid ?? fallback;
   return null;
 }
+
+/** Ordered text/email fields collected before the sign-up password. Ids must be unique. */
+export interface AuthSignUpField {
+  id: string;
+  label: string;
+  placeholder?: string;
+  help?: ReactNode;
+  required?: boolean;
+  type?: 'text' | 'email';
+  autoComplete?: string;
+  /** Consumer copy for kit-owned validation. */
+  messages?: { required?: string; invalid?: string };
+}
+
+export function authSignUpFieldError(value: string, field: AuthSignUpField) {
+  const trimmed = value.trim();
+  if (!trimmed) return field.required ? (field.messages?.required ?? `Enter ${field.label}.`) : null;
+  if (field.type === 'email' && !EMAIL_RE.test(trimmed))
+    return field.messages?.invalid ?? 'Enter a valid email address.';
+  return null;
+}
+
+/** Consumer-owned copy and optional action when account creation is unavailable. */
+export interface AuthUnavailableState {
+  title: ReactNode;
+  message: ReactNode;
+  action?: ReactNode;
+}
+
+/** Kit-owned sign-up validation with consumer-owned copy. */
+export interface AuthSignUpValidationMessages {
+  passwordTooShort?: (minimum: number) => string;
+  termsRequired?: string;
+}

package/src/meta.ts

@@ -20,4 +20,6 @@ export interface BlockMeta {
   description: string;
   /** @gntik-ai/ui (and other kit) components it composes, for docs and agents. */
   uses: string[];
+  /** Optional per-instance copy contract, listed in docs and kit metadata. */
+  labels?: Array<{ key: string; type: string; state: string }>;
 }

package/src/tables/DataTable/DataTable.labels.test.tsx

@@ -0,0 +1,291 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { DataTable } from './DataTable';
+import type { DataTableLabels } from './labels';
+
+const rows = [
+  { id: 'a', name: 'Alpha', region: 'West' },
+  { id: 'b', name: 'Beta', region: 'West' },
+];
+const columns = [
+  { id: 'name', header: 'Name', accessor: (r: (typeof rows)[number]) => r.name, width: 200 },
+  { id: 'region', header: 'Region', accessor: (r: (typeof rows)[number]) => r.region, width: 160 },
+];
+const labels = {
+  scrollRegion: 'Tabla con desplazamiento',
+  columns: 'Columnas',
+  visibleColumns: 'Columnas visibles',
+  pinColumns: 'Fijar columnas',
+  pinnedLeft: 'Izquierda',
+  pinnedRight: 'Derecha',
+  pinLeft: 'Fijar izquierda',
+  pinRight: 'Fijar derecha',
+  unpinned: 'Sin fijar',
+  density: 'Densidad',
+  comfortable: 'Cómoda',
+  compact: 'Compacta',
+  defaultView: 'Vista predeterminada',
+  defaultViewOption: 'Sin vista',
+  modified: '(modificada)',
+  views: 'Vistas',
+  saveChanges: 'Guardar cambios',
+  saveAs: 'Guardar como…',
+  renameView: 'Renombrar vista…',
+  deleteView: 'Eliminar vista',
+  resetChanges: 'Restablecer cambios',
+  saveViewTitle: 'Nueva vista',
+  renameViewTitle: 'Cambiar nombre',
+  viewName: 'Nombre de vista',
+  cancel: 'Cancelar',
+  saveView: 'Guardar vista',
+  rename: 'Renombrar',
+  closeDialog: 'Cerrar diálogo',
+  selectionCount: vi.fn((n: number) => `${n} seleccionadas`),
+  selectAll: 'Seleccionar página',
+  selection: 'Selección',
+  actions: 'Acciones',
+  selectRow: vi.fn((name: string) => `Seleccionar ${name}`),
+  rowActions: vi.fn((name: string) => `Acciones de ${name}`),
+  resizeColumn: vi.fn((name: string) => `Cambiar ancho de ${name}`),
+  columnWidth: vi.fn((width: number) => `${width} píxeles`),
+} satisfies Partial<DataTableLabels>;
+
+it('replaces table menus, selection announcements, resize names and saved-view dialogs', async () => {
+  const user = userEvent.setup();
+  const { container } = render(
+    <DataTable
+      rows={rows}
+      columns={columns}
+      caption="Items"
+      paginated={false}
+      resizable
+      showPinMenu
+      defaultViews={[]}
+      labels={labels}
+      rowActions={() => [{ label: 'Inspect', onClick: () => {} }]}
+    />,
+  );
+  expect(screen.getByRole('group', { name: 'Densidad' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Compacta' }));
+  await user.click(screen.getByRole('button', { name: 'Cómoda' }));
+  expect(screen.getByRole('checkbox', { name: 'Seleccionar página' })).toBeVisible();
+  await user.click(screen.getByRole('checkbox', { name: 'Seleccionar Alpha' }));
+  expect(container.querySelector('[aria-live]')?.textContent).toBe('1 seleccionadas');
+  expect(labels.selectionCount).toHaveBeenLastCalledWith(1);
+  expect(labels.selectRow).toHaveBeenCalledWith('Alpha');
+  expect(screen.getByRole('button', { name: 'Acciones de Alpha' })).toBeVisible();
+  const handle = screen.getByRole('separator', { name: 'Cambiar ancho de Name' });
+  expect(handle).toHaveAttribute('aria-valuetext', '200 píxeles');
+  expect(labels.resizeColumn).toHaveBeenCalledWith('Name');
+  expect(labels.columnWidth).toHaveBeenCalledWith(200);
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  expect(await screen.findByText('Columnas visibles')).toBeVisible();
+  expect(screen.getByText('Fijar columnas')).toBeVisible();
+  await user.click(screen.getByRole('menuitemcheckbox', { name: 'Region' }));
+  await user.keyboard('{Escape}');
+  await user.click(screen.getByRole('button', { name: 'Vista predeterminada (modificada)' }));
+  expect(await screen.findByText('Vistas', { exact: true })).toBeVisible();
+  expect(screen.getByRole('menuitemradio', { name: 'Sin vista' })).toBeVisible();
+  for (const name of ['Guardar cambios', 'Renombrar vista…', 'Eliminar vista', 'Restablecer cambios'])
+    expect(screen.getByRole('menuitem', { name })).toBeVisible();
+  await user.click(screen.getByRole('menuitem', { name: 'Guardar como…' }));
+  expect(await screen.findByRole('dialog', { name: 'Nueva vista' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cerrar diálogo' })).toBeVisible();
+  await user.type(screen.getByRole('textbox', { name: 'Nombre de vista' }), 'My view');
+  await user.click(screen.getByRole('button', { name: 'Guardar vista' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'My view' }));
+  await user.click(await screen.findByRole('menuitem', { name: 'Renombrar vista…' }));
+  expect(await screen.findByRole('dialog', { name: 'Cambiar nombre' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Renombrar' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Cancelar' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+});
+
+it('replaces group counts, ungrouped names, empty and loading states, and the nested footer', async () => {
+  const selectGroup = vi.fn((name: string) => `Todo en ${name}`);
+  const groupRows = vi.fn((count: number) => `filas: ${count}`);
+  const loading = vi.fn((caption: string) => `Cargando ${caption}`);
+  const extra: Partial<DataTableLabels> = {
+    selectGroup,
+    groupRows,
+    noGroup: 'Sin grupo',
+    emptyTitle: 'Sin resultados',
+    emptyDescription: 'Cambie los filtros',
+    loading,
+    rowsPerPage: 'Filas',
+    rowsPerPageLabel: 'Por página',
+    rangeSummary: (a, b, n) => `${a}/${b}/${n}`,
+    paginationNav: (noun) => `Páginas de ${noun}`,
+    previous: 'Atrás',
+    next: 'Adelante',
+    page: (n) => `Ir a ${n}`,
+  };
+  const { rerender } = render(
+    <DataTable rows={rows} columns={columns} groupBy={() => ''} labels={extra} caption="Items" />,
+  );
+  expect(screen.getByRole('checkbox', { name: 'Todo en Sin grupo' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Sin grupo 2 filas: 2' })).toBeVisible();
+  expect(selectGroup).toHaveBeenCalledWith('Sin grupo');
+  expect(groupRows).toHaveBeenCalledWith(2);
+  expect(screen.getByRole('navigation', { name: 'Páginas de Items' })).toBeVisible();
+  expect(screen.getByRole('combobox', { name: 'Por página' })).toBeVisible();
+  expect(screen.getByText('1/2/2')).toBeVisible();
+  rerender(<DataTable rows={[]} columns={columns} labels={extra} caption="Items" />);
+  expect(screen.getByText('Sin resultados')).toBeVisible();
+  expect(screen.getByText('Cambie los filtros')).toBeVisible();
+  rerender(<DataTable rows={rows} columns={columns} labels={extra} caption="Items" loading />);
+  expect(screen.getByRole('status').textContent).toBe('Cargando Items');
+  expect(loading).toHaveBeenCalledWith('Items');
+});
+
+it('replaces built-in inline editor names, hints and validation errors', async () => {
+  const user = userEvent.setup();
+  const editLabel = vi.fn((column: string, row: string) => `${column} de ${row}`);
+  const minimumValue = vi.fn((n: number) => `Mínimo ${n}`);
+  const maximumValue = vi.fn((n: number) => `Máximo ${n}`);
+  const editable = [
+    {
+      id: 'name',
+      header: 'Name',
+      accessor: (r: (typeof rows)[number]) => r.name,
+      editable: true,
+      editor: { type: 'number' as const, min: 1, max: 10 },
+    },
+  ];
+  render(
+    <DataTable
+      rows={rows}
+      columns={editable}
+      paginated={false}
+      onCellEdit={() => false}
+      labels={{
+        editHint: 'Pulse Intro para editar',
+        editLabel,
+        editError: 'No se guardó',
+        enterNumber: 'Escriba un número',
+        minimumValue,
+        maximumValue,
+      }}
+    />,
+  );
+  expect(screen.getByRole('button', { name: 'Alpha' })).toHaveAccessibleDescription('Pulse Intro para editar');
+  await user.click(screen.getByRole('button', { name: 'Alpha' }));
+  const input = screen.getByRole('spinbutton', { name: 'Name de Alpha' });
+  expect(editLabel).toHaveBeenCalledWith('Name', 'Alpha');
+  await user.clear(input);
+  await user.type(input, '0{Enter}');
+  expect(await screen.findByRole('alert')).toHaveTextContent('Mínimo 1');
+  expect(minimumValue).toHaveBeenCalledWith(1);
+  await user.clear(input);
+  await user.type(input, '11{Enter}');
+  expect(screen.getByRole('alert')).toHaveTextContent('Máximo 10');
+  expect(maximumValue).toHaveBeenCalledWith(10);
+  await user.clear(input);
+  await user.type(input, '5{Enter}');
+  expect(await screen.findByText('No se guardó')).toBeVisible();
+});
+
+it('keeps provider translations and legacy literals under a partial override', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} paginated={false} defaultViews={[]} defaultSelectedIds={['a']} />
+    </I18nProvider>,
+  );
+  const table = container.querySelector('table')?.outerHTML;
+  const groupName = screen.getByRole('group').getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <DataTable
+        rows={rows}
+        columns={columns}
+        paginated={false}
+        defaultViews={[]}
+        defaultSelectedIds={['a']}
+        labels={{ defaultView: 'Custom view' }}
+      />
+    </I18nProvider>,
+  );
+  expect(container.querySelector('table')?.outerHTML).toBe(table);
+  expect(screen.getByRole('group')).toHaveAttribute('aria-label', groupName);
+  expect(screen.getByRole('button', { name: 'Custom view' })).toBeVisible();
+  expect(screen.getByText('1 selected')).toBeVisible();
+});
+
+it('retains the published text-node boundaries for default selection and loading summaries', () => {
+  const { container, rerender } = render(
+    <DataTable rows={rows} columns={columns} defaultSelectedIds={['a']} paginated={false} caption="Items" />,
+  );
+  expect([...container.querySelector('[aria-live]')!.childNodes].map((node) => node.textContent)).toEqual([
+    '1',
+    ' selected',
+  ]);
+  rerender(<DataTable rows={rows} columns={columns} loading caption="Items" />);
+  expect([...screen.getByRole('status').childNodes].map((node) => node.textContent)).toEqual([
+    'Loading ',
+    'items',
+    '…',
+  ]);
+});
+
+it('replaces every pin option and the single-selection heading without translating caller radio names', async () => {
+  const user = userEvent.setup({ pointerEventsCheck: 0 });
+  const full: DataTableLabels = {
+    ...labels,
+    selectGroup: (group) => `Grupo ${group}`,
+    groupRows: (count) => `${count} filas`,
+    noGroup: 'Sin grupo',
+    emptyTitle: 'Vacío',
+    emptyDescription: 'Sin coincidencias',
+    loading: (caption) => `Cargando ${caption}`,
+    editHint: 'Editar',
+    editLabel: (column, row) => `${column} de ${row}`,
+    editError: 'Error al guardar',
+    enterNumber: 'Número requerido',
+    minimumValue: (min) => `Mínimo ${min}`,
+    maximumValue: (max) => `Máximo ${max}`,
+    rowsPerPage: 'Filas por página',
+    rowsPerPageLabel: 'Elegir tamaño',
+    rangeSummary: (from, to, total) => `${from}|${to}|${total}`,
+    paginationNav: (noun) => `Páginas de ${noun}`,
+    previous: 'Anterior',
+    next: 'Siguiente',
+    page: (n) => `Página ${n}`,
+  };
+  const { rerender } = render(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} paginated={false} showPinMenu labels={full} />
+    </I18nProvider>,
+  );
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  const submenu = await screen.findByRole('menuitem', { name: 'Name' });
+  act(() => submenu.focus());
+  await user.keyboard('{ArrowRight}');
+  for (const name of ['Fijar izquierda', 'Fijar derecha', 'Sin fijar'])
+    expect(await screen.findByRole('menuitemradio', { name })).toBeVisible();
+  await user.click(screen.getByRole('menuitemradio', { name: 'Fijar izquierda' }));
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  await screen.findByRole('menu');
+  expect(await screen.findByRole('menuitem', { name: /Name.*Izquierda/ })).toHaveAccessibleName('NameIzquierda');
+  act(() => screen.getByRole('menuitem', { name: /Name.*Izquierda/ }).focus());
+  await user.keyboard('{ArrowRight}');
+  await user.click(await screen.findByRole('menuitemradio', { name: 'Fijar derecha' }));
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  expect(await screen.findByRole('menuitem', { name: /Name.*Derecha/ })).toBeVisible();
+  await user.keyboard('{Escape}');
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  rerender(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} labels={full} selectionMode="single" legend="Items" />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('columnheader', { name: 'Selección' })).toBeInTheDocument();
+  expect(screen.getByRole('radio', { name: 'Alpha' })).toBeVisible();
+  expect(screen.queryByRole('radio', { name: 'Seleccionar Alpha' })).toBeNull();
+});

package/src/tables/DataTable/DataTable.overflow-labels.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { I18nProvider } from '@gntik-ai/ui';
+import { DataTable } from './DataTable';
+
+beforeEach(() => {
+  // jsdom has no layout. Supply the browser geometry/notification boundary so the
+  // real Table overflow detection exposes its keyboard-focusable scroll region.
+  vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(800);
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(300);
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      constructor(private readonly notify: () => void) {}
+      observe() {
+        this.notify();
+      }
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+it.each([
+  ['en', 'Scrollable table'],
+  ['es', 'Tabla desplazable'],
+] as const)('labels the overflowing region per instance over the %s provider default', (locale, defaultName) => {
+  const { rerender } = render(
+    <I18nProvider locale={locale}>
+      <DataTable paginated={false} />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('region', { name: defaultName })).toHaveAttribute('tabindex', '0');
+  rerender(
+    <I18nProvider locale={locale}>
+      <DataTable paginated={false} labels={{ scrollRegion: 'Tabla con desplazamiento' }} />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('region', { name: 'Tabla con desplazamiento' })).toHaveAttribute('tabindex', '0');
+  expect(screen.queryByRole('region', { name: defaultName })).toBeNull();
+  rerender(
+    <I18nProvider locale={locale}>
+      <DataTable paginated={false} labels={{ columns: 'Elegir columnas' }} />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('region', { name: defaultName })).toHaveAttribute('tabindex', '0');
+});
+
+it('keeps the caller caption as the virtualized region name', () => {
+  render(
+    <DataTable paginated={false} virtualize caption="Items" labels={{ scrollRegion: 'Tabla con desplazamiento' }} />,
+  );
+  expect(screen.getByRole('region', { name: 'Items' })).toHaveAttribute('tabindex', '0');
+  expect(screen.queryByRole('region', { name: 'Tabla con desplazamiento' })).toBeNull();
+});

package/src/tables/DataTable/DataTable.tsx

@@ -48,6 +48,7 @@ import { useControllable, useTableViews } from './use-table-views';
 import { useVirtualRows } from './use-virtual-rows';
 import { ViewSwitcher, type DataTableViewState } from './views';
 
+export type { DataTableLabels } from './labels';
 export type { DataTableProps } from './data-table-props';
 
 const defaultRowId = (row: unknown): string => {
@@ -135,6 +136,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
   onFiltersChange,
   toolbar,
   className,
+  labels,
 }: DataTableProps<T>) {
   const { t } = useI18n();
   const singleMode = selectionMode === 'single';
@@ -224,7 +226,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
     setInnerCollapsed(next);
     onCollapsedGroupsChange?.([...next]);
   };
-  const nameOf = (key: string) => key || 'No group';
+  const nameOf = (key: string) => key || (labels?.noGroup ?? 'No group');
   const bodyGroups: Array<DataTableBodyGroup<T>> | undefined =
     effectiveGroupBy && allGroups
       ? allGroups
@@ -349,7 +351,11 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
               <>
                 {selectionSummary && (
                   <span className="text-[12.5px] font-semibold text-foreground" aria-live="polite">
-                    {selectedList.length} selected
+                    {labels?.selectionCount ? (
+                      labels.selectionCount(selectedList.length)
+                    ) : (
+                      <>{selectedList.length} selected</>
+                    )}
                   </span>
                 )}
                 {selectionSummary && bulkActions && <span aria-hidden className="h-4 w-px bg-border" />}
@@ -362,6 +368,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
           <div className="flex items-center gap-2">
             {showViews && (
               <ViewSwitcher
+                labels={labels}
                 views={viewsApi.views}
                 activeId={viewsApi.activeId}
                 dirty={viewsApi.dirty}
@@ -373,9 +380,10 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                 onReset={viewsApi.reset}
               />
             )}
-            {showDensityToggle && <DensityToggle value={density} onChange={changeDensity} />}
+            {showDensityToggle && <DensityToggle labels={labels} value={density} onChange={changeDensity} />}
             {showColumnMenu && (
               <ColumnVisibilityMenu
+                labels={labels}
                 columns={columns}
                 hidden={hidden}
                 onToggle={toggleColumn}
@@ -388,7 +396,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
       )}
       {anyEditable && (
         <span id={editHintId} className="sr-only">
-          Press Enter or F2 to edit.
+          {labels?.editHint ?? 'Press Enter or F2 to edit.'}
         </span>
       )}
       {/* The toggle drives a density context for the table: its rows and the controls inside them. */}
@@ -400,7 +408,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
             aria-rowcount={virtual ? items + 1 : undefined}
             stickyHeader={virtualOn}
             containerClassName={virtualOn ? virtualContainerClassName : undefined}
-            containerLabel={virtualOn ? caption : undefined}
+            containerLabel={virtualOn ? caption : labels?.scrollRegion}
             // Keep single-mode resize handles inside their cells. Overflow at the
             // final column would add a scroll-container stop before the header.
             className={cn(
@@ -423,10 +431,10 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                     )}
                     style={layout.lead.style}
                   >
-                    {singleMode && <span className="sr-only">{t('table.selection')}</span>}
+                    {singleMode && <span className="sr-only">{labels?.selection ?? t('table.selection')}</span>}
                     {selectable && (
                       <Checkbox
-                        aria-label={t('table.selectAllPage')}
+                        aria-label={labels?.selectAll ?? t('table.selectAllPage')}
                         checked={header.checked}
                         indeterminate={header.indeterminate}
                         disabled={loading || pageIds.length === 0}
@@ -439,6 +447,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                   const bounds = widthBounds(c);
                   return (
                     <DataTableHeadCell
+                      labels={labels}
                       key={c.id}
                       column={c}
                       layout={layout.columns.get(c.id)}
@@ -467,12 +476,13 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                     )}
                     style={layout.trail.style}
                   >
-                    <span className="sr-only">{t('table.actions')}</span>
+                    <span className="sr-only">{labels?.actions ?? t('table.actions')}</span>
                   </TableHead>
                 )}
               </TableRow>
             </TableHeader>
             <DataTableBody
+              labels={labels}
               rows={pageRows}
               columns={visibleColumns}
               getRowId={getRowId}
@@ -500,11 +510,12 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
       </SelectionGroup>
       {loading && (
         <p role="status" className="sr-only">
-          Loading {caption.toLowerCase()}…
+          {labels?.loading ? labels.loading(caption) : <>Loading {caption.toLowerCase()}…</>}
         </p>
       )}
       {paginated && !loading && rows.length > 0 && (
         <PaginationFooter
+          labels={labels}
           className="border-t border-border px-4 py-3"
           total={rows.length}
           page={page}