@crisp-ui-kit/crisp 0.55.2 → 0.55.4

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

@@ -21,16 +21,32 @@ const config = (0, core_1.defineRecipe)({
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
        until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x37 with
+        /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
-       opens the aggregation menu. */
-    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+       opens the aggregation menu.
+       No \`min-height\` (crisp#834, found reproducing the footer-row-38px-
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN \`height: tableRow\` (36px,
+       border-box) leaves 34px of content box once its 2px of top+bottom
+       border are counted, and \`min-height: tableRow\` here demanded 36px
+       of CONTENT height regardless -- overflowing the cell by 2px, which
+       auto-height table layout resolves by growing the whole row to fit,
+       landing at exactly the reported 38. \`height: 100%\` alone already
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
-    & .crisp-columncalc-op { color: ${tokens_1.contract.fgMuted}; }
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, \`c.text.md\`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
+       \`fgMuted\` token (a close but not measured match). */
+    & .crisp-columncalc-op { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
     & .crisp-columncalc-section { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},

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

@@ -628,6 +628,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_1.COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-country-option", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-country-name", children: c.name }), (0, jsx_runtime_1.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
@@ -635,20 +652,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 = (0, countries_1.countryByIso2)(iso2);
-    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 countryOptions = buildCountryOptions();
     const commit = (nextIso2, nextDigits) => onCommit(`${nextIso2}|${nextDigits}`);
     return ((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: iso2, disabled: isPending, options: countryOptions, onValueChange: (v) => {
                     setIso2(v);
@@ -674,11 +687,7 @@ 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 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 = () => {
@@ -752,7 +761,7 @@ function DataDateTimeEditor({ col, value, isPending, onCommit, }) {
                     commit(date, t);
                 } })] }));
 }
-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 }) {
+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.
@@ -2177,7 +2186,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 } })) : columnMenu && !isPrimary ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: sortAscendingLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: sortDescendingLabel }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: moveColumnLeftLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: moveColumnRightLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: editColumnLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: hideColumnLabel })] }))] })) : col.sortable && !isPrimary ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.readOnly && ((0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "crisp-datatable-readonly", size: 12, strokeWidth: 1.75, "aria-hidden": "true" })), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: empty }) }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topSpacerHeight > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalCols, style: {
+                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: loading ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-loading", children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 16 }), loadingLabel] }) }) })) : error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: empty }) }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topSpacerHeight > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalCols, style: {
                                             height: topSpacerHeight,
                                             padding: 0,
                                             border: "none",

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

@@ -68,8 +68,17 @@ const config = (0, core_1.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
@@ -126,7 +135,22 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${tokens_1.contract.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${tokens_1.contract.bgSurface}; }
-    & th[data-sticky] { z-index: 3; }
+    /* \`thead th[data-sticky]\`, not a bare \`th[data-sticky]\` (crisp#848, same
+       bare-\`th\` family as #829/#833/#835): this z-index:3 was written for
+       the HEADER's own sticky corner cell (sticky column x sticky header),
+       meant to win over everything else. Unscoped, it also matched the
+       primary column's BODY cell -- a real \`<th scope="row" data-sticky>\`
+       since #779 -- giving every scrolled body row's own sticky cell a
+       HIGHER z-index than the sticky FOOTER's (2), so it painted over the
+       footer instead of the footer showing through. Confirmed live on a
+       real bounded-height, 25-row table (GRC's Risk register): scrolled
+       partway, \`elementFromPoint\` at the footer's own on-screen cell
+       resolved to a body row's \`<th>\`, not the footer's \`<td>\`, and that
+       \`<th>\`'s computed z-index read 3. Scoped to \`thead\`, a body row's
+       own sticky \`<th>\` now falls back to the base rule above (z-index 1,
+       correct -- the same as a plain sticky \`<td>\`), and the footer's own
+       explicit z-index below is unaffected either way. */
+    & thead th[data-sticky] { z-index: 3; }
     /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
        \`tfoot td { z-index: 2 }\`), which \`td[data-sticky]\`'s own higher-specificity
        \`z-index: 1\` would otherwise undercut -- keep it level with the row it's in. */
@@ -183,6 +207,16 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.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: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
+    & .crisp-datatable-loading .crisp-spinner { border-top-color: color-mix(in srgb, ${tokens_1.contract.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
@@ -294,6 +328,15 @@ 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; }
+    /* 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: ${tokens_1.contract.space["1"]}; }
+    & .crisp-datatable-country-dial { color: color-mix(in srgb, ${tokens_1.contract.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

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

@@ -204,7 +204,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.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: () => { } })), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.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/cjs/components/table/table.recipe.js

@@ -28,8 +28,25 @@ const config = (0, core_1.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: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; user-select: none; }
     & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
@@ -56,7 +73,7 @@ const config = (0, core_1.defineRecipe)({
         // bottom one: the container's edge wins, cells never double it.
         surface: {
             card: `border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.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/cjs/components/tabletoolbar/tabletoolbar.chrome.js

@@ -53,7 +53,14 @@ const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar
     & .${namespace_1.CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; width: 180px; }
     & .${namespace_1.CLASS_PREFIX}${p}-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .${namespace_1.CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDivider}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.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. */
+    & .${namespace_1.CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDivider}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool:hover { background: ${tokens_1.contract.bgRaised}; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     /* crisp/#772: re-measured live on Sort with an actual sort applied --
@@ -78,8 +85,22 @@ const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar
        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. */
-    & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.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. */
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 2%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
     & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); pointer-events: none; }
     & .${namespace_1.CLASS_PREFIX}${p}-tool--dashed:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     & .${namespace_1.CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }

package/dist/columncalc.css

@@ -7,16 +7,26 @@
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
        until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x37 with
+        /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
-       opens the aggregation menu. */
-    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; min-height: var(--crisp-size-tableRow); margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+       opens the aggregation menu.
+       No `min-height` (crisp#834, found reproducing the footer-row-38px-
+       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       border-box) leaves 34px of content box once its 2px of top+bottom
+       border are counted, and `min-height: tableRow` here demanded 36px
+       of CONTENT height regardless -- overflowing the cell by 2px, which
+       auto-height table layout resolves by growing the whole row to fit,
+       landing at exactly the reported 38. `height: 100%` alone already
+       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    & .crisp-columncalc-op { color: var(--crisp-fg-muted); }
+    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+       `fgMuted` token (a close but not measured match). */
+    & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
 }
 

package/dist/columncalc.layered.css

@@ -8,16 +8,26 @@
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
        until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x37 with
+        /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
-       opens the aggregation menu. */
-    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; min-height: var(--crisp-size-tableRow); margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+       opens the aggregation menu.
+       No `min-height` (crisp#834, found reproducing the footer-row-38px-
+       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       border-box) leaves 34px of content box once its 2px of top+bottom
+       border are counted, and `min-height: tableRow` here demanded 36px
+       of CONTENT height regardless -- overflowing the cell by 2px, which
+       auto-height table layout resolves by growing the whole row to fit,
+       landing at exactly the reported 38. `height: 100%` alone already
+       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    & .crisp-columncalc-op { color: var(--crisp-fg-muted); }
+    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+       `fgMuted` token (a close but not measured match). */
+    & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
 }