@crisp-ui-kit/crisp 0.55.1 → 0.55.2

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

@@ -210,6 +210,19 @@ function parsePhoneValue(v) {
         return null;
     return { iso2: s.slice(0, i), digits: s.slice(i + 1) };
 }
+// crisp/#816 -- a `multiValue` phone column's raw value is several
+// `parsePhoneValue`-shaped entries joined with `;`. Empty entries (a blank
+// trailing slot that was never filled) are dropped rather than rendered as
+// a stray chip.
+function parsePhoneValues(v) {
+    const s = typeof v === "string" ? v : "";
+    if (!s)
+        return [];
+    return s
+        .split(";")
+        .map((entry) => parsePhoneValue(entry))
+        .filter((p) => !!p?.digits);
+}
 // stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
@@ -430,6 +443,22 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             return (0, jsx_runtime_1.jsx)(RatingStars, { value: n, max: col.maxRating ?? 5 });
         }
         case "phone": {
+            // crisp/#816, confirmed live -- a `multiValue` phone cell renders
+            // each value as its own real `tel:` link (Attio: a measured link
+            // blue, underlined, no flag/dial-code decoration, `4px` flex gap
+            // between values), unlike the single-value cell above/below (a plain
+            // flag+dial+digits span, never a link). The whole cell hard-clips
+            // when it overflows the column -- confirmed live, Attio does not
+            // ellipsis a multi-value phone cell.
+            if (col.multiValue) {
+                const values = parsePhoneValues(value);
+                if (!values.length)
+                    return empty;
+                return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-phone-multi", children: values.map((p) => {
+                        const country = (0, countries_1.countryByIso2)(p.iso2);
+                        return ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-datatable-phone-link", href: `tel:+${country?.dialCode ?? ""}${p.digits}`, onClick: (ev) => ev.stopPropagation(), children: ["+", country?.dialCode ?? "?", p.digits] }, `${p.iso2}|${p.digits}`));
+                    }) }));
+            }
             const parsed = parsePhoneValue(value);
             if (!parsed?.digits)
                 return empty;
@@ -446,6 +475,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 // link's own navigation must not also fire the row's onRowClick.
                 onClick: (ev) => ev.stopPropagation(), children: text }));
         }
+        case "date":
+        case "datetime": {
+            const text = display || formatCell(col.type, value, col.symbol, locale);
+            if (!text)
+                return empty;
+            // crisp#822 -- a column-level predicate, not `tones` (see its doc
+            // comment): the danger state is computed over the row, not read back
+            // off this formatted string.
+            return col.danger?.(value, row) ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-danger", children: text })) : (text);
+        }
         default: {
             const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
@@ -619,6 +658,44 @@ function DataPhoneEditor({ col, value, isPending, onCommit, }) {
                         commit(iso2, digits);
                 } })] }));
 }
+// crisp/#816, confirmed live -- Attio's own multi-value Phone Number
+// editor (`col.multiValue`): a stack of already-committed values (a
+// drag grip, the value as a real `tel:` link, and a hover-revealed
+// copy/delete pair -- measured `32px` row, `5px 8px` padding, `8px` gap,
+// `16×16` icons) plus one ALWAYS-blank trailing "country + digits" row in
+// `DataPhoneEditor`'s own shape. The blank row itself is the only
+// affordance for adding another value -- there is no separate "+ Add"
+// button; committing it (Enter/blur with digits) appends and clears back
+// to blank so the next value can be typed immediately. Drag-to-reorder
+// (the grip icon) was measured present but isn't wired here -- reordering
+// a committed array is a distinct interaction from add/remove/copy and is
+// left as a follow-up rather than a partial, non-functional drag handle.
+function DataPhoneMultiEditor({ col, value, isPending, onCommit, }) {
+    const committed = parsePhoneValues(value);
+    const [draftIso2, setDraftIso2] = React.useState("US");
+    const [draftDigits, setDraftDigits] = React.useState("");
+    const countryOptions = countries_1.COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: `${(0, countries_1.flagEmoji)(c.iso2)} ${c.name} +${c.dialCode}`,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+    const join = (list) => list.map((p) => `${p.iso2}|${p.digits}`).join(";");
+    const removeAt = (i) => onCommit(join(committed.filter((_, idx) => idx !== i)));
+    const commitDraft = () => {
+        if (!draftDigits)
+            return;
+        onCommit(join([...committed, { iso2: draftIso2, digits: draftDigits }]));
+        setDraftDigits("");
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-multi-editor", children: [committed.map((p, i) => {
+                const country = (0, countries_1.countryByIso2)(p.iso2);
+                const tel = `+${country?.dialCode ?? "?"}${p.digits}`;
+                return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-multi-row", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, className: "crisp-datatable-phone-multi-grip", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("a", { className: "crisp-datatable-phone-link", href: `tel:${tel}`, onClick: (ev) => ev.stopPropagation(), children: tel }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-multi-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Copy ${col.key} value`, onClick: () => navigator.clipboard?.writeText(tel), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Remove ${col.key} value`, disabled: isPending, onClick: () => removeAt(i), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }) })] })] }, `${p.iso2}|${p.digits}`));
+            }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-editor", children: [(0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: draftIso2, disabled: isPending, options: countryOptions, onValueChange: setDraftIso2 }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-dial", "aria-hidden": "true", children: ["+", (0, countries_1.countryByIso2)(draftIso2)?.dialCode ?? "?"] }), (0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", "aria-label": `Edit ${col.key} number (add another)`, value: draftDigits, disabled: isPending, onChange: (e) => setDraftDigits(e.currentTarget.value), onBlur: commitDraft, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                commitDraft();
+                        } })] })] }));
+}
 // crisp/#762, confirmed live -- Attio's own Timestamp editor is a calendar +
 // time + preset picker, not the native `datetime-local` input `type:
 // "datetime"` gets by default (that stays the DEFAULT, unchanged, for
@@ -1651,17 +1728,23 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     // value while showing the rejection's message beside the cell (reject).
     // The revert needs no extra code: this component never mutates `data`
     // itself, so once `editing` clears, the cell simply shows `data` again.
-    function commitEdit(id, key, value) {
+    // crisp/#816 -- `keepEditing` lets a multi-value editor stay open across
+    // a commit (adding/removing one value must not close the whole cell, the
+    // way it does for every other, single-value editor). Default false
+    // preserves every existing editor's own close-on-commit behaviour.
+    function commitEdit(id, key, value, keepEditing = false) {
         setEditError(null);
         const result = onEdit?.(id, key, value);
         if (result && typeof result.then === "function") {
             setPending({ id, key });
             result.then(() => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
             }, (err) => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
                 setEditError({
                     id,
                     key,
@@ -1674,7 +1757,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             });
             return;
         }
-        setEditing(null);
+        if (!keepEditing)
+            setEditing(null);
     }
     const reduceMotion = (0, core_1.usePrefersReducedMotion)();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
@@ -2213,7 +2297,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                         // portaled popover, so a handler here can't
                                                         // rely on the key event ever bubbling through
                                                         // this element (#453).
-                                                        onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" ? ((0, jsx_runtime_1.jsx)(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? ((0, jsx_runtime_1.jsx)(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" && col.multiValue ? ((0, jsx_runtime_1.jsx)(DataPhoneMultiEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v, true) })) : col.editor === "phone" ? ((0, jsx_runtime_1.jsx)(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? ((0, jsx_runtime_1.jsx)(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 

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

@@ -277,6 +277,10 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no
+       fill/weight change. */
+    & .crisp-datatable-danger { color: ${tokens_1.contract.fgDanger}; }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -290,6 +294,35 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-phone-link { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The
+       copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; padding: 5px ${tokens_1.contract.space["2"]}; }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: ${tokens_1.contract.fgMuted}; flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

package/dist/datatable.css

@@ -208,6 +208,9 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no fill/weight change. */
+    & .crisp-datatable-danger { color: var(--crisp-fg-danger); }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -221,6 +224,34 @@
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-phone-link { color: var(--crisp-bg-brand-solid); text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 5px var(--crisp-space-2); }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: var(--crisp-fg-muted); flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

package/dist/datatable.layered.css

@@ -209,6 +209,9 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no fill/weight change. */
+    & .crisp-datatable-danger { color: var(--crisp-fg-danger); }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -222,6 +225,34 @@
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-phone-link { color: var(--crisp-bg-brand-solid); text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 5px var(--crisp-space-2); }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: var(--crisp-fg-muted); flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, X, } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, Trash2, X, } from "lucide-react";
 import * as React from "react";
 import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, usePrefersReducedMotion, } from "../../core/index.js";
 // crisp/#601 supersession: a deliberate exception to "DS atoms stay
@@ -172,6 +172,19 @@ function parsePhoneValue(v) {
         return null;
     return { iso2: s.slice(0, i), digits: s.slice(i + 1) };
 }
+// crisp/#816 -- a `multiValue` phone column's raw value is several
+// `parsePhoneValue`-shaped entries joined with `;`. Empty entries (a blank
+// trailing slot that was never filled) are dropped rather than rendered as
+// a stray chip.
+function parsePhoneValues(v) {
+    const s = typeof v === "string" ? v : "";
+    if (!s)
+        return [];
+    return s
+        .split(";")
+        .map((entry) => parsePhoneValue(entry))
+        .filter((p) => !!p?.digits);
+}
 // stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
@@ -392,6 +405,22 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             return _jsx(RatingStars, { value: n, max: col.maxRating ?? 5 });
         }
         case "phone": {
+            // crisp/#816, confirmed live -- a `multiValue` phone cell renders
+            // each value as its own real `tel:` link (Attio: a measured link
+            // blue, underlined, no flag/dial-code decoration, `4px` flex gap
+            // between values), unlike the single-value cell above/below (a plain
+            // flag+dial+digits span, never a link). The whole cell hard-clips
+            // when it overflows the column -- confirmed live, Attio does not
+            // ellipsis a multi-value phone cell.
+            if (col.multiValue) {
+                const values = parsePhoneValues(value);
+                if (!values.length)
+                    return empty;
+                return (_jsx("span", { className: "crisp-datatable-phone-multi", children: values.map((p) => {
+                        const country = countryByIso2(p.iso2);
+                        return (_jsxs("a", { className: "crisp-datatable-phone-link", href: `tel:+${country?.dialCode ?? ""}${p.digits}`, onClick: (ev) => ev.stopPropagation(), children: ["+", country?.dialCode ?? "?", p.digits] }, `${p.iso2}|${p.digits}`));
+                    }) }));
+            }
             const parsed = parsePhoneValue(value);
             if (!parsed?.digits)
                 return empty;
@@ -408,6 +437,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 // link's own navigation must not also fire the row's onRowClick.
                 onClick: (ev) => ev.stopPropagation(), children: text }));
         }
+        case "date":
+        case "datetime": {
+            const text = display || formatCell(col.type, value, col.symbol, locale);
+            if (!text)
+                return empty;
+            // crisp#822 -- a column-level predicate, not `tones` (see its doc
+            // comment): the danger state is computed over the row, not read back
+            // off this formatted string.
+            return col.danger?.(value, row) ? (_jsx("span", { className: "crisp-datatable-danger", children: text })) : (text);
+        }
         default: {
             const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
@@ -581,6 +620,44 @@ function DataPhoneEditor({ col, value, isPending, onCommit, }) {
                         commit(iso2, digits);
                 } })] }));
 }
+// crisp/#816, confirmed live -- Attio's own multi-value Phone Number
+// editor (`col.multiValue`): a stack of already-committed values (a
+// drag grip, the value as a real `tel:` link, and a hover-revealed
+// copy/delete pair -- measured `32px` row, `5px 8px` padding, `8px` gap,
+// `16×16` icons) plus one ALWAYS-blank trailing "country + digits" row in
+// `DataPhoneEditor`'s own shape. The blank row itself is the only
+// affordance for adding another value -- there is no separate "+ Add"
+// button; committing it (Enter/blur with digits) appends and clears back
+// to blank so the next value can be typed immediately. Drag-to-reorder
+// (the grip icon) was measured present but isn't wired here -- reordering
+// a committed array is a distinct interaction from add/remove/copy and is
+// left as a follow-up rather than a partial, non-functional drag handle.
+function DataPhoneMultiEditor({ col, value, isPending, onCommit, }) {
+    const committed = parsePhoneValues(value);
+    const [draftIso2, setDraftIso2] = React.useState("US");
+    const [draftDigits, setDraftDigits] = React.useState("");
+    const countryOptions = COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: `${flagEmoji(c.iso2)} ${c.name} +${c.dialCode}`,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+    const join = (list) => list.map((p) => `${p.iso2}|${p.digits}`).join(";");
+    const removeAt = (i) => onCommit(join(committed.filter((_, idx) => idx !== i)));
+    const commitDraft = () => {
+        if (!draftDigits)
+            return;
+        onCommit(join([...committed, { iso2: draftIso2, digits: draftDigits }]));
+        setDraftDigits("");
+    };
+    return (_jsxs("span", { className: "crisp-datatable-phone-multi-editor", children: [committed.map((p, i) => {
+                const country = countryByIso2(p.iso2);
+                const tel = `+${country?.dialCode ?? "?"}${p.digits}`;
+                return (_jsxs("span", { className: "crisp-datatable-phone-multi-row", children: [_jsx(GripVertical, { size: 16, strokeWidth: 1.75, className: "crisp-datatable-phone-multi-grip", "aria-hidden": "true" }), _jsx("a", { className: "crisp-datatable-phone-link", href: `tel:${tel}`, onClick: (ev) => ev.stopPropagation(), children: tel }), _jsxs("span", { className: "crisp-datatable-phone-multi-actions", children: [_jsx("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Copy ${col.key} value`, onClick: () => navigator.clipboard?.writeText(tel), children: _jsx(Copy, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-datatable-phone-multi-action", "aria-label": `Remove ${col.key} value`, disabled: isPending, onClick: () => removeAt(i), children: _jsx(Trash2, { size: 16, strokeWidth: 1.75 }) })] })] }, `${p.iso2}|${p.digits}`));
+            }), _jsxs("span", { className: "crisp-datatable-phone-editor", children: [_jsx(Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: draftIso2, disabled: isPending, options: countryOptions, onValueChange: setDraftIso2 }), _jsxs("span", { className: "crisp-datatable-phone-dial", "aria-hidden": "true", children: ["+", countryByIso2(draftIso2)?.dialCode ?? "?"] }), _jsx("input", { className: "crisp-datatable-edit", "aria-label": `Edit ${col.key} number (add another)`, value: draftDigits, disabled: isPending, onChange: (e) => setDraftDigits(e.currentTarget.value), onBlur: commitDraft, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                commitDraft();
+                        } })] })] }));
+}
 // crisp/#762, confirmed live -- Attio's own Timestamp editor is a calendar +
 // time + preset picker, not the native `datetime-local` input `type:
 // "datetime"` gets by default (that stays the DEFAULT, unchanged, for
@@ -1613,17 +1690,23 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // value while showing the rejection's message beside the cell (reject).
     // The revert needs no extra code: this component never mutates `data`
     // itself, so once `editing` clears, the cell simply shows `data` again.
-    function commitEdit(id, key, value) {
+    // crisp/#816 -- `keepEditing` lets a multi-value editor stay open across
+    // a commit (adding/removing one value must not close the whole cell, the
+    // way it does for every other, single-value editor). Default false
+    // preserves every existing editor's own close-on-commit behaviour.
+    function commitEdit(id, key, value, keepEditing = false) {
         setEditError(null);
         const result = onEdit?.(id, key, value);
         if (result && typeof result.then === "function") {
             setPending({ id, key });
             result.then(() => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
             }, (err) => {
                 setPending(null);
-                setEditing(null);
+                if (!keepEditing)
+                    setEditing(null);
                 setEditError({
                     id,
                     key,
@@ -1636,7 +1719,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             });
             return;
         }
-        setEditing(null);
+        if (!keepEditing)
+            setEditing(null);
     }
     const reduceMotion = usePrefersReducedMotion();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
@@ -2175,7 +2259,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         // portaled popover, so a handler here can't
                                                         // rely on the key event ever bubbling through
                                                         // this element (#453).
-                                                        onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" ? (_jsx(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? (_jsx(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" && col.multiValue ? (_jsx(DataPhoneMultiEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v, true) })) : col.editor === "phone" ? (_jsx(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? (_jsx(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 

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

@@ -274,6 +274,10 @@ const config = defineRecipe({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${c.fgMuted}; }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no
+       fill/weight change. */
+    & .crisp-datatable-danger { color: ${c.fgDanger}; }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -287,6 +291,35 @@ const config = defineRecipe({
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: ${c.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-phone-link { color: ${c.bgBrandSolid}; text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The
+       copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; padding: 5px ${c.space["2"]}; }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: ${c.fgMuted}; flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: ${c.space["1"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

package/dist/styles.css

@@ -807,6 +807,9 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no fill/weight change. */
+    & .crisp-datatable-danger { color: var(--crisp-fg-danger); }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -820,6 +823,34 @@
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-phone-link { color: var(--crisp-bg-brand-solid); text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 5px var(--crisp-space-2); }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: var(--crisp-fg-muted); flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

package/dist/styles.layered.css

@@ -808,6 +808,9 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no fill/weight change. */
+    & .crisp-datatable-danger { color: var(--crisp-fg-danger); }
     /* url/email cell types (#654) -- same measured values as RecordsTable's
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
@@ -821,6 +824,34 @@
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* multi-value phone (#816) -- confirmed live (a real custom "Multiple
+       values" Phone Number attribute, and the built-in People "Phone
+       numbers" field): the collapsed cell is a 4px-gap flex row of real
+       tel: links in a measured link blue (~rgb(59,108,232) pixel-sampled;
+       reused as the closest already-tokened blue, brand600, rather than
+       adding a third blue token for a delta this small), underlined,
+       UNLIKE the single-value cell above (plain text, no link, no
+       underline) -- multi-value is the one shape Attio makes into a real
+       link. The cell hard-clips on overflow (no ellipsis -- confirmed
+       live, a second value can end mid-digit with no "..."). */
+    & .crisp-datatable-phone-multi { display: inline-flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
+    & .crisp-datatable-phone-link { color: var(--crisp-bg-brand-solid); text-decoration: underline; white-space: nowrap; }
+    /* multi-value editor (#816) -- confirmed live: a stack of committed-
+       value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
+       the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
+       DataPhoneEditor-shaped row -- that blank row is the only "add
+       another" affordance, there's no separate button for it. The copy/delete pair reuses .crisp-datatable-entity-action's own
+       hover-reveal chrome (not independently re-measured as its own hit
+       target this pass, only the 16px icon glyphs were). */
+    & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
+    & .crisp-datatable-phone-multi-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 5px var(--crisp-space-2); }
+    & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-phone-multi-grip { color: var(--crisp-fg-muted); flex-shrink: 0; cursor: grab; }
+    & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
+    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
     & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an

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

@@ -50,9 +50,9 @@ export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "dat
  * country selection survives even for a national number that's still
  * being typed (an E.164 string alone can't distinguish "no country
  * chosen yet" from "the digits happen to start with a valid dial
- * code"). See `editor: "phone"` for the editable picker. Multi-value
- * (Attio's own "Multiple values" constraint on this type) is explicitly
- * out of scope -- tracked as its own follow-up, not this type. */
+ * code"). See `editor: "phone"` for the editable picker. See `multiValue`
+ * (crisp#816) for Attio's own "Multiple values" constraint on this
+ * type. */
  | "phone";
 export type DataTableColumn<T> = {
     key: string;
@@ -87,6 +87,26 @@ export type DataTableColumn<T> = {
     resizable?: boolean;
     /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
     tones?: Record<string, string>;
+    /** `type: "date"`/`"datetime"` only: render this cell in Attio's own
+     * measured overdue/danger red (`fgDanger`, `#eb3b3b` — the same token
+     * `TasksTable`'s own overdue due-date already uses, crisp#462) when the
+     * predicate returns true. A per-row PREDICATE rather than `tones`'s
+     * value-keyed lookup, because a date's danger state is computed over the
+     * WHOLE ROW (e.g. a precomputed "overdue" bucket) — `tones` can only key
+     * off the formatted string, which a date doesn't have a closed set of
+     * (crisp#822). */
+    danger?: (value: unknown, row: T) => boolean;
+    /** This column holds more than one value per row -- Attio's own
+     * "Multiple values" constraint (crisp#816, confirmed live on the Phone
+     * Number attribute type: Constraints → Multiple values, a per-attribute
+     * toggle, absent for e.g. Text). Built out for `type`/`editor: "phone"`
+     * only this pass; the raw value is that type's normal per-value string,
+     * several of them joined with `;` (`"MN|88112233;US|4155550123"`) rather
+     * than JSON -- the same "a real separator earns its keep" reasoning
+     * `phone`'s own single-value `"{iso2}|{digits}"` shape already uses.
+     * Structural flag lives on the column (type-agnostic, per the issue)
+     * even though only one type renders it today. */
+    multiValue?: boolean;
     /** Enable click-to-sort on this column's header. */
     sortable?: boolean;
     /** Exclude this column from the search filter (default: included). */

package/package.json

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