@crisp-ui-kit/crisp 0.52.6 → 0.53.0

package/dist/button.css

@@ -3,7 +3,7 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
     &:hover { background: var(--crisp-bg-brand-solid-pressed); }
     &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
@@ -12,7 +12,7 @@
     &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
     &:hover { filter: brightness(0.96); }
     &:active { filter: brightness(0.92); }
 }

package/dist/button.layered.css

@@ -4,7 +4,7 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
     &:hover { background: var(--crisp-bg-brand-solid-pressed); }
     &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
@@ -13,7 +13,7 @@
     &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
     &:hover { filter: brightness(0.96); }
     &:active { filter: brightness(0.92); }
 }

package/dist/cjs/components/button/button.recipe.js

@@ -28,7 +28,12 @@ const spec = (0, core_1.defineSpec)({
                 decls: {
                     background: tokens_1.contract.bgBrandSolid,
                     color: tokens_1.contract.fgOnBrand,
-                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
+                    // crisp#494: the inset ring is a black tint, not white -- live-
+                    // measured on Attio's own "New Company" button as
+                    // rgba(0,0,0,0.06), not the rgba(255,255,255,0.07) both solid
+                    // intents shared. The other two shadow layers already matched
+                    // exactly.
+                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
                 },
                 parts: [
                     { selector: "&:hover", decls: { background: tokens_1.contract.bgBrandSolidPressed } },
@@ -50,7 +55,10 @@ const spec = (0, core_1.defineSpec)({
                 decls: {
                     background: tokens_1.contract.bgDangerSolid,
                     color: tokens_1.contract.fgOnBrand,
-                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
+                    // Same corrected inset ring as primary (crisp#494) -- shared
+                    // literal, same solid-fill button family; the coloured layers
+                    // themselves weren't independently re-measured this round.
+                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
                 },
                 parts: [
                     { selector: "&:hover", decls: { filter: "brightness(0.96)" } },

package/dist/cjs/components/datatable/datatable.js

@@ -330,9 +330,47 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
-    ? `${total} ${total === 1 ? "row" : "rows"}`
-    : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
+function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as TableToolbar's own — an explicit
+    // prop wins, then the provider's translation of the built-in English
+    // default, then that default itself with no provider in the tree.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const selectAllLabel = (0, core_1.useCrispMessage)(selectAllLabelProp, "Select all rows");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search…");
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Search table");
+    // Also `React.ReactNode`-typed, same reasoning as `empty` below.
+    const addRowLabel = addRowLabelProp ?? crispMessages["New record"] ?? "New record";
+    // `empty` is typed `React.ReactNode`, not `string` — a consumer can pass a
+    // whole custom empty-state element, not just replacement text, so it
+    // can't go through `useCrispMessage` (string-only). A ReactNode override
+    // passes straight through unchanged (it's already whatever the consumer
+    // wants shown); only the built-in string default translates.
+    const empty = emptyProp ?? crispMessages["No results."] ?? "No results.";
+    const reorderRowLabel = (0, core_1.useCrispMessage)(reorderRowLabelProp, "Reorder row");
+    const sortAscendingLabel = (0, core_1.useCrispMessage)(sortAscendingLabelProp, "Sort ascending");
+    const sortDescendingLabel = (0, core_1.useCrispMessage)(sortDescendingLabelProp, "Sort descending");
+    const moveColumnLeftLabel = (0, core_1.useCrispMessage)(moveColumnLeftLabelProp, "Move left");
+    const moveColumnRightLabel = (0, core_1.useCrispMessage)(moveColumnRightLabelProp, "Move right");
+    const editColumnLabel = (0, core_1.useCrispMessage)(editColumnLabelProp, "Edit column label");
+    const hideColumnLabel = (0, core_1.useCrispMessage)(hideColumnLabelProp, "Hide from view");
+    const renameColumnLabel = (0, core_1.useCrispMessage)(renameColumnLabelProp, "Rename column");
+    const viewSettingsLabel = (0, core_1.useCrispMessage)(viewSettingsLabelProp, "View settings");
+    const columnsGroupLabel = (0, core_1.useCrispMessage)(columnsGroupLabelProp, "Columns");
+    // countLabel/selectionAnnouncement stay formatter props, same escape hatch
+    // as TableToolbar's sortTriggerLabel — word order and pluralisation rules
+    // differ too much across languages for a template. Their BUILT-IN default
+    // (when the consumer supplies neither) still translates its own static
+    // fragments through the provider, same as TableToolbar's "Sorted by".
+    const resolvedCountLabel = countLabel ??
+        ((shown, total) => shown === total
+            ? `${total} ${total === 1
+                ? (crispMessages.row ?? "row")
+                : (crispMessages.rows ?? "rows")}`
+            : `${shown} ${crispMessages.of ?? "of"} ${total}`);
+    const resolvedSelectionAnnouncement = selectionAnnouncement ??
+        ((count) => count === 0
+            ? (crispMessages["Selection cleared"] ?? "Selection cleared")
+            : `${count} ${crispMessages.selected ?? "selected"}`);
     // Two different defaults on purpose. FORMATTING falls back to "en-US", which
     // is what the built-in date/number/currency renderers have always produced,
     // so no existing output moves. SORTING falls back to `undefined`, which is
@@ -426,7 +464,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     const [selectionText, setSelectionText] = React.useState("");
     if (prevSelectedCount.current !== selected.size) {
         prevSelectedCount.current = selected.size;
-        setSelectionText(selectionAnnouncement(selected.size));
+        setSelectionText(resolvedSelectionAnnouncement(selected.size));
     }
     const [editing, setEditing] = React.useState(null);
     // Set only while an async `onEdit` is in flight (#385) -- a sync `onEdit`
@@ -772,7 +810,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     ref: scrollRef,
                     onScroll: (e) => {
                         const el = e.currentTarget;
@@ -802,7 +840,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                     const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
-                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
+                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
                                                     setRenaming(null);
                                                 }, onKeyDown: (e) => {
@@ -814,7 +852,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                         setRenaming(null);
                                                 } })) : columnMenu ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
-                                                        : col.key} column options`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                                        : col.key} ${crispMessages["column options"] ?? "column options"}`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: sortAscendingLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: sortDescendingLabel }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: moveColumnLeftLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: moveColumnRightLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: editColumnLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: hideColumnLabel })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
                                 })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [group !== null && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(table_1.TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-label", children: group }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
                                         dragRowId &&
                                         dragRowId !== row.id &&

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -156,7 +156,33 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default below, or
+    // that default itself with no provider — unchanged from before this
+    // existed. One resolved constant per prop, same name every existing usage
+    // below already reads, so nothing past this block changes.
+    const sortLabel = (0, core_1.useCrispMessage)(sortLabelProp, "Sort");
+    const filterLabel = (0, core_1.useCrispMessage)(filterLabelProp, "Filter");
+    const reorderSortLabel = (0, core_1.useCrispMessage)(reorderSortLabelProp, "Reorder sort");
+    const noSortsLabel = (0, core_1.useCrispMessage)(noSortsLabelProp, "No sorts applied to this view.");
+    const addSortLabel = (0, core_1.useCrispMessage)(addSortLabelProp, "Add sort");
+    const learnSortingLabel = (0, core_1.useCrispMessage)(learnSortingLabelProp, "Learn about sorting");
+    const selectConditionLabel = (0, core_1.useCrispMessage)(selectConditionLabelProp, "Select condition");
+    const sortFieldLabel = (0, core_1.useCrispMessage)(sortFieldLabelProp, "Sort field");
+    const sortDirectionLabel = (0, core_1.useCrispMessage)(sortDirectionLabelProp, "Sort direction");
+    const removeSortLabel = (0, core_1.useCrispMessage)(removeSortLabelProp, "Remove sort");
+    const filterFieldLabel = (0, core_1.useCrispMessage)(filterFieldLabelProp, "Filter by field");
+    const filterFieldPlaceholder = (0, core_1.useCrispMessage)(filterFieldPlaceholderProp, "Filter by…");
+    const filterValuePlaceholder = (0, core_1.useCrispMessage)(filterValuePlaceholderProp, "Value…");
+    const ascendingLabel = (0, core_1.useCrispMessage)(ascendingLabelProp, "Ascending");
+    const descendingLabel = (0, core_1.useCrispMessage)(descendingLabelProp, "Descending");
+    // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
+    // their own — a whole lookup table, not one string — so they translate
+    // straight from the provider's dictionary at the two spots they render
+    // (#628, #673 below), same fallback order as every resolved constant
+    // above.
+    const crispMessages = (0, core_1.useCrispMessages)();
     // Each side falls back to the shared `columns` independently — a caller
     // that only overrides one (Filter's own Record/Created by, say) still
     // gets `columns` on the other, unchanged from before either prop existed.
@@ -245,12 +271,18 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     };
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
-    // replace the whole thing rather than fill a template.
+    // replace the whole thing rather than fill a template — crisp/#471's
+    // `sortTriggerLabel` formatter is exactly that escape hatch. Short of a
+    // full formatter, the "Sorted by" fragment itself still translates (the
+    // sort trigger reading "Sort" in Mongolian and "Sorted by X" in English is
+    // worse than an imperfect word order); `crispMessages` rather than a
+    // second `useCrispMessage` call, since this only fires on the branch that
+    // needs it.
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `Sorted by ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
-            : "Sort";
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            : sortLabel;
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
@@ -276,8 +308,8 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                             ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
-                                        ? `Filter · ${activeFilters}`
-                                        : "Filter"] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                                        ? `${filterLabel} · ${activeFilters}`
+                                        : filterLabel] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
                                     .filter((col) => col.label
@@ -288,7 +320,8 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
-                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `${crispMessages.Remove ?? "Remove"} ${col?.label} ${crispMessages.filter ?? "filter"}`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

package/dist/cjs/core/i18n.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrispMessagesProvider = CrispMessagesProvider;
+exports.useCrispMessage = useCrispMessage;
+exports.useCrispMessages = useCrispMessages;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const CrispMessagesContext = React.createContext({});
+function CrispMessagesProvider({ messages, children, }) {
+    return ((0, jsx_runtime_1.jsx)(CrispMessagesContext.Provider, { value: messages, children: children }));
+}
+/**
+ * Resolves one translatable string for a component: `explicit` is whatever
+ * the caller passed for that prop (`undefined` when they didn't), and
+ * `englishDefault` is the literal that shipped as that prop's default value
+ * before crisp/#471 — still what renders with no provider in the tree.
+ *
+ * A plain function, not a second context read inside a loop or a render
+ * helper — components call this once per string, the same shape
+ * `useLabelAssociation`/`useFormReset` and this codebase's other small
+ * `core/` hooks already take.
+ */
+function useCrispMessage(explicit, englishDefault) {
+    const messages = React.useContext(CrispMessagesContext);
+    if (explicit !== undefined)
+        return explicit;
+    return messages[englishDefault] ?? englishDefault;
+}
+/**
+ * The same resolution as `useCrispMessage`, for a component that builds its
+ * own default text internally (TableToolbar's "Sorted by {field}", a
+ * DatePicker's month/weekday names) rather than taking one string prop per
+ * piece — every literal fragment of that built-in text still needs its own
+ * translation lookup, and a component with many such fragments (twelve
+ * month names, seven weekday names) would otherwise call `useCrispMessage`
+ * in a loop, which breaks the rules of hooks. `useCrispMessages` returns the
+ * raw dictionary once; call sites do their own `dict[english] ?? english`
+ * per fragment, same fallback order, no hook-in-a-loop.
+ */
+function useCrispMessages() {
+    return React.useContext(CrispMessagesContext);
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -37,6 +37,10 @@ Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true,
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });
 var form_value_1 = require("./form-value");
 Object.defineProperty(exports, "formValueStyle", { enumerable: true, get: function () { return form_value_1.formValueStyle; } });
+var i18n_1 = require("./i18n");
+Object.defineProperty(exports, "CrispMessagesProvider", { enumerable: true, get: function () { return i18n_1.CrispMessagesProvider; } });
+Object.defineProperty(exports, "useCrispMessage", { enumerable: true, get: function () { return i18n_1.useCrispMessage; } });
+Object.defineProperty(exports, "useCrispMessages", { enumerable: true, get: function () { return i18n_1.useCrispMessages; } });
 var mention_1 = require("./mention");
 Object.defineProperty(exports, "matchMentionTrigger", { enumerable: true, get: function () { return mention_1.matchMentionTrigger; } });
 var place_floating_1 = require("./place-floating");

package/dist/esm/components/button/button.recipe.js

@@ -25,7 +25,12 @@ const spec = defineSpec({
                 decls: {
                     background: c.bgBrandSolid,
                     color: c.fgOnBrand,
-                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
+                    // crisp#494: the inset ring is a black tint, not white -- live-
+                    // measured on Attio's own "New Company" button as
+                    // rgba(0,0,0,0.06), not the rgba(255,255,255,0.07) both solid
+                    // intents shared. The other two shadow layers already matched
+                    // exactly.
+                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
                 },
                 parts: [
                     { selector: "&:hover", decls: { background: c.bgBrandSolidPressed } },
@@ -47,7 +52,10 @@ const spec = defineSpec({
                 decls: {
                     background: c.bgDangerSolid,
                     color: c.fgOnBrand,
-                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
+                    // Same corrected inset ring as primary (crisp#494) -- shared
+                    // literal, same solid-fill button family; the coloured layers
+                    // themselves weren't independently re-measured this round.
+                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
                 },
                 parts: [
                     { selector: "&:hover", decls: { filter: "brightness(0.96)" } },

package/dist/esm/components/datatable/datatable.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
 import * as React from "react";
-import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, } from "../../core/index.js";
 import { Avatar } from "../avatar/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
@@ -294,9 +294,47 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
-    ? `${total} ${total === 1 ? "row" : "rows"}`
-    : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+    // crisp/#471: same resolution order as TableToolbar's own — an explicit
+    // prop wins, then the provider's translation of the built-in English
+    // default, then that default itself with no provider in the tree.
+    const crispMessages = useCrispMessages();
+    const selectAllLabel = useCrispMessage(selectAllLabelProp, "Select all rows");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search…");
+    const searchLabel = useCrispMessage(searchLabelProp, "Search table");
+    // Also `React.ReactNode`-typed, same reasoning as `empty` below.
+    const addRowLabel = addRowLabelProp ?? crispMessages["New record"] ?? "New record";
+    // `empty` is typed `React.ReactNode`, not `string` — a consumer can pass a
+    // whole custom empty-state element, not just replacement text, so it
+    // can't go through `useCrispMessage` (string-only). A ReactNode override
+    // passes straight through unchanged (it's already whatever the consumer
+    // wants shown); only the built-in string default translates.
+    const empty = emptyProp ?? crispMessages["No results."] ?? "No results.";
+    const reorderRowLabel = useCrispMessage(reorderRowLabelProp, "Reorder row");
+    const sortAscendingLabel = useCrispMessage(sortAscendingLabelProp, "Sort ascending");
+    const sortDescendingLabel = useCrispMessage(sortDescendingLabelProp, "Sort descending");
+    const moveColumnLeftLabel = useCrispMessage(moveColumnLeftLabelProp, "Move left");
+    const moveColumnRightLabel = useCrispMessage(moveColumnRightLabelProp, "Move right");
+    const editColumnLabel = useCrispMessage(editColumnLabelProp, "Edit column label");
+    const hideColumnLabel = useCrispMessage(hideColumnLabelProp, "Hide from view");
+    const renameColumnLabel = useCrispMessage(renameColumnLabelProp, "Rename column");
+    const viewSettingsLabel = useCrispMessage(viewSettingsLabelProp, "View settings");
+    const columnsGroupLabel = useCrispMessage(columnsGroupLabelProp, "Columns");
+    // countLabel/selectionAnnouncement stay formatter props, same escape hatch
+    // as TableToolbar's sortTriggerLabel — word order and pluralisation rules
+    // differ too much across languages for a template. Their BUILT-IN default
+    // (when the consumer supplies neither) still translates its own static
+    // fragments through the provider, same as TableToolbar's "Sorted by".
+    const resolvedCountLabel = countLabel ??
+        ((shown, total) => shown === total
+            ? `${total} ${total === 1
+                ? (crispMessages.row ?? "row")
+                : (crispMessages.rows ?? "rows")}`
+            : `${shown} ${crispMessages.of ?? "of"} ${total}`);
+    const resolvedSelectionAnnouncement = selectionAnnouncement ??
+        ((count) => count === 0
+            ? (crispMessages["Selection cleared"] ?? "Selection cleared")
+            : `${count} ${crispMessages.selected ?? "selected"}`);
     // Two different defaults on purpose. FORMATTING falls back to "en-US", which
     // is what the built-in date/number/currency renderers have always produced,
     // so no existing output moves. SORTING falls back to `undefined`, which is
@@ -390,7 +428,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const [selectionText, setSelectionText] = React.useState("");
     if (prevSelectedCount.current !== selected.size) {
         prevSelectedCount.current = selected.size;
-        setSelectionText(selectionAnnouncement(selected.size));
+        setSelectionText(resolvedSelectionAnnouncement(selected.size));
     }
     const [editing, setEditing] = React.useState(null);
     // Set only while an async `onEdit` is in flight (#385) -- a sync `onEdit`
@@ -736,7 +774,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return dir === "asc" ? (_jsx(ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     ref: scrollRef,
                     onScroll: (e) => {
                         const el = e.currentTarget;
@@ -766,7 +804,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                     const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
                                     return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
-                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
+                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
                                                     setRenaming(null);
                                                 }, onKeyDown: (e) => {
@@ -778,7 +816,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         setRenaming(null);
                                                 } })) : columnMenu ? (_jsxs(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
-                                                        : col.key} column options`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                                        : col.key} ${crispMessages["column options"] ?? "column options"}`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: sortAscendingLabel }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: sortDescendingLabel }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: moveColumnLeftLabel }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: moveColumnRightLabel }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: editColumnLabel }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: hideColumnLabel })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
                                 })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => (_jsxs(React.Fragment, { children: [group !== null && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [_jsx("span", { className: "crisp-datatable-group-label", children: group }), _jsx("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
                                         dragRowId &&
                                         dragRowId !== row.id &&

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
 import * as React from "react";
-import { isInsideLaterFloatingLayer, useFocusAfterRemoval } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { MenuCheckboxItem } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
@@ -117,7 +117,33 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default below, or
+    // that default itself with no provider — unchanged from before this
+    // existed. One resolved constant per prop, same name every existing usage
+    // below already reads, so nothing past this block changes.
+    const sortLabel = useCrispMessage(sortLabelProp, "Sort");
+    const filterLabel = useCrispMessage(filterLabelProp, "Filter");
+    const reorderSortLabel = useCrispMessage(reorderSortLabelProp, "Reorder sort");
+    const noSortsLabel = useCrispMessage(noSortsLabelProp, "No sorts applied to this view.");
+    const addSortLabel = useCrispMessage(addSortLabelProp, "Add sort");
+    const learnSortingLabel = useCrispMessage(learnSortingLabelProp, "Learn about sorting");
+    const selectConditionLabel = useCrispMessage(selectConditionLabelProp, "Select condition");
+    const sortFieldLabel = useCrispMessage(sortFieldLabelProp, "Sort field");
+    const sortDirectionLabel = useCrispMessage(sortDirectionLabelProp, "Sort direction");
+    const removeSortLabel = useCrispMessage(removeSortLabelProp, "Remove sort");
+    const filterFieldLabel = useCrispMessage(filterFieldLabelProp, "Filter by field");
+    const filterFieldPlaceholder = useCrispMessage(filterFieldPlaceholderProp, "Filter by…");
+    const filterValuePlaceholder = useCrispMessage(filterValuePlaceholderProp, "Value…");
+    const ascendingLabel = useCrispMessage(ascendingLabelProp, "Ascending");
+    const descendingLabel = useCrispMessage(descendingLabelProp, "Descending");
+    // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
+    // their own — a whole lookup table, not one string — so they translate
+    // straight from the provider's dictionary at the two spots they render
+    // (#628, #673 below), same fallback order as every resolved constant
+    // above.
+    const crispMessages = useCrispMessages();
     // Each side falls back to the shared `columns` independently — a caller
     // that only overrides one (Filter's own Record/Created by, say) still
     // gets `columns` on the other, unchanged from before either prop existed.
@@ -206,12 +232,18 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     };
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
-    // replace the whole thing rather than fill a template.
+    // replace the whole thing rather than fill a template — crisp/#471's
+    // `sortTriggerLabel` formatter is exactly that escape hatch. Short of a
+    // full formatter, the "Sorted by" fragment itself still translates (the
+    // sort trigger reading "Sort" in Mongolian and "Sorted by X" in English is
+    // worse than an imperfect word order); `crispMessages` rather than a
+    // second `useCrispMessage` call, since this only fires on the branch that
+    // needs it.
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `Sorted by ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
-            : "Sort";
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            : sortLabel;
     return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
