@crisp-ui-kit/crisp 0.54.10 → 0.54.11

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

@@ -1,11 +1,41 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, ChevronDown, ChevronLeft, ChevronRight, CircleHelp, Download, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, Upload, X, } from "lucide-react";
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { DatePicker, } from "../datepicker/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
+// crisp/#766, #772: portals View settings/Import-Export into a
+// consumer-supplied target (e.g. a `<span>` rendered next to `SavedViews`,
+// or another next to the primary action) instead of this toolbar's own row,
+// when one is given -- a plain passthrough otherwise, so the default (no
+// ref given) stays byte-identical to before this existed. Kept outside the
+// main component (no closure over its state) so it's a stable reference
+// across renders.
+//
+// #772 fix: every `.crisp-tabletoolbar-*` chrome rule is nested under this
+// recipe's own root class (`& .crisp-tabletoolbar-tool { ... }`), which
+// compiles to a real CSS descendant combinator -- it needs actual DOM
+// containment under an element carrying that class. A portal target
+// rendered by the CONSUMER, outside this component's own root `<div>`,
+// breaks that containment even though React still considers the portaled
+// content a child for event/context purposes: the classes were still
+// applied, they just matched nothing, so the buttons rendered as unstyled
+// native chrome. Same failure class `select.recipe.ts`'s own doc comment
+// describes for its listbox portal to `document.body`. Fixed the same way
+// `ToolbarTool` (below) already lets a bare `.crisp-tabletoolbar-tool` be
+// used outside an actual `TableToolbar` tree: wrap the portaled content in
+// its own `tabletoolbarRecipe()`-classed span. `display: contents` on that
+// recipe's own base rule means the wrapper contributes no box of its own,
+// so it changes nothing about layout -- only re-establishes the selector
+// match.
+function ViewBarSlot({ target, children, }) {
+    return target
+        ? createPortal(_jsx("span", { className: tabletoolbarRecipe(), children: children }), target)
+        : children;
+}
 // #592: shared by every direction-bearing ChevronRight usage below (the
 // field picker's own disclosure chevron, a flattened search result's
 // breadcrumb separator, and a filter chip's own breadcrumb separator) so
@@ -299,7 +329,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -369,6 +399,19 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
             setShownKeysState(next);
         onShownKeysChange?.(next);
     };
+    // crisp/#766: a ref's `.current` is null during THIS render (a ref only
+    // attaches during commit, and the consumer's own target element may not
+    // even exist in the DOM yet on first paint) -- an effect after mount picks
+    // it up and re-renders once, the same one-render-late pattern the floating
+    // popovers elsewhere in this file already use for a portal target.
+    const [viewSettingsTarget, setViewSettingsTarget] = React.useState(null);
+    React.useEffect(() => {
+        setViewSettingsTarget(viewSettingsRef?.current ?? null);
+    }, [viewSettingsRef]);
+    const [importExportTarget, setImportExportTarget] = React.useState(null);
+    React.useEffect(() => {
+        setImportExportTarget(importExportRef?.current ?? null);
+    }, [importExportRef]);
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
@@ -602,16 +645,23 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     // worse than an imperfect word order); `crispMessages` rather than a
     // second `useCrispMessage` call, since this only fires on the branch that
     // needs it.
