@opencorestack/opengridx 3.8.0 → 3.9.0

package/docs/API_REFERENCE.md

@@ -243,7 +243,7 @@ Public CSS: `ogx__cell-fill-handle` (24 × 24 px hit area in the corner cell; th
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement, the Ask AI button (`aiAssistantButton`) and the header filter row (`headerFilter*`, v3.6). See [`GridLocaleText`](#gridlocaletext). |
+| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement, the Ask AI button (`aiAssistantButton`), the header filter row (`headerFilter*`, v3.6) and, since v3.9, every other built-in string (toolbar, column menu, filter, columns, pivot and AI panels, rows, overlays, live region). See [`GridLocaleText`](#gridlocaletext). |
 
 #### Imperative Ref
 
@@ -546,6 +546,21 @@ In every exporter, a non-empty `selectedRows` takes precedence over `groupedRows
 
 Every exporter takes `columns` typed for your rows (`GridColDef<R>[]`) or untyped (`GridColDef[]`), and its options also accept `getRowId?: (row: R) => GridRowId`. Pass the grid's `getRowId` when you use one: `selectedRows` holds those ids, and since v3.0 the grid no longer copies them onto `row.id`.
 
+### Export option types
+
+Each exporter's options are exported as a type. Fields common to all of them: `fileName`, `selectedRows`, `getRowId`, `aggregationResult`, `aggregationModel`, `groupedRows`.
+
+| Type | For | Its own fields |
+| :--- | :--- | :--- |
+| `CsvExportOptions<R>` | `exportToCsv` | `includeHeaders`, `delimiter`, `escapeFormulas`, `bom` |
+| `JsonExportOptions<R>` | `exportToJson` | `pretty` |
+| `ExcelExportOptions<R>` | `exportToExcel` (HTML `.xls`) | `sheetName`, `includeHeaders`, `escapeFormulas` |
+| `ExcelAdvancedExportOptions<R>` | `exportToExcelAdvanced` (`.xlsx`) | `sheets`, `columnStyles`, `headerFillColor`, `headerTextColor`, `headerFontSize`, `bodyFontSize` |
+| `ExcelSheetDefinition` | one entry of `sheets` | `name`, `rows` (`'all'` / `'selected'`), `includeHeaders`, `includeSummary`, `autoFilter`, `frozenHeader`, `alternateRowColor`; `{ type: 'summary', name? }` adds a totals sheet |
+| `ExcelColumnStyle` | a value of `columnStyles` (by field) | `numFmt` (e.g. `'$#,##0.00'`), `width`, `alignment`, `embedImage`, `imageWidth`, `imageHeight` |
+
+`PdfExportOptions` and `PrintOptions` are described in [PDF Export](features/pdf-export.md) and the [Export Guide](features/export-guide.md).
+
 ---
 
 ## 🤖 AI Toolkit (`@opencorestack/opengridx/ai`)
@@ -648,10 +663,14 @@ Context provider for overriding the grid's visual system.
 - **`colors`**: `primary`, `primaryDark`, `primaryLight`, `primaryFocus`, `secondary*`, `success`, `warning`, `error`, `info`, `white`, `black`, `gray` (`{ 50 … 900 }`). Toolbar, menu, selection and focus accents derive from `primary*` unless set directly.
 - **`typography`**: `fontFamily`, `fontFamilyMono`, `fontSizeXs` … `fontSizeXl`.
 - **`spacing`**: `xs` … `xxl`. **`borders`**: `widthThin/Medium/Thick`, `radiusSm` … `radiusXl`, `color`, `colorHover`. **`shadows`**: `sm` … `xl`.
-- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`; v3.7: fonts (`headerFontFamily`, `headerFontWeight`, `cellFontFamily`, `cellFontWeight`), `headerPaddingX`, outer `borderWidth` and `borderRadius`, dividers (`columnDividerWidth`, `headerColumnDividerWidth`, `rowDividerWidth`, `columnDividerColor`, `rowDividerColor`; `0` hides a divider).
-- **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels.
+- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`; v3.9: `checkboxCheckedBackground`, `checkboxCheckmark`, `expandIconColor`, `expandIconHoverColor`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`; v3.7: fonts (`headerFontFamily`, `headerFontWeight`, `cellFontFamily`, `cellFontWeight`), `headerPaddingX`, outer `borderWidth` and `borderRadius`, dividers (`columnDividerWidth`, `headerColumnDividerWidth`, `rowDividerWidth`, `columnDividerColor`, `rowDividerColor`; `0` hides a divider).
+- **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels; v3.9: `itemIndicatorColor` (the selection dot), `itemSelectedIcon`, `iconColor`, `sectionLabelText`, `dividerColor`.
 - **`toolbar`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
+#### Theme types
+
+`DataGridThemeProviderProps`: `theme: GridTheme`, `children`, `className?`, `style?` (both on the wrapper element). Each key of `GridTheme` has its own exported type, for building a theme in parts: `GridThemeColors` (with `GridThemeGrayScale` for `gray`), `GridThemeTypography`, `GridThemeSpacing`, `GridThemeBorders`, `GridThemeShadows`, `GridThemeGrid`, `GridThemeOverlays`, `GridThemeToolbar`, `GridThemeScrollbar`, `GridThemeSkeleton`, `GridThemeTransitions`. Every field is optional.
+
 Presets: `darkTheme`, `roseTheme`, `emeraldTheme`, `amberTheme`, `compactTheme`. See [Theming](customization/theming.md).
 
 ---
@@ -836,6 +855,15 @@ If the key can change while the grid stays mounted, remount the grid with it (`<
 
 ## ⚙️ Interfaces & Types
 
+### Small shared types
+
+| Type | Definition | Used by |
+| :--- | :--- | :--- |
+| `GridAlignment` | `'left' \| 'center' \| 'right'` | `GridColDef.align`, `headerAlign` |
+| `GridSortDirection` | `'asc' \| 'desc' \| null` | a column's sort state (`null`: unsorted) |
+| `GridSortModel` | `{ field: string; sort: GridSortDirection }`: like `GridSortItem`, but `sort` may be `null` | a single column's sort state |
+| `GridPinnedPosition` | `'left' \| 'right'` (logical: inline start / end in RTL) | column pinning |
+
 ### `GridSortItem`
 ```typescript
 interface GridSortItem {
@@ -878,7 +906,7 @@ interface GridPivotValueField {
 
 ### `GridLocaleText`
 
-Override user-visible strings in the Pagination component and the empty state. All fields are optional.
+Override the grid's user-visible strings (visible text, `aria-label`, `title`, placeholder). All fields are optional; each one left out keeps its English default. Strings that contain a value (a header, a row id, a count) are functions.
 
 ```typescript
 interface GridLocaleText {
@@ -903,9 +931,98 @@ interface GridLocaleText {
   headerFilterTrue?: string;                        // "Yes"
   headerFilterFalse?: string;                       // "No"
   headerFilterOperators?: Partial<Record<GridFilterOperator, string>>; // operator names
+
+  // ── v3.9: every other UI string (default English shown) ──
+  // Grid, list view, overlays, live region
+  gridLabel; listViewLabel;                          // "Data grid", "Data grid list view" (the aria-label prop wins)
+  listViewItemCount(n); listViewPage(p, pc); listViewSelectedCount(n); // "3 items", "page 1 of 2", "2 selected"
+  loadingLabel; liveRegionLoading;                   // "Loading data", "Loading data..."
+  liveRegionError(message); liveRegionRowsFound(n);  // "Error: …", "4 rows found"
+  errorOverlayTitle; errorOverlayRetry;              // "Oops! Something went wrong", "Retry"
+  aggregationFooterLabel;                            // "Aggregation totals"
+  cellErrorLabel(field); cellErrorTooltip;           // "Error in cell: name", "Render error"
+  // Header
+  headerRowReorderLabel; headerRowReorderTooltip; headerDetailPanelLabel;
+  headerSelectAllLabel; headerDeselectAllLabel;      // "Select all rows", "Deselect all rows"
+  headerSortDescription(direction, priority, total); // "Sorted ascending, sort priority 1 of 2"
+  headerColumnMenuButtonLabel(header);               // "Open column menu for Name"
+  headerColumnResizeLabel(field); headerFilterNoFilterLabel(header);
+  // Rows
+  rowSelectLabel(id); rowDeselectLabel(id);          // "Select row 1", "Deselect row 1"
+  rowReorderLabel; rowDetailPanelExpandLabel; rowDetailPanelCollapseLabel; rowExpandLabel; rowCollapseLabel;
+  // Column menu
+  columnMenuLabel(header); columnMenuSortAscending; columnMenuSortDescending; columnMenuUnsort;
+  columnMenuPinColumn; columnMenuPinLeft; columnMenuPinLeftLabel; columnMenuPinRight; columnMenuPinRightLabel;
+  columnMenuUnpin; columnMenuUnpinLabel; columnMenuHideColumn; columnMenuHideColumnLabel(header);
+  columnMenuManageColumns; columnMenuManageColumnsLabel;
+  // Columns panel
+  columnsPanelSearchPlaceholder; columnsPanelDragToReorder; columnsPanelShowHideAll; columnsPanelReset; columnsPanelClose;
+  // Filter panel
+  filterPanelValueLabel(header); filterPanelOperatorLabel(header); filterPanelClearLabel(header); filterPanelClearTooltip;
+  filterPanelAny; filterPanelTrue; filterPanelFalse; filterPanelNumberPlaceholder; filterPanelValuePlaceholder;
+  filterPanelMatch; filterPanelAnd; filterPanelOr; filterPanelHiddenConditions(n); filterPanelNoColumns;
+  filterPanelOperators;                              // Partial<Record<GridFilterOperator, string>>, default: the operator id
+  // Toolbar and search (toolbarSearchPlaceholder also for QuickFilter)
+  toolbarLabel; toolbarSearchPlaceholder; toolbarSearchLabel; toolbarSearchClear;
+  toolbarColumns; toolbarColumnsLabel; toolbarColumnsPanelLabel;
+  toolbarFilters; toolbarFiltersLabel; toolbarFiltersActive; toolbarFiltersClearAll; toolbarFiltersClearAllTooltip;
+  toolbarFiltersClose; toolbarFiltersCloseTooltip; toolbarFiltersCloseLabel;
+  toolbarPivot; toolbarPivotLabel; toolbarPivotActive;
+  toolbarSummaries; toolbarSummariesLabel; toolbarSummariesActive(n); toolbarSummariesPanelLabel;
+  toolbarSummariesClearAll; toolbarSummariesClearAllTooltip; toolbarSummariesEmpty;
+  toolbarSummariesEmptyHintBefore; toolbarSummariesEmptyHintAfter;
+  toolbarAggregationFunctions;                       // Partial<Record<string, string>>, default: the function id
+  // Pivot panel
+  pivotPanelLabel; pivotMode; pivotReset; pivotResetTooltip;
+  pivotRowFields; pivotColumnFields; pivotValueFields;
+  pivotRowFieldsPlaceholder; pivotColumnFieldsPlaceholder; pivotValueFieldsPlaceholder;
+  pivotRemoveTooltip(header); pivotRemoveRowLabel(header); pivotRemoveColumnLabel(header); pivotRemoveValueLabel(header, fn);
+  pivotAggregationTooltip; pivotAggregationLabel(header);
+  pivotAggregationFunctions;                         // Partial<Record<string, string>>, default: the id in upper case
+  pivotAvailableFields; pivotAllFieldsInUse; pivotAddRow; pivotAddColumn; pivotAddValue;
+  pivotAddRowTooltip; pivotAddColumnTooltip; pivotAddValueTooltip;
+  pivotAddRowLabel(header); pivotAddColumnLabel(header); pivotAddValueLabel(header);
+  // AI assistant panel (aiAssistant.placeholder wins over aiAssistantPlaceholder)
+  aiAssistantTitle; aiAssistantClose; aiAssistantPromptLabel; aiAssistantPlaceholder;
+  aiAssistantStartDictation; aiAssistantStopDictation; aiAssistantAsk; aiAssistantStop; aiAssistantSuggestions;
+  aiAssistantAppliedChanges; aiAssistantRemoveChange(label); aiAssistantUndo; aiAssistantIgnored; aiAssistantIgnoredItem(message);
+  aiAssistantEarlier; aiAssistantThinking; aiAssistantStopped; aiAssistantUndone; aiAssistantChangeRemoved;
+  aiAssistantApplied(applied, ignored); aiAssistantNotValidated; aiAssistantFailed(message); aiAssistantUnknownError;
+  // Pagination buttons
+  paginationLabel; paginationFirstPageLabel; paginationFirstPageTooltip; paginationPreviousPageLabel;
+  paginationPreviousPageTooltip; paginationNextPageLabel; paginationNextPageTooltip;
+  paginationLastPageLabel; paginationLastPageTooltip;
+  // Cell selection stats bar
+  cellSelectionStatsCount; cellSelectionStatsSum; cellSelectionStatsAverage;
 }
 ```
 
+Each key's English default and parameter types are documented on `GridLocaleText` in `lib/types/locale.ts` (shown by editors on hover).
+
+### Locale text for every UI string (v3.9)
+
+Since v3.9 every built-in string of the grid goes through `localeText`: the toolbar and its panels, the column menu, the filter, columns, pivot and AI assistant panels, the row and select-all checkboxes, the pagination buttons, the loading and error overlays, the aggregation footer and the live-region announcements. Pass only the keys you translate; the rest stay English.
+
+```tsx
+<DataGrid
+  rows={rows}
+  columns={columns}
+  slots={{ toolbar: GridToolbar }}
+  localeText={{
+    toolbarSearchPlaceholder: 'Rechercher…',
+    columnMenuSortAscending: 'Tri croissant',
+    columnMenuHideColumnLabel: (header) => `Masquer la colonne ${header}`,
+    filterPanelOperators: { contains: 'contient' },
+    rowSelectLabel: (id) => `Sélectionner la ligne ${id}`,
+  }}
+/>
+```
+
+- The strings reach portalled menus and panels through React context, so a custom toolbar slot that renders the built-in `GridToolbar` is translated too.
+- Components used outside a grid (`ColumnVisibilityPanel`, `GridToolbar`, `FilterPanel`, `Pagination`, `QuickFilter`) show English. Their own props (`placeholder`, `aiAssistantLabel`, `Pagination`'s `localeText`) still win.
+- Not covered: the grouping column's default header (`'Group'`, set `groupingColDef.headerName`), pivot's `'Grand Total'` row label, export file contents, the AI change chips' labels, and developer console warnings.
+- An inline object of strings is fine: while it holds the same entries as on the previous render (records such as `filterPanelOperators` compared one level deep), the grid keeps the resolved strings and the rows are not re-rendered. Functions are compared by identity, so define function entries (`rowSelectLabel: id => …`) outside the render, or keep the whole object in a module constant or `useMemo`.
+
 ### `GridRowMeta`
 
 Available via `params.rowMeta` in `renderCell`. Undefined for non-hierarchy rows.

package/docs/customization/theming.md

@@ -262,8 +262,12 @@ For visible gaps between cells instead of lines, set the divider colour to the g
 | `--ogx-fill-handle-color` | `var(--ogx-range-border)` | `var(--ogx-range-border)` | The fill handle square (`ogx__cell-fill-handle`, v3.5). Unset in the stylesheet, where it falls back to `--ogx-range-border`; every theme of `DataGridThemeProvider` sets it to `var(--ogx-range-border)`. Theme key `grid.fillHandleColor` |
 | `--ogx-grid-pinned-left-shadow` | `4px 0 24px...` | (darker) | Shadow on left-pinned columns |
 | `--ogx-grid-pinned-right-shadow` | `-4px 0 24px...` | (darker) | Shadow on right-pinned columns |
-| `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only) |
-| `--ogx-checkbox-border` | — | `#64748b` | Checkbox border (dark only) |
+| `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only). Theme key `grid.checkboxBg` |
+| `--ogx-checkbox-border` | — | `#64748b` | Checkbox border (dark only). Theme key `grid.checkboxBorder` |
+| `--ogx-checkbox-checked-bg` | primary | primary | Fill and border of a checked or indeterminate checkbox (v3.9). Theme key `grid.checkboxCheckedBackground` |
+| `--ogx-checkbox-checkmark` | `white` | `white` | Check mark and indeterminate dash (v3.9). Theme key `grid.checkboxCheckmark` |
+| `--ogx-expand-icon-color` | header text | header text | Expand / collapse chevron of group and tree rows (v3.9). Theme key `grid.expandIconColor` |
+| `--ogx-expand-icon-hover-color` | row text | row text | The chevron on hover (v3.9). Theme key `grid.expandIconHoverColor` |
 
 ### Toolbar, Overlay and Scrollbar Colors
 
@@ -282,6 +286,11 @@ Read with a fallback, so a grid without a provider looks the same as before. Ins
 | `--ogx-overlay-*` | `overlays.*` | white surface, gray border | Menus, panels, tooltips |
 | `--ogx-overlay-item-selected-bg` / `-text` | `overlays.itemSelected*` | 8% primary / primary-dark | Selected menu item |
 | `--ogx-overlay-item-danger-bg` / `-text` | `overlays.itemDanger*` | red tints | Remove-condition button in the filter panel |
+| `--ogx-overlay-item-indicator` | `overlays.itemIndicatorColor` (v3.9) | the selected item text | Dot before the selected option of a menu group (sort, pin) |
+| `--ogx-overlay-item-selected-icon` | `overlays.itemSelectedIcon` (v3.9) | primary | Icon of the selected menu option |
+| `--ogx-overlay-icon` | `overlays.iconColor` (v3.9) | gray-400 | Menu item icons |
+| `--ogx-overlay-section-label-text` | `overlays.sectionLabelText` (v3.9) | gray-400 | Menu section labels ("Pin column") |
+| `--ogx-overlay-divider` | `overlays.dividerColor` (v3.9) | overlay border | Lines between menu sections |
 | `--ogx-scrollbar-thumb` / `-track` / `-size` | `scrollbar.thumbColor` / `trackColor` / `size` | gray-300 / transparent / 8px | Grid viewport scrollbars |
 | `--ogx-skeleton-base` / `-highlight` | `skeleton.baseColor` / `highlightColor` | light grays | Loading skeleton rows |
 

package/docs/features/ai-toolkit.md

@@ -1,6 +1,6 @@
 # AI Toolkit: Schema, Validator, Assistant & Agent Tools
 
-*Since v3.4.0 (schema and validator); v3.5.0 (assistant panel, prompt handler, agent tools)* · Demos: [AI: Grid Schema & Validator](https://opencorestack.github.io/OpenGridX/ai-schema), [AI Assistant](https://opencorestack.github.io/OpenGridX/ai-assistant)
+*Since v3.4.0 (schema and validator); v3.5.0 (assistant panel, prompt handler, agent tools)* · Demos: [Grid Schema & Validator](https://opencorestack.github.io/OpenGridX/ai-schema), [AI Assistant](https://opencorestack.github.io/OpenGridX/ai-assistant)
 
 Let users drive the grid in plain language ("paid orders over $10k in the North, biggest first") with the model your app already uses. The `@opencorestack/opengridx/ai` entry point gives you the pieces the grid can own:
 

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -71,7 +71,7 @@
 .ogx-ai-panel__suggestion {
   padding: 3px 10px;
   border: 1px solid var(--ogx-border-color, var(--ogx-grid-border-color));
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-grid-header-background);
   color: inherit;
   font: inherit;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: 4px;
   padding: 2px 4px 2px 10px;
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-color-primary-light, #e0e7ff);
   color: var(--ogx-color-primary-dark, #1e3a8a);
 }

package/lib/components/AiAssistant/GridAiAssistantPanel.tsx

@@ -3,6 +3,7 @@ import type { GridAiAssistantPanelProps } from '../../types';
 import { Button } from '../ui/Button';
 import { Input } from '../ui/Input';
 import { useSpeechInput } from './useSpeechInput';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 /** The sparkle of the Ask AI button and the panel title. */
 export function AiSparkleIcon() {
@@ -33,6 +34,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
         status, statusText, message, errors, chips, history, suggestions, placeholder, voiceAvailable, canUndo,
         submit, stop, undo, removeChip, close,
     } = props;
+    const locale = useGridLocale();
     const [text, setText] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
     const speech = useSpeechInput(setText);
@@ -59,10 +61,10 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
     };
 
     return (
-        <div className="ogx-ai-panel" role="dialog" aria-label="Ask AI">
+        <div className="ogx-ai-panel" role="dialog" aria-label={locale.aiAssistantTitle}>
             <div className="ogx-ai-panel__header">
-                <span className="ogx-ai-panel__title"><AiSparkleIcon />Ask AI</span>
-                <Button size="small" className="ogx-ai-panel__close" aria-label="Close" onClick={close}>×</Button>
+                <span className="ogx-ai-panel__title"><AiSparkleIcon />{locale.aiAssistantTitle}</span>
+                <Button size="small" className="ogx-ai-panel__close" aria-label={locale.aiAssistantClose} onClick={close}>×</Button>
             </div>
 
             <form className="ogx-ai-panel__form" onSubmit={handleSubmit}>
@@ -71,7 +73,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                     className="ogx-ai-panel__input"
                     value={text}
                     placeholder={placeholder}
-                    aria-label="Prompt"
+                    aria-label={locale.aiAssistantPromptLabel}
                     autoComplete="off"
                     onChange={(event) => setText(event.target.value)}
                 />
@@ -80,7 +82,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                         size="small"
                         variant="outlined"
                         className={`ogx-ai-panel__mic${speech.listening ? ' ogx-ai-panel__mic--on' : ''}`}
-                        aria-label={speech.listening ? 'Stop dictation' : 'Dictate a prompt'}
+                        aria-label={speech.listening ? locale.aiAssistantStopDictation : locale.aiAssistantStartDictation}
                         aria-pressed={speech.listening}
                         onClick={speech.toggle}
                     >
@@ -89,12 +91,12 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                 )}
                 {/* Separate keys: one reused <button> would turn into the submit button during the Stop click and submit again. */}
                 {running
-                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>Stop</Button>
-                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>Ask</Button>}
+                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>{locale.aiAssistantStop}</Button>
+                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>{locale.aiAssistantAsk}</Button>}
             </form>
 
             {suggestions.length > 0 && (
-                <div className="ogx-ai-panel__suggestions" aria-label="Suggestions" role="group">
+                <div className="ogx-ai-panel__suggestions" aria-label={locale.aiAssistantSuggestions} role="group">
                     {suggestions.map((suggestion) => (
                         <button key={suggestion} type="button" className="ogx-ai-panel__suggestion" disabled={running} onClick={() => send(suggestion)}>
                             {suggestion}
@@ -108,29 +110,29 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
 
             {(chips.length > 0 || canUndo) && (
                 <div className="ogx-ai-panel__changes">
-                    <ul className="ogx-ai-panel__chips" aria-label="Applied changes">
+                    <ul className="ogx-ai-panel__chips" aria-label={locale.aiAssistantAppliedChanges}>
                         {chips.map((chip) => (
                             <li key={chip.id} className="ogx-ai-chip" data-part={chip.part}>
                                 <span className="ogx-ai-chip__label">{chip.label}</span>
-                                <button type="button" className="ogx-ai-chip__remove" aria-label={`Remove ${chip.label}`} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
+                                <button type="button" className="ogx-ai-chip__remove" aria-label={locale.aiAssistantRemoveChange(chip.label)} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
                             </li>
                         ))}
                     </ul>
-                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>Undo</Button>}
+                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>{locale.aiAssistantUndo}</Button>}
                 </div>
             )}
 
             {errors.length > 0 && (
-                <ul className="ogx-ai-panel__errors" aria-label="Ignored">
+                <ul className="ogx-ai-panel__errors" aria-label={locale.aiAssistantIgnored}>
                     {errors.map((error, i) => (
-                        <li key={`${error.path}:${i}`}>{error.path ? `Ignored: ${error.message}` : error.message}</li>
+                        <li key={`${error.path}:${i}`}>{error.path ? locale.aiAssistantIgnoredItem(error.message) : error.message}</li>
                     ))}
                 </ul>
             )}
 
             {history.length > 0 && (
                 <div className="ogx-ai-panel__history">
-                    <div className="ogx-ai-panel__history-title">Earlier</div>
+                    <div className="ogx-ai-panel__history-title">{locale.aiAssistantEarlier}</div>
                     <ul>
                         {history.map((entry, i) => (
                             <li key={`${i}:${entry.prompt}`}>

package/lib/components/Cell/Cell.css

@@ -27,9 +27,7 @@
   outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
   outline-offset: -2px;
 }
-.ogx__cell--editable {
-  cursor: text;
-}
+
 /*
  * Cell range selection (cellSelection, v3.3). The tint is a background image, so it also covers
  * pinned cells' own background; the outline is an inset box-shadow, so the layout never shifts.

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 // Must live at module scope (not inline) so React sees a stable component type.
 // Calling renderFn() here puts the throw one level BELOW CellErrorBoundary,
@@ -10,6 +11,21 @@ function CellRenderTarget({ renderFn }: { renderFn: () => React.ReactNode }) {
     return <>{renderFn()}</>;
 }
 
+/** The cell content after `renderCell` threw: a warning sign labelled with the field. */
+function CellErrorMarker({ field, message }: { field: string; message: string | undefined }) {
+    const locale = useGridLocale();
+    return (
+        <div
+            className="ogx__cell-error"
+            role="img"
+            aria-label={locale.cellErrorLabel(field)}
+            title={message ?? locale.cellErrorTooltip}
+        >
+            ⚠
+        </div>
+    );
+}
+
 interface CellErrorBoundaryProps {
     renderFn: () => React.ReactNode;
     field: string;
@@ -59,16 +75,7 @@ export class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, C
 
     override render() {
         if (this.state.hasError) {
-            return (
-                <div
-                    className="ogx__cell-error"
-                    role="img"
-                    aria-label={`Error in cell: ${this.props.field}`}
-                    title={this.state.error?.message ?? 'Render error'}
-                >
-                    ⚠
-                </div>
-            );
+            return <CellErrorMarker field={this.props.field} message={this.state.error?.message} />;
         }
         return <CellRenderTarget renderFn={this.props.renderFn} />;
     }

package/lib/components/CellSelectionStats/CellSelectionStats.tsx

@@ -1,5 +1,6 @@
 import { formatAggregationValue } from '../../utils/aggregation';
 import type { GridCellSelectionStatsSlotProps } from '../../types';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<string, unknown>;
 
@@ -9,21 +10,22 @@ export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<s
  * @since v3.3
  */
 export function CellSelectionStats({ count, sum, average }: CellSelectionStatsProps) {
+    const locale = useGridLocale();
     return (
         <div className="ogx__cell-selection-stats">
             <span className="ogx__cell-selection-stat">
-                <span className="ogx__cell-selection-stat-label">Count</span>
+                <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsCount}</span>
                 <span className="ogx__cell-selection-stat-value" data-stat="count">{count.toLocaleString()}</span>
             </span>
             {sum !== null && (
                 <span className="ogx__cell-selection-stat">
-                    <span className="ogx__cell-selection-stat-label">Sum</span>
+                    <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsSum}</span>
                     <span className="ogx__cell-selection-stat-value" data-stat="sum">{formatAggregationValue(sum, 'sum')}</span>
                 </span>
             )}
             {average !== null && (
                 <span className="ogx__cell-selection-stat">
-                    <span className="ogx__cell-selection-stat-label">Average</span>
+                    <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsAverage}</span>
                     <span className="ogx__cell-selection-stat-value" data-stat="average">{formatAggregationValue(average, 'avg')}</span>
                 </span>
             )}

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -67,7 +67,6 @@
 }
 
 /* ─── Dark-mode overrides ────────────────────────────────────────────────────*/
-[data-theme="dark"] .ogx-col-group-cell__label,
-.ogx--dark .ogx-col-group-cell__label {
+[data-theme="dark"] .ogx-col-group-cell__label {
     color: var(--ogx-color-gray-300, #cbd5e1);
 }

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { clampResizeWidth } from './clampResizeWidth';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 export interface ColumnResizeHandleProps {
@@ -49,6 +50,7 @@ function suppressNextClick(): void {
 
 export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
     const { field, currentWidth, onResize, onAutosize, minWidth, maxWidth, edge = 'end' } = props;
+    const locale = useGridLocale();
     const [isDragging, setIsDragging] = useState(false);
     const activeRef = useRef<ActiveResize | null>(null);
 
@@ -164,7 +166,7 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
             onKeyDown={handleKeyDown}
             role="separator"
             aria-orientation="vertical"
-            aria-label={`Resize ${field} column`}
+            aria-label={locale.headerColumnResizeLabel(field)}
             aria-valuenow={Math.round(currentWidth)}
             aria-valuemin={Math.round(Math.min(minWidth ?? 50, currentWidth))}
             aria-valuemax={maxWidth}

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useRef, useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridColDef, GridRowModel, GridValidRowModel } from '../../types';
 
 
@@ -48,6 +49,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
     props: ColumnVisibilityPanelProps<R>
 ) {
     const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset, showNonHideableColumns } = props;
+    const locale = useGridLocale();
     const [searchQuery, setSearchQuery] = useState('');
     // Each checkbox is named by a <label htmlFor> holding the column name. (Wrapping Checkbox,
     // which renders its own <label>, in another <label> nested labels and left the name to a
@@ -119,7 +121,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                     <Input
                         autoComplete="off"
                         inputClassName="ogx-column-visibility-panel__search-input"
-                        placeholder="Search"
+                        placeholder={locale.columnsPanelSearchPlaceholder}
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                     />
@@ -153,7 +155,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                                     className="ogx-column-visibility-panel__drag-handle-wrapper"
                                     draggable
                                     onDragStart={handleDragStart(col.field)}
-                                    title="Drag to reorder"
+                                    title={locale.columnsPanelDragToReorder}
                                 >
                                     <DragHandleIcon />
                                 </span>
@@ -185,7 +187,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                         onChange={handleToggleAll}
                     />
                     <label htmlFor={`${idBase}-all`} className="ogx-column-visibility-panel__label">
-                        Show/Hide All
+                        {locale.columnsPanelShowHideAll}
                     </label>
                 </div>
                 <button
@@ -193,7 +195,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                     className="ogx-column-visibility-panel__reset-btn"
                     onClick={() => { onShowAll(); onColumnOrderReset?.(); }}
                 >
-                    Reset
+                    {locale.columnsPanelReset}
                 </button>
             </div>
         </div>

package/lib/components/DataGrid/DataGrid.css

@@ -67,24 +67,7 @@
   background: var(--ogx-grid-background);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
 }
-.ogx--loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-.ogx--loading::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: color-mix(in srgb, var(--ogx-grid-background) 60%, transparent);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--ogx-z-index-modal);
-}
+
 /* No height prop: fill the container, as a block child of a sized box (height: 100%) or as a
    flex item (flex: 1 with min-height: 0). In an auto-height parent 100% resolves to auto. */
 .ogx--fill {
@@ -312,16 +295,6 @@
   text-overflow: ellipsis;
 }
 
-.ogx--density-compact .ogx__cell,
-.ogx--density-compact .ogx__header-cell {
-  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm);
-  font-size: var(--ogx-font-size-xs);
-}
-.ogx--density-comfortable .ogx__cell,
-.ogx--density-comfortable .ogx__header-cell {
-  padding: var(--ogx-spacing-md) var(--ogx-spacing-lg);
-  font-size: var(--ogx-font-size-md);
-}
 .ogx__group-cell-content {
   font-weight: 500;
   text-align: start;

package/lib/components/DataGrid/GridAggregationFooter.tsx

@@ -3,6 +3,7 @@ import { formatAggregateForColumn, isAggregationAllowed } from '../../utils/aggr
 import type { GridColDef, GridAggregationModel, GridAggregationResult, GridColumnPinning } from '../../types';
 import { calculatePinnedPositions, getPinnedEdgeFields, isColumnPinned } from '../../utils/pinning';
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
+import { useGridLocale } from './gridLocaleContext';
 
 const SYSTEM_COLUMN_WIDTH = 48;
 
@@ -41,6 +42,7 @@ export function GridAggregationFooter({
     pinnedColumns,
     loading = false,
 }: GridAggregationFooterProps) {
+    const locale = useGridLocale();
     // Same offsets as Row, so pinned totals sit exactly under their pinned body cells.
     const pinnedOffsets = useMemo(
         () => calculatePinnedPositions(
@@ -77,7 +79,7 @@ export function GridAggregationFooter({
         <div
             className={`ogx__aggregation-footer${loading ? ' ogx__aggregation-footer--loading' : ''}`}
             role="row"
-            aria-label="Aggregation totals"
+            aria-label={locale.aggregationFooterLabel}
             aria-live="polite"
             aria-busy={loading || undefined}
             style={{ minHeight: `${rowHeight}px` }}

package/lib/components/DataGrid/GridErrorOverlay.tsx

@@ -1,4 +1,5 @@
 import { getDataSourceErrorMessage } from '../../utils/dataSource';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridErrorOverlayProps {
     error: unknown;
@@ -7,6 +8,7 @@ interface GridErrorOverlayProps {
 }
 
 export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
+    const locale = useGridLocale();
     if (!error) return null;
     const message = getDataSourceErrorMessage(error);
     return (
@@ -17,7 +19,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                 <line x1="12" y1="16" x2="12.01" y2="16" />
             </svg>
             <div className="ogx-error-overlay__title">
-                Oops! Something went wrong
+                {locale.errorOverlayTitle}
             </div>
             <div className="ogx-error-overlay__message">
                 {message}
@@ -28,7 +30,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                     onClick={onRetry}
                     className="ogx-button ogx-button--primary"
                 >
-                    Retry
+                    {locale.errorOverlayRetry}
                 </button>
             )}
         </div>