@@ -237,8 +269,8 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                             ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
-                                        ? `Filter · ${activeFilters}`
-                                        : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                                        ? `${filterLabel} · ${activeFilters}`
+                                        : filterLabel] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
                                     .filter((col) => col.label
@@ -249,7 +281,8 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
-                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `${crispMessages.Remove ?? "Remove"} ${col?.label} ${crispMessages.filter ?? "filter"}`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

package/dist/esm/core/i18n.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const CrispMessagesContext = React.createContext({});
+export function CrispMessagesProvider({ messages, children, }) {
+    return (_jsx(CrispMessagesContext.Provider, { value: messages, children: children }));
+}
+/**
+ * Resolves one translatable string for a component: `explicit` is whatever
+ * the caller passed for that prop (`undefined` when they didn't), and
+ * `englishDefault` is the literal that shipped as that prop's default value
+ * before crisp/#471 — still what renders with no provider in the tree.
+ *
+ * A plain function, not a second context read inside a loop or a render
+ * helper — components call this once per string, the same shape
+ * `useLabelAssociation`/`useFormReset` and this codebase's other small
+ * `core/` hooks already take.
+ */
+export function useCrispMessage(explicit, englishDefault) {
+    const messages = React.useContext(CrispMessagesContext);
+    if (explicit !== undefined)
+        return explicit;
+    return messages[englishDefault] ?? englishDefault;
+}
+/**
+ * The same resolution as `useCrispMessage`, for a component that builds its
+ * own default text internally (TableToolbar's "Sorted by {field}", a
+ * DatePicker's month/weekday names) rather than taking one string prop per
+ * piece — every literal fragment of that built-in text still needs its own
+ * translation lookup, and a component with many such fragments (twelve
+ * month names, seven weekday names) would otherwise call `useCrispMessage`
+ * in a loop, which breaks the rules of hooks. `useCrispMessages` returns the
+ * raw dictionary once; call sites do their own `dict[english] ?? english`
+ * per fragment, same fallback order, no hook-in-a-loop.
+ */
+export function useCrispMessages() {
+    return React.useContext(CrispMessagesContext);
+}

package/dist/esm/core/index.js

@@ -7,6 +7,7 @@ export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
+export { CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/styles.css

@@ -320,7 +320,7 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
     &:hover { background: var(--crisp-bg-brand-solid-pressed); }
     &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
@@ -329,7 +329,7 @@
     &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
     &:hover { filter: brightness(0.96); }
     &:active { filter: brightness(0.92); }
 }

package/dist/styles.layered.css

@@ -321,7 +321,7 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
     &:hover { background: var(--crisp-bg-brand-solid-pressed); }
     &:active { background: var(--crisp-bg-brand-solid-pressed); }
 }
