@crisp-ui-kit/crisp 0.33.1 → 0.33.3

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

@@ -46,12 +46,15 @@ const datatable_recipe_1 = require("./datatable.recipe");
  * a display string. Returns "" when it cannot be parsed, so the field opens
  * empty rather than showing an invalid value. */
 function toDateInputValue(v) {
+    // formatCellDate, not toISOString().slice(0, 10): the latter takes the UTC
+    // day of a local Date, so a value picked late in the evening east of UTC
+    // round-trips as the next day (#221).
     if (v instanceof Date && !Number.isNaN(v.getTime()))
-        return v.toISOString().slice(0, 10);
+        return (0, core_1.formatCellDate)(v);
     if (typeof v === "string" || typeof v === "number") {
-        const d = new Date(v);
-        if (!Number.isNaN(d.getTime()))
-            return d.toISOString().slice(0, 10);
+        const d = (0, core_1.parseCellDate)(String(v));
+        if (d)
+            return (0, core_1.formatCellDate)(d);
     }
     return "";
 }
@@ -89,21 +92,34 @@ function initials(name) {
     const p = name.trim().split(/\s+/);
     return ((p[0]?.[0] ?? "") + (p[1]?.[0] ?? "")).toUpperCase() || "?";
 }
-const DATE_FMT = new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-});
-function formatCell(type, v, symbol) {
+// One Intl.DateTimeFormat per locale, built lazily and reused — constructing
+// a formatter per cell render would be wasteful on a large grid.
+const DATE_FMT_CACHE = new Map();
+function dateFmt(locale) {
+    let fmt = DATE_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        });
+        DATE_FMT_CACHE.set(locale, fmt);
+    }
+    return fmt;
+}
+function formatCell(type, v, symbol, locale = "en-US") {
     if (type === "number")
-        return typeof v === "number" ? v.toLocaleString("en-US") : asText(v);
+        return typeof v === "number" ? v.toLocaleString(locale) : asText(v);
     if (type === "currency")
         return typeof v === "number"
-            ? `${symbol ?? "$"}${v.toLocaleString("en-US")}`
+            ? `${symbol ?? "$"}${v.toLocaleString(locale)}`
             : asText(v);
     if (type === "date") {
-        const d = v ? new Date(v) : null;
-        return d && !Number.isNaN(d.getTime()) ? DATE_FMT.format(d) : asText(v);
+        // parseCellDate, not `new Date(v)`: a date-only value is UTC midnight per
+        // ECMA-262, and formatting that in the reader's timezone renders it a day
+        // early west of UTC (#221, the same defect #220 fixed in RecordsTable).
+        const d = v ? (0, core_1.parseCellDate)(String(v)) : null;
+        return d ? dateFmt(locale).format(d) : asText(v);
     }
     return asText(v);
 }
