@crisp-ui-kit/crisp 0.55.1 → 0.55.3

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";
@@ -551,6 +590,23 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
+// crisp/#842, confirmed live -- Attio's own country-picker popover: each
+// option row is plain text, name (opaque) + dial code (muted 63%), NO flag
+// anywhere -- not in the option row, and not in the CLOSED trigger either,
+// which shows only the bare 2-letter ISO code ("MN") + a chevron. That's a
+// different, more compact string than the option row's own "{name}
+// +{dialCode}", so this builds `label` (the option row) and `triggerLabel`
+// (the closed trigger) as two different values on the same `SelectOption`
+// rather than one flag+name+dialcode string doing both jobs -- the shape
+// #765 originally shipped, unmeasured, and #842 corrected.
+function buildCountryOptions() {
+    return COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: (_jsxs("span", { className: "crisp-datatable-country-option", children: [_jsx("span", { className: "crisp-datatable-country-name", children: c.name }), _jsxs("span", { className: "crisp-datatable-country-dial", children: ["+", c.dialCode] })] })),
+        triggerLabel: c.iso2,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+}
 // crisp/#765, confirmed live -- Attio's own Phone Number editor: a
 // country-code select (ghost trigger, "MN ▾"), then a static, non-editable
 // "+{dialCode}" prefix, then a borderless digits field -- measured
@@ -558,20 +614,16 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
 // value already measured elsewhere in this file (14px in both cases).
 // Reuses crisp's own searchable `Select` for the country list -- the same
 // popover chrome every other picker in this file already uses -- rather
-// than inventing new country-picker chrome; the flag/name/dial-code ROW
-// shape wasn't independently re-measured against Attio's own popover this
-// pass (time-boxed), so it's built to the same shape crisp's other search
-// pickers already carry.
+// than inventing new country-picker chrome; the panel/row chrome (radius,
+// padding, row height) already lines up with `Select`'s own measured
+// tokens (#842 re-confirmed this), so only the option content itself
+// (`buildCountryOptions` above) needed a real fix.
 function DataPhoneEditor({ col, value, isPending, onCommit, }) {
     const parsed = parsePhoneValue(value);
     const [iso2, setIso2] = React.useState(parsed?.iso2 ?? "US");
     const [digits, setDigits] = React.useState(parsed?.digits ?? "");
     const country = countryByIso2(iso2);
-    const countryOptions = COUNTRIES.map((c) => ({
-        value: c.iso2,
-        label: `${flagEmoji(c.iso2)} ${c.name} +${c.dialCode}`,
-        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
-    }));
+    const countryOptions = buildCountryOptions();
     const commit = (nextIso2, nextDigits) => onCommit(`${nextIso2}|${nextDigits}`);
     return (_jsxs("span", { className: "crisp-datatable-phone-editor", children: [_jsx(Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: iso2, disabled: isPending, options: countryOptions, onValueChange: (v) => {
                     setIso2(v);
@@ -581,6 +633,40 @@ 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 = buildCountryOptions();
+    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
@@ -637,7 +723,7 @@ function DataDateTimeEditor({ col, value, isPending, onCommit, }) {
                     commit(date, t);
                 } })] }));
 }
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }) {
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, loading = false, loadingLabel = "Loading...", sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -1613,17 +1699,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 +1728,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
@@ -2055,7 +2148,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 } })) : columnMenu && !isPrimary ? (_jsxs(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
                                                         : col.key} ${crispMessages["column options"] ?? "column options"}`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: sortAscendingLabel }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: sortDescendingLabel }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: moveColumnLeftLabel }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: moveColumnRightLabel }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: editColumnLabel }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: hideColumnLabel })] }))] })) : col.sortable && !isPrimary ? (_jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.readOnly && (_jsx(Lock, { className: "crisp-datatable-readonly", size: 12, strokeWidth: 1.75, "aria-hidden": "true" })), col.resizable !== false && (_jsx("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (_jsxs(_Fragment, { children: [topSpacerHeight > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: totalCols, style: {
+                                })] }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsxs("div", { className: "crisp-datatable-loading", children: [_jsx(Spinner, { size: 16 }), loadingLabel] }) }) })) : error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (_jsxs(_Fragment, { children: [topSpacerHeight > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: totalCols, style: {
                                             height: topSpacerHeight,
                                             padding: 0,
                                             border: "none",
@@ -2175,7 +2268,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

@@ -65,8 +65,17 @@ const config = defineRecipe({
        in the whole product and making every interactive column's button
        double it to 24px. Scoping through \`.crisp-table\` adds a second
        class to the selector (0,2,1 beats 0,1,1) so this can never lose a
-       specificity tie to source order again. */
-    & .crisp-table th { padding: 0; }
+       specificity tie to source order again.
+       \`thead th\`, not a bare \`th\` (crisp#829): #779 made the primary
+       column's BODY cell a real \`<th scope="row">\` for a11y, and a bare
+       \`th\` here matches that one too, zeroing an inset nothing else
+       supplies -- the primary column's text sat flush left, one column's
+       cell no longer matching its own header or any sibling \`<td>\`. Only
+       the header row's own \`<th>\` needs zero padding (its sort BUTTON
+       owns the inset); the body row's \`<th scope="row">\` has no button,
+       and needs the SAME base 12px (table.recipe.ts, #465) every other
+       cell already gets. */
+    & .crisp-table thead 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
        long header grew past the column instead of filling it -- with nothing
@@ -180,6 +189,16 @@ const config = defineRecipe({
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+    /* #826 -- the full-body loading state (a filter/sort re-query, or a
+       fresh page boot), measured live on Attio's Companies grid on both
+       triggers: icon+text centred in the row-body area, 10px gap, 14px/500
+       weight/20px line-height, both icon and text in the SAME muted
+       rgba(0,0,0,0.63) -- the same color-mix figure this file already uses
+       for other muted text (e.g. -phone-dial). Distinct from the cold
+       in-place row load (blank, no indicator) and the warm-navigation
+       per-cell shimmer (#599) -- neither of those swaps the whole body. */
+    & .crisp-datatable-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: ${c.space["8"]} ${c.space["3"]}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .crisp-datatable-loading .crisp-spinner { border-top-color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
     /* #579: click-to-expand overlay for a truncated cell -- a read-only,
        full-value card, settled live as click (not Attio's usual
        hover-expand) and measured position: absolute, unlike this file's
@@ -274,6 +293,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 +310,44 @@ 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; }
+    /* country-picker option row (#842) -- confirmed live: Attio's own popover
+       is plain text, no flag anywhere (not the option row, not the closed
+       trigger), name opaque + dial code muted rgba(0,0,0,0.63) -- the SAME
+       color-mix figure as -phone-dial above. The internal name/dial gap
+       wasn't independently measured this pass (Attio's own two <div>s gave
+       no exact number); reused space["1"], the same gap -phone already uses
+       for its own flag/dial/digits row. */
+    & .crisp-datatable-country-option { display: flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-datatable-country-dial { color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    /* 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/esm/components/select/select.js

@@ -168,7 +168,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);

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

@@ -25,8 +25,25 @@ const config = defineRecipe({
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,
-       z-index 3), so the corner always wins. */
-    & th { position: sticky; top: 0; z-index: 2; height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+       z-index 3), so the corner always wins.
+       \`thead th\`, not a bare \`th\` (crisp#833/#835): DataTable's primary
+       column renders its BODY cell as a real \`<th scope="row">\` (#779, for
+       a11y), and a bare \`th\` here matched that one too -- every property in
+       this rule leaked onto it: \`height: tableHeader\` (40px) stretched the
+       whole body row to 40px instead of 36 (#833, confirmed live on the
+       showcase, every td in the row equalized to the one th); \`color:
+       color-mix(...63%...)\` muted the primary column's own text below every
+       sibling \`<td>\`'s full-opacity color (#835, re-measured live against
+       Attio's own header labels -- including a genuinely computed one,
+       "Twitter follower count" -- all fully opaque \`rgb(16,17,18)\`, no
+       muting at all, so this drops the color-mix entirely rather than
+       narrowing it); \`position:sticky; top:0\` tried to stick a BODY row
+       to the scroll container's top; the extra \`border-top\` doubled that
+       row's own grid line. \`thead th\` simply never matches
+       \`tbody th[scope=row]\` at all, so none of this reaches it; the base
+       \`& th, & td\` rule above (36px, one border-bottom, full opacity via
+       \`& table\`'s own color) applies to it like every other cell. */
+    & thead th { position: sticky; top: 0; z-index: 2; height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgPrimary}; user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
@@ -53,7 +70,7 @@ const config = defineRecipe({
         // bottom one: the container's edge wins, cells never double it.
         surface: {
             card: `border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; overflow: hidden;
-        & th { border-top: none; }
+        & thead th { border-top: none; }
         & tfoot td { border-bottom: none; }`,
             bleed: `border: none; border-radius: 0;`,
         },

package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js

@@ -50,7 +50,14 @@ export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { di
     & .${CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
     & .${CLASS_PREFIX}${p}-search input::placeholder { color: ${c.fgMuted}; }
-    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDivider}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    /* crisp/#830: every trigger label here (Sort, Filter, View settings,
+       Import/Export -- all compose this one shared .tool rule) read the
+       "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
+       (the button root itself inherits Attio's own 10px rem base and is a
+       red herring, the same trap the original "10px font" layout-audit
+       finding fell into): every label leaf is 14px/500/lh20, the "lg" text
+       size. */
+    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDivider}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${CLASS_PREFIX}${p}-tool:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
     /* crisp/#772: re-measured live on Sort with an actual sort applied --
@@ -75,8 +82,22 @@ export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { di
        same reasoning --ghost above already uses. Only wired into
        TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's
        own Sort/Filter triggers share this same chrome function but are
-       deprecated, not touched here. */
-    & .${CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); }
+       deprecated, not touched here.
+       crisp/#844, correcting #831: the label colour was added here later,
+       muting only the FILTER trigger (via a "--filter" modifier), on the
+       assumption that was a Filter-specific tone distinct from Sort's.
+       Re-measured live and that premise was wrong -- Sort's own resting
+       label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5)
+       as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
+       "Sort's colour" in an earlier pass is a different thing entirely: the
+       "Sorted by" PREFIX word inside an ACTIVE sort chip, #788 -- a
+       compound-label treatment that only exists once a sort is applied, not
+       a resting-state colour.) --dashed is currently only ever applied to
+       Sort's and Filter's own empty triggers (never View settings/
+       Import-Export, which stay full-strength always, confirmed live), so
+       the mute belongs on --dashed itself, not gated behind a Filter-only
+       modifier. */
+    & .${CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
     & .${CLASS_PREFIX}${p}-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 6%, transparent); pointer-events: none; }
     & .${CLASS_PREFIX}${p}-tool--dashed:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
     & .${CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }