@crisp-ui-kit/crisp 0.54.7 → 0.54.8

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -41,6 +41,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
+const datepicker_1 = require("../datepicker");
 const menu_1 = require("../menu");
 const select_1 = require("../select");
 const tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
@@ -60,11 +61,24 @@ const OP_LABELS = {
     // review.
     empty: "empty",
     notempty: "not empty",
+    lessthan: "less than",
+    greaterthan: "greater than",
+    before: "before",
+    after: "after",
 };
 // #619: order and label set match Attio's own text-filter operator picker
 // verbatim (measured live, per RecordsTable's own #578 port of the same
 // set: contains · does not contain · starts with · ends with · is · is not ·
-// empty · not empty).
+// empty · not empty). #593: number and date columns get their OWN shorter
+// sets instead — also measured live (`app.attio.com`, a Twitter follower
+// count / Foundation date column, each filter added then discarded): number
+// is "is / is not / less than / greater than / empty / not empty" (104.86px
+// wide, 6 rows); date is "is / is not / before / after / empty / not empty"
+// (91.16px, 6 rows) — both narrower than the text set's own 156.5px, which
+// is why `.crisp-tabletoolbar-menu--op`'s old fixed 134px floor is gone (see
+// tabletoolbar.recipe.ts): every one of these three sets is real, live-
+// measured content-driven width, and a floor sized for one of them
+// overshoots the other two.
 const OP_ORDER = [
     "contains",
     "doesnotcontain",
@@ -75,15 +89,44 @@ const OP_ORDER = [
     "empty",
     "notempty",
 ];
+const NUMBER_OP_ORDER = [
+    "is",
+    "isnot",
+    "lessthan",
+    "greaterthan",
+    "empty",
+    "notempty",
+];
+const DATE_OP_ORDER = [
+    "is",
+    "isnot",
+    "before",
+    "after",
+    "empty",
+    "notempty",
+];
 // "isanyof" is appended only for a column that supplies `values` — there is
-// nothing to check off otherwise.
-const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
+// nothing to check off otherwise. A column's `type` picks the base set
+// first; "isanyof" can still follow any of the three (a column's own
+// declared values aren't tied to its underlying number/date/text kind).
+const opsFor = (col) => {
+    const base = col?.type === "number"
+        ? NUMBER_OP_ORDER
+        : col?.type === "date"
+            ? DATE_OP_ORDER
+            : OP_ORDER;
+    return col?.values?.length ? [...base, "isanyof"] : base;
+};
 const opNeedsValue = (op) => op === "contains" ||
     op === "doesnotcontain" ||
     op === "startswith" ||
     op === "endswith" ||
     op === "is" ||
-    op === "isnot";
+    op === "isnot" ||
+    op === "lessthan" ||
+    op === "greaterthan" ||
+    op === "before" ||
+    op === "after";
 const opNeedsValues = (op) => op === "isanyof";
 // "Department is any of IT, Finance" past two values becomes "… +N": the
 // chip is one line, and a field can have far more than two facet values.
@@ -98,9 +141,10 @@ const asText = (v) => {
         return v.join(", ");
     // Before the generic object branch, which would look for `.name`, find none
     // and return "" — turning every Date into the empty string (#185). The ISO
-    // date is stable and locale-independent, so `contains "2026-06"` works; it
-    // will not match "16/06/2026", and a date-aware operator set needs a
-    // date-picker UI, which has to be measured before it can be built.
+    // date is stable and locale-independent, so `contains "2026-06"` works and
+    // (#593) so does `is`/`is not` against a `type: "date"` column's own ISO
+    // condition value — `before`/`after` get a real chronological compare
+    // instead, below.
     if (v instanceof Date)
         return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
     if (typeof v === "object") {
@@ -109,13 +153,67 @@ const asText = (v) => {
     }
     return String(v);
 };
+// #593: `lessthan`/`greaterthan` (number columns) and `before`/`after` (date
+// columns) need a real numeric/chronological compare, not `asText`'s string
+// one — `null` on anything that doesn't parse, so a condition against a
+// malformed or missing value never matches rather than throwing.
+const toNumberOrNull = (v) => {
+    if (typeof v === "number")
+        return Number.isNaN(v) ? null : v;
+    if (typeof v === "string" && v.trim() !== "") {
+        const n = Number(v);
+        return Number.isNaN(n) ? null : n;
+    }
+    return null;
+};
+const toDateOrNull = (v) => {
+    if (v instanceof Date)
+        return Number.isNaN(v.getTime()) ? null : v;
+    if (typeof v === "string" || typeof v === "number") {
+        const d = new Date(v);
+        return Number.isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+};
+// A `type: "date"` condition's own value is stored as a plain ISO date
+// string ("2026-09-25") — machine-comparable (`before`/`after` above,
+// `is`/`is not` via `asText`) and locale-independent, the same choice #185
+// already made for `asText`'s own `Date` branch. Parsed/formatted at local
+// midnight, not UTC, so the picked calendar day and the displayed day are
+// always the same one regardless of timezone offset.
+const isoToDate = (iso) => {
+    if (!iso)
+        return null;
+    const d = new Date(`${iso}T00:00:00`);
+    return Number.isNaN(d.getTime()) ? null : d;
+};
+const dateToISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+// e.g. "Sep 25, 2026" — the same format `DatePickerField`'s own default
+// uses, and what Attio's chip itself showed after picking "Today" live.
+const formatFilterDate = (iso) => {
+    const d = isoToDate(iso);
+    return d
+        ? d.toLocaleDateString(undefined, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        })
+        : iso;
+};
+const toDatePickerDate = (d) => ({
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate(),
+});
+const fromDatePickerDate = (d) => new Date(d.year, d.month - 1, d.day);
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
  * at `row[key]` (override with `get` for derived fields) — never a formatted
  * display string, so a grouped-thousands "$1,200" still matches "1200".
  */
 function applyFilters(rows, filters, get = (row, key) => row[key]) {
-    const active = filters.filter((f) => (!opNeedsValue(f.op) || f.value.trim() !== "") &&
+    const active = filters.filter((f) => f.op != null &&
+        (!opNeedsValue(f.op) || f.value.trim() !== "") &&
         (!opNeedsValues(f.op) || (f.values?.length ?? 0) > 0));
     if (!active.length)
         return rows;
@@ -125,6 +223,20 @@ function applyFilters(rows, filters, get = (row, key) => row[key]) {
             return isEmptyValue(raw);
         if (f.op === "notempty")
             return !isEmptyValue(raw);
+        if (f.op === "lessthan" || f.op === "greaterthan") {
+            const n = toNumberOrNull(raw);
+            const cn = toNumberOrNull(f.value);
+            if (n == null || cn == null)
+                return false;
+            return f.op === "lessthan" ? n < cn : n > cn;
+        }
+        if (f.op === "before" || f.op === "after") {
+            const d = toDateOrNull(raw);
+            const cd = toDateOrNull(f.value);
+            if (d == null || cd == null)
+                return false;
+            return f.op === "before" ? d < cd : d > cd;
+        }
         const t = asText(raw).toLowerCase();
         if (f.op === "isanyof")
             return (f.values ?? []).some((v) => v.toLowerCase() === t);
@@ -183,7 +295,7 @@ 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.
  */
-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, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, ...rest }) {
+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, ...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
@@ -317,11 +429,29 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     };
     const addFilter = (key) => {
         const id = `f${Date.now()}${Math.random().toString(36).slice(2, 6)}`;
-        putFilters([...filters, { id, key, op: "contains", value: "" }]);
+        putFilters([...filters, { id, key, value: "" }]);
         setFilterQuery("");
-        setOpenMenu(`fcond:${id}`);
+        // matches Attio: picking a field opens the operator menu next, not a
+        // combined dialog — measured live, 2026-09-25.
+        setOpenMenu(`fop:${id}`);
     };
     const patchFilter = (id, patch) => putFilters(filters.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+    // The field segment's own picker (#462 follow-up): changing the field
+    // replaces it in place — confirmed live, one chip, not a second — and
+    // resets op/value/values, since neither is guaranteed to make sense for
+    // the new field's type (a text op on a select field, e.g.).
+    const changeFilterField = (id, key) => {
+        patchFilter(id, { key, op: undefined, value: "", values: undefined });
+        setFilterQuery("");
+        setOpenMenu(`fop:${id}`);
+    };
+    // The operator segment's own menu: picking an operator that needs a value
+    // auto-opens the value popover, focused; "empty"/"not empty" need nothing
+    // further, so the menu just closes — both measured live, 2026-09-25.
+    const pickOp = (id, op) => {
+        patchFilter(id, { op });
+        setOpenMenu(opNeedsValue(op) || opNeedsValues(op) ? `fval:${id}` : null);
+    };
     const removeFilter = (id) => {
         putFilters(filters.filter((c) => c.id !== id));
         setOpenMenu(null);
@@ -360,6 +490,23 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         close: () => setOpenMenu(null),
         contentRef: kebabMenuRef,
     });
+    // The operator popover is `role="menu"` too — confirmed live, 2026-09-25 —
+    // so it gets the same shared keyboard model as the kebab above, one hook
+    // call tracking whichever condition's operator menu is open.
+    const opMenuRef = React.useRef(null);
+    const { onKeyDown: onOpKeyDown } = (0, menu_1.useMenuKeyboard)({
+        open: typeof openMenu === "string" && openMenu.startsWith("fop:"),
+        close: () => setOpenMenu(null),
+        contentRef: opMenuRef,
+    });
+    // Shared between the "Filter" trigger's own add-condition picker and each
+    // chip's field segment (#462 follow-up) — both search the same
+    // `filterColumns` list and differ only in what a pick does.
+    const filterFieldPicker = (onSelect) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
+                .filter((col) => col.label.toLowerCase().includes(filterQuery.trim().toLowerCase()))
+                .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => onSelect(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] }));
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template — crisp/#471's
@@ -374,7 +521,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         : sorts.length
             ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -396,47 +543,83 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                     label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `${filterLabel} · ${activeFilters}`
