@crisp-ui-kit/crisp 0.52.6 → 0.53.1

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

@@ -93,6 +93,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); }

package/dist/datatable.layered.css

@@ -94,6 +94,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); }

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,4 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
 import * as React from "react";
 import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
 /**
@@ -7,7 +6,11 @@ import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
 export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
-    const sep = separator ?? (_jsx(ChevronRight, { "data-rtl-flip": "", size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    // Live-measured (app.attio.com/<ws>/home, /companies,
+    // /company/<id>/overview): a plain rounded divider, not a chevron -- a
+    // symmetric shape needs no RTL mirroring, unlike the ChevronRight this
+    // used to default to.
+    const sep = separator ?? (_jsx("span", { className: "crisp-breadcrumb-sep-dot", "aria-hidden": "true" }));
     return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = (_jsxs(_Fragment, { children: [item.icon, item.label] }));

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

@@ -1,6 +1,8 @@
 import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
-// A breadcrumb trail — record-page nav ("Companies / Google").
+// A breadcrumb trail — record-page nav ("Companies · Google"), the segments
+// joined by a small rounded divider (crisp#498), not the literal "/" this
+// comment's own example used to imply.
 const config = defineRecipe({
     name: "breadcrumb",
     base: `display: flex; align-items: center; gap: ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.lg};
@@ -9,7 +11,8 @@ const config = defineRecipe({
     & a.crisp-breadcrumb-item:hover, & button.crisp-breadcrumb-item:hover { color: ${c.fgPrimary}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); }
     & button.crisp-breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .crisp-breadcrumb-item[aria-current] { color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
-    & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); }
+    & .crisp-breadcrumb-sep { flex-shrink: 0; display: inline-flex; }
+    & .crisp-breadcrumb-sep-dot { flex-shrink: 0; width: 3px; height: 10px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); }
     ${rtlFlipCss}
   `,
     variants: {},

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";
@@ -165,7 +165,7 @@ function formatCell(type, v, symbol, locale = "en-US") {
 // silently drop the cell's data. Each branch decides for itself where a
 // display string belongs -- as an entity's name, a status' label -- while the
 // raw value keeps driving structure and tone.
-function renderTyped(col, value, avatarTone, display, locale = "en-US") {
+function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
     // Attio's own empty cell is genuinely blank -- no placeholder character at
     // all, for any column type (#412).
     const empty = null;
@@ -177,7 +177,14 @@ function renderTyped(col, value, avatarTone, display, locale = "en-US") {
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return (_jsxs("span", { className: "crisp-datatable-entity", children: [_jsx("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "crisp-datatable-entity-name", children: e.name })] }));
+            return (_jsxs("span", { className: "crisp-datatable-entity", children: [_jsx("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.onEntityClick ? (_jsx("button", { type: "button", className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
+                            // the cell's own click already just selects (see the
+                            // TableCell onClick above) -- this must additionally stop
+                            // the row's onRowClick from firing, since this name points
+                            // at a DIFFERENT record than the row itself (#501).
+                            ev.stopPropagation();
+                            col.onEntityClick?.(row);
+                        }, children: e.name })) : (_jsx("span", { className: "crisp-datatable-entity-name", children: e.name }))] }));
         }
         case "tags": {
             // asking for a format on a tag column means "render it your way" -- show
@@ -294,9 +301,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 +435,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 +781,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 +811,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 +823,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 &&
@@ -876,7 +921,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     ? () => openEditing(row.id, col.key)
                                                     : undefined, children: [col.render
                                                         ? col.render(value, row)
-                                                        : renderTyped(col, value, avatarTone, col.format?.(value, row), locale), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

@@ -121,6 +121,8 @@ const config = defineRecipe({
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.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: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CalendarDays, X } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { DatePicker, } from "../datepicker/index.js";
 import { Popover } from "../popover/index.js";
 import { datepickerfieldRecipe } from "./datepickerfield.recipe.js";
@@ -21,7 +22,10 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, clearable = true, clearLabel = "Clear date", presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+    // crisp/#471: same resolution order as Select's own.
+    const placeholder = useCrispMessage(placeholderProp, "Set date…");
+    const clearLabel = useCrispMessage(clearLabelProp, "Clear date");
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);

package/dist/esm/components/dialog/dialog.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, useCrispMessage, withDescribedBy, } from "../../core/index.js";
 import { dialogRecipe } from "./dialog.recipe.js";
 // A globally unique id per mounted instance (see command.tsx for the rationale —
 // the machine defers its dismissal listeners a frame, so tree-relative useId
@@ -22,7 +22,8 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useDialogInstanceId();
     const service = useMachine(dialog.machine, {
         id,

package/dist/esm/components/drawer/drawer.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, useCrispMessage, withDescribedBy, } from "../../core/index.js";
 import { drawerRecipe } from "./drawer.recipe.js";
 let instanceCounter = 0;
 function useDrawerInstanceId() {
@@ -19,7 +19,8 @@ function useDrawerInstanceId() {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, className, "aria-describedby": describedBy, ...rest }) {
+export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useDrawerInstanceId();
     const service = useMachine(dialog.machine, {
         id,

package/dist/esm/components/multiselect/multiselect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useFormReset, } from "../../core/index.js";
+import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, useFormReset, } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -33,7 +33,11 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
+    // crisp/#471: same resolution order as Select's own.
+    const placeholder = useCrispMessage(placeholderProp, "Select…");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search…");
+    const emptyLabel = useCrispMessage(emptyLabelProp, "No results");
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.

package/dist/esm/components/quantitypicker/quantitypicker.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, useQuantityPickerContext, } from "@seed-design/react-quantity-picker";
 import { Minus, Plus, Trash2 } from "lucide-react";
 import * as React from "react";
-import { useLabelAssociation } from "../../core/index.js";
+import { useCrispMessage, useLabelAssociation } from "../../core/index.js";
 import { Spinner } from "../spinner/index.js";
 import { quantitypickerRecipe } from "./quantitypicker.recipe.js";
 /** seed's icon box per size, read from their stylesheet. */
