@crisp-ui-kit/crisp 0.52.6 → 0.53.1

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/components/toast/toast.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import * as React from "react";
-import { useFocusAfterRemoval } from "../../core/index.js";
+import { useCrispMessage, useFocusAfterRemoval } from "../../core/index.js";
 import { toastRecipe } from "./toast.recipe.js";
 const ToastContext = React.createContext(null);
 const ICONS = {
@@ -22,7 +22,9 @@ function ToastCard({ item, onClose, dismissLabel, }) {
  * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
  * after `duration` (default 4s; 0 keeps them until dismissed).
  */
-export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", regionLabel = "Notifications", }) {
+export function ToastProvider({ children, duration = 4000, dismissLabel: dismissLabelProp, regionLabel: regionLabelProp, }) {
+    const dismissLabel = useCrispMessage(dismissLabelProp, "Dismiss");
+    const regionLabel = useCrispMessage(regionLabelProp, "Notifications");
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const timers = React.useRef(new Map());

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/statcard.css

@@ -4,6 +4,14 @@
     & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
     & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
     & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* caption's own status colour, opt-in via data-tone: not a new measured
+       value — the same fg*Soft tokens Badge's tone already uses (and Badge's
+       own doc comment records why: a dedicated soft-text token, not the
+       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       reads as. */
+    & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
+    & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }
+    & .crisp-statcard-caption[data-tone="critical"] { color: var(--crisp-fg-danger-soft); }
     & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
     & .crisp-statcard-delta svg { flex-shrink: 0; }
     & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }

package/dist/statcard.layered.css

@@ -5,6 +5,14 @@
     & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
     & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
     & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* caption's own status colour, opt-in via data-tone: not a new measured
+       value — the same fg*Soft tokens Badge's tone already uses (and Badge's
+       own doc comment records why: a dedicated soft-text token, not the
+       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       reads as. */
+    & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
+    & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }
+    & .crisp-statcard-caption[data-tone="critical"] { color: var(--crisp-fg-danger-soft); }
     & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
     & .crisp-statcard-delta svg { flex-shrink: 0; }
     & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }

package/dist/styles.css

@@ -286,7 +286,8 @@
     & a.crisp-breadcrumb-item:hover, & button.crisp-breadcrumb-item:hover { color: var(--crisp-fg-primary); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
     & button.crisp-breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .crisp-breadcrumb-item[aria-current] { color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
-    & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
+    & .crisp-breadcrumb-sep { flex-shrink: 0; display: inline-flex; }
+    & .crisp-breadcrumb-sep-dot { flex-shrink: 0; width: 3px; height: 10px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
@@ -320,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); }
 }
@@ -329,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); }
 }
@@ -638,6 +639,8 @@
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
+    & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
     & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
@@ -1541,6 +1544,14 @@
     & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
     & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
     & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* caption's own status colour, opt-in via data-tone: not a new measured
+       value — the same fg*Soft tokens Badge's tone already uses (and Badge's
+       own doc comment records why: a dedicated soft-text token, not the
+       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       reads as. */
+    & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
+    & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }
+    & .crisp-statcard-caption[data-tone="critical"] { color: var(--crisp-fg-danger-soft); }
     & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
     & .crisp-statcard-delta svg { flex-shrink: 0; }
     & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }

package/dist/styles.layered.css

@@ -287,7 +287,8 @@
     & a.crisp-breadcrumb-item:hover, & button.crisp-breadcrumb-item:hover { color: var(--crisp-fg-primary); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
     & button.crisp-breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .crisp-breadcrumb-item[aria-current] { color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
-    & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
+    & .crisp-breadcrumb-sep { flex-shrink: 0; display: inline-flex; }
+    & .crisp-breadcrumb-sep-dot { flex-shrink: 0; width: 3px; height: 10px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 28%, transparent); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
@@ -321,7 +322,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 +331,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); }
 }
@@ -639,6 +640,8 @@
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
+    & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
     & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
@@ -1542,6 +1545,14 @@
     & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
     & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
     & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* caption's own status colour, opt-in via data-tone: not a new measured
+       value — the same fg*Soft tokens Badge's tone already uses (and Badge's
+       own doc comment records why: a dedicated soft-text token, not the
+       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       reads as. */
+    & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
+    & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }
+    & .crisp-statcard-caption[data-tone="critical"] { color: var(--crisp-fg-danger-soft); }
     & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
     & .crisp-statcard-delta svg { flex-shrink: 0; }
     & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 80%, var(--crisp-fg-primary)); }

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