-                                        : filterLabel] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
-                                    // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
-                                    .filter((col) => col.label
-                                    .toLowerCase()
-                                    .includes(filterQuery.trim().toLowerCase()))
-                                    .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
+                                        : filterLabel] }), openMenu === "filter" && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker(addFilter) }))] }), filters.map((cond) => {
                     const col = filterColumns.find((c) => c.key === cond.key);
-                    const open = openMenu === `fcond:${cond.id}`;
+                    const fieldOpen = openMenu === `ffield:${cond.id}`;
+                    const opOpen = openMenu === `fop:${cond.id}`;
+                    const valOpen = openMenu === `fval:${cond.id}`;
                     const kebabOpen = openMenu === `fkebab:${cond.id}`;
-                    const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
+                    // Gates the field/value segments' background (white once the
+                    // condition is usable, the measured `f6f7f7` otherwise) — NOT
+                    // whether the value popover renders; see `showValueSeg` below.
+                    const complete = cond.op != null &&
+                        (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
-                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", 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.op === "isanyof" && col?.values && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
-                                                // biome-ignore lint/a11y/noAutofocus: focus the search field
-                                                autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
-                                                .filter((v) => v
-                                                .toLowerCase()
-                                                .includes(anyOfQuery.trim().toLowerCase()))
-                                                .map((v) => {
-                                                const checked = (cond.values ?? []).includes(v);
-                                                return ((0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
-                                                        const set = new Set(cond.values ?? []);
-                                                        if (next)
-                                                            set.add(v);
-                                                        else
-                                                            set.delete(v);
-                                                        // the column's own order, not click order —
-                                                        // what the chip summary reads out
-                                                        patchFilter(cond.id, {
-                                                            values: col.values?.filter((x) => set.has(x)),
-                                                        });
-                                                    }, children: v }, v));
-                                            })] }))] }))] }, cond.id));
-                }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
+                    // No value segment at all for "empty"/"not empty" (nothing to
+                    // show) or before an operator is even chosen — matches Attio,
+                    // which never renders a third box in either case.
+                    const showValueSeg = cond.op != null &&
+                        (opNeedsValue(cond.op) || opNeedsValues(cond.op));
+                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fcond", "data-complete": complete ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--field", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": fieldOpen, onClick: () => setOpenMenu(fieldOpen ? null : `ffield:${cond.id}`), children: [col?.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 14, strokeWidth: 1.75 }) : null, col?.label] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op
+                                            ? (crispMessages[OP_LABELS[cond.op]] ?? OP_LABELS[cond.op])
+                                            : selectConditionLabel }), showValueSeg && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--val", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": valOpen, onClick: () => setOpenMenu(valOpen ? null : `fval:${cond.id}`), children: cond.op === "isanyof"
+                                            ? cond.values?.length
+                                                ? isAnyOfSummary(cond.values)
+                                                : filterValuePlaceholder
+                                            : cond.value.trim()
+                                                ? col?.type === "date"
+                                                    ? formatFilterDate(cond.value)
+                                                    : cond.value
+                                                : filterValuePlaceholder })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker((key) => changeFilterField(cond.id, key)) })), opOpen && ((0, jsx_runtime_1.jsx)("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                            // biome-ignore lint/a11y/noAutofocus: focus the search field
+                                            autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                            .filter((v) => v
+                                            .toLowerCase()
+                                            .includes(anyOfQuery.trim().toLowerCase()))
+                                            .map((v) => {
+                                            const checked = (cond.values ?? []).includes(v);
+                                            return ((0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
+                                                    const set = new Set(cond.values ?? []);
+                                                    if (next)
+                                                        set.add(v);
+                                                    else
+                                                        set.delete(v);
+                                                    // the column's own order, not click order —
+                                                    // what the chip summary reads out
+                                                    patchFilter(cond.id, {
+                                                        values: col.values?.filter((x) => set.has(x)),
+                                                    });
+                                                }, children: v }, v));
+                                        })] })) : col?.type === "date" ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-datepop", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker, { ...{
+                                                selectionMode: "single",
+                                                value: isoToDate(cond.value)
+                                                    ? toDatePickerDate(isoToDate(cond.value))
+                                                    : undefined,
+                                                onValueChange: (next) => {
+                                                    if (!next)
+                                                        return;
+                                                    patchFilter(cond.id, {
+                                                        value: dateToISO(fromDatePickerDate(next)),
+                                                    });
+                                                    setOpenMenu(null);
+                                                },
+                                            } }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-datepop-presets", children: [
+                                                [crispMessages.Today ?? "Today", 0],
+                                                [crispMessages.Tomorrow ?? "Tomorrow", 1],
+                                                [crispMessages["Next week"] ?? "Next week", 7],
+                                            ].map(([label, addDays]) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-datepop-preset", onClick: () => {
+                                                    const d = new Date();
+                                                    d.setDate(d.getDate() + addDays);
+                                                    patchFilter(cond.id, { value: dateToISO(d) });
+                                                    setOpenMenu(null);
+                                                }, children: label }, label))) })] })) : ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
                                 if (openMenu === "viewsettings") {
                                     setOpenMenu(null);
                                 }
