@crisp-ui-kit/crisp 0.49.0 → 0.51.0

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

@@ -7,7 +7,7 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "datatable",
     base: `display: flex; flex-direction: column; gap: ${c.space["2.5"]}; font-family: ${c.font.sans};
-    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; min-height: 49px; border-top: 1px solid ${c.borderSubtle}; }
     & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
     & .crisp-datatable-search svg { position: absolute; inset-inline-start: ${c.space["2"]}; color: ${c.fgMuted}; pointer-events: none; }
     & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; transition: box-shadow .15s; }
@@ -48,10 +48,16 @@ const config = defineRecipe({
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     & .crisp-datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
-    & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
-    & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
+    /* A right-aligned column's header keeps its field-icon + label packed at
+       the START, matching its own values only in that the VALUES right-align
+       -- Attio's own right-aligned header (measured live: "Twitter follower
+       count") keeps the icon+label left and only the trailing column-menu
+       icon sits pinned to the right edge, independent of the label's width
+       (#406, reversing #393's own justify-content: flex-end here). The
+       chevron's own margin-inline-start: auto below already pins IT to the
+       end of a flex-start row with no override needed -- that's what pins
+       the trailing icon on Attio too. */
     & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
     & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
     & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
@@ -74,6 +80,34 @@ const config = defineRecipe({
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
+    & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: ${c.space["1"]}; color: ${c.fgMuted}; vertical-align: middle; }
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a
+       hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need
+       guarding against. */
+    & .crisp-datatable-edit-error { display: block; padding: ${c.space["0.5"]} 0 0; font-size: ${c.text.sm}; color: ${c.bgDanger}; }
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so
+       the cell IS the picker: same chromeless-fill treatment as
+       RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
+    & .crisp-datatable-td--picker { padding: 0; }
+    & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
+    & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
+    & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: ${c.space["2"]}; }
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- same measured
+       values as RecordsTable's own .crisp-recordstable-refoption*. */
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
+    & .crisp-datatable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }

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

@@ -1,2 +1,8 @@
 export { DataTable, } from "./datatable.js";
+// `EntityValue` (identical shape, `{ name: string; avatar?: string }`) is
+// deliberately NOT re-exported here: `product/recordstable`'s own barrel
+// already exports a type of that name at the package root, and re-exporting
+// this module's copy too makes `EntityValue` an ambiguous export (TS2308) --
+// verified by trying it. A DataTable consumer needing the type imports it
+// from there; it's the same shape either table would want.
 export { datatableRecipe } from "./datatable.recipe.js";

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarDays } from "lucide-react";
+import { CalendarDays, X } from "lucide-react";
 import * as React from "react";
 import { DatePicker, } from "../datepicker/index.js";
 import { Popover } from "../popover/index.js";
@@ -21,7 +21,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, clearable = true, clearLabel = "Clear date", presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -33,19 +33,29 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
         onChange?.(d);
         setOpen(false);
     };
-    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
-                    // DatePickerProps is a union over selectionMode, and TypeScript
-                    // cannot narrow it through a spread: it tries every branch and
-                    // reports the range one as missing props. The field is always
-                    // single-select, so the shape is pinned here rather than inferred.
-                    , { ...{
-                            ...calendarProps,
-                            selectionMode: "single",
-                            value: selected ? fromDate(selected) : undefined,
-                            onValueChange: (next) => {
-                                if (next)
-                                    pick(toDate(next));
-                            },
-                        } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+    const clear = () => {
+        if (value === undefined)
+            setInternal(null);
+        onValueChange?.(null);
+        onChange?.(null);
+    };
+    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [_jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
+                            // DatePickerProps is a union over selectionMode, and TypeScript
+                            // cannot narrow it through a spread: it tries every branch and
+                            // reports the range one as missing props. The field is always
+                            // single-select, so the shape is pinned here rather than inferred.
+                            , { ...{
+                                    ...calendarProps,
+                                    selectionMode: "single",
+                                    value: selected ? fromDate(selected) : undefined,
+                                    onValueChange: (next) => {
+                                        if (next)
+                                            pick(toDate(next));
+                                    },
+                                } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }), clearable && selected && (_jsx("button", { type: "button", className: "crisp-datepickerfield-clear", "aria-label": clearLabel, onClick: (e) => {
+                        // not the trigger button's own click -- Popover would open
+                        e.stopPropagation();
+                        clear();
+                    }, children: _jsx(X, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }) }));
 }
 DatePickerField.displayName = "DatePickerField";

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

@@ -9,18 +9,35 @@ const config = defineRecipe({
     base: `
     display: inline-flex; font-family: ${c.font.sans};
 
-    & .crisp-datepickerfield-trigger {
-      display: inline-flex; align-items: center; gap: ${c.space["2"]};
-      box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0;
-      border: none; border-radius: ${c.radius.md}; background: transparent;
+    & .crisp-datepickerfield-box {
+      display: inline-flex; align-items: center;
+      box-sizing: border-box; height: 32px; margin: 0;
+      border-radius: ${c.radius.md}; background: transparent;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
       color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg};
-      white-space: nowrap; cursor: pointer;
     }
-    & .crisp-datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .crisp-datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-    & .crisp-datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-datepickerfield-trigger {
+      display: inline-flex; align-items: center; gap: ${c.space["2"]};
+      height: 100%; padding: 0 ${c.space["2.5"]}; margin: 0;
+      border: none; background: none; color: inherit; font-family: inherit;
+      font-size: inherit; white-space: nowrap; cursor: pointer;
+    }
+    & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: ${c.fgMuted}; }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    /* Reuses TableToolbar's measured filter-chip remove button
+       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same
+       small inline "clear this value" affordance, not a freshly-measured
+       one: no live Attio composition for a DatePickerField-equivalent
+       clear was reachable this round (#394). */
+    & .crisp-datepickerfield-clear {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; margin-inline-end: ${c.space["1"]}; padding: 0;
+      border: none; border-radius: ${c.radius.sm}; background: none;
+      color: ${c.fgMuted}; font-family: inherit; cursor: pointer;
+    }
+    & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); color: ${c.fgPrimary}; }
 
     & .crisp-datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
     & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }

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

@@ -5,6 +5,13 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
 // 2-layer black shadow) with a bordered header (title + close), a scrollable
 // body, and a bordered footer for the primary action.
+//
+// #414: the footer's submit-key caps (⌘/Enter) used to be one span drawing a
+// visible pill (18px, 22%-white background). Attio's own are two separate
+// TRANSPARENT 16x16 glyphs, 4px apart. Their 3px/10px/4px measured values sit
+// between crisp's token steps (space has no 3px, radius starts at 6px, text
+// starts at 11px) — raw px per Golden Rule 3's "genuinely intrinsic size"
+// exception, same as a chip's odd 7px corner.
 const config = defineRecipe({
     name: "dialog",
     base: `display: contents; font-family: ${c.font.sans};
@@ -23,7 +30,8 @@ const config = defineRecipe({
     & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
     & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: ${c.fgOnBrand}; font-family: inherit; font-style: normal; font-size: 10px; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/menu/menu.js

@@ -12,7 +12,7 @@ const MenuContext = React.createContext(null);
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
     // The surface and the button that opens it were two unconnected nodes: the
     // menu/dialog had no id, so nothing could point at it, and no accessible
     // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
@@ -123,7 +123,9 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: contentClassName
+                        ? `crisp-menu-content ${contentClassName}`
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -19,6 +19,12 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // intact WITHIN the portaled subtree, only the link back to the
 // trigger-holding root broke). A flat recordstable-tag selector also works
 // unchanged wherever it's rendered, portaled or not, so it needs no split.
+// This is a third, hand-pasted copy of `recordTagCss`
+// (product/recordstable/recordstable.tag.ts) rather than a splice of it:
+// that helper is written `& .crisp-recordstable-tag { ... }` for nesting
+// under a recipe's `base`, which doesn't compile to anything inside a flat
+// `globalCss` block. Keep the two in sync by hand (#380 added the measured
+// `box-shadow: inset 0 0 0 1px <tone ring colour>` here to match).
 const config = defineRecipe({
     name: "multiselect",
     base: `
@@ -74,14 +80,14 @@ const config = defineRecipe({
     .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
     .crisp-multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgSuccess} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgWarning} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgDanger} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgPurple} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgCyan} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgOrange} 30%, transparent); }
   `,
     variants: {
         // Same ring Select's `invalid` draws — see that recipe's comment.

package/dist/esm/components/select/select.js

@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", onSearchChange, emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -165,6 +165,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                 onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
+                                        onSearchChange?.(e.target.value);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
                             // #343: a header renders once per run of same-`group`

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

@@ -11,11 +11,11 @@ const config = defineRecipe({
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: none; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: start; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,
@@ -28,8 +28,17 @@ const config = defineRecipe({
         // card (default): the bordered rounded surface, unchanged for existing
         // consumers. bleed: drops the outer border/radius/inset so the grid runs
         // edge-to-edge, like RecordsTable's real full-page records grid.
+        //
+        // #439: th/tfoot td now carry their own top/bottom border (below) so a
+        // bleed table's header and calc footer close the same way Attio's own
+        // do. card's own 4-side border already draws that top/bottom edge, so
+        // strip the cells' copies there -- same reasoning as `:last-child`
+        // dropping the inline-end border and `tbody tr:last-child` dropping the
+        // bottom one: the container's edge wins, cells never double it.
         surface: {
-            card: `border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; overflow: hidden;`,
+            card: `border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; overflow: hidden;
+        & th { border-top: none; }
+        & tfoot td { border-bottom: none; }`,
             bleed: `border: none; border-radius: 0;`,
         },
     },

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

@@ -15,11 +15,12 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // split preserves that cascade exactly, which is what lets the generated CSS
 // stay byte-for-byte identical to what shipped before the extraction.
 export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
+    & .${CLASS_PREFIX}${p}-toolbar[data-inline] { padding-bottom: 0; }
     & .${CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
     & .${CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
     & .${CLASS_PREFIX}${p}-search input::placeholder { color: ${c.fgMuted}; }
-    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${CLASS_PREFIX}${p}-tool:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .${CLASS_PREFIX}${p}-tool--active { background: ${c.bgRaised}; }

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

@@ -110,8 +110,19 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * `RecordsTable` renders this same measured chrome internally; this is the
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
+ *
+ * Sort and Filter read the same `columns` list by default, but can be given
+ * their own (`sortColumns`/`filterColumns`) when a consumer's two menus
+ * genuinely offer different fields — Attio's own Tasks page does exactly
+ * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
+ * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+    // Each side falls back to the shared `columns` independently — a caller
+    // that only overrides one (Filter's own Record/Created by, say) still
+    // gets `columns` on the other, unchanged from before either prop existed.
+    const sortColumns = sortColumnsProp ?? columns ?? [];
+    const filterColumns = filterColumnsProp ?? columns ?? [];
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
     const sorts = sortsProp ?? sortsState;
@@ -158,7 +169,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     }, [openMenu]);
     const addSort = () => {
         const used = new Set(sorts.map((s) => s.key));
-        const col = columns.find((c) => !used.has(c.key));
+        const col = sortColumns.find((c) => !used.has(c.key));
         if (col)
             putSorts([...sorts, { key: col.key, dir: "asc" }]);
     };
@@ -197,18 +208,18 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template.
     const sortedLabel = sortTriggerLabel
-        ? sortTriggerLabel(sorts, columns)
+        ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            ? `Sorted by ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", children: [_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: [_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) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
+                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: sortColumns.map((c) => ({
                                                 value: c.key,
                                                 label: c.icon ? (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                 keywords: c.label,
@@ -229,12 +240,12 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                         ? `Filter · ${activeFilters}`
                                         : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_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) }), columns
+                                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
                                     .filter((col) => col.label
                                     .toLowerCase()
                                     .includes(filterQuery.trim().toLowerCase()))
                                     .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
-                    const col = columns.find((c) => c.key === cond.key);
+                    const col = filterColumns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
@@ -263,3 +274,22 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                             })] }))] }))] }, cond.id));
                 }), _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
+ * (#399) — for a control drawn like Sort/Filter that isn't Sort or Filter (a
+ * screen's own quick filter, e.g.). `.crisp-tabletoolbar-tool` alone renders
+ * unstyled: the rule lives nested under `TableToolbar`'s own root class, the
+ * same way every other rule in its shared chrome does, so it only paints on
+ * a descendant of an actual `TableToolbar`. This wraps one in, `display:
+ * contents` so it contributes no box of its own — the same technique
+ * `TableToolbar`'s own root already uses to disappear from layout.
+ */
+export const ToolbarTool = React.forwardRef(({ active, ghost, className, ...rest }, ref) => (_jsx("span", { className: tabletoolbarRecipe(), children: _jsx("button", { ref: ref, type: "button", className: [
+            "crisp-tabletoolbar-tool",
+            active && "crisp-tabletoolbar-tool--active",
+            ghost && "crisp-tabletoolbar-tool--ghost",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), ...rest }) })));
+ToolbarTool.displayName = "ToolbarTool";

package/dist/esm/core/cell-date.js

@@ -31,3 +31,13 @@ export function formatCellDate(d) {
     const pad = (n) => String(n).padStart(2, "0");
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 }
+export function cellDatePrecision(raw) {
+    const m = DATE_ONLY.exec(raw);
+    if (!m)
+        return "day";
+    if (!m[2])
+        return "year";
+    if (!m[3])
+        return "month";
+    return "day";
+}

package/dist/esm/core/index.js

@@ -1,4 +1,4 @@
-export { formatCellDate, parseCellDate } from "./cell-date.js";
+export { cellDatePrecision, formatCellDate, parseCellDate, } from "./cell-date.js";
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";

package/dist/esm/index.js

@@ -15,6 +15,7 @@ export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
 export * from "./components/chip/index.js";
 export * from "./components/columncalc/index.js";
+export * from "./components/composewindow/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";
 export * from "./components/datepicker/index.js";