@@ -115,7 +131,7 @@ function formatCell(type, v, symbol) {
 // 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) {
+function renderTyped(col, value, avatarTone, display, locale = "en-US") {
     const empty = (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
@@ -146,7 +162,7 @@ function renderTyped(col, value, avatarTone, display) {
             return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = display || formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -155,9 +171,16 @@ function renderTyped(col, value, avatarTone, display) {
     }
 }
 const CHECK_W = 40;
-function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
+function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
     : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
+    // Two different defaults on purpose. FORMATTING falls back to "en-US", which
+    // is what the built-in date/number/currency renderers have always produced,
+    // so no existing output moves. SORTING falls back to `undefined`, which is
+    // the runtime's own collation — passing "en-US" there would silently change
+    // the row order for every consumer on a non-en-US runtime, which is exactly
+    // the kind of change this prop is supposed to be additive about.
+    const locale = localeProp ?? "en-US";
     const [query, setQuery] = React.useState("");
     const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
     // Column list the table actually renders. Seeded from `columns`; the header
@@ -234,6 +257,18 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         if (!selectedIds)
             setInternalSel(next);
     }, [onSelectionChange, selectedIds]);
+    // The selection is announced from a region that is part of the table and
+    // outlives every selection, because a consumer's own bulk bar (mounted only
+    // once something is picked) cannot announce its own arrival (#234).
+    // Derived by adjusting state during render rather than in an effect: it
+    // must not fire on mount — nobody has selected anything yet — and it has to
+    // cover a `selectedIds` change the consumer makes as well as a click here.
+    const prevSelectedCount = React.useRef(selected.size);
+    const [selectionText, setSelectionText] = React.useState("");
+    if (prevSelectedCount.current !== selected.size) {
+        prevSelectedCount.current = selected.size;
+        setSelectionText(selectionAnnouncement(selected.size));
+    }
     const [editing, setEditing] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
     // column widths (drag-to-resize) + fixed-layout sizing
@@ -269,13 +304,19 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                 const bv = cellValue(col, b);
                 const cmp = typeof av === "number" && typeof bv === "number"
                     ? av - bv
-                    : asText(av).localeCompare(asText(bv));
+                    : // `localeProp`, NOT `locale`: the ?? "en-US" fallback belongs to
+                        // formatting only. Passing it here would pin collation to en-US
+                        // for every consumer on a non-en-US runtime and silently reorder
+                        // their rows. No test can catch that substitution on a machine
+                        // whose own default is en-US -- one was written, it could not
+                        // fail, and it was removed -- so this comment is the guard.
+                        asText(av).localeCompare(asText(bv), localeProp);
                 if (cmp !== 0)
                     return cmp * dir;
             }
             return 0;
         });
-    }, [filtered, sorts, colByKey]);
+    }, [filtered, sorts, colByKey, localeProp]);
     /**
      * Rows bucketed under a heading, preserving first-seen group order (a
      * grouped view without reordering within a group). One bucket with a null
@@ -352,7 +393,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             const row = rows.find((rw) => rw.id === selCell.id);
             const col = columns.find((cc) => cc.key === selCell.key);
             if (row && col)
-                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol));
+                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol, locale));
             e.preventDefault();
             return;
         }
@@ -464,7 +505,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                 }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
@@ -556,7 +597,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row), locale) }, 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), ...stickyCol(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

@@ -18,6 +18,11 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 /* The header cell has no padding of its own -- the button owns the
+    /* announced, never drawn */
+    & .crisp-datatable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
     & th { padding: 0; }

package/dist/cjs/core/cell-date.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * Date-only cell values, parsed and formatted so the calendar day survives the
+ * reader's timezone.
+ *
+ * `new Date("1998-09-04")` is **UTC midnight** — ECMA-262 gives the date-only
+ * ISO forms a UTC interpretation — so formatting it in the reader's timezone
+ * renders it a day early for everyone west of UTC. A cell value like that
+ * names a *day*, and a day does not move when the reader does.
+ *
+ * Shared by both tables on purpose. RecordsTable was fixed in #220 and
+ * DataTable was not, and it took #221 to notice — the fourth time a defect has
+ * been fixed in one of the pair and left in the other. One implementation is
+ * the only version of this that stays fixed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCellDate = parseCellDate;
+exports.formatCellDate = formatCellDate;
+/** `YYYY`, `YYYY-MM`, `YYYY-MM-DD` — the forms ECMA-262 reads as UTC. */
+const DATE_ONLY = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/;
+function parseCellDate(raw) {
+    if (!raw)
+        return null;
+    const m = DATE_ONLY.exec(raw);
+    // the local-midnight constructor, so the calendar day survives the render.
+    // A string that carries a time is left alone: it names an instant, and an
+    // instant genuinely does move with the reader.
+    const d = m
+        ? new Date(Number(m[1]), Number(m[2] ?? "1") - 1, Number(m[3] ?? "1"))
+        : new Date(raw);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+/** The inverse: the picked date's own calendar day, not the UTC one. */
+function formatCellDate(d) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
+var cell_date_1 = require("./cell-date");
+Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return cell_date_1.formatCellDate; } });
+Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return cell_date_1.parseCellDate; } });
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");

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

@@ -33,10 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultRows = exports.defaultColumns = exports.recordsTableLabels = void 0;
+exports.defaultRows = exports.defaultColumns = exports.parseCellDate = exports.formatCellDate = exports.recordsTableLabels = void 0;
 exports.tagTone = tagTone;
-exports.parseCellDate = parseCellDate;
-exports.formatCellDate = formatCellDate;
 exports.RecordsTable = RecordsTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
@@ -336,26 +334,19 @@ function TagsCell({ column, row, options, onChange, labels, }) {
  * A string that carries a time is left alone: that one really is an instant,
  * and shifting it would move the moment it names.
  */
-const DATE_ONLY = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/;
-function parseCellDate(raw) {
-    if (!raw)
-        return null;
-    const m = DATE_ONLY.exec(raw);
-    // the local-midnight constructor, so the calendar day survives the render
-    const d = m
-        ? new Date(Number(m[1]), Number(m[2] ?? "1") - 1, Number(m[3] ?? "1"))
-        : new Date(raw);
-    return Number.isNaN(d.getTime()) ? null : d;
-}
-/** The inverse: the picked date's own calendar day, not the UTC one. */
-function formatCellDate(d) {
-    const pad = (n) => String(n).padStart(2, "0");
-    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
+// parseCellDate/formatCellDate moved to core/cell-date.ts so DataTable shares
+// one implementation rather than a second copy -- #221 was this defect fixed
+// here (#220) and left in DataTable. Re-exported because they were already
+// reachable from this module's public surface.
+// imported for use here AND re-exported, because a bare `export ... from` does
+// not bind the names locally
+const core_2 = require("../../core");
+Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return core_2.formatCellDate; } });
+Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return core_2.parseCellDate; } });
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
-    const value = parseCellDate(raw);
-    return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
+    const value = (0, core_2.parseCellDate)(raw);
+    return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange((0, core_2.formatCellDate)(d)) }));
 }
 /**
  * The "New <object>" create modal — measured from a create-record dialog:

package/dist/datatable.css

@@ -7,7 +7,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

package/dist/datatable.layered.css

@@ -8,7 +8,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
 import * as React from "react";
-import { isRtlElement } from "../../core/index.js";
+import { formatCellDate, isRtlElement, parseCellDate } from "../../core/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
@@ -10,12 +10,15 @@ import { datatableRecipe } from "./datatable.recipe.js";
  * a display string. Returns "" when it cannot be parsed, so the field opens
  * empty rather than showing an invalid value. */
 function toDateInputValue(v) {
+    // formatCellDate, not toISOString().slice(0, 10): the latter takes the UTC
+    // day of a local Date, so a value picked late in the evening east of UTC
+    // round-trips as the next day (#221).
     if (v instanceof Date && !Number.isNaN(v.getTime()))
-        return v.toISOString().slice(0, 10);
+        return formatCellDate(v);
     if (typeof v === "string" || typeof v === "number") {
-        const d = new Date(v);
-        if (!Number.isNaN(d.getTime()))
-            return d.toISOString().slice(0, 10);
+        const d = parseCellDate(String(v));
+        if (d)
+            return formatCellDate(d);
     }
     return "";
 }
@@ -53,21 +56,34 @@ function initials(name) {
     const p = name.trim().split(/\s+/);
     return ((p[0]?.[0] ?? "") + (p[1]?.[0] ?? "")).toUpperCase() || "?";
 }