+    // crisp/#788: "Sorted by" and the field name are NOT a font-weight split
+    // (both measure 500/medium live) -- the difference is colour/opacity only:
+    // "Sorted by" at 63% black, the field name at full-strength near-black
+    // (rgb(16,17,18)). The "+N" suffix is smaller (12px vs 14px) and its own
+    // mid-grey (rgb(80,81,85)), not muted-63%-black either -- three distinct
+    // treatments, not two. `sortField` isolates the resolved label so the
+    // default (non-`sortTriggerLabel`) render can wrap each part in its own
+    // span; `sortedLabel` stays a single string for the `sortTriggerLabel`
+    // escape hatch (a caller-supplied formatter can't be split, by definition)
+    // and the empty-state `sortLabel`.
+    const sortField = resolveColumnPath(sortColumns, sorts[0]?.key ?? "").at(-1)?.label;
     const sortedLabel = sortTriggerLabel
         ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${
-            // #754: sorts[0].key may be a dot-joined nested path
-            // ("team.jobTitle") — resolve it the same way the chip and sort
-            // row do, rather than a flat find that fails on a nested key.
-            resolveColumnPath(sortColumns, sorts[0].key).at(-1)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortField}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", _jsx("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && (_jsxs("span", { className: "crisp-tabletoolbar-sorted-count", children: [" ", "+", sorts.length - 1] }))] }))] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -648,7 +698,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                     label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => {
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${activeFilters ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => {
                                 setFieldPickerPath([]);
                                 setOpenMenu(openMenu === "filter" ? null : "filter");
                             }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
@@ -747,43 +797,43 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                 }, children: label }, label))) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", type: col?.type === "number" ? "number" : "text", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the value field
                                     autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })) }))] }, cond.id));
-                }), showViewSettings && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
-                                if (openMenu === "viewsettings") {
-                                    setOpenMenu(null);
-                                }
-                                else {
-                                    setAddingAttribute(false);
-                                    setFieldPickerPath([]);
-                                    setFilterQuery("");
-                                    setOpenMenu("viewsettings");
-                                }
-                            }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel] }), openMenu === "viewsettings" &&
-                            (addingAttribute ? (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
-                                            if (dragAttr !== null)
-                                                e.preventDefault();
-                                        }, onDrop: () => {
-                                            if (dragAttr !== null)
-                                                moveAttr(dragAttr, i);
-                                            setDragAttr(null);
-                                        }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
-                                                setAddingAttribute(true);
-                                                setFieldPickerPath([]);
-                                                setFilterQuery("");
-                                            }, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                }), showViewSettings && !viewSettingsTarget && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && (_jsx(ViewBarSlot, { target: viewSettingsTarget, children: _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => {
+                                    if (openMenu === "viewsettings") {
+                                        setOpenMenu(null);
+                                    }
+                                    else {
+                                        setAddingAttribute(false);
+                                        setFieldPickerPath([]);
+                                        setFilterQuery("");
+                                        setOpenMenu("viewsettings");
+                                    }
+                                }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "viewsettings" &&
+                                (addingAttribute ? (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                                                if (dragAttr !== null)
+                                                    e.preventDefault();
+                                            }, onDrop: () => {
+                                                if (dragAttr !== null)
+                                                    moveAttr(dragAttr, i);
+                                                setDragAttr(null);
+                                            }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
+                                                        `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
+                                                    setAddingAttribute(true);
+                                                    setFieldPickerPath([]);
+                                                    setFilterQuery("");
+                                                }, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }) })), (onImportCsv ||
                     onExportCsv ||
                     onExportExcel ||
-                    importExportHelpHref) && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [_jsx(Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && (_jsxs("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                        onImportCsv();
-                                        setOpenMenu(null);
-                                    }, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                        onExportCsv();
-                                        setOpenMenu(null);
-                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                        onExportExcel();
-                                        setOpenMenu(null);
-                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
-                                    (onImportCsv || onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && (_jsxs("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] })), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                    importExportHelpHref) && (_jsx(ViewBarSlot, { target: importExportTarget, children: _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [_jsx(Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && (_jsxs("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                            onImportCsv();
+                                            setOpenMenu(null);
+                                        }, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                            onExportCsv();
+                                            setOpenMenu(null);
+                                        }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                            onExportExcel();
+                                            setOpenMenu(null);
+                                        }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
+                                        (onImportCsv || onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && (_jsxs("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] }) })), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

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

@@ -71,14 +71,21 @@ const filterChipChrome = `
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; padding: 0 ${c.space["1"]}; }
     & .crisp-tabletoolbar-datepop-preset { height: ${c.size.chip}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.chip}; background: ${c.bgRaised}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }`;
-// #595: the Import/Export trigger — measured live, `app.attio.com`'s own
-// view bar: `28px` tall, `radius.md` (8px), background `bgSurfaceMuted`
-// (`rgb(246,247,247)`, exact match) and `elevation.field`'s exact 3-layer
-// shadow (`inset 0 0 0 1px transparent, 0 0 2px rgba(28,40,64,.18), 0 1px 3px
-// rgba(0,0,0,.04)`) — a "raised chrome button" distinct from Sort/Filter/View
-// settings' plain ringed `.tool` (no background, no elevation shadow), and
-// the only trigger of the four with a trailing chevron (2 icons total,
-// confirmed live). Overrides `.tool`'s own base background/shadow by cascade
+// #595, corrected #772 (re-measured live 2026-09-25): the view bar's raised
+// trigger chrome — `app.attio.com`'s own view bar: `28px` tall, `radius.md`
+// (8px), background `bgSurface` (white, `rgb(255,255,255)` exact match — the
+// #595 pass originally measured `bgSurfaceMuted`/`rgb(246,247,247)`, which
+// re-measuring live this pass shows was wrong, not a later Attio change: ALL
+// THREE of the switcher, View settings and Import/Export read pure white)
+// and `elevation.field`'s exact 3-layer shadow (`inset 0 0 0 1px transparent,
+// 0 0 2px rgba(28,40,64,.18), 0 1px 3px rgba(0,0,0,.04)`) — distinct from
+// Sort/Filter's plain ringed `.tool` (no elevation shadow; see `--dashed` in
+// `tabletoolbar.chrome.ts` for their own OWN empty-state chrome). Originally
+// built for Import/Export alone ("the only trigger... with a trailing
+// chevron") — that was also wrong: View settings and the view switcher both
+// carry one too, confirmed live (3 children each: icon, label, chevron).
+// Now shared by View settings' own trigger (`tabletoolbar.tsx`) as well as
+// Import/Export's. Overrides `.tool`'s own base background/shadow by cascade
 // order (this block is appended after `toolbarChromeBody`, which defines
 // them), the same way `.tool--ghost` already does. `border`/`font-family`/
 // `cursor` are repeated here too, even though `.tool`'s own base rule (in
@@ -88,7 +95,18 @@ const filterChipChrome = `
 // behind `chrome.ts`'s function call is invisible to it; harmless repeats,
 // not a real gap.
 const importExportChrome = `
-    & .crisp-tabletoolbar-tool--raised { border: none; background: ${c.bgSurfaceMuted}; box-shadow: ${e.field}; font-family: inherit; cursor: pointer; }`;
+    & .crisp-tabletoolbar-tool--raised { border: none; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; cursor: pointer; }`;
+// crisp/#788: the Sort trigger's own "Sorted by X (+N)" label, measured live
+// against Attio's own chip -- three parts, not one flat string, and NOT a
+// font-weight split (all three read 500/medium): "Sorted by" is muted (63%
+// black), the resolved field name is full-strength near-black, and a
+// trailing "+N" (when more than one sort is active) is both smaller (12px
+// vs 14px) and its own mid-grey, distinct from the "Sorted by" muted tone.
+// TableToolbar-only, same reasoning as `filterChipChrome` above (RecordsTable
+// keeps its own older Sort label markup, not touched here).
+const sortedLabelChrome = `
+    & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 73%, transparent); }`;
 // The table toolbar, measured: 28px controls, the Sort/Filter buttons and
 // the menus they open, sort-condition rows, and the filter chips. The chrome
 // itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
@@ -107,6 +125,7 @@ ${toolbarChromeHead("tabletoolbar")}
 ${toolbarChromeBody("tabletoolbar")}
 ${filterChipChrome}
 ${importExportChrome}
+${sortedLabelChrome}
     ${rtlFlipCss}
   `,
 });

package/dist/esm/product/recordpage/column.js

@@ -0,0 +1,16 @@
+// deterministic pastel colour per tag value (a select option keeps its colour)
+const TAG_TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+export function tagTone(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TAG_TONES[h % TAG_TONES.length];
+}

package/dist/esm/product/recordpage/recordpage.js

@@ -9,7 +9,8 @@ import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
 import { cx, isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
-import { editableInputType, tagTone, useEditableField, } from "../recordstable/index.js";
+import { tagTone } from "./column.js";
+import { editableInputType, useEditableField } from "./editable-field.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
     return v == null || v === "" || (Array.isArray(v) && v.length === 0);

package/dist/esm/product/recordpage/test-fixtures.js

@@ -0,0 +1,52 @@
+import { AtSign, Briefcase, Building2, Calendar, Globe, Hash, MapPin, Tag, TrendingUp, Users, } from "lucide-react";
+// Moved here from product/recordstable/recordstable.tsx's `defaultColumns`/
+// `defaultRows` (crisp#786): RecordsTable is deprecated and its whole
+// directory is being deleted, but RecordPage's own tests (and the shared
+// RTL-keyboard-convention tests that live alongside them) still need a
+// real, 12-column-deep dataset to exercise "a field past the first 5 needs
+// View all values" and similar shape-dependent assertions. Simplified from
+// the original: no baked-in company-logo data URIs (nothing here asserts on
+// avatars), a plain favicon URL instead.
+export const testColumns = [
+    { key: "company", label: "Company", type: "entity", icon: Building2 },
+    { key: "domain", label: "Domain", type: "url", icon: Globe },
+    {
+        key: "categories",
+        label: "Categories",
+        type: "tags",
+        icon: Tag,
+        width: 240,
+    },
+    {
+        key: "employees",
+        label: "Employees",
+        type: "number",
+        icon: Users,
+        width: 120,
+    },
+    { key: "location", label: "Location", type: "text", icon: MapPin },
+    { key: "stage", label: "Stage", type: "tags", icon: TrendingUp, width: 150 },
+    { key: "ceo", label: "CEO", type: "text", icon: Briefcase, width: 170 },
+    { key: "twitter", label: "Twitter", type: "url", icon: AtSign, width: 150 },
+    {
+        key: "followers",
+        label: "Followers",
+        type: "number",
+        icon: Users,
+        width: 120,
+    },
+    { key: "linkedin", label: "LinkedIn", type: "url", icon: Globe, width: 180 },
+    {
+        key: "founded",
+        label: "Founded",
+        type: "date",
+        icon: Calendar,
+        width: 110,
+    },
+    { key: "arr", label: "Est. ARR", type: "number", icon: Hash, width: 130 },
+];
+// biome-ignore format: one row per line keeps the wide demo dataset readable
+export const testRows = [
+    { id: "google", company: { name: "Google", avatar: "https://www.google.com/s2/favicons?domain=google.com&sz=64" }, domain: "google.com", categories: ["Search", "Ads", "Cloud", "AI", "Android", "Maps", "Hardware", "Workspace", "Chrome"], employees: 182000, location: "Mountain View, CA", stage: ["Public"], ceo: "Sundar Pichai", twitter: "twitter.com/google", followers: 29800000, linkedin: "linkedin.com/company/google", founded: "1998", arr: 307000000000 },
+    { id: "stripe", company: { name: "Stripe", avatar: "https://www.google.com/s2/favicons?domain=stripe.com&sz=64" }, domain: "stripe.com", categories: ["Payments", "Fintech"], employees: 8000, location: "San Francisco, CA", stage: ["Series I"], ceo: "Patrick Collison", twitter: "twitter.com/stripe", followers: 1200000, linkedin: "linkedin.com/company/stripe", founded: "2010", arr: 16000000000 },
+];

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

@@ -1,3 +1,3 @@
-export { editableInputType, useEditableField, } from "./editable-field.js";
+export { editableInputType, useEditableField, } from "../recordpage/editable-field.js";
 export { defaultColumns, defaultRows, RecordsTable, tagTone, } from "./recordstable.js";
 export { recordstableRecipe } from "./recordstable.recipe.js";

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

@@ -512,6 +512,11 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * editing (double-click a text/number/url/date cell), add-row and add-column,
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
+ *
+ * @deprecated Reach for `DataTable` instead — a single Attio-exact records
+ * grid replaces the separate table variants. `RecordsTable` has no
+ * consumers left (checked GRC and the fms/Mercury admin) and is slated for
+ * removal in a future minor.
  */
 export function RecordsTable({ labels, columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", emptyStateExtra, className, ...rest }) {
     const [cols, setCols] = React.useState(columnsProp);

package/dist/esm/product/savedviews/savedviews.recipe.js

@@ -23,24 +23,26 @@ const config = defineRecipe({
     position: relative; display: inline-flex; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
-       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
-       screenshot/anti-aliasing noise, not a second real colour. Reusing the
-       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
-       already-established dark-mode fill for free instead of a light-only
-       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
-       wrong (a flat colour that stayed visible where the reference had
-       none) — this is the opposite risk (a token that already flips per
-       theme, applied to the closest measured match). */
+    /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
+       actual position (Attio's real view bar, next to View settings --
+       fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255)
+       exact) with elevation.field's 3-layer shadow, the same raised
+       chrome View settings and Import/Export both carry
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly
+       since this is a separate recipe/component, but the identical measured
+       values). Supersedes the original #555 measurement (rgb(246,247,247),
+       reused as bgRaised -- a flat grey fill with no shadow at all), which
+       was wrong: this trigger was never re-checked once it moved into its
+       real view-bar position. */
     & .crisp-savedviews-trigger {
       box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
       height: ${c.size.row}; margin: 0; padding: ${c.space["1"]} ${c.space["1.5"]};
-      border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised};
+      border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field};
       font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
       cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
     }
     & .crisp-savedviews-trigger:hover,
-    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgRaised}); }
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: ${c.size.icon}; height: ${c.size.icon}; }
     & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: ${c.fgMuted}; }

package/dist/esm/product/taskstable/taskstable.js

@@ -11,6 +11,11 @@ function Cell({ flex, className, children, }) {
  * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
  * row grouped into due-date sections, a due-date cell that goes red past
  * due, and consumer-supplied record/assignee chip slots.
+ *
+ * @deprecated Reach for `DataTable`'s `groupBy` instead — a single
+ * Attio-exact records grid replaces the separate table variants.
+ * `TasksTable` has no consumers left (checked GRC and the fms/Mercury
+ * admin) and is slated for removal in a future minor.
  */
 export function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }) {
     const crispMessages = useCrispMessages();

package/dist/recordstable.css

@@ -8,12 +8,29 @@
     & .crisp-recordstable-search svg { flex-shrink: 0; }
     & .crisp-recordstable-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-recordstable-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-recordstable-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordstable-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-recordstable-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-recordstable-tool--active { background: var(--crisp-bg-raised); }
+    /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
+       base .tool rule above now already sets; this override existed to
+       distinguish active from a base state that used to be transparent.
+       Kept explicit (not just deleted) so a future change to the base
+       rule's background can't silently change this one too. */
+    & .crisp-recordstable-tool--active { background: var(--crisp-bg-surface); }
     & .crisp-recordstable-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-recordstable-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
+       trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
+       a dashed ::before (1px dashed, border-radius: inherit, absolutely
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's own empty Filter chip (its ::before border computes to exactly "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger drops the dashed pseudo and picks up the base tool's own solid ring
+       instead (the --active modifier, unchanged) -- confirmed on Sort with
+       an actual sort applied. color-mix (not the raw rgba Attio computes
+       to) so both the border and the fill flip correctly in dark mode, the
+       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. */
+    & .crisp-recordstable-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
+    & .crisp-recordstable-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); pointer-events: none; }
+    & .crisp-recordstable-tool--dashed:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     & .crisp-recordstable-toolgroup { position: relative; display: inline-flex; }
     & .crisp-recordstable-divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--crisp-border-subtle); }
     & .crisp-recordstable-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }

package/dist/recordstable.layered.css

@@ -9,12 +9,29 @@
     & .crisp-recordstable-search svg { flex-shrink: 0; }
     & .crisp-recordstable-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-recordstable-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-recordstable-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordstable-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-recordstable-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-recordstable-tool--active { background: var(--crisp-bg-raised); }
+    /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
+       base .tool rule above now already sets; this override existed to
+       distinguish active from a base state that used to be transparent.
+       Kept explicit (not just deleted) so a future change to the base
+       rule's background can't silently change this one too. */
+    & .crisp-recordstable-tool--active { background: var(--crisp-bg-surface); }
     & .crisp-recordstable-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-recordstable-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
+       trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
+       a dashed ::before (1px dashed, border-radius: inherit, absolutely
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's own empty Filter chip (its ::before border computes to exactly "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger drops the dashed pseudo and picks up the base tool's own solid ring
+       instead (the --active modifier, unchanged) -- confirmed on Sort with
+       an actual sort applied. color-mix (not the raw rgba Attio computes
+       to) so both the border and the fill flip correctly in dark mode, the
+       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. */
+    & .crisp-recordstable-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
+    & .crisp-recordstable-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); pointer-events: none; }
+    & .crisp-recordstable-tool--dashed:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     & .crisp-recordstable-toolgroup { position: relative; display: inline-flex; }
     & .crisp-recordstable-divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--crisp-border-subtle); }
     & .crisp-recordstable-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }

package/dist/savedviews.css

@@ -73,24 +73,12 @@
     }
   
 .crisp-savedviews {
-  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
-       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
-       screenshot/anti-aliasing noise, not a second real colour. Reusing the
-       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
-       already-established dark-mode fill for free instead of a light-only
-       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
-       wrong (a flat colour that stayed visible where the reference had
-       none) — this is the opposite risk (a token that already flips per
-       theme, applied to the closest measured match). */
-    & .crisp-savedviews-trigger {
-      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
-      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
-      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
-      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
-      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
-    }
-    & .crisp-savedviews-trigger:hover,
-    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
+       actual position (Attio's real view bar, next to View settings -- fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255) exact) with elevation.field's 3-layer shadow, the same raised
+       chrome View settings and Import/Export both carry
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly since this is a separate recipe/component, but the identical measured values). Supersedes the original #555 measurement (rgb(246,247,247), reused as bgRaised -- a flat grey fill with no shadow at all), which was wrong: this trigger was never re-checked once it moved into its real view-bar position. */
+    & .crisp-savedviews-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
+    & .crisp-savedviews-trigger:hover, & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
     & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }

package/dist/savedviews.layered.css

@@ -74,24 +74,12 @@
     }
   
 .crisp-savedviews {
-  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
-       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
-       screenshot/anti-aliasing noise, not a second real colour. Reusing the
-       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
-       already-established dark-mode fill for free instead of a light-only
-       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
-       wrong (a flat colour that stayed visible where the reference had
-       none) — this is the opposite risk (a token that already flips per
-       theme, applied to the closest measured match). */
-    & .crisp-savedviews-trigger {
-      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
-      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
-      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
-      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
-      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
-    }
-    & .crisp-savedviews-trigger:hover,
-    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
+       actual position (Attio's real view bar, next to View settings -- fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255) exact) with elevation.field's 3-layer shadow, the same raised
+       chrome View settings and Import/Export both carry
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly since this is a separate recipe/component, but the identical measured values). Supersedes the original #555 measurement (rgb(246,247,247), reused as bgRaised -- a flat grey fill with no shadow at all), which was wrong: this trigger was never re-checked once it moved into its real view-bar position. */
+    & .crisp-savedviews-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
+    & .crisp-savedviews-trigger:hover, & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
     & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }