@opencorestack/opengridx 3.8.1 → 3.9.1

package/lib/components/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import React, { useId } from 'react';
 import { Button } from '../ui/Button';
 import { normalizePageSize, getPageCount, clampPage } from '../../utils/pagination';
 import type { GridLocaleText } from '../../types';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface PaginationProps {
     page: number;
@@ -18,6 +19,7 @@ export interface PaginationProps {
 
 export function Pagination(props: PaginationProps) {
     const pageSizeId = useId();
+    const locale = useGridLocale();
     const {
         page,
         pageSize,
@@ -43,15 +45,10 @@ export function Pagination(props: PaginationProps) {
 
     const firstRowIndex = currentPage * safePageSize;
     const lastRowIndex = Math.min(firstRowIndex + safePageSize, rowCount);
-    const displayedRows = rowCount === 0 ? 0 : `${firstRowIndex + 1}–${lastRowIndex}`;
-
-    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? 'Rows per page:';
-    const ofLabel = localeText?.paginationOf
-        ? localeText.paginationOf(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount)
-        : `${displayedRows} of ${rowCount}`;
-    const pageLabel = localeText?.paginationPage
-        ? localeText.paginationPage(currentPage + 1, pageCount)
-        : `Page ${currentPage + 1} of ${pageCount}`;
+    // An explicit `localeText` prop (standalone use) wins over the grid's strings.
+    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? locale.paginationRowsPerPage;
+    const ofLabel = (localeText?.paginationOf ?? locale.paginationOf)(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount);
+    const pageLabel = (localeText?.paginationPage ?? locale.paginationPage)(currentPage + 1, pageCount);
 
     const handleFirstPage = () => {
         onPageChange(0);
@@ -79,7 +76,7 @@ export function Pagination(props: PaginationProps) {
     const isLastPage = currentPage >= pageCount - 1;
 
     return (
-        <div className="ogx-pagination" role="navigation" aria-label="Pagination">
+        <div className="ogx-pagination" role="navigation" aria-label={locale.paginationLabel}>
             { }
             <div className="ogx-pagination__page-size">
                 <label htmlFor={pageSizeId} className="ogx-pagination__label">
@@ -112,8 +109,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleFirstPage}
                         disabled={isFirstPage}
-                        aria-label="Go to first page"
-                        title="First page"
+                        aria-label={locale.paginationFirstPageLabel}
+                        title={locale.paginationFirstPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
@@ -126,8 +123,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handlePreviousPage}
                     disabled={isFirstPage}
-                    aria-label="Go to previous page"
-                    title="Previous page"
+                    aria-label={locale.paginationPreviousPageLabel}
+                    title={locale.paginationPreviousPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
@@ -143,8 +140,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handleNextPage}
                     disabled={isLastPage}
-                    aria-label="Go to next page"
-                    title="Next page"
+                    aria-label={locale.paginationNextPageLabel}
+                    title={locale.paginationNextPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
@@ -157,8 +154,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleLastPage}
                         disabled={isLastPage}
-                        aria-label="Go to last page"
-                        title="Last page"
+                        aria-label={locale.paginationLastPageLabel}
+                        title={locale.paginationLastPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />

package/lib/components/QuickFilter/QuickFilter.tsx

@@ -1,6 +1,7 @@
 
 import React, { useState, useCallback } from 'react';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface QuickFilterProps {
     value?: string;
@@ -13,9 +14,11 @@ export function QuickFilter(props: QuickFilterProps) {
     const {
         value = '',
         onChange,
-        placeholder = 'Search...',
+        placeholder: placeholderProp,
         debounceMs = 300
     } = props;
+    const locale = useGridLocale();
+    const placeholder = placeholderProp ?? locale.toolbarSearchPlaceholder;
 
     const [localValue, setLocalValue] = useState(value);
     const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
@@ -55,7 +58,7 @@ export function QuickFilter(props: QuickFilterProps) {
         <button
             className="ogx-quick-filter__clear"
             onClick={handleClear}
-            aria-label="Clear search"
+            aria-label={locale.toolbarSearchClear}
             type="button"
         >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">

package/lib/components/Row/Row.tsx

@@ -5,6 +5,7 @@ import { Checkbox } from '../ui/Checkbox';
 import { ExpandIcon } from '../ui/ExpandIcon';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields, isRowPinned } from '../../utils/pinning';
@@ -108,6 +109,7 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 }
 
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
+    const locale = useGridLocale();
     const {
         row,
         skeleton = false,
@@ -297,7 +299,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                     <div
                         className={`ogx__cell ogx__cell--drag-handle ${focusedCellField === '__reorder_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__reorder_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''}`}
                         role="gridcell"
-                        aria-label={onDragStart ? 'Drag to reorder row' : undefined}
+                        aria-label={onDragStart ? locale.rowReorderLabel : undefined}
                         aria-colindex={reorderColIndex}
                         data-field="__reorder_col__"
                         tabIndex={-1}
@@ -322,7 +324,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
-                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details') : undefined}
+                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? locale.rowDetailPanelCollapseLabel : locale.rowDetailPanelExpandLabel) : undefined}
                         aria-expanded={showDetailPanel ? isDetailPanelExpanded : undefined}
                         aria-controls={showDetailPanel && isDetailPanelExpanded ? detailPanelId : undefined}
                         aria-colindex={expandColIndex}
@@ -390,7 +392,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 checked={isSelected}
                                 onChange={handleCheckboxChange}
                                 onClick={(e) => e.stopPropagation()}
-                                aria-label={isSelected ? `Deselect row ${id}` : `Select row ${id}`}
+                                aria-label={isSelected ? locale.rowDeselectLabel(id) : locale.rowSelectLabel(id)}
                                 tabIndex={-1}
                                 onMouseDown={(e) => e.preventDefault()}
                             />

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 interface GlobalSearchProps {
@@ -32,7 +33,9 @@ function normalizeSearch(text: string): string {
     return text.trim().split(/\s+/).filter(Boolean).join(' ');
 }
 
-export function GlobalSearch({ value = '', onChange, placeholder = 'Search...', debounceMs = 250 }: GlobalSearchProps) {
+export function GlobalSearch({ value = '', onChange, placeholder: placeholderProp, debounceMs = 250 }: GlobalSearchProps) {
+    const locale = useGridLocale();
+    const placeholder = placeholderProp ?? locale.toolbarSearchPlaceholder;
     const [isExpanded, setIsExpanded] = useState(() => value.length > 0);
     // Fully uncontrolled: localValue is the single source of truth.
     const [localValue, setLocalValue] = useState(value);
@@ -152,11 +155,11 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 placeholder={placeholder}
-                aria-label="Global Search"
+                aria-label={locale.toolbarSearchLabel}
                 autoComplete="off"
             />
             {localValue && (
-                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
+                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label={locale.toolbarSearchClear}>
                     <CloseIcon />
                 </button>
             )}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -12,6 +12,7 @@ import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibility
 import { FilterPanel } from '../FilterPanel/FilterPanel';
 import { GridTooltip } from '../Tooltip/Tooltip';
 import { AiSparkleIcon } from '../AiAssistant/GridAiAssistantPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 /** Props passed to a custom toolbar button renderer. */
 export interface ToolbarButtonRenderProps {
@@ -169,6 +170,7 @@ function AggregationPanel({
     onClose: () => void;
     activeCount: number;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -214,22 +216,22 @@ function AggregationPanel({
             ref={panelRef}
             className="ogx-toolbar__panel"
             role="dialog"
-            aria-label="Summaries configuration"
+            aria-label={locale.toolbarSummariesPanelLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left, width: 400, maxWidth: 'calc(100vw - 24px)' }}
         >
             <div className="ogx-toolbar__panel-header">
                 <span className="ogx-toolbar__panel-title">
                     <SigmaIcon />
-                    Summaries
+                    {locale.toolbarSummaries}
                 </span>
                 {activeCount > 0 && (
                     <button
                         type="button"
                         className="ogx-toolbar__clear-btn"
                         onClick={onClearAll}
-                        title="Clear all summaries"
+                        title={locale.toolbarSummariesClearAllTooltip}
                     >
-                        Clear all
+                        {locale.toolbarSummariesClearAll}
                     </button>
                 )}
             </div>
@@ -237,8 +239,8 @@ function AggregationPanel({
             <div className="ogx-toolbar__panel-body">
                 {aggregableColumns.length === 0 ? (
                     <p className="ogx-toolbar__empty">
-                        No aggregable columns.<br />
-                        Set <code>aggregable: true</code> on a column to enable.
+                        {locale.toolbarSummariesEmpty}<br />
+                        {`${locale.toolbarSummariesEmptyHintBefore} `}<code>aggregable: true</code>{` ${locale.toolbarSummariesEmptyHintAfter}`}
                     </p>
                 ) : (
                     aggregableColumns.map((col) => {
@@ -257,7 +259,7 @@ function AggregationPanel({
                                             onClick={() => onFunctionChange(col.field, fn)}
                                             aria-pressed={currentFn === fn}
                                         >
-                                            {fn}
+                                            {locale.toolbarAggregationFunction(fn)}
                                         </button>
                                     ))}
                                 </div>
@@ -295,6 +297,7 @@ function ColumnsPanelWrapper({
     onClose: () => void;
     showNonHideableColumns?: boolean;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -340,7 +343,7 @@ function ColumnsPanelWrapper({
             ref={panelRef}
             className="ogx-toolbar__panel"
             role="dialog"
-            aria-label="Column visibility"
+            aria-label={locale.toolbarColumnsPanelLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left, width: 280, padding: 0 }}
         >
             <ColumnVisibilityPanel
@@ -372,6 +375,7 @@ function FilterPanelWrapper({
     onFilterModelChange: (model: GridFilterModel) => void;
     onClose: () => void;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     // Stable ref for onClose — prevents the mousedown effect from
@@ -421,13 +425,13 @@ function FilterPanelWrapper({
             ref={panelRef}
             className="ogx-toolbar__panel ogx-toolbar__panel--filter"
             role="dialog"
-            aria-label="Advanced filters"
+            aria-label={locale.toolbarFiltersLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left, width: 540, maxWidth: 'calc(100vw - 24px)' }}
         >
             <div className="ogx-toolbar__panel-header">
                 <span className="ogx-toolbar__panel-title">
                     <FilterIcon />
-                    Filters
+                    {locale.toolbarFilters}
                     {activeFilterCount > 0 && (
                         <span className="ogx-toolbar__panel-count">{activeFilterCount}</span>
                     )}
@@ -438,19 +442,19 @@ function FilterPanelWrapper({
                             type="button"
                             className="ogx-toolbar__clear-btn"
                             onClick={handleClearAll}
-                            title="Clear all filters"
+                            title={locale.toolbarFiltersClearAllTooltip}
                         >
-                            Clear all
+                            {locale.toolbarFiltersClearAll}
                         </button>
                     )}
                     <button
                         type="button"
                         className="ogx-toolbar__close-btn"
                         onClick={() => onCloseRef.current()}
-                        title="Close filters"
-                        aria-label="Close filters panel"
+                        title={locale.toolbarFiltersCloseTooltip}
+                        aria-label={locale.toolbarFiltersCloseLabel}
                     >
-                        Close
+                        {locale.toolbarFiltersClose}
                     </button>
                 </div>
             </div>
@@ -501,8 +505,10 @@ export function GridToolbar({
     showNonHideableColumns,
     onAiAssistantToggle,
     aiAssistantOpen = false,
-    aiAssistantLabel = 'Ask AI',
+    aiAssistantLabel: aiAssistantLabelProp,
 }: GridToolbarProps) {
+    const locale = useGridLocale();
+    const aiAssistantLabel = aiAssistantLabelProp ?? locale.aiAssistantButton;
     // At most one panel is open. Every way the Columns panel closes (its button, a custom
     // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
     // grid can ask for it again with forceColumnsOpen.
@@ -646,7 +652,7 @@ export function GridToolbar({
     }, [columns, columnVisibilityModel, onColumnVisibilityModelChange]);
 
     return (
-        <div className={['ogx-toolbar', className].filter(Boolean).join(' ')} role="toolbar" aria-label="Grid toolbar" style={style}>
+        <div className={['ogx-toolbar', className].filter(Boolean).join(' ')} role="toolbar" aria-label={locale.toolbarLabel} style={style}>
             {/* Left slot — custom content */}
             {children && <div className="ogx-toolbar__left">{children}</div>}
 
@@ -681,7 +687,7 @@ export function GridToolbar({
                                 <GlobalSearch
                                     value={searchValue}
                                     onChange={handleSearchChange}
-                                    placeholder="Search..."
+                                    placeholder={locale.toolbarSearchPlaceholder}
                                 />
                             )
                         }
@@ -698,12 +704,12 @@ export function GridToolbar({
                                 activeCount: columns.length - visibleColumns.size,
                             })
                             : (
-                                <GridTooltip title="Columns">
+                                <GridTooltip title={locale.toolbarColumns}>
                                     <button
                                         type="button"
                                         ref={colsButtonRef}
                                         className={`ogx-toolbar__icon-btn${colsOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Manage columns"
+                                        aria-label={locale.toolbarColumnsLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={colsOpen}
                                         onClick={() => togglePanel('columns')}
@@ -740,19 +746,19 @@ export function GridToolbar({
                                 activeCount: activeFilterCount,
                             })
                             : (
-                                <GridTooltip title="Filters">
+                                <GridTooltip title={locale.toolbarFilters}>
                                     <button
                                         type="button"
                                         ref={filterButtonRef}
                                         className={`ogx-toolbar__icon-btn${filterOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Advanced filters"
+                                        aria-label={locale.toolbarFiltersLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={filterOpen}
                                         onClick={() => togglePanel('filters')}
                                     >
                                         <FilterIcon />
                                         {activeFilterCount > 0 && (
-                                            <span className="ogx-toolbar__dot" aria-label="Filters active" />
+                                            <span className="ogx-toolbar__dot" aria-label={locale.toolbarFiltersActive} />
                                         )}
                                     </button>
                                 </GridTooltip>
@@ -773,19 +779,19 @@ export function GridToolbar({
                 {/* Pivot button */}
                 {onPivotModelChange && (
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                        <GridTooltip title="Pivot">
+                        <GridTooltip title={locale.toolbarPivot}>
                             <button
                                 type="button"
                                 ref={pivotButtonRef}
                                 className={`ogx-toolbar__icon-btn${pivotOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                aria-label="Configure pivot"
+                                aria-label={locale.toolbarPivotLabel}
                                 aria-haspopup="dialog"
                                 aria-expanded={pivotOpen}
                                 onClick={() => togglePanel('pivot')}
                             >
                                 <PivotIcon />
                                 {pivotActive && (
-                                    <span className="ogx-toolbar__dot" aria-label="Pivot active" />
+                                    <span className="ogx-toolbar__dot" aria-label={locale.toolbarPivotActive} />
                                 )}
                             </button>
                         </GridTooltip>
@@ -812,19 +818,19 @@ export function GridToolbar({
                                 activeCount,
                             })
                             : (
-                                <GridTooltip title="Summaries">
+                                <GridTooltip title={locale.toolbarSummaries}>
                                     <button
                                         type="button"
                                         ref={aggButtonRef}
                                         className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Configure summaries"
+                                        aria-label={locale.toolbarSummariesLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={aggOpen}
                                         onClick={() => togglePanel('summaries')}
                                     >
                                         <SigmaIcon />
                                         {activeCount > 0 && (
-                                            <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
+                                            <span className="ogx-toolbar__dot" aria-label={locale.toolbarSummariesActive(activeCount)} />
                                         )}
                                     </button>
                                 </GridTooltip>

package/lib/components/Toolbar/PivotPanel.tsx

@@ -4,6 +4,7 @@ import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
 import { getViewportWidth } from '../../utils/viewport';
 import { getPanelPosition, type GridPanelPosition } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 const AGG_FNS: GridPivotAggFn[] = ['sum', 'avg', 'count', 'min', 'max'];
 
@@ -31,6 +32,7 @@ export interface PivotPanelProps {
 }
 
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<GridPanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -128,18 +130,18 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
             ref={panelRef}
             className="ogx-pivot-panel"
             role="dialog"
-            aria-label="Pivot configuration"
+            aria-label={locale.pivotPanelLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left }}
         >
             { }
             <div className="ogx-pivot-panel__header">
                 <span className="ogx-pivot-panel__title">
                     <PivotIcon />
-                    Pivot Mode
+                    {locale.pivotMode}
                 </span>
                 {totalActive > 0 && (
-                    <button type="button" className="ogx-pivot-panel__reset-btn" onClick={reset} title="Reset pivot">
-                        Reset
+                    <button type="button" className="ogx-pivot-panel__reset-btn" onClick={reset} title={locale.pivotResetTooltip}>
+                        {locale.pivotReset}
                     </button>
                 )}
             </div>
@@ -150,11 +152,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--row" />
-                        Row Fields
+                        {locale.pivotRowFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.rowFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add fields here — each becomes a row label"
+                        data-placeholder={locale.pivotRowFieldsPlaceholder}
                     >
                         {model.rowFields.map((f, i) => (
                             <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--row">
@@ -163,8 +165,8 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     type="button"
                                     className="ogx-pivot-chip__remove"
                                     onClick={() => removeRow(i)}
-                                    title={`Remove ${colLabel(f)}`}
-                                    aria-label={`Remove ${colLabel(f)} from Row Fields`}
+                                    title={locale.pivotRemoveTooltip(colLabel(f))}
+                                    aria-label={locale.pivotRemoveRowLabel(colLabel(f))}
                                 >×</button>
                             </span>
                         ))}
@@ -175,11 +177,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--col" />
-                        Column Fields
+                        {locale.pivotColumnFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.columnFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add fields here — unique values become column headers"
+                        data-placeholder={locale.pivotColumnFieldsPlaceholder}
                     >
                         {model.columnFields.map((f, i) => (
                             <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--col">
@@ -188,8 +190,8 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     type="button"
                                     className="ogx-pivot-chip__remove"
                                     onClick={() => removeCol(i)}
-                                    title={`Remove ${colLabel(f)}`}
-                                    aria-label={`Remove ${colLabel(f)} from Column Fields`}
+                                    title={locale.pivotRemoveTooltip(colLabel(f))}
+                                    aria-label={locale.pivotRemoveColumnLabel(colLabel(f))}
                                 >×</button>
                             </span>
                         ))}
@@ -200,11 +202,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--value" />
-                        Value Fields (aggregated)
+                        {locale.pivotValueFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.valueFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add numeric fields here — values are aggregated"
+                        data-placeholder={locale.pivotValueFieldsPlaceholder}
                     >
                         {model.valueFields.map((vf: GridPivotValueField, i) => {
                             const allowed = allowedFns(vf.field);
@@ -216,19 +218,19 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                         className="ogx-pivot-chip__fn-select"
                                         value={vf.aggFn}
                                         onChange={(e) => changeValueFn(i, e.target.value as GridPivotAggFn)}
-                                        title="Aggregation function"
-                                        aria-label={`Aggregation function for ${colLabel(vf.field)}`}
+                                        title={locale.pivotAggregationTooltip}
+                                        aria-label={locale.pivotAggregationLabel(colLabel(vf.field))}
                                     >
                                         {fnOptions.map((fn) => (
-                                            <option key={fn} value={fn}>{fn.toUpperCase()}</option>
+                                            <option key={fn} value={fn}>{locale.pivotAggregationFunction(fn)}</option>
                                         ))}
                                     </select>
                                     <button
                                         type="button"
                                         className="ogx-pivot-chip__remove"
                                         onClick={() => removeValue(i)}
-                                        title={`Remove ${colLabel(vf.field)}`}
-                                        aria-label={`Remove ${colLabel(vf.field)} (${vf.aggFn.toUpperCase()}) from Value Fields`}
+                                        title={locale.pivotRemoveTooltip(colLabel(vf.field))}
+                                        aria-label={locale.pivotRemoveValueLabel(colLabel(vf.field), locale.pivotAggregationFunction(vf.aggFn))}
                                     >×</button>
                                 </span>
                             );
@@ -240,7 +242,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
 
                 { }
                 <div>
-                    <div className="ogx-pivot-panel__fields-label">Available Fields</div>
+                    <div className="ogx-pivot-panel__fields-label">{locale.pivotAvailableFields}</div>
                     <div className="ogx-pivot-fields">
                         {availableColumns.map((col) => {
                             const isNum = canBeValue(col);
@@ -253,13 +255,13 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     </span>
                                     <div className="ogx-pivot-field-actions">
                                         {isDimension && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title="Add to Row Fields" aria-label={`Add ${label} to Row Fields`}>Row</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title={locale.pivotAddRowTooltip} aria-label={locale.pivotAddRowLabel(label)}>{locale.pivotAddRow}</button>
                                         )}
                                         {isDimension && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title="Add to Column Fields" aria-label={`Add ${label} to Column Fields`}>Col</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title={locale.pivotAddColumnTooltip} aria-label={locale.pivotAddColumnLabel(label)}>{locale.pivotAddColumn}</button>
                                         )}
                                         {isNum && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title="Add to Value Fields" aria-label={`Add ${label} to Value Fields`}>Val</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title={locale.pivotAddValueTooltip} aria-label={locale.pivotAddValueLabel(label)}>{locale.pivotAddValue}</button>
                                         )}
                                     </div>
                                 </div>
@@ -267,7 +269,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                         })}
                         {availableColumns.length === 0 && (
                             <span style={{ fontSize: 12, color: 'var(--ogx-color-gray-400, #94a3b8)' }}>
-                                All fields are in use.
+                                {locale.pivotAllFieldsInUse}
                             </span>
                         )}
                     </div>

package/lib/components/ui/Checkbox.css

@@ -26,7 +26,7 @@
   border-radius: 4px;
   background: var(--ogx-checkbox-bg, var(--ogx-color-white));
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  color: white; 
+  color: var(--ogx-checkbox-checkmark, white);
   flex-shrink: 0;
 }
 .ogx-checkbox__icon {
@@ -43,15 +43,15 @@
   line-height: 1;
 }
 .ogx-checkbox__input:checked + .ogx-checkbox__box {
-  background: var(--ogx-color-primary);
-  border-color: var(--ogx-color-primary);
+  background: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
+  border-color: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
 }
 .ogx-checkbox__input:checked + .ogx-checkbox__box .ogx-checkbox__icon {
   transform: scale(1);
 }
 .ogx-checkbox__input:indeterminate + .ogx-checkbox__box {
-  background: var(--ogx-color-primary);
-  border-color: var(--ogx-color-primary);
+  background: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
+  border-color: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
 }
 .ogx-checkbox__input:indeterminate + .ogx-checkbox__box .ogx-checkbox__icon {
   transform: scale(1);

package/lib/components/ui/DragHandleIcon.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export type DragHandleIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
+    const locale = useGridLocale();
     return (
         <button
             type="button"
             className={`ogx-drag-handle ${className}`}
-            aria-label="Drag to reorder row"
+            aria-label={locale.rowReorderLabel}
             {...props}
         >
             <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">