@gntik-ai/blocks 0.5.0 → 0.7.0

package/src/tables/DataTable/editable-cell.tsx

@@ -9,6 +9,7 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react';
+import type { DataTableLabels } from './labels';
 import type { DataTableColumn } from './data-table-utils';
 
 /** One committed cell edit, as `onCellEdit` receives it. */
@@ -34,6 +35,7 @@ export type DataTableCellEditHandler<T> = (
 ) => DataTableCellEditResult | Promise<DataTableCellEditResult>;
 
 export interface EditableCellProps<T> {
+  labels?: Partial<DataTableLabels>;
   row: T;
   rowId: string;
   rowLabel: string;
@@ -72,7 +74,16 @@ function focusSibling(from: HTMLElement | null, dir: 'next' | 'prev') {
  * edits); while editing, an input or a select: Enter or Tab commits, Escape cancels. `onCellEdit`
  * can reject the value with a message, shown inline under the editor.
  */
-export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hintId, children }: EditableCellProps<T>) {
+export function EditableCell<T>({
+  row,
+  rowId,
+  rowLabel,
+  column,
+  onCellEdit,
+  hintId,
+  children,
+  labels,
+}: EditableCellProps<T>) {
   const errorId = useId();
   const editor = column.editor ?? { type: 'text' as const };
   const [editing, setEditing] = useState(false);
@@ -116,9 +127,11 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     const text = draft.trim();
     if (text === '') return { ok: true, value: null };
     const n = Number(text);
-    if (!Number.isFinite(n)) return { ok: false, message: 'Enter a number.' };
-    if (editor.min != null && n < editor.min) return { ok: false, message: `Enter ${editor.min} or more.` };
-    if (editor.max != null && n > editor.max) return { ok: false, message: `Enter ${editor.max} or less.` };
+    if (!Number.isFinite(n)) return { ok: false, message: labels?.enterNumber ?? 'Enter a number.' };
+    if (editor.min != null && n < editor.min)
+      return { ok: false, message: labels?.minimumValue?.(editor.min) ?? `Enter ${editor.min} or more.` };
+    if (editor.max != null && n > editor.max)
+      return { ok: false, message: labels?.maximumValue?.(editor.max) ?? `Enter ${editor.max} or less.` };
     return { ok: true, value: n };
   };
 
@@ -146,11 +159,11 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     try {
       result = await onCellEdit({ row, rowId, columnId: column.id, value: parsed.value, previous });
     } catch (err) {
-      result = err instanceof Error && err.message ? err.message : GENERIC_ERROR;
+      result = err instanceof Error && err.message ? err.message : (labels?.editError ?? GENERIC_ERROR);
     }
     busy.current = false;
     setPending(false);
-    if (result === false) result = GENERIC_ERROR;
+    if (result === false) result = labels?.editError ?? GENERIC_ERROR;
     if (typeof result === 'string') {
       setError(result);
       if (after) field.current?.focus();
@@ -205,7 +218,7 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
     );
   }
 
