@crisp-ui-kit/crisp 0.55.2 → 0.55.4

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

@@ -590,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
@@ -597,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);
@@ -636,11 +649,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.map((c) => ({
-        value: c.iso2,
-        label: `${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 = () => {
@@ -714,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.
@@ -2139,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",

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
@@ -123,7 +132,22 @@ const config = defineRecipe({
     & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.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. */
@@ -180,6 +204,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
@@ -291,6 +325,15 @@ 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

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; }