@crisp-ui-kit/crisp 0.20.1 → 0.21.0

package/dist/cjs/product/onboarding/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onboardingRecipe = exports.OnboardingChecklist = void 0;
+exports.onboardingRecipe = exports.onboardingLabels = exports.OnboardingChecklist = void 0;
 var onboarding_1 = require("./onboarding");
 Object.defineProperty(exports, "OnboardingChecklist", { enumerable: true, get: function () { return onboarding_1.OnboardingChecklist; } });
+Object.defineProperty(exports, "onboardingLabels", { enumerable: true, get: function () { return onboarding_1.onboardingLabels; } });
 var onboarding_recipe_1 = require("./onboarding.recipe");
 Object.defineProperty(exports, "onboardingRecipe", { enumerable: true, get: function () { return onboarding_recipe_1.onboardingRecipe; } });

package/dist/cjs/product/onboarding/onboarding.js

@@ -1,17 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.onboardingLabels = void 0;
 exports.OnboardingChecklist = OnboardingChecklist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const onboarding_recipe_1 = require("./onboarding.recipe");
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+exports.onboardingLabels = {
+    progressText: (done, total) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("b", { children: [done, "/", total] }), " ", "steps completed"] })),
+    completedStepLabel: (label) => `${String(label)} — completed`,
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = exports.onboardingLabels.progressText, completedStepLabel = exports.onboardingLabels.completedStepLabel, }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "onboarding-sub", children: [(0, jsx_runtime_1.jsxs)("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "onboarding-sub", children: [progressText(done, total), encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

package/dist/cjs/product/recordpage/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.RecordPage = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = void 0;
 var recordpage_1 = require("./recordpage");
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
+Object.defineProperty(exports, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");
 Object.defineProperty(exports, "recordpageRecipe", { enumerable: true, get: function () { return recordpage_recipe_1.recordpageRecipe; } });

package/dist/cjs/product/recordpage/recordpage.js

@@ -119,6 +119,8 @@ exports.recordPageLabels = {
     },
     domainSetTo: (value) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Domain set to ", (0, jsx_runtime_1.jsx)("b", { children: value })] })),
     taggedCategories: (count) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Tagged ", (0, jsx_runtime_1.jsx)("b", { children: count }), " categories"] })),
+    recordCreated: (name) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
+    noEmailsWith: (name) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
@@ -367,13 +369,13 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             : null,
         {
             id: "created",
-            text: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
+            text: t.recordCreated(name),
             time: "1 day ago",
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed", children: shownActivity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
-    const emailsEmpty = ((0, jsx_runtime_1.jsxs)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
+    const emailsEmpty = ((0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":

package/dist/cjs/product/recordstable/recordstable.js

@@ -52,6 +52,7 @@ const menu_1 = require("../../components/menu");
 const multiselect_1 = require("../../components/multiselect");
 const select_1 = require("../../components/select");
 const switch_1 = require("../../components/switch");
+const core_1 = require("../../core");
 const company_logos_1 = require("./company-logos");
 const recordstable_recipe_1 = require("./recordstable.recipe");
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -897,7 +898,11 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         setOpenMenu(null);
     };
     // column resize via pointer drag on the header edge
-    const resizeCol = (key, startX, startW) => {
+    const resizeCol = (key, startX, startW, grip) => {
+        // A table's columns reverse under RTL — measured — so the grip sits on the
+        // column's leading edge there and a rightward pull must SHRINK it. The
+        // anchor is `inset-inline-end`; this is the other half (#214).
+        const dir = (0, core_1.isRtlElement)(grip) ? -1 : 1;
         // guard the whole document during the drag: kill text selection and force a
         // resize cursor so the gesture doesn't select cells or flicker (was buggy)
         const prevSelect = document.body.style.userSelect;
@@ -905,7 +910,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         const onMove = (e) => {
-            const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
+            const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
             setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
         };
         const onUp = () => {
@@ -995,7 +1000,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
-                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
+                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
                                         }), (0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: visibleRows.map((row) => ((0, jsx_runtime_1.jsxs)("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -46,8 +46,8 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/esm/product/onboarding/index.js

@@ -1,2 +1,2 @@
-export { OnboardingChecklist, } from "./onboarding.js";
+export { OnboardingChecklist, onboardingLabels, } from "./onboarding.js";
 export { onboardingRecipe } from "./onboarding.recipe.js";

package/dist/esm/product/onboarding/onboarding.js

@@ -1,14 +1,23 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, MoreHorizontal } from "lucide-react";
 import { onboardingRecipe } from "./onboarding.recipe.js";
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+export const onboardingLabels = {
+    progressText: (done, total) => (_jsxs(_Fragment, { children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed"] })),
+    completedStepLabel: (label) => `${String(label)} — completed`,
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = onboardingLabels.progressText, completedStepLabel = onboardingLabels.completedStepLabel, }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

package/dist/esm/product/recordpage/index.js

@@ -1,2 +1,2 @@
-export { RecordPage } from "./recordpage.js";
+export { RecordPage, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";

package/dist/esm/product/recordpage/recordpage.js

@@ -82,6 +82,8 @@ export const recordPageLabels = {
     },
     domainSetTo: (value) => (_jsxs(_Fragment, { children: ["Domain set to ", _jsx("b", { children: value })] })),
     taggedCategories: (count) => (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: count }), " categories"] })),
+    recordCreated: (name) => (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
+    noEmailsWith: (name) => _jsxs(_Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
@@ -330,13 +332,13 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             : null,
         {
             id: "created",
-            text: (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
+            text: t.recordCreated(name),
             time: "1 day ago",
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "recordpage-feed-item", children: [_jsx("span", { className: "recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "recordpage-feed-body", children: [a.text, _jsx("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
-    const emailsEmpty = (_jsxs(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
+    const emailsEmpty = (_jsx(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":

package/dist/esm/product/recordstable/recordstable.js

@@ -14,6 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
+import { isRtlElement } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -859,7 +860,11 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         setOpenMenu(null);
     };
     // column resize via pointer drag on the header edge
-    const resizeCol = (key, startX, startW) => {
+    const resizeCol = (key, startX, startW, grip) => {
+        // A table's columns reverse under RTL — measured — so the grip sits on the
+        // column's leading edge there and a rightward pull must SHRINK it. The
+        // anchor is `inset-inline-end`; this is the other half (#214).
+        const dir = isRtlElement(grip) ? -1 : 1;
         // guard the whole document during the drag: kill text selection and force a
         // resize cursor so the gesture doesn't select cells or flicker (was buggy)
         const prevSelect = document.body.style.userSelect;
@@ -867,7 +872,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         const onMove = (e) => {
-            const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
+            const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
             setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
         };
         const onUp = () => {
@@ -957,7 +962,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
-                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
+                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
                                         }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();

package/dist/esm/product/recordstable/recordstable.recipe.js

@@ -43,8 +43,8 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/recordstable.css

@@ -91,8 +91,8 @@
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/styles.css

@@ -2483,8 +2483,8 @@
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/types/product/onboarding/index.d.ts

@@ -1,2 +1,2 @@
-export { OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, } from "./onboarding";
+export { OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, onboardingLabels, } from "./onboarding";
 export { onboardingRecipe } from "./onboarding.recipe";

package/dist/types/product/onboarding/onboarding.d.ts

@@ -14,6 +14,18 @@ export type OnboardingChecklistProps = {
     minimizeLabel?: string;
     /** Accessible name for the progress bar. */
     progressLabel?: string;
+    /**
+     * The "N/total steps completed" line. A formatter, not a string: the count
+     * moves within the sentence between languages, so a template with holes
+     * cannot be translated (#216).
+     */
+    progressText?: (done: number, total: number) => React.ReactNode;
+    /**
+     * Accessible name for a completed step. Without one, a done step announces
+     * as "…, button, dimmed" and the strikethrough and check glyph — its only
+     * other signals — are invisible to a screen reader.
+     */
+    completedStepLabel?: (label: React.ReactNode) => string;
     title?: React.ReactNode;
     steps: OnboardingStep[];
     /** Subtitle after "N/total steps completed" (default "Keep it up!"). */
@@ -26,12 +38,21 @@ export type OnboardingChecklistProps = {
     onMinimize?: () => void;
     className?: string;
 };
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+export declare const onboardingLabels: {
+    progressText: (done: number, total: number) => React.ReactNode;
+    completedStepLabel: (label: React.ReactNode) => string;
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, }: OnboardingChecklistProps): React.JSX.Element;
+export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, progressText, completedStepLabel, }: OnboardingChecklistProps): React.JSX.Element;
 export declare namespace OnboardingChecklist {
     var displayName: string;
 }

package/dist/types/product/recordpage/index.d.ts

@@ -1,2 +1,2 @@
-export { RecordPage, type RecordPageProps } from "./recordpage";
+export { RecordPage, type RecordPageLabels, type RecordPageLabelsInput, type RecordPageProps, recordPageLabels, } from "./recordpage";
 export { recordpageRecipe } from "./recordpage.recipe";

package/dist/types/product/recordpage/recordpage.d.ts

@@ -77,6 +77,10 @@ export type RecordPageLabels = {
     domainSetTo: (value: React.ReactNode) => React.ReactNode;
     /** Activity line for added categories, given how many. */
     taggedCategories: (count: number) => React.ReactNode;
+    /** Activity line for the record's creation, given its name. */
+    recordCreated: (name: React.ReactNode) => React.ReactNode;
+    /** Empty state on the Emails tab, given the record's name. */
+    noEmailsWith: (name: React.ReactNode) => React.ReactNode;
 };
 export declare const recordPageLabels: RecordPageLabels;
 /** Partial override of any chrome string; the keyed maps nest. */

package/package.json

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