@@ -330,7 +330,7 @@
     &:hover { background: var(--crisp-bg-raised); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
     &:hover { filter: brightness(0.96); }
     &:active { filter: brightness(0.92); }
 }

package/dist/types/components/button/button.recipe.d.ts

@@ -27,7 +27,7 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
+                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";
@@ -58,7 +58,7 @@ declare const spec: {
                 readonly decls: {
                     readonly background: `var(--${string})`;
                     readonly color: `var(--${string})`;
-                    readonly boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
+                    readonly boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)";
                 };
                 readonly parts: [{
                     readonly selector: "&:hover";

package/dist/types/components/datatable/datatable.d.ts

@@ -144,6 +144,26 @@ export type DataTableProps<T extends {
      * copy of the column list).
      */
     columnMenu?: boolean;
+    /** crisp/#471: the column header menu's own six strings — no `labels`
+     *  object for these (unlike RecordPage/RecordsTable) because each is
+     *  independent, single-purpose text with an obvious name of its own, the
+     *  same shape `selectAllLabel`/`reorderRowLabel` above already take. */
+    sortAscendingLabel?: string;
+    sortDescendingLabel?: string;
+    moveColumnLeftLabel?: string;
+    moveColumnRightLabel?: string;
+    /** The header menu's "Edit column label" item (opens the rename input). */
+    editColumnLabel?: string;
+    hideColumnLabel?: string;
+    /** aria-label on the rename input itself, once "Edit column label" opens
+     *  it — separate from `editColumnLabel` above, which is the menu item
+     *  that opens it, not the input. */
+    renameColumnLabel?: string;
+    /** The "View settings" trigger that opens the column-visibility menu
+     *  (only rendered when `columnMenu` is set). */
+    viewSettingsLabel?: string;
+    /** That menu's own "Columns" section heading. */
+    columnsGroupLabel?: string;
     /** Called with the next column list after a move, rename or hide. */
     onColumnsChange?: (columns: DataTableColumn<T>[]) => void;
     /** Group rows under a heading row, the way a grouped view does. */
@@ -224,7 +244,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -74,6 +74,10 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     helpHref?: string;
     /** aria-label on the Sort trigger (default "Sort"). */
     sortLabel?: string;
+    /** Text on the Filter trigger when `filterTriggerLabel` isn't set and no
+     *  filter is active (default "Filter") — crisp/#471: TableToolbar had no
+     *  override for this at all before, unlike every other label here. */
+    filterLabel?: string;
     /** aria-label on each sort row's drag grip (default "Reorder sort"). */
     reorderSortLabel?: string;
     /** aria-label on a sort row's field select (default "Sort field"). */
@@ -135,7 +139,7 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel, reorderSortLabel, noSortsLabel, addSortLabel, learnSortingLabel, selectConditionLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, inline, ...rest }: TableToolbarProps): React.JSX.Element;
+export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }: TableToolbarProps): React.JSX.Element;
 export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
     /** Drawn the way Sort/Filter are once a condition is set (#399). */
     active?: boolean;

package/dist/types/core/i18n.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+/**
+ * crisp/#471: a consumer app (internal/grc) ships a non-English UI and needs
+ * every string crisp itself renders — not just its own screens — to read in
+ * that language too. Every crisp component that shows its own text already
+ * takes that text as an optional prop with an English default (crisp/#74,
+ * crisp/#75, crisp/#204's own sweep: `sortLabel = "Sort"` and the like) — an
+ * explicit prop always wins, so nothing here changes what a consumer who
+ * passes one already gets. What's missing is a way to set every one of
+ * those defaults ONCE, at the app root, instead of threading a translated
+ * string into every call site of every component across a whole app.
+ *
+ * `CrispMessagesProvider` fills that gap. Its `messages` map is keyed by
+ * the component's own English default text — the exact literal already
+ * hardcoded at each call site — not a separate id vocabulary a consumer
+ * would have to learn or keep in sync. This is deliberate: internal/grc's
+ * own `lib/i18n.tsx` already built a flat `Record<string,string>` dictionary
+ * keyed the same way for its OWN UI chrome, so that dictionary is a valid
+ * `CrispMessages` value as-is — passed straight into this provider, with no
+ * remapping, it also translates every crisp-rendered string that happens to
+ * share an English key GRC already has an entry for.
+ *
+ * `useCrispMessage` is what a component calls for each of its own
+ * translatable strings: `useCrispMessage(sortLabelProp, "Sort")`. Resolution
+ * order is explicit prop, then the provider's translation of the built-in
+ * English default, then that default itself — so a consumer with no
+ * provider (or a provider missing that one key) sees exactly what shipped
+ * before this existed.
+ */
+export type CrispMessages = Record<string, string>;
+export declare function CrispMessagesProvider({ messages, children, }: {
+    messages: CrispMessages;
+    children?: React.ReactNode;
+}): React.ReactElement;
+/**
+ * Resolves one translatable string for a component: `explicit` is whatever
+ * the caller passed for that prop (`undefined` when they didn't), and
+ * `englishDefault` is the literal that shipped as that prop's default value
+ * before crisp/#471 — still what renders with no provider in the tree.
+ *
+ * A plain function, not a second context read inside a loop or a render
+ * helper — components call this once per string, the same shape
+ * `useLabelAssociation`/`useFormReset` and this codebase's other small
+ * `core/` hooks already take.
+ */
+export declare function useCrispMessage(explicit: string | undefined, englishDefault: string): string;
+/**
+ * The same resolution as `useCrispMessage`, for a component that builds its
+ * own default text internally (TableToolbar's "Sorted by {field}", a
+ * DatePicker's month/weekday names) rather than taking one string prop per
+ * piece — every literal fragment of that built-in text still needs its own
+ * translation lookup, and a component with many such fragments (twelve
+ * month names, seven weekday names) would otherwise call `useCrispMessage`
+ * in a loop, which breaks the rules of hooks. `useCrispMessages` returns the
+ * raw dictionary once; call sites do their own `dict[english] ?? english`
+ * per fragment, same fallback order, no hook-in-a-loop.
+ */
+export declare function useCrispMessages(): CrispMessages;

package/dist/types/core/index.d.ts

@@ -7,6 +7,7 @@ export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
+export { type CrispMessages, CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n";
 export { type MentionAnchor, type MentionMatch, matchMentionTrigger, } from "./mention";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.52.6",
+  "version": "0.53.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",