@@ -7,7 +7,7 @@ export type BreadcrumbItem = {
 };
 export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
     items: BreadcrumbItem[];
-    /** Separator between items (default a chevron). */
+    /** Separator between items (default a small rounded divider — see below). */
     separator?: React.ReactNode;
     "aria-label"?: string;
     className?: string;

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

@@ -100,6 +100,16 @@ export type DataTableColumn<T> = {
     managed?: boolean;
     /** Hidden from the grid but still listed in the column manager. */
     hidden?: boolean;
+    /** `type: "entity"` only (#501) — makes the cell's name its own click
+     * target, separate from the row's own `onRowClick`: the name renders as a
+     * `stopPropagation`-guarded button instead of a plain span, the same
+     * `crisp-datatable-entity-name--link` pattern RecordsTable's own
+     * `EntityCell.onOpenPage` already uses (`crisp-recordstable-entity-name
+     * --link`). For a cell whose entity points at a DIFFERENT record than the
+     * row itself (a reference/owner/approver column), not for navigating the
+     * row's own record — that's what `onRowClick` is for. Ignored on any
+     * other `type`. */
+    onEntityClick?: (row: T) => void;
 };
 export type SortState = {
     key: string;
@@ -144,6 +154,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 +254,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/datepickerfield/datepickerfield.d.ts

@@ -51,7 +51,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, clearable, clearLabel, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant, format, clearable, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

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

@@ -29,7 +29,7 @@ export type DialogProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" |
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel, children, className, style, "aria-describedby": describedBy, ...rest }: DialogProps): React.JSX.Element | null;
+export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }: DialogProps): React.JSX.Element | null;
 export declare namespace Dialog {
     var displayName: string;
 }

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

@@ -20,7 +20,7 @@ export type DrawerProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" |
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, closeLabel, children, className, "aria-describedby": describedBy, ...rest }: DrawerProps): React.JSX.Element | null;
+export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }: DrawerProps): React.JSX.Element | null;
 export declare namespace Drawer {
     var displayName: string;
 }

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

@@ -56,7 +56,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder: placeholderProp, searchable, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -37,7 +37,7 @@ export type QuantityPickerProps = QuantityPickerRootProps & {
  * Slider documents. Here it also decides child ORDER, since the engine
  * reverses its visible children rather than relying on CSS.
  */
-export declare function QuantityPicker({ size, fill, className, name, decrementLabel, incrementLabel, ...props }: QuantityPickerProps): React.JSX.Element;
+export declare function QuantityPicker({ size, fill, className, name, decrementLabel: decrementLabelProp, incrementLabel: incrementLabelProp, ...props }: QuantityPickerProps): React.JSX.Element;
 export declare namespace QuantityPicker {
     var displayName: string;
 }

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

@@ -69,7 +69,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, onSearchChange, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder: placeholderProp, variant, width, searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -12,6 +12,10 @@ export type StatCardProps = React.ComponentPropsWithoutRef<"div"> & {
     deltaSuffix?: string;
     /** Caption after the delta (e.g. "vs last month"). */
     caption?: React.ReactNode;
+    /** Status colour for `caption` (e.g. "3 without a granter" in red) —
+     * independent of `delta`'s own up/down colouring, for a caption that
+     * reads a state rather than a trend. Unset keeps the caption muted. */
+    captionTone?: "ok" | "warning" | "critical";
     /** Opt-in bordered card chrome (padding + border + radius), for use
      * standalone instead of hand-wrapping in `<Card><CardBody>`. Default
      * `false` — StatCard renders bare, as measured (pair with `Card` yourself
@@ -23,7 +27,7 @@ export type StatCardProps = React.ComponentPropsWithoutRef<"div"> & {
  * A single-metric KPI tile — measured from a reports number/insight card.
  * Label, a large value, and an optional up/down delta pill with a caption.
  */
-export declare function StatCard({ label, icon, value, delta, deltaSuffix, caption, card, className, ...rest }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, icon, value, delta, deltaSuffix, caption, captionTone, card, className, ...rest }: StatCardProps): React.JSX.Element;
 export declare namespace StatCard {
     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/components/toast/toast.d.ts

@@ -20,7 +20,7 @@ type ToastApi = {
  * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
  * after `duration` (default 4s; 0 keeps them until dismissed).
  */
-export declare function ToastProvider({ children, duration, dismissLabel, regionLabel, }: {
+export declare function ToastProvider({ children, duration, dismissLabel: dismissLabelProp, regionLabel: regionLabelProp, }: {
     children: React.ReactNode;
     duration?: number;
     /** aria-label on each toast's dismiss button (default "Dismiss"). */

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.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",