-  const label = `${column.header} for ${rowLabel}`;
+  const label = labels?.editLabel?.(column.header, rowLabel) ?? `${column.header} for ${rowLabel}`;
   const common = {
     'aria-label': label,
     'aria-invalid': error ? true : undefined,
@@ -259,7 +272,7 @@ export function EditableCell<T>({ row, rowId, rowLabel, column, onCellEdit, hint
         <p
           id={errorId}
           role="alert"
-          className="mt-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text"
+          className="mt-1 rounded-sm border border-border bg-popover px-1.5 py-1 text-start text-[11.5px] font-medium whitespace-normal text-destructive-text"
         >
           {error}
         </p>

package/src/tables/DataTable/examples/server-pagination.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { DataTable } from '../DataTable';
+
+interface Item {
+  id: number;
+  name: string;
+}
+interface Envelope {
+  items: Item[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+const columns = [
+  { id: 'id', header: 'Id', accessor: (row: Item) => row.id },
+  { id: 'name', header: 'Name', accessor: (row: Item) => row.name },
+];
+
+// Demo endpoint adapter. Replace with the consumer's API returning this envelope.
+function readPage(page: number, pageSize: number): Envelope {
+  const total = 95;
+  const from = (page - 1) * pageSize;
+  return {
+    items: Array.from({ length: Math.max(0, Math.min(pageSize, total - from)) }, (_, i) => ({
+      id: from + i + 1,
+      name: `Item ${from + i + 1}`,
+    })),
+    total,
+    page,
+    pageSize,
+  };
+}
+async function requestPage(page: number, pageSize: number): Promise<Envelope> {
+  return readPage(page, pageSize);
+}
+
+/** Known-total, 1-based pages. The consumer owns requests and keeps the old envelope until they resolve. */
+export default function ServerPaginationExample() {
+  const [envelope, setEnvelope] = useState(() => readPage(2, 20));
+  const [request, setRequest] = useState({ page: 2, pageSize: 20 });
+  useEffect(() => {
+    let active = true;
+    void requestPage(request.page, request.pageSize).then((next) => {
+      if (active) setEnvelope(next);
+    });
+    return () => {
+      active = false;
+    };
+  }, [request]);
+
+  return (
+    <DataTable
+      caption="Items"
+      selectionMode="none"
+      columns={columns}
+      rows={envelope.items}
+      paginationMode="server"
+      rowCount={envelope.total}
+      page={envelope.page}
+      pageSize={envelope.pageSize}
+      pageSizeOptions={[10, 20, 50]}
+      onPageChange={(page) => setRequest((previous) => ({ ...previous, page }))}
+      // The footer can also call onPageChange to keep the first row visible (20 to 50 at page 2 requests page 1).
+      // Functional updates batch both callbacks into one request with the new size and page.
+      onPageSizeChange={(pageSize) => setRequest((previous) => ({ ...previous, pageSize }))}
+    />
+  );
+}

package/src/tables/DataTable/header-cell.tsx

@@ -2,9 +2,11 @@ import { ArrowDown, ArrowUp, ChevronsUpDown } from '@gntik-ai/icons';
 import { cn, nextSortDirection, TableHead, tableVariants, type SortDirection } from '@gntik-ai/ui';
 import { stickyTint, type CellLayout } from './column-sizing';
 import { columnAlign, type DataTableColumn } from './data-table-utils';
+import type { DataTableLabels } from './labels';
 import { ColumnResizeHandle } from './resize-handle';
 
 export interface DataTableHeadCellProps<T> {
+  labels?: Partial<DataTableLabels>;
   column: DataTableColumn<T>;
   sortDirection: SortDirection;
   onSortChange: (direction: Exclude<SortDirection, 'none'>) => void;
@@ -23,6 +25,7 @@ export function DataTableHeadCell<T>({
   onSortChange,
   layout,
   resize,
+  labels,
 }: DataTableHeadCellProps<T>) {
   const align = columnAlign(column);
   const pinnedClass = layout?.pinned
@@ -75,6 +78,7 @@ export function DataTableHeadCell<T>({
         )}
       </span>
       <ColumnResizeHandle
+        labels={labels}
         label={column.header}
         width={resize.width}
         min={resize.min}

package/src/tables/DataTable/labels.ts

@@ -0,0 +1,54 @@
+import type { PaginationFooterLabels } from '../PaginationFooter/PaginationFooter';
+
+/** Per-instance table chrome, including the composed PaginationFooter. Caller data stays caller-owned. */
+export interface DataTableLabels extends PaginationFooterLabels {
+  /** Non-virtual table overflow region; virtualized regions keep the caller caption. */
+  scrollRegion: string;
+  selectionCount: (count: number) => string;
+  columns: string;
+  visibleColumns: string;
+  pinColumns: string;
+  pinnedLeft: string;
+  pinnedRight: string;
+  pinLeft: string;
+  pinRight: string;
+  unpinned: string;
+  density: string;
+  comfortable: string;
+  compact: string;
+  resizeColumn: (label: string) => string;
+  columnWidth: (width: number) => string;
+  defaultView: string;
+  defaultViewOption: string;
+  modified: string;
+  views: string;
+  saveChanges: string;
+  saveAs: string;
+  renameView: string;
+  deleteView: string;
+  resetChanges: string;
+  saveViewTitle: string;
+  renameViewTitle: string;
+  viewName: string;
+  cancel: string;
+  saveView: string;
+  rename: string;
+  closeDialog: string;
+  selection: string;
+  selectAll: string;
+  selectRow: (label: string) => string;
+  selectGroup: (group: string) => string;
+  groupRows: (count: number) => string;
+  noGroup: string;
+  actions: string;
+  rowActions: (label: string) => string;
+  emptyTitle: string;
+  emptyDescription: string;
+  loading: (caption: string) => string;
+  editHint: string;
+  editLabel: (column: string, row: string) => string;
+  editError: string;
+  enterNumber: string;
+  minimumValue: (min: number) => string;
+  maximumValue: (max: number) => string;
+}

package/src/tables/DataTable/resize-handle.tsx

@@ -1,7 +1,10 @@
 import { cn } from '@gntik-ai/ui';
 import { useRef, type KeyboardEvent, type PointerEvent } from 'react';
 
+import type { DataTableLabels } from './labels';
+
 export interface ColumnResizeHandleProps {
+  labels?: Partial<DataTableLabels>;
   /** Column name for the accessible label ("Resize Region column"). */
   label: string;
   width: number;
@@ -20,7 +23,7 @@ const BIG_STEP = 50;
  * aria-valuenow/min/max (the width in px). Drag it with a pointer; from the keyboard,
  * ArrowLeft/ArrowRight change the width by 10px (Shift: 50px), Home/End jump to the limits.
  */
-export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd }: ColumnResizeHandleProps) {
+export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeEnd, labels }: ColumnResizeHandleProps) {
   const drag = useRef<{ x: number; width: number; dir: 1 | -1 } | null>(null);
   const clamp = (w: number) => Math.round(Math.min(max, Math.max(min, w)));
 
@@ -63,11 +66,11 @@ export function ColumnResizeHandle({ label, width, min, max, onResize, onResizeE
       role="separator"
       tabIndex={0}
       aria-orientation="vertical"
-      aria-label={`Resize ${label} column`}
+      aria-label={labels?.resizeColumn?.(label) ?? `Resize ${label} column`}
       aria-valuenow={width}
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuetext={`${width} pixels`}
+      aria-valuetext={labels?.columnWidth?.(width) ?? `${width} pixels`}
       data-column-resizer=""
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}

package/src/tables/DataTable/views.tsx

@@ -21,6 +21,7 @@ import {
 } from '@gntik-ai/ui';
 import { useId, useState } from 'react';
 import type { ColumnWidths, PinnedColumns } from './column-sizing';
+import type { DataTableLabels } from './labels';
 import type { SortState } from './data-table-utils';
 
 /** What a saved view captures. Every field is optional: a missing field keeps the table's default. */
@@ -70,6 +71,7 @@ export function newViewId(name: string, views: readonly DataTableView[]): string
 }
 
 export interface ViewSwitcherProps {
+  labels?: Partial<DataTableLabels>;
   views: readonly DataTableView[];
   activeId: string | null;
   /** The table differs from the active view (or from the defaults when none is active). */
@@ -86,6 +88,7 @@ const DEFAULT_VALUE = '__default__';
 
 /** "Views" menu: switch between saved views, save the current table as a view, rename, delete, reset. */
 export function ViewSwitcher({
+  labels,
   views,
   activeId,
   dirty,
@@ -115,23 +118,23 @@ export function ViewSwitcher({
     <>
       <Menu>
         <MenuTrigger render={<Button variant="secondary" size="sm" icon={Bookmark} trailingIcon={ChevronDown} />}>
-          <span className="max-w-40 truncate">{active ? active.name : 'Default view'}</span>
+          <span className="max-w-40 truncate">{active ? active.name : (labels?.defaultView ?? 'Default view')}</span>
           {dirty && (
             <>
               {' '}
               <span aria-hidden className="size-1.5 rounded-full bg-primary" />{' '}
-              <span className="sr-only">(modified)</span>
+              <span className="sr-only">{labels?.modified ?? '(modified)'}</span>
             </>
           )}
         </MenuTrigger>
         <MenuContent align="end" className="min-w-[220px]">
           <MenuGroup>
-            <MenuGroupLabel>Views</MenuGroupLabel>
+            <MenuGroupLabel>{labels?.views ?? 'Views'}</MenuGroupLabel>
             <MenuRadioGroup
               value={activeId ?? DEFAULT_VALUE}
               onValueChange={(v: unknown) => onSelect(v === DEFAULT_VALUE ? null : String(v))}
             >
-              <MenuRadioItem value={DEFAULT_VALUE}>Default view</MenuRadioItem>
+              <MenuRadioItem value={DEFAULT_VALUE}>{labels?.defaultViewOption ?? 'Default view'}</MenuRadioItem>
               {views.map((v) => (
                 <MenuRadioItem key={v.id} value={v.id}>
                   {v.name}
@@ -141,22 +144,22 @@ export function ViewSwitcher({
           </MenuGroup>
           <MenuSeparator />
           <MenuItem disabled={!active || !dirty} onClick={onSave}>
-            Save changes
+            {labels?.saveChanges ?? 'Save changes'}
           </MenuItem>
-          <MenuItem onClick={() => open('create')}>Save as new view…</MenuItem>
+          <MenuItem onClick={() => open('create')}>{labels?.saveAs ?? 'Save as new view…'}</MenuItem>
           <MenuItem disabled={!active} onClick={() => open('rename')}>
-            Rename view…
+            {labels?.renameView ?? 'Rename view…'}
           </MenuItem>
           <MenuItem disabled={!active} onClick={() => active && onDelete(active.id)}>
-            Delete view
+            {labels?.deleteView ?? 'Delete view'}
           </MenuItem>
           <MenuItem disabled={!dirty} onClick={onReset}>
-            Reset changes
+            {labels?.resetChanges ?? 'Reset changes'}
           </MenuItem>
         </MenuContent>
       </Menu>
       <Dialog open={dialog != null} onOpenChange={(o) => !o && setDialog(null)}>
-        <DialogContent size="sm">
+        <DialogContent size="sm" closeLabel={labels?.closeDialog}>
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -164,18 +167,22 @@ export function ViewSwitcher({
             }}
           >
             <DialogHeader>
-              <DialogTitle>{dialog === 'rename' ? 'Rename view' : 'Save view'}</DialogTitle>
+              <DialogTitle>
+                {dialog === 'rename'
+                  ? (labels?.renameViewTitle ?? 'Rename view')
+                  : (labels?.saveViewTitle ?? 'Save view')}
+              </DialogTitle>
             </DialogHeader>
             <DialogBody>
               <label htmlFor={inputId} className="mb-1.5 block text-[12.5px] font-medium text-foreground">
-                View name
+                {labels?.viewName ?? 'View name'}
               </label>
               <Input id={inputId} value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" required />
             </DialogBody>
             <DialogFooter>
-              <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
+              <DialogClose render={<Button variant="ghost" />}>{labels?.cancel ?? 'Cancel'}</DialogClose>
               <Button type="submit" disabled={!name.trim()}>
-                {dialog === 'rename' ? 'Rename' : 'Save view'}
+                {dialog === 'rename' ? (labels?.rename ?? 'Rename') : (labels?.saveView ?? 'Save view')}
               </Button>
             </DialogFooter>
           </form>

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

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { FilterBar, type FilterBarLabels } from './FilterBar';
+
+it('replaces filter chrome including removed chips, saved views and the live result count', async () => {
+  const user = userEvent.setup();
+  const removeFilter = vi.fn((field: string, value: string) => `Quitar ${field}|${value}`);
+  const resultCount = vi.fn((count: number) => `Encontrados: ${count}`);
+  const labels: FilterBarLabels = {
+    searchLandmark: 'Filtrar',
+    searchLabel: 'Buscar registros',
+    searchPlaceholder: 'Escriba…',
+    savedViewLabel: 'Vista guardada',
+    savedViewPlaceholder: 'Vistas guardadas',
+    addFilter: 'Añadir filtro',
+    activeFilters: 'Filtros activos',
+    filters: 'Filtros',
+    clearAll: 'Borrar todo',
+    removeFilter,
+    resultCount,
+  };
+  const { container } = render(<FilterBar labels={labels} resultCount={1200} />);
+  expect(screen.getByRole('search', { name: 'Filtrar' })).toBeVisible();
+  expect(screen.getByRole('searchbox', { name: 'Buscar registros' })).toHaveAttribute('placeholder', 'Escriba…');
+  expect(screen.getByRole('combobox', { name: 'Vista guardada' })).toHaveTextContent('Vistas guardadas');
+  expect(screen.getByRole('list', { name: 'Filtros activos' })).toBeVisible();
+  expect(screen.getByText('Filtros', { exact: true })).toBeVisible();
+  expect(container.querySelector('[aria-live]')?.textContent).toBe('Encontrados: 1200');
+  expect(resultCount).toHaveBeenCalledWith(1200);
+  expect(removeFilter).toHaveBeenCalledWith('Status', 'Running');
+  const remove = screen.getByRole('button', { name: 'Quitar Status|Running' });
+  remove.focus();
+  expect(remove).toHaveFocus();
+  await user.keyboard('{Delete}');
+  expect(screen.queryByRole('button', { name: 'Quitar Status|Running' })).toBeNull();
+  await user.click(screen.getByRole('button', { name: 'Añadir filtro' }));
+  await user.click(await screen.findByRole('menuitemcheckbox', { name: 'Failed' }));
+  await user.keyboard('{Escape}');
+  expect(screen.getByRole('button', { name: 'Quitar Status|Failed' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Borrar todo' }));
+  expect(screen.queryByRole('list', { name: 'Filtros activos' })).toBeNull();
+  await user.click(screen.getByRole('combobox', { name: 'Vista guardada' }));
+  expect(await screen.findByRole('option', { name: 'Needs attention' })).toBeVisible();
+});
+
+it('retains legacy props, default markup and provider fallbacks for keys that are omitted', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <FilterBar resultCount={1200} searchLabel="Find" placeholder="Type" />
+    </I18nProvider>,
+  );
+  const original = container.querySelector('[aria-live]')?.outerHTML;
+  const landmark = screen.getByRole('search').getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <FilterBar
+        resultCount={1200}
+        searchLabel="Find"
+        placeholder="Type"
+        labels={{ clearAll: 'Clear', searchLabel: 'Override', searchPlaceholder: 'Override type' }}
+      />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('searchbox', { name: 'Override' })).toHaveAttribute('placeholder', 'Override type');
+  expect(screen.getByRole('search')).toHaveAttribute('aria-label', landmark);
+  expect(container.querySelector('[aria-live]')?.outerHTML).toBe(original);
+  expect(screen.getByRole('button', { name: 'Clear' })).toBeVisible();
+});

package/src/tables/FilterBar/FilterBar.tsx

@@ -35,7 +35,23 @@ export interface SavedView {
   filters: readonly ActiveFilter[];
 }
 
+export interface FilterBarLabels {
+  searchLandmark: string;
+  searchLabel: string;
+  searchPlaceholder: string;
+  savedViewLabel: string;
+  savedViewPlaceholder: string;
+  addFilter: string;
+  activeFilters: string;
+  filters: string;
+  clearAll: string;
+  removeFilter: (field: string, value: string) => string;
+  resultCount: (count: number) => string;
+}
+
 export interface FilterBarProps {
+  /** Per-key overrides take precedence over the legacy search props and provider catalog. */
+  labels?: Partial<FilterBarLabels>;
   fields?: readonly FilterField[];
   /** Search text (controlled). */
   query?: string;
@@ -74,12 +90,14 @@ export function FilterBar({
   defaultView = null,
   onViewChange,
   searchLabel: searchLabelProp,
-  placeholder = 'Search by name…',
+  placeholder: placeholderProp,
   resultCount,
   className,
+  labels,
 }: FilterBarProps) {
   const { t } = useI18n();
-  const searchLabel = searchLabelProp ?? t('common.search');
+  const searchLabel = labels?.searchLabel ?? searchLabelProp ?? t('common.search');
+  const placeholder = labels?.searchPlaceholder ?? placeholderProp ?? 'Search by name…';
   const [innerQuery, setInnerQuery] = useState(defaultQuery);
   const [innerFilters, setInnerFilters] = useState<readonly ActiveFilter[]>(defaultFilters);
   const [view, setView] = useState<string | null>(defaultView);
@@ -113,7 +131,11 @@ export function FilterBar({
   const hasAny = filters.length > 0 || query !== '';
 
   return (
-    <div role="search" aria-label={t('filters.label')} className={cn('flex flex-col gap-3', className)}>
+    <div
+      role="search"
+      aria-label={labels?.searchLandmark ?? t('filters.label')}
+      className={cn('flex flex-col gap-3', className)}
+    >
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
         <Input
           aria-label={searchLabel}
@@ -128,9 +150,9 @@ export function FilterBar({
         <div className="flex flex-wrap items-center gap-2">
           {views.length > 0 && (
             <SimpleSelect
-              aria-label={t('filters.savedView')}
+              aria-label={labels?.savedViewLabel ?? t('filters.savedView')}
               size="sm"
-              placeholder={t('filters.savedViews')}
+              placeholder={labels?.savedViewPlaceholder ?? t('filters.savedViews')}
               value={view}
               onValueChange={applyView}
               items={views.map((v) => ({ value: v.value, label: v.label }))}
@@ -138,7 +160,9 @@ export function FilterBar({
             />
           )}
           <Menu>
-            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>{t('filters.add')}</MenuTrigger>
+            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>
+              {labels?.addFilter ?? t('filters.add')}
+            </MenuTrigger>
             <MenuContent className="max-h-80 min-w-[220px] overflow-y-auto">
               {fields.map((field, i) => (
                 <Fragment key={field.id}>
@@ -165,8 +189,14 @@ export function FilterBar({
         </div>
         {resultCount !== undefined && (
           <p className="text-[12.5px] text-muted-foreground sm:ms-auto" aria-live="polite">
-            <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
-            {resultCount === 1 ? 'result' : 'results'}
+            {labels?.resultCount ? (
+              labels.resultCount(resultCount)
+            ) : (
+              <>
+                <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
+                {resultCount === 1 ? 'result' : 'results'}
+              </>
+            )}
           </p>
         )}
       </div>
@@ -174,23 +204,26 @@ export function FilterBar({
         <div className="flex flex-wrap items-center gap-2">
           <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
             <ListFilter size={12} aria-hidden />
-            Filters
+            {labels?.filters ?? 'Filters'}
           </span>
-          <ul aria-label={t('filters.active')} className="flex flex-wrap items-center gap-2">
+          <ul aria-label={labels?.activeFilters ?? t('filters.active')} className="flex flex-wrap items-center gap-2">
             {filters.map((f) => (
               <li key={`${f.field}:${f.value}`} className="flex">
                 <Token
                   size="sm"
                   prefix={`${labelOf(f.field)}:`}
                   label={f.value}
-                  removeLabel={t('filters.remove', { field: labelOf(f.field), value: f.value })}
+                  removeLabel={
+                    labels?.removeFilter?.(labelOf(f.field), f.value) ??
+                    t('filters.remove', { field: labelOf(f.field), value: f.value })
+                  }
                   onRemove={() => toggle(f, false)}
                 />
               </li>
             ))}
           </ul>
           <Button variant="ghost" size="sm" className="h-7 px-2 hover:text-destructive-text" onClick={clearAll}>
-            Clear all
+            {labels?.clearAll ?? 'Clear all'}
           </Button>
         </div>
       )}

package/src/tables/FilterBar/block.meta.ts

@@ -1,4 +1,5 @@
 import type { BlockMeta } from '../../meta';
+import type { FilterBarLabels } from './FilterBar';
 
 export const meta: BlockMeta = {
   name: 'Filter bar',
@@ -6,5 +7,26 @@ export const meta: BlockMeta = {
   status: 'beta',
   description:
     'Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all.',
+  labels: [
+    { key: 'searchLandmark', type: 'string', state: 'Always: search landmark name' },
+    { key: 'searchLabel', type: 'string', state: 'Always: search input accessible name' },
+    { key: 'searchPlaceholder', type: 'string', state: 'Always: search input placeholder' },
+    { key: 'savedViewLabel', type: 'string', state: 'When views exist: Select accessible name' },
+    { key: 'savedViewPlaceholder', type: 'string', state: 'When no view selected: Select placeholder' },
+    { key: 'addFilter', type: 'string', state: 'Always: Add filter trigger text and name' },
+    { key: 'activeFilters', type: 'string', state: 'When filters or search exist: active-filters list name' },
+    { key: 'filters', type: 'string', state: 'When filters or search exist: chip section heading' },
+    { key: 'clearAll', type: 'string', state: 'When filters or search exist: clear button text and name' },
+    {
+      key: 'removeFilter',
+      type: '(field: string, value: string) => string',
+      state: 'When chip exists: remove button name; field and value are caller content',
+    },
+    {
+      key: 'resultCount',
+      type: '(count: number) => string',
+      state: 'When resultCount supplied: visible count and polite live region',
+    },
+  ] satisfies Array<{ key: keyof FilterBarLabels; type: string; state: string }>,
   uses: ['Input', 'SimpleSelect', 'Menu', 'MenuCheckboxItem', 'Token', 'Button'],
 };