@@ -460,7 +643,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 moveAttr(dragAttr, i);
                                             setDragAttr(null);
                                         }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

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

@@ -4,6 +4,49 @@ exports.tabletoolbarRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 const tabletoolbar_chrome_1 = require("./tabletoolbar.chrome");
+// The filter condition chip, TableToolbar-only (crisp/#462 follow-up,
+// re-measured live 2026-09-25). Deliberately NOT added to the shared
+// `tabletoolbar.chrome.ts` functions: those also render under RecordsTable's
+// own `crisp-recordstable-` prefix, whose still-tested (84 cases) chip
+// predates this re-measurement and keeps its original `.fchip`/`.fchip-main`
+// markup (one combined field+op+value button, plus a small floating kebab)
+// until RecordsTable is rebuilt onto DataTable + TableToolbar and inherits
+// this one instead. New, disjoint class names here so nothing shared changes
+// meaning under the older markup.
+//
+// Measured on Attio's own chip (`app.attio.com/<ws>/companies`, a text-field
+// condition): 4 independently-clickable, edge-to-edge segments, each 28px
+// tall with its own `inset 0 0 0 1px` ring — field (radius 8/0/0/8), operator
+// (flat), value (flat), kebab (radius 0/8/8/0). Background is NOT fixed per
+// segment: the field and value segments (the two that show the condition's
+// own text) read `rgb(246,247,247)` while the condition has no value yet and
+// flip to white the instant it does (typing a value, or picking an operator
+// like "empty" that needs none, both trigger it); the operator and kebab
+// segments (pure controls, no text of the condition's own) stay white
+// throughout. Click targets, confirmed live: the field segment reopens the
+// attribute picker and replaces this condition's field in place (not a
+// second chip); the operator segment opens an operator-only menu (closing it
+// after a pick, then auto-opening the value popover, focused, when that
+// operator needs one — "empty"/"not empty" just close); the value segment
+// opens a value-only popover/input, independent of the operator menu (Attio
+// never combines the two, unlike crisp's older single dialog).
+const filterChipChrome = `
+    & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.row}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; }
+    & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: ${tokens_1.contract.bgSurfaceMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDivider}; font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
+    & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: ${tokens_1.contract.radius.md} 0 0 ${tokens_1.contract.radius.md}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-tabletoolbar-fcond-seg--field svg { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tabletoolbar-fcond-seg--op { background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tabletoolbar-fcond-seg--val { font-weight: ${tokens_1.contract.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-tabletoolbar-fcond-seg--kebab { background: ${tokens_1.contract.bgSurface}; justify-content: center; width: 28px; padding: 0; border-radius: 0 ${tokens_1.contract.radius.md} ${tokens_1.contract.radius.md} 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-tabletoolbar-menu--val { min-width: 134px; }
+    & .crisp-tabletoolbar-datepop { width: 300px; }
+    & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: ${tokens_1.contract.space["1"]}; margin-top: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["1"]}; }
+    & .crisp-tabletoolbar-datepop-preset { height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.chip}; background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; cursor: pointer; }
+    & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, 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
@@ -20,6 +63,7 @@ const config = (0, core_1.defineRecipe)({
     & * { box-sizing: border-box; }
 ${(0, tabletoolbar_chrome_1.toolbarChromeHead)("tabletoolbar")}
 ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("tabletoolbar")}
+${filterChipChrome}
   `,
 });
 exports.tabletoolbarRecipe = (0, core_1.resolveRecipe)(config);

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

