@crisp-ui-kit/crisp 0.53.0 → 0.53.2

package/dist/breadcrumb.css

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

package/dist/breadcrumb.layered.css

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

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = Breadcrumb;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
 /**
@@ -43,7 +42,11 @@ const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
 function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
-    const sep = separator ?? ((0, jsx_runtime_1.jsx)(lucide_react_1.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 ?? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep-dot", "aria-hidden": "true" }));
     return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.breadcrumbRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// 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 = (0, core_1.defineRecipe)({
     name: "breadcrumb",
     base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg};
@@ -12,7 +14,8 @@ const config = (0, core_1.defineRecipe)({
     & a.crisp-breadcrumb-item:hover, & button.crisp-breadcrumb-item:hover { color: ${tokens_1.contract.fgPrimary}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
     & button.crisp-breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .crisp-breadcrumb-item[aria-current] { color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }
     ${core_1.rtlFlipCss}
   `,
     variants: {},

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

@@ -201,7 +201,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;
@@ -213,7 +213,14 @@ function renderTyped(col, value, avatarTone, display, locale = "en-US") {
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-name", children: e.name })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.onEntityClick ? ((0, jsx_runtime_1.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 })) : ((0, jsx_runtime_1.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
@@ -950,7 +957,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     ? () => openEditing(row.id, col.key)
                                                     : undefined, children: [col.render
                                                         ? col.render(value, row)
-                                                        : renderTyped(col, value, avatarTone, col.format?.(value, row), locale), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

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

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -37,6 +37,7 @@ exports.DatePickerField = DatePickerField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const datepicker_1 = require("../datepicker");
 const popover_1 = require("../popover");
 const datepickerfield_recipe_1 = require("./datepickerfield.recipe");
@@ -57,7 +58,10 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-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 }) {
+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 = (0, core_1.useCrispMessage)(placeholderProp, "Set date…");
+    const clearLabel = (0, core_1.useCrispMessage)(clearLabelProp, "Clear date");
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);

package/dist/cjs/components/dialog/dialog.js

@@ -60,7 +60,8 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useDialogInstanceId();
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,

package/dist/cjs/components/drawer/drawer.js

@@ -57,7 +57,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`.
  */
-function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, className, "aria-describedby": describedBy, ...rest }) {
+function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useDrawerInstanceId();
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,

package/dist/cjs/components/multiselect/multiselect.js

@@ -69,7 +69,11 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, n
 // 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 = (0, core_1.useCrispMessage)(placeholderProp, "Select…");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search…");
+    const emptyLabel = (0, core_1.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/cjs/components/quantitypicker/quantitypicker.js

@@ -91,7 +91,10 @@ function IncrementIcon({ size }) {
  * Slider documents. Here it also decides child ORDER, since the engine
  * reverses its visible children rather than relying on CSS.
  */
-function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
+function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel: decrementLabelProp, incrementLabel: incrementLabelProp, ...props }) {
+    // crisp/#471: same resolution order as Select's own.
+    const decrementLabel = (0, core_1.useCrispMessage)(decrementLabelProp, "Decrease quantity");
+    const incrementLabel = (0, core_1.useCrispMessage)(incrementLabelProp, "Increase quantity");
     // A `<label for>` cannot name a div, and this root is a role="group" (#247).
     const rootRef = React.useRef(null);
     (0, core_1.useLabelAssociation)(rootRef);

package/dist/cjs/components/select/select.js

@@ -52,7 +52,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.
  */
-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 }) {
+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 = (0, core_1.useCrispMessage)(placeholderProp, "Select…");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search…");
+    const emptyLabel = (0, core_1.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/cjs/components/statcard/statcard.js

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

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

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

package/dist/cjs/components/toast/toast.js

@@ -59,7 +59,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).
  */
-function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", regionLabel = "Notifications", }) {
+function ToastProvider({ children, duration = 4000, dismissLabel: dismissLabelProp, regionLabel: regionLabelProp, }) {
+    const dismissLabel = (0, core_1.useCrispMessage)(dismissLabelProp, "Dismiss");
+    const regionLabel = (0, core_1.useCrispMessage)(regionLabelProp, "Notifications");
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const timers = React.useRef(new Map());

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/datatable/datatable.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
@@ -914,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}); }

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/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); }
 }
 
@@ -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); }
 }
 
@@ -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/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;

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/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/package.json

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