-const DATE_FMT = new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-});
-function formatCell(type, v, symbol) {
+// One Intl.DateTimeFormat per locale, built lazily and reused — constructing
+// a formatter per cell render would be wasteful on a large grid.
+const DATE_FMT_CACHE = new Map();
+function dateFmt(locale) {
+    let fmt = DATE_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        });
+        DATE_FMT_CACHE.set(locale, fmt);
+    }
+    return fmt;
+}
+function formatCell(type, v, symbol, locale = "en-US") {
     if (type === "number")
-        return typeof v === "number" ? v.toLocaleString("en-US") : asText(v);
+        return typeof v === "number" ? v.toLocaleString(locale) : asText(v);
     if (type === "currency")
         return typeof v === "number"
-            ? `${symbol ?? "$"}${v.toLocaleString("en-US")}`
+            ? `${symbol ?? "$"}${v.toLocaleString(locale)}`
             : asText(v);
     if (type === "date") {
-        const d = v ? new Date(v) : null;
-        return d && !Number.isNaN(d.getTime()) ? DATE_FMT.format(d) : asText(v);
+        // parseCellDate, not `new Date(v)`: a date-only value is UTC midnight per
+        // ECMA-262, and formatting that in the reader's timezone renders it a day
+        // early west of UTC (#221, the same defect #220 fixed in RecordsTable).
+        const d = v ? parseCellDate(String(v)) : null;
+        return d ? dateFmt(locale).format(d) : asText(v);
     }
     return asText(v);
 }
@@ -79,7 +95,7 @@ function formatCell(type, v, symbol) {
 // 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) {
+function renderTyped(col, value, avatarTone, display, locale = "en-US") {
     const empty = _jsx("span", { className: "crisp-datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
@@ -110,7 +126,7 @@ function renderTyped(col, value, avatarTone, display) {
             return (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = display || formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -119,9 +135,16 @@ function renderTyped(col, value, avatarTone, display) {
     }
 }
 const CHECK_W = 40;
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
     : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
+    // Two different defaults on purpose. FORMATTING falls back to "en-US", which
+    // is what the built-in date/number/currency renderers have always produced,
+    // so no existing output moves. SORTING falls back to `undefined`, which is
+    // the runtime's own collation — passing "en-US" there would silently change
+    // the row order for every consumer on a non-en-US runtime, which is exactly
+    // the kind of change this prop is supposed to be additive about.
+    const locale = localeProp ?? "en-US";
     const [query, setQuery] = React.useState("");
     const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
     // Column list the table actually renders. Seeded from `columns`; the header
@@ -198,6 +221,18 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         if (!selectedIds)
             setInternalSel(next);
     }, [onSelectionChange, selectedIds]);
+    // The selection is announced from a region that is part of the table and
+    // outlives every selection, because a consumer's own bulk bar (mounted only
+    // once something is picked) cannot announce its own arrival (#234).
+    // Derived by adjusting state during render rather than in an effect: it
+    // must not fire on mount — nobody has selected anything yet — and it has to
+    // cover a `selectedIds` change the consumer makes as well as a click here.
+    const prevSelectedCount = React.useRef(selected.size);
+    const [selectionText, setSelectionText] = React.useState("");
+    if (prevSelectedCount.current !== selected.size) {
+        prevSelectedCount.current = selected.size;
+        setSelectionText(selectionAnnouncement(selected.size));
+    }
     const [editing, setEditing] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
     // column widths (drag-to-resize) + fixed-layout sizing
@@ -233,13 +268,19 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 const bv = cellValue(col, b);
                 const cmp = typeof av === "number" && typeof bv === "number"
                     ? av - bv
-                    : asText(av).localeCompare(asText(bv));
+                    : // `localeProp`, NOT `locale`: the ?? "en-US" fallback belongs to
+                        // formatting only. Passing it here would pin collation to en-US
+                        // for every consumer on a non-en-US runtime and silently reorder
+                        // their rows. No test can catch that substitution on a machine
+                        // whose own default is en-US -- one was written, it could not
+                        // fail, and it was removed -- so this comment is the guard.
+                        asText(av).localeCompare(asText(bv), localeProp);
                 if (cmp !== 0)
                     return cmp * dir;
             }
             return 0;
         });
-    }, [filtered, sorts, colByKey]);
+    }, [filtered, sorts, colByKey, localeProp]);
     /**
      * Rows bucketed under a heading, preserving first-seen group order (a
      * grouped view without reordering within a group). One bucket with a null
@@ -316,7 +357,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             const row = rows.find((rw) => rw.id === selCell.id);
             const col = columns.find((cc) => cc.key === selCell.key);
             if (row && col)
-                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol));
+                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol, locale));
             e.preventDefault();
             return;
         }
@@ -428,7 +469,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return dir === "asc" ? (_jsx(ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                 }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
@@ -520,7 +561,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row), locale) }, 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), ...stickyCol(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

@@ -15,6 +15,11 @@ const config = defineRecipe({
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 /* The header cell has no padding of its own -- the button owns the
+    /* announced, never drawn */
+    & .crisp-datatable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
     & th { padding: 0; }

package/dist/esm/core/cell-date.js

@@ -0,0 +1,33 @@
+/**
+ * Date-only cell values, parsed and formatted so the calendar day survives the
+ * reader's timezone.
+ *
+ * `new Date("1998-09-04")` is **UTC midnight** — ECMA-262 gives the date-only
+ * ISO forms a UTC interpretation — so formatting it in the reader's timezone
+ * renders it a day early for everyone west of UTC. A cell value like that
+ * names a *day*, and a day does not move when the reader does.
+ *
+ * Shared by both tables on purpose. RecordsTable was fixed in #220 and
+ * DataTable was not, and it took #221 to notice — the fourth time a defect has
+ * been fixed in one of the pair and left in the other. One implementation is
+ * the only version of this that stays fixed.
+ */
+/** `YYYY`, `YYYY-MM`, `YYYY-MM-DD` — the forms ECMA-262 reads as UTC. */
+const DATE_ONLY = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/;
+export function parseCellDate(raw) {
+    if (!raw)
+        return null;
+    const m = DATE_ONLY.exec(raw);
+    // the local-midnight constructor, so the calendar day survives the render.
+    // A string that carries a time is left alone: it names an instant, and an
+    // instant genuinely does move with the reader.
+    const d = m
+        ? new Date(Number(m[1]), Number(m[2] ?? "1") - 1, Number(m[3] ?? "1"))
+        : new Date(raw);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+/** The inverse: the picked date's own calendar day, not the UTC one. */
+export function formatCellDate(d) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}

package/dist/esm/core/index.js

@@ -1,3 +1,4 @@
+export { formatCellDate, parseCellDate } from "./cell-date.js";
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";

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

@@ -296,22 +296,14 @@ function TagsCell({ column, row, options, onChange, labels, }) {
  * A string that carries a time is left alone: that one really is an instant,
  * and shifting it would move the moment it names.
  */
-const DATE_ONLY = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/;
-export function parseCellDate(raw) {
-    if (!raw)
-        return null;
-    const m = DATE_ONLY.exec(raw);
-    // the local-midnight constructor, so the calendar day survives the render
-    const d = m
-        ? new Date(Number(m[1]), Number(m[2] ?? "1") - 1, Number(m[3] ?? "1"))
-        : new Date(raw);
-    return Number.isNaN(d.getTime()) ? null : d;
-}
-/** The inverse: the picked date's own calendar day, not the UTC one. */
-export function formatCellDate(d) {
-    const pad = (n) => String(n).padStart(2, "0");
-    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
+// parseCellDate/formatCellDate moved to core/cell-date.ts so DataTable shares
+// one implementation rather than a second copy -- #221 was this defect fixed
+// here (#220) and left in DataTable. Re-exported because they were already
+// reachable from this module's public surface.
+// imported for use here AND re-exported, because a bare `export ... from` does
+// not bind the names locally
+import { formatCellDate, parseCellDate } from "../../core/index.js";
+export { formatCellDate, parseCellDate };
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
     const value = parseCellDate(raw);

package/dist/styles.css

@@ -559,7 +559,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

package/dist/styles.layered.css

@@ -560,7 +560,9 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
     /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a

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

@@ -74,6 +74,15 @@ export type DataTableProps<T extends {
      * Takes the row so the label can read back a human identifier (a name,
      * a code) instead of the raw id. */
     selectRowLabel?: (row: T) => string;
+    /**
+     * Announced when the selection changes. A formatter, not a string: the
+     * count moves within the sentence between languages. Return "" to say
+     * nothing. A consumer's own `<BulkBar>` — mounted only once something is
+     * selected — cannot carry this itself: its live region would be created by
+     * the very change it should announce (#234). This table's region is
+     * mounted unconditionally instead, so it outlives every selection.
+     */
+    selectionAnnouncement?: (count: number) => string;
     /** Controlled sort (omit for self-managed; seed with `defaultSort`). */
     /**
      * Active sort. Accepts a single sort or an ordered list — a table can sort by
@@ -120,6 +129,12 @@ export type DataTableProps<T extends {
     onEdit?: (id: string, key: string, value: string) => void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
+    /** BCP 47 locale for the built-in `date`/`number`/`currency` renderers
+     * (default "en-US"). Formats the date and groups the number the way that
+     * locale's readers expect — e.g. "mn-MN" renders a date as "2026.09.12"
+     * instead of "Sep 12, 2026". Currency's symbol still comes from the
+     * column's `symbol`; this only changes digit grouping/date order. */
+    locale?: string;
     /** Tone for `entity`-type avatars: `"brand"` (uniform, matches the real
      * records grid) or `"hashed"` (a stable colour per name — the tone `tags`/
      * `status` pills already use, and entity's previous default). */
@@ -148,7 +163,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/core/cell-date.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Date-only cell values, parsed and formatted so the calendar day survives the
+ * reader's timezone.
+ *
+ * `new Date("1998-09-04")` is **UTC midnight** — ECMA-262 gives the date-only
+ * ISO forms a UTC interpretation — so formatting it in the reader's timezone
+ * renders it a day early for everyone west of UTC. A cell value like that
+ * names a *day*, and a day does not move when the reader does.
+ *
+ * Shared by both tables on purpose. RecordsTable was fixed in #220 and
+ * DataTable was not, and it took #221 to notice — the fourth time a defect has
+ * been fixed in one of the pair and left in the other. One implementation is
+ * the only version of this that stays fixed.
+ */
+export declare function parseCellDate(raw: string | undefined): Date | null;
+/** The inverse: the picked date's own calendar day, not the UTC one. */
+export declare function formatCellDate(d: Date): string;

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

@@ -1,3 +1,4 @@
+export { formatCellDate, parseCellDate } from "./cell-date";
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";

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

@@ -201,9 +201,19 @@ export type RecordsTableLabelsInput = Partial<Omit<RecordsTableLabels, "agg" | "
     op?: Partial<Record<FilterOp, string>>;
 };
 type FilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
-export declare function parseCellDate(raw: string | undefined): Date | null;
-/** The inverse: the picked date's own calendar day, not the UTC one. */
-export declare function formatCellDate(d: Date): string;
+/**
+ * A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
+ * date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
+ * the field then renders that instant in the reader's own timezone. A
+ * `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
+ * of UTC, at every hour of every day, and a date picked east of UTC
+ * round-tripped back a day short through `toISOString()` (#220).
+ *
+ * A string that carries a time is left alone: that one really is an instant,
+ * and shifting it would move the moment it names.
+ */
+import { formatCellDate, parseCellDate } from "../../core";
+export { formatCellDate, parseCellDate };
 /**
  * A measured-style record grid — fully featured. Toolbar (search / sort status /
  * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
@@ -215,4 +225,3 @@ export declare function formatCellDate(d: Date): string;
 export declare function RecordsTable({ labels, columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, className, ...rest }: RecordsTableProps): React.JSX.Element;
 export declare const defaultColumns: Column[];
 export declare const defaultRows: Row[];
-export {};

package/package.json

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