@@ -14,7 +14,16 @@ const tokens_1 = require("../../tokens");
 // inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
-// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// gap, 14/500 labels. The count badge (crisp#697, re-measured against a
+// record's tab counts and a settings "Attributes 35" count) is 14px
+// tall/wide-min, radius 4px (no scale token lands there -- a recipe-local
+// literal, same precedent as this file's own icon/gap literals), 10/500/14
+// text on a 4% `fgPrimary` tint (`rgba(0,0,0,.04)`) with a measured
+// `inset 0 0 0 1px borderSubtle` ring, text `fgNeutralSoft` (rgb(80,81,85),
+// the same token Badge's neutral tone uses, #696) -- was 16px/r6/11px/
+// `fgMuted`/6% tint with no ring at all. The selected tab's own badge
+// colour (`fgPrimary`) wasn't measured (the live Overview tab carries no
+// count) and stays as-is.
 //
 // The panel's own `padding-top` (`c.space["8"]`, 32px) is measured
 // separately, live, on a company record page (Overview tab): the gap from
@@ -45,7 +54,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
-    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 4px; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-size: 10px; line-height: 14px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgNeutralSoft}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${tokens_1.contract.space["8"]}; }

package/dist/cjs/components/tooltip/tooltip.js

@@ -103,12 +103,24 @@ style: _style, ...rest }, forwardedRef) => {
         if (!el)
             return;
         const r = el.getBoundingClientRect();
-        const below = side === "bottom" || r.top < 48;
-        setPos({
-            left: Math.round(r.left + r.width / 2),
-            top: Math.round(below ? r.bottom + 6 : r.top - 6),
-            below,
-        });
+        const placement = side === "right"
+            ? "right"
+            : side === "bottom" || r.top < 48
+                ? "bottom"
+                : "top";
+        setPos(placement === "right"
+            ? {
+                // Measured (crisp#633): the bubble's left edge sits 8px past
+                // the trigger's right edge, vertically centred on it.
+                left: Math.round(r.right + 8),
+                top: Math.round(r.top + r.height / 2),
+                placement,
+            }
+            : {
+                left: Math.round(r.left + r.width / 2),
+                top: Math.round(placement === "bottom" ? r.bottom + 6 : r.top - 6),
+                placement,
+            });
     }, [open, side]);
     const openAfterDelay = () => {
         clearTimeout(timer.current);
@@ -155,9 +167,11 @@ style: _style, ...rest }, forwardedRef) => {
         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: tipId, role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)({ variant }), style: {
                 left: pos.left,
                 top: pos.top,
-                transform: pos.below
-                    ? "translate(-50%, 0)"
-                    : "translate(-50%, -100%)",
+                transform: pos.placement === "right"
+                    ? "translate(0, -50%)"
+                    : pos.placement === "bottom"
+                        ? "translate(-50%, 0)"
+                        : "translate(-50%, -100%)",
             }, children: content }), document.body);
     if (asChild) {
         // No wrapper at all: the child carries the hover/focus/Escape

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

@@ -16,14 +16,15 @@ const tokens_1 = require("../../tokens");
 // just the wrong pair.
 //
 // crisp#563: this `boxShadow` is Attio's PLAIN tooltip (a truncated header
-// label, measured on "Twitter follower count") — still an uncorroborated
-// single sample, flagged for its own re-measurement pass, not touched here.
-// Attio has a SECOND, visually similar but structurally different tooltip
-// for a reference-column header (icon + the referenced type's name after
-// the label, crisp#580) with its own measured shadow — an inset ring plus
-// two offset shadows, `variant: "reference"` below. Background, text
-// colour, radius, padding and font are identical between the two measured
-// samples; only the shadow differs.
+// label, measured on "Twitter follower count"). Re-measured live and
+// corroborated against a second sample (hovering the same field a second
+// time) per AUTHORING.md Lesson 22 — the value below is an inset ring plus
+// two offset shadows, not the single offset shadow this recipe carried
+// before. Attio has a SECOND, visually similar but structurally different
+// tooltip for a reference-column header (icon + the referenced type's name
+// after the label, crisp#580) with its own measured shadow, `variant:
+// "reference"` below. Background, text colour, radius, padding and font are
+// identical between the two measured samples; only the shadow differs.
 const spec = (0, core_1.defineSpec)({
     name: "tooltip",
     base: {
@@ -40,7 +41,7 @@ const spec = (0, core_1.defineSpec)({
         fontSize: tokens_1.contract.text.sm,
         fontWeight: tokens_1.contract.weight.medium,
         lineHeight: "1.45",
-        boxShadow: "0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04)",
+        boxShadow: "rgb(33,34,36) 0 0 0 1px inset, rgba(0,0,0,0.04) 0 0 2px 0, rgba(0,0,0,0.12) 0 1px 3px 0",
         opacity: 1,
         transition: "opacity 0.12s ease",
     },