@crisp-ui-kit/crisp 0.55.6 → 0.57.0

package/dist/cjs/product/recordpage/recordpage.js

@@ -76,8 +76,12 @@ exports.recordPageLabels = {
     copyRecordLink: "Copy record link",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
-    logANote: "Log a note",
-    createATask: "Create a task",
+    // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
+    // task" — the field names stay, only the visible text changes to match
+    // Attio's own React-tooltip strings on these two icon buttons exactly).
+    logANote: "New note",
+    createATask: "New task",
+    runWorkflow: "Run workflow",
     fullScreen: "Full screen",
     exitFullScreen: "Exit full screen",
     resizeDetails: "Resize details column",
@@ -457,7 +461,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }) {
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
@@ -566,6 +570,15 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         },
     ];
     const highlights = highlightsProp === undefined ? defaultHighlights : highlightsProp;
+    // #865: the built-in CRM icon set for the quick-action row, used when the
+    // caller omits `quickActions` -- same "caller's own list, not a merge"
+    // choice `tabs` (#379) and `highlights` (#528) already make.
+    const defaultQuickActions = [
+        { label: t.logANote, icon: lucide_react_1.FileText },
+        { label: t.runWorkflow, icon: lucide_react_1.Workflow },
+        { label: t.createATask, icon: lucide_react_1.SquareCheck },
+    ];
+    const quickActions = quickActionsProp ?? defaultQuickActions;
     const ti = { size: 15, strokeWidth: 1.75 };
     const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { ...ti }) },
@@ -674,7 +687,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.

package/dist/cjs/tokens/elevation.js

@@ -59,4 +59,11 @@ exports.elevation = {
      * nobody measured for them.
      */
     fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+    /**
+     * Select's own listbox shadow (crisp/#867) — seed-design's `$shadow.s3`, a
+     * single layer, NOT `floating` above. This component follows seed, not
+     * Attio, for the same reason `DatePicker` follows seed's calendar
+     * structure: an explicit owner request to match seed-design exactly.
+     */
+    selectFloating: `0 4px 16px ${contract_1.contract.shadowSelect}`,
 };

package/dist/cjs/tokens/palette.js

@@ -47,6 +47,15 @@ exports.palette = {
     // both themes (Switch's own spec), so this reuses ringField's dark value
     // rather than inventing a third "field-adjacent ring, dark" colour.
     ringSwitch: { light: "#d9dade", dark: "#212224" },
+    // Callout's bordered/banner look (crisp#869) — measured live on Attio's
+    // Objects settings page (the "Create custom objects... Upgrade" Pro-plan
+    // banner): `border: 1px solid rgb(214,229,255)`, an opaque colour, not a
+    // composited tint of `bgBrandSolid` (checked: no single color-mix
+    // percentage matches all three channels at once). Dark value not
+    // independently re-measured (Attio's own theme toggle is off-limits) —
+    // reuses `ringField`/`ringSwitch`'s existing dark ring (#212224), the same
+    // "edge visible against a dark surface" role those already establish.
+    ringBrandSoft: { light: "#d6e5ff", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
     // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
@@ -162,4 +171,36 @@ exports.palette = {
     purpleTint: { light: "#f5f0ff", dark: "#2f1e5a" },
     softPurpleText: { light: "#6238b5", dark: "#d8c4ff" },
     purpleRing: { light: "#e8ddfe", dark: "#45297d" },
+    // Select rebuilt to seed-design parity (crisp/#867), NOT Attio -- a
+    // deliberate one-component exception, the same way DatePicker already
+    // follows seed's calendar structure. Values below are resolved directly
+    // from `@seed-design/rootage`'s color.yaml (gray palette), not measured
+    // live, since there is no Attio reference for this component anymore.
+    // gray-00 / gray-200 (bg.layer-floating) -- the listbox surface. Distinct
+    // from `popoverBg` (crisp's Attio-measured popover, #fff/#17181a): the dark
+    // value differs (#1d2025), so this is its own token, not a reuse.
+    selectListboxBg: { light: "#ffffff", dark: "#1d2025" },
+    // gray-400 (stroke.neutral-weak) -- the trigger's real 1px border at rest.
+    selectTriggerStroke: { light: "#dcdee3", dark: "#393d46" },
+    // static-black/white-alpha (bg.transparent-pressed) -- the trigger/item
+    // press tint. Deliberately alpha, not a gray, so it reads the same over
+    // either surface colour.
+    selectPressedTint: { light: "#00000007", dark: "#ffffff0d" },
+    // gray-200 / gray-300 (bg.disabled) -- the trigger's disabled AND readonly
+    // fill. Distinct from `neutralWeak` (light matches, dark is #1d2025 not
+    // #2b2e35), so its own token rather than a reuse.
+    selectDisabledBg: { light: "#f3f4f5", dark: "#2b2e35" },
+    // red-700 (stroke.critical-solid) -- the trigger's invalid border. Distinct
+    // from crisp's own `bgDangerSolid`/`red700` (#ba2525, an Attio red): seed's
+    // red is a different hue entirely, and this component follows seed.
+    selectInvalidStroke: { light: "#fa342c", dark: "#ff6e60" },
+    // static-black/white-alpha (stroke.neutral-muted) -- the listbox's own
+    // divider slot (defined in select.yaml; not yet exposed on any consumer).
+    selectDivider: { light: "#00000010", dark: "#ffffff17" },
+    // gray-600 (fg.placeholder) -- distinct from `neutralSubtle` (its light/dark
+    // pair is the same two hexes, swapped), so its own token, not a reuse.
+    selectPlaceholder: { light: "#b0b3ba", dark: "#868b94" },
+    // s3 (shadow.yaml) -- the listbox's single-layer floating shadow, in place
+    // of crisp's own multi-layer `elevation.floating` for this component only.
+    selectShadow: { light: "#0000001f", dark: "#000000cc" },
 };

package/dist/cjs/tokens/scale.js

@@ -20,6 +20,7 @@ exports.space = {
     "2": "8px",
     "2.5": "10px",
     "3": "12px",
+    "3.5": "14px", // seed-design's $dimension.x3_5 — Select's medium trigger paddingX (crisp/#867)
     "4": "16px",
     "5": "20px",
     "6": "24px",
@@ -34,6 +35,7 @@ exports.radius = {
     lg: "9px", // rows, tiles, list items
     xl: "12px", // overlay items (command rows)
     "2xl": "16px", // overlay panels (command surface)
+    "3xl": "20px", // seed-design's $radius.r5 — Select's listbox corner (crisp/#867)
     full: "999px", // pills
 };
 // Component sizing — recurring measured dimensions that are neither spacing nor
@@ -52,12 +54,25 @@ exports.size = {
     // whole cells and a column gap would cut it.
     calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
     calendarPill: "32px", // the day highlight itself
+    // seed-design's Select, resolved from select-trigger.yaml/select-item.yaml
+    // (crisp/#867) — this component follows seed, not Attio, so these sit
+    // alongside the measured scale rather than folding into it.
+    selectTriggerMd: "40px", // $dimension.x10 — the medium (default) trigger height
+    selectTriggerLg: "52px", // $dimension.x13 — the large trigger height
+    selectIconLg: "20px", // $dimension.x5 — large trigger's chevron
 };
 // Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
 // weights are 400/500/600 with 500 the UI default.
+//
+// `"VK Sans Display"` leads the stack: an owner override (your-moon/crisp#857),
+// not a remeasure of Attio. It only ever matches an INSTALLED copy of the font
+// via the `local()`-only `@font-face` rules in dist/tokens.css (see
+// build/generate-fonts.mjs for why — VK Sans Display's license has no
+// redistribution grant, so crisp never ships the font files). Everywhere it
+// isn't installed, this falls straight through to Inter, unchanged.
 exports.font = {
-    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+    sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
 };
 exports.text = {
     xs: "11px",

package/dist/cjs/tokens/semantic.js

@@ -85,4 +85,22 @@ exports.semantic = {
     bgPurpleSoft: "purpleTint",
     fgPurpleSoft: "softPurpleText",
     ringPurpleSoft: "purpleRing",
+    /** Callout's bordered/banner look (crisp#869) — an opaque measured ring,
+     *  not a `color-mix` tint of `bgBrandSolid` (see palette.ts's own comment). */
+    ringBrandSoft: "ringBrandSoft",
+    /** Select rebuilt to seed-design parity (crisp/#867) — see palette.ts's
+     *  comment above `selectListboxBg` for why these are their own tokens
+     *  rather than a reuse of an Attio-measured one. */
+    /** Seed's neutral ink (gray-1000) used as TEXT/icon colour — same palette
+     *  entry as `strokeFieldFocus` (a ring), aliased separately because the
+     *  role here is content colour, not a focus ring. */
+    fgSelectNeutral: "fieldFocus",
+    bgSelectListbox: "selectListboxBg",
+    strokeSelectTrigger: "selectTriggerStroke",
+    bgSelectPressed: "selectPressedTint",
+    bgSelectDisabled: "selectDisabledBg",
+    strokeSelectInvalid: "selectInvalidStroke",
+    strokeSelectDivider: "selectDivider",
+    fgSelectPlaceholder: "selectPlaceholder",
+    shadowSelect: "selectShadow",
 };

package/dist/esm/components/callout/callout.js

@@ -12,11 +12,11 @@ const DEFAULT_ICONS = {
  * An inline callout / banner — measured from info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
-export function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
+export function Callout({ tone = "neutral", icon, title, children, action, bordered, className, ...rest }) {
     const Fallback = DEFAULT_ICONS[tone];
     const iconNode = icon === undefined
         ? Fallback && _jsx(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
         : icon;
-    return (_jsxs("div", { className: calloutRecipe({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "crisp-callout-icon", children: iconNode }), _jsxs("div", { className: "crisp-callout-body", children: [title != null && _jsx("div", { className: "crisp-callout-title", children: title }), children != null && (_jsx("div", { className: "crisp-callout-desc", children: children }))] }), action && _jsx("div", { className: "crisp-callout-action", children: action })] }));
+    return (_jsxs("div", { className: calloutRecipe({ bordered, className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "crisp-callout-icon", children: iconNode }), _jsxs("div", { className: "crisp-callout-body", children: [title != null && _jsx("div", { className: "crisp-callout-title", children: title }), children != null && (_jsx("div", { className: "crisp-callout-desc", children: children }))] }), action && _jsx("div", { className: "crisp-callout-action", children: action })] }));
 }
 Callout.displayName = "Callout";

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

@@ -18,8 +18,21 @@ const config = defineRecipe({
     &[data-tone="warning"] .crisp-callout-icon { color: ${c.bgWarning}; }
     &[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
     &[data-tone="danger"] .crisp-callout-icon { color: ${c.bgDanger}; }`,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // crisp#869: a page-level banner look, measured live on Attio's Objects
+        // settings page (the "Create custom objects... Upgrade" Pro-plan
+        // nudge) — a real 1px opaque border, 12px radius, 8px/12px padding, and
+        // a 14%-brand-tinted background (the same `color-mix` ratio Badge's own
+        // soft-brand variant already uses). Only this one brand/info-toned
+        // instance was found live; `bordered` doesn't attempt a per-tone border
+        // colour for success/warning/danger — no such Attio banner was found to
+        // measure one against.
+        bordered: {
+            true: `border: 1px solid ${c.ringBrandSoft}; border-radius: ${c.radius.xl}; padding: ${c.space["2"]} ${c.space["3"]}; background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent);`,
+            false: "",
+        },
+    },
+    defaultVariants: { bordered: false },
     compoundVariants: [],
 });
 export const calloutRecipe = resolveRecipe(config);

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

@@ -41,6 +41,12 @@ const config = defineRecipe({
   `,
     variants: {
         size: {
+            // crisp#878: not a fresh click-measurement -- reuses `TableToolbar`'s
+            // own compact search box shape (`tabletoolbar.chrome.ts`'s `-search`
+            // rule), already corroborated against Attio, at the same height as
+            // `c.size.row` ("nav item · search · control height"). Same radius and
+            // padding `medium` already uses, just 4px shorter.
+            sm: `height: ${c.size.row}; border-radius: ${c.radius.md}; & .crisp-input-value { padding-inline: ${c.space["2.5"]}; }`,
             medium: `height: 32px; border-radius: ${c.radius.md}; & .crisp-input-value { padding-inline: ${c.space["2.5"]}; }`,
             large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${c.space["3"]}; }`,
         },

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

@@ -128,13 +128,13 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
                         : "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, }) {
+export function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {
     const ctx = React.useContext(MenuContext);
     return (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, _jsx("span", { className: "crisp-menu-item-label", children: children }), shortcut && _jsx("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
+        }, children: [icon, _jsx("span", { className: "crisp-menu-item-label", children: children }), count != null && _jsx("span", { className: "crisp-menu-item-count", children: count }), shortcut && _jsx("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
 }
 MenuItem.displayName = "MenuItem";
 export function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {

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

@@ -54,6 +54,14 @@ const config = defineRecipe({
     .crisp-menu-item--danger svg { color: ${c.bgDanger}; }
     .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
     .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    /* crisp#875: same measured neutral chip TableToolbar's own ToolbarTool
+       count prop uses (re-confirmed on two live Attio surfaces this round:
+       the Sort tool's own "+N" overflow, a Kanban board's stage-column
+       count) -- a small badge, not bare text. */
+    .crisp-menu-item-count { flex-shrink: 0; margin-inline-start: ${c.space["1.5"]}; display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent);
+      box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft};
+      font-variant-numeric: tabular-nums; }
     .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
     .crisp-menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
     .crisp-menu-item-check--placeholder { width: 15px; }

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

@@ -24,16 +24,18 @@ function Chip({ opt }) {
     return (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**
- * A multi-select / tag editor — measured from a cell tag picker. The
- * outlined trigger shows the selected values as coloured chips; it opens a
- * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
- * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
+ * A multi-select / tag editor, its trigger/listbox/item chrome built to the
+ * same seed-design parity as `Select` (crisp/#882, following #867/#879) —
+ * its own chip/checkbox picker behaviour is unchanged. The outlined trigger
+ * shows the selected values as coloured chips; it opens a popover with a
+ * search field over rows of "[chip] … [checkbox]" that toggle on click (the
+ * menu stays open). Keyboard: ↑/↓ move, Enter/Space toggle, Esc closes.
  */
 export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, 
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, size = "medium", variant = "default", className, "aria-label": ariaLabel, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = useCrispMessage(placeholderProp, "Select…");
     const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search…");
@@ -70,8 +72,12 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
     const filtered = searchable && q
         ? options.filter((o) => o.label.toLowerCase().includes(q))
         : options;
+    // seed-design's `interactive` (crisp/#882, matching Select): disabled AND
+    // readOnly both refuse to open, but only `disabled` greys the text and
+    // removes the button from the tab order.
+    const interactive = !disabled && !readOnly;
     const openMenu = () => {
-        if (disabled)
+        if (!interactive)
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
@@ -80,7 +86,7 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
             // direction that is (#210)
             const { style, up: flipUp } = placeFloating({
                 rect,
-                gap: 4,
+                gap: 8, // seed-design's gutter (crisp/#882, matching Select; was 4)
                 flipBelow: 300,
                 anchor: triggerRef.current,
             });
@@ -125,6 +131,10 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
         close,
         // Tab is already moving focus out; `close` would drag it back to the trigger
         dismiss: () => setOpen(false),
+        // Space also toggles the highlighted option (crisp/#882, matching
+        // Select's Enter/Space parity) when the trigger itself owns navigation.
+        // Never when searchable -- see Select's own comment on this option.
+        commitOnSpace: !searchable,
     });
     // Registers the (now-portaled) listbox on the shared floating-layer stack
     // (#339) so this doesn't get closed out from under itself when nested
@@ -162,11 +172,14 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", 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-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ size, variant, invalid, className }), ...rest, children: [name &&
+                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", 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, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                    if (!interactive)
+                        return;
                     if (open && !searchable)
                         onNavKeys(e);
-                    else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
+                    else if (!open &&
+                        (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
                         e.preventDefault();
                         openMenu();
                     }

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

@@ -1,30 +1,26 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-// A multi-select / tag editor — measured from a cell tag picker: an
-// outlined trigger showing the selected values as coloured chips, opening a
-// popover with a search field over rows of "[coloured chip] … [checkbox]" that
-// toggle on click. The popover portals to document.body (#339) so no
-// ancestor's transform/backdrop-filter can capture its position: fixed box;
-// z-index 70 keeps it above Dialog/Drawer's 60/61.
-// The listbox and everything inside it (including the recordstable-tag
-// chips, which render inside listbox option rows as well as the trigger)
-// live in `globalCss` below, not nested under `&` (#357): nesting compiles
-// to a real descendant combinator scoped to the recipe's root class, which
-// needs actual DOM containment — exactly what the portal to `document.body`
-// breaks. Nested, these rules matched nothing once the listbox moved and it
-// rendered completely unstyled. The trigger and its own parts stay nested
-// under `&` — the trigger is NOT portaled. `font-family`/smoothing are
-// restated on the listbox's own rule (its children pick font up via their
-// own `font-family: inherit`, which still works — that inheritance is
-// 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).
+// MultiSelect reads as the same family as Select (crisp/#882, following
+// #867/#879): the trigger/listbox/item chrome below reuses Select's
+// seed-design tokens verbatim (`strokeSelectTrigger`, `bgSelectPressed`,
+// `bgSelectDisabled`, `strokeSelectInvalid`, `bgSelectListbox`,
+// `selectFloating`, `fgSelectNeutral`, `fgSelectPlaceholder`, `radius["3xl"]`,
+// `size.selectTriggerMd/Lg`) rather than resolving a second seed spec --
+// seed-design has no multi-value combobox of its own (`packages/rootage/
+// components/` has no `combobox`/`multiselect`; `chip.yaml`/`tag-group*.yaml`
+// are a different, standalone pill pattern, not a field's multi-value
+// trigger). What stays untouched: the `.crisp-recordstable-tag` chip
+// styling (shared with RecordsTable/DataTable elsewhere), the checkbox-style
+// selected indicator, and the toggle-without-closing interaction.
+//
+// The search row's geometry (36px height, 6px gap, no divider) is an
+// Attio measurement (#481) `build/spec-check.mjs` guards directly -- it is
+// NOT part of the seed-parity change and must not move. Only its text/icon
+// colours follow the rest of this file onto the shared tokens.
+//
+// The listbox portals to `document.body` (#339), so its rules live in
+// `globalCss`, not nested under `&` -- see Select's own recipe for the full
+// reasoning (identical here).
 const config = defineRecipe({
     name: "multiselect",
     base: `
@@ -32,53 +28,63 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .crisp-multiselect-trigger {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; min-width: 0; min-height: ${c.size.menuRow};
-      margin: 0; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]};
-      border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; text-align: start;
-      transition: background-color .12s ease, box-shadow .12s ease;
+      box-sizing: border-box; display: flex; align-items: center; width: 100%; min-width: 0; margin: 0;
+      border: 1px solid ${c.strokeSelectTrigger}; background: transparent; cursor: pointer; text-align: start;
+      font-family: inherit; color: ${c.fgSelectNeutral};
+      transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1);
     }
-    & .crisp-multiselect-trigger:hover { background: ${c.bgRaised}; }
-    & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
-    & .crisp-multiselect-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* Same pressed/disabled/readonly/focus model as Select's trigger -- see
+       that recipe's comment for why hover and an open/focus ring are gone. */
+    & .crisp-multiselect-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: ${c.bgSelectPressed}; }
+    & .crisp-multiselect-trigger:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px; }
+    & .crisp-multiselect-trigger:disabled { background: ${c.bgSelectDisabled}; cursor: not-allowed; }
+    & .crisp-multiselect-trigger:disabled .crisp-multiselect-placeholder,
+    & .crisp-multiselect-trigger:disabled .crisp-multiselect-chevron { color: ${c.fgDisabled}; }
+    & .crisp-multiselect-trigger[aria-readonly="true"] { background: ${c.bgSelectDisabled}; cursor: default; }
     & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; }
-    & .crisp-multiselect-placeholder { color: ${c.fgMuted}; }
-    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
-    & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
+    & .crisp-multiselect-placeholder { color: ${c.fgSelectPlaceholder}; }
+    /* closeRotateDuration/openRotateDuration, same asymmetric timing as
+       Select's own chevron (see that recipe's comment). */
+    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${c.fgNeutralMuted}; transition: transform .1s cubic-bezier(.35,0,.35,1); }
+    & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); transition-duration: .15s; }
   `,
     globalCss: `
-    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
-       on document.body while open (Zag re-enables it only on layers IT
-       tracks), and the portaled listbox is outside Zag's knowledge -- it
-       inherited the lock, so every option was unclickable, hit-testing
-       right through to whatever real element sat behind it. */
+    /* pointer-events: auto (#375) -- see Select's matching comment. */
     .crisp-multiselect-listbox {
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
-      max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
-      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
-      box-shadow: ${e.floating};
-      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space["2"]};
+      max-height: 480px; overflow-y: auto; padding: ${c.space["2"]};
+      border-radius: ${c.radius["3xl"]}; background: ${c.bgSelectListbox};
+      box-shadow: ${e.selectFloating};
+      transform-origin: top left; opacity: 1; transform: none;
+      transition: opacity .15s cubic-bezier(0,0,.15,1), transform .15s cubic-bezier(0,0,.15,1);
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
-    .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    .crisp-multiselect-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: ${c.space["2"]} ${c.space["3"]}; color: ${c.fgMuted}; }
+    .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
+    /* LOCKED geometry (#481, guarded by build/spec-check.mjs): height 36px,
+       gap space["1.5"] (6px), no border-bottom -- an Attio measurement, not
+       part of this seed-parity pass. Only colours below follow Select. */
+    .crisp-multiselect-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${c.space["2"]}) calc(-1 * ${c.space["2"]}) ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]}; color: ${c.fgNeutralMuted}; }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
-    .crisp-multiselect-search input::placeholder { color: ${c.fgMuted}; }
-    /* #343: same measured values as Menu's own group heading
-       (crisp-menu-label) -- reused rather than re-measured, since it's the
-       same "small muted heading above a run of rows" treatment. */
-    .crisp-multiselect-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgSelectNeutral}; }
+    .crisp-multiselect-search input::placeholder { color: ${c.fgSelectPlaceholder}; }
+    /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
+    .crisp-multiselect-label { padding: ${c.space["2"]} ${c.space["4"]} 0; font-size: ${c.text.md}; line-height: 18px; font-weight: ${c.weight.regular}; color: ${c.fgNeutralSubtle}; }
     .crisp-multiselect-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
-      padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; cursor: pointer; text-align: start;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0;
+      padding: ${c.space["2.5"]} ${c.space["4"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.xl};
+      font-family: inherit; text-align: start; cursor: pointer;
+      transition: background-color .15s cubic-bezier(.35,0,.35,1);
     }
+    /* Keyboard/hover highlight keeps crisp's own visible neutral fill, same
+       reasoning as Select's matching rule (seed's own pressed tint is too
+       faint for a keyboard-navigation indicator). */
     .crisp-multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
+    .crisp-multiselect-option:active { background: ${c.bgSelectPressed}; }
     .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
     .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
     .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-multiselect-empty { padding: ${c.space["3"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgNeutralSubtle}; }
 
     .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); }
@@ -90,18 +96,42 @@ const config = defineRecipe({
     .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.
-        invalid: {
-            true: `
-        & .crisp-multiselect-trigger,
-        & .crisp-multiselect-trigger:hover,
-        & .crisp-multiselect-trigger[data-open],
-        & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }
+        // seed's two trigger sizes, same tokens as Select's. medium is the
+        // default -- closest to crisp's previous single size.
+        size: {
+            medium: `
+        & .crisp-multiselect-trigger { min-height: ${c.size.selectTriggerMd}; border-radius: ${c.radius.md}; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["3.5"]}; }
+        & .crisp-multiselect-chevron { width: ${c.size.icon}; height: ${c.size.icon}; }
+      `,
+            large: `
+        & .crisp-multiselect-trigger { min-height: ${c.size.selectTriggerLg}; border-radius: ${c.radius.xl}; gap: ${c.space["2.5"]}; padding: ${c.space["1.5"]} ${c.space["4"]}; }
+        & .crisp-multiselect-chevron { width: ${c.size.selectIconLg}; height: ${c.size.selectIconLg}; }
       `,
+        },
+        // Real border width+colour change, same as Select's -- see that
+        // recipe's comment.
+        invalid: {
+            true: `& .crisp-multiselect-trigger { border-width: 2px; border-color: ${c.strokeSelectInvalid}; }`,
             false: ``,
         },
+        // ghost: fills whatever row it's embedded in instead of seed's fixed
+        // trigger height -- RecordsTable's TagsCell embeds a MultiSelect inline
+        // in a 36px table row, the exact regression #879 caught for Select's
+        // own datatable consumers. Not a seed state; crisp's own escape hatch.
+        //
+        // Declared LAST on purpose, same reasoning as Select's recipe: same-
+        // specificity CSS rules resolve by source order, and ghost's
+        // `min-height: 0; height: 100%` below must come after `size`'s fixed
+        // min-height to win the cascade.
+        variant: {
+            default: "",
+            ghost: `
+        & .crisp-multiselect-trigger { min-height: 0; height: 100%; border-color: transparent; }
+        & .crisp-multiselect-trigger:hover:not(:disabled) { background: ${c.bgSelectPressed}; }
+      `,
+        },
     },
-    defaultVariants: { invalid: false },
+    defaultVariants: { size: "medium", invalid: false, variant: "default" },
     compoundVariants: [],
 });
 export const multiselectRecipe = Object.assign(resolveRecipe(config), {