@@ -55,7 +55,10 @@ function IncrementIcon({ size }) {
  * Slider documents. Here it also decides child ORDER, since the engine
  * reverses its visible children rather than relying on CSS.
  */
-export function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
+export function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel: decrementLabelProp, incrementLabel: incrementLabelProp, ...props }) {
+    // crisp/#471: same resolution order as Select's own.
+    const decrementLabel = useCrispMessage(decrementLabelProp, "Decrease quantity");
+    const incrementLabel = useCrispMessage(incrementLabelProp, "Increase quantity");
     // A `<label for>` cannot name a div, and this root is a role="group" (#247).
     const rootRef = React.useRef(null);
     useLabelAssociation(rootRef);

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useFormReset, } from "../../core/index.js";
+import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, useFormReset, } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -16,7 +16,13 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", onSearchChange, emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder: placeholderProp, variant = "default", width = "full", searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const placeholder = useCrispMessage(placeholderProp, "Select…");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search…");
+    const emptyLabel = useCrispMessage(emptyLabelProp, "No results");
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the

package/dist/esm/components/statcard/statcard.js

@@ -5,8 +5,9 @@ import { statcardRecipe } from "./statcard.recipe.js";
  * 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 function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {
+export function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, captionTone, card, className, ...rest }) {
     const trend = delta == null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
-    return (_jsxs("div", { className: statcardRecipe({ card, className }), ...rest, children: [_jsxs("span", { className: "crisp-statcard-label", children: [icon, label] }), _jsx("span", { className: "crisp-statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "crisp-statcard-foot", children: [trend != null && (_jsxs("span", { className: "crisp-statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
+    return (_jsxs("div", { className: statcardRecipe({ card, className }), ...rest, children: [_jsxs("span", { className: "crisp-statcard-label", children: [icon, label] }), _jsx("span", { className: "crisp-statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "crisp-statcard-foot", children: [trend != null && (_jsxs("span", { className: "crisp-statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption != null &&
+                        (captionTone ? (_jsx("span", { className: "crisp-statcard-caption", "data-tone": captionTone, children: caption })) : (caption))] }))] }));
 }
 StatCard.displayName = "StatCard";

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

@@ -11,6 +11,16 @@ const config = defineRecipe({
     & .crisp-statcard-label svg { color: ${c.fgMuted}; }
     & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; }
     & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    /* 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: ${c.fgSuccessSoft}; }
+    & .crisp-statcard-caption[data-tone="warning"] { color: ${c.fgWarningSoft}; }
+    & .crisp-statcard-caption[data-tone="critical"] { color: ${c.fgDangerSoft}; }
     & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; }
     & .crisp-statcard-delta svg { flex-shrink: 0; }
     & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 80%, ${c.fgPrimary}); }