@crisp-ui-kit/crisp 0.56.0 → 0.57.1

package/dist/accentpicker.css

@@ -0,0 +1,5 @@
+.crisp-accentpicker {
+  display: flex; gap: var(--crisp-space-2);
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: var(--crisp-radius-full); border: 1px solid transparent; background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
+}

package/dist/accentpicker.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface AccentpickerVariants {
+
+}
+
+export declare const accentpickerRecipe: RecipeFn<{  }>;

package/dist/accentpicker.layered.css

@@ -0,0 +1,7 @@
+@layer crisp-components {
+.crisp-accentpicker {
+  display: flex; gap: var(--crisp-space-2);
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: var(--crisp-radius-full); border: 1px solid transparent; background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
+}
+}

package/dist/avatar.css

@@ -24,7 +24,7 @@
   background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
-  background: var(--crisp-bg-brand-solid); color: #fff;
+  background: var(--crisp-bg-brand-contrast); color: #fff;
 }
 .crisp-avatar--tone_orange {
   background: var(--crisp-bg-orange); color: #fff;

package/dist/avatar.layered.css

@@ -25,7 +25,7 @@
   background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
-  background: var(--crisp-bg-brand-solid); color: #fff;
+  background: var(--crisp-bg-brand-contrast); color: #fff;
 }
 .crisp-avatar--tone_orange {
   background: var(--crisp-bg-orange); color: #fff;

package/dist/badge.css

@@ -36,13 +36,13 @@
   
 }
 .crisp-badge--compound_0 {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: none;
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: none;
 }
 .crisp-badge--compound_1 {
   background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_2 {
-  background: var(--crisp-bg-warning); color: var(--crisp-fg-on-tone); box-shadow: none;
+  background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_3 {
   background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); box-shadow: none;

package/dist/badge.layered.css

@@ -37,13 +37,13 @@
   
 }
 .crisp-badge--compound_0 {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: none;
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: none;
 }
 .crisp-badge--compound_1 {
   background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_2 {
-  background: var(--crisp-bg-warning); color: var(--crisp-fg-on-tone); box-shadow: none;
+  background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_3 {
   background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); box-shadow: none;

package/dist/button.css

@@ -3,9 +3,9 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
-    &:hover { background: var(--crisp-bg-brand-solid-pressed); }
-    &:active { background: var(--crisp-bg-brand-solid-pressed); }
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+    &:hover { filter: brightness(0.96); }
+    &:active { filter: brightness(0.92); }
 }
 .crisp-button--intent_neutral {
   background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);

package/dist/button.layered.css

@@ -4,9 +4,9 @@
     &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
-    &:hover { background: var(--crisp-bg-brand-solid-pressed); }
-    &:active { background: var(--crisp-bg-brand-solid-pressed); }
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
+    &:hover { filter: brightness(0.96); }
+    &:active { filter: brightness(0.92); }
 }
 .crisp-button--intent_neutral {
   background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);

package/dist/callout.css

@@ -14,3 +14,9 @@
     &[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
     &[data-tone="danger"] .crisp-callout-icon { color: var(--crisp-bg-danger); }
 }
+.crisp-callout--bordered_true {
+  border: 1px solid var(--crisp-ring-brand-soft); border-radius: var(--crisp-radius-xl); padding: var(--crisp-space-2) var(--crisp-space-3); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent);
+}
+.crisp-callout--bordered_false {
+  
+}

package/dist/callout.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface CalloutVariants {
-
+  bordered?: boolean;
 }
 
-export declare const calloutRecipe: RecipeFn<{  }>;
+export declare const calloutRecipe: RecipeFn<{ bordered: { true: string; false: string } }>;

package/dist/callout.layered.css

@@ -14,5 +14,11 @@
     &[data-tone="warning"] .crisp-callout-icon { color: var(--crisp-bg-warning); }
     &[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
     &[data-tone="danger"] .crisp-callout-icon { color: var(--crisp-bg-danger); }
+}
+.crisp-callout--bordered_true {
+  border: 1px solid var(--crisp-ring-brand-soft); border-radius: var(--crisp-radius-xl); padding: var(--crisp-space-2) var(--crisp-space-3); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent);
+}
+.crisp-callout--bordered_false {
+  
 }
 }

package/dist/cjs/components/accentpicker/accentpicker.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccentPicker = AccentPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const radiogroup_1 = require("../radiogroup");
+const accentpicker_recipe_1 = require("./accentpicker.recipe");
+/**
+ * A row of selectable colour swatches — Attio's own accent-colour picker
+ * (Settings > Appearance). Not a fixed palette: pass the colours (and the
+ * accent isn't crisp's concern to theme the app with — this only picks one).
+ * Same roving-focus/arrow-key model every other crisp radio-like control
+ * shares (`useRadioGroupKeyboard`, also used by `RadioGroup` and
+ * `Segmented`).
+ */
+function AccentPicker({ colors, value, defaultValue, onValueChange, className, onKeyDown: onKeyDownProp, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value ?? internal;
+    const select = (v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    };
+    const { onKeyDown, groupRef } = (0, radiogroup_1.useRadioGroupKeyboard)({ select });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: groupRef, role: "radiogroup", className: (0, accentpicker_recipe_1.accentpickerRecipe)({ className }), ...rest, onKeyDown: (e) => {
+            onKeyDown(e);
+            onKeyDownProp?.(e);
+        }, children: colors.map((color) => {
+            const checked = selected === color;
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": checked, "aria-label": color, "data-value": color, tabIndex: checked ? 0 : -1, className: "crisp-accentpicker-swatch", style: { borderColor: checked ? color : "transparent" }, onClick: () => select(color), children: (0, jsx_runtime_1.jsx)("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "9", fill: color }) }) }, color));
+        }) }));
+}
+AccentPicker.displayName = "AccentPicker";

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accentpickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A row of selectable colour swatches — measured live on Attio's Appearance
+// settings page (crisp#635): `role="radiogroup"`, `display: flex; gap: 8px`.
+// Each swatch is a 24x24 circular button, `border: 1px solid transparent`
+// at rest; the CHECKED swatch's border switches to its own colour (not a
+// fixed brand ring) — measured directly on the DOM (`border: 1px solid
+// rgb(38,109,240)` on the checked blue swatch, `1px solid rgba(0,0,0,0)` on
+// every unchecked one). That per-swatch colour is data, not a class, so it's
+// set inline by the component, not here. Inside sits a 22x22 SVG with one
+// solid r=9 (18px) circle -- no separate ring/dot layer, contrary to an
+// earlier, less precise read of this same control.
+const config = (0, core_1.defineRecipe)({
+    name: "accentpicker",
+    base: `display: flex; gap: ${tokens_1.contract.space["2"]};
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 24px; height: 24px; padding: 0; margin: 0; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid transparent;
+      background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }`,
+});
+exports.accentpickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/accentpicker/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accentpickerRecipe = exports.AccentPicker = void 0;
+var accentpicker_1 = require("./accentpicker");
+Object.defineProperty(exports, "AccentPicker", { enumerable: true, get: function () { return accentpicker_1.AccentPicker; } });
+var accentpicker_recipe_1 = require("./accentpicker.recipe");
+Object.defineProperty(exports, "accentpickerRecipe", { enumerable: true, get: function () { return accentpicker_recipe_1.accentpickerRecipe; } });

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

@@ -39,7 +39,10 @@ const spec = (0, core_1.defineSpec)({
                 color: tokens_1.contract.fgNeutralMuted,
                 boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
             },
-            brand: { background: tokens_1.contract.bgBrandSolid, color: "#fff" },
+            // your-moon/crisp#897: `bgBrandContrast`, the darker AA-safe sibling
+            // of the accent blue (`bgBrandSolid`, #0298d9, only 3.23:1 with
+            // white) -- keeps white text, matching every other tone here.
+            brand: { background: tokens_1.contract.bgBrandContrast, color: "#fff" },
             orange: { background: tokens_1.contract.bgOrange, color: "#fff" },
             cyan: { background: tokens_1.contract.bgCyan, color: "#fff" },
             purple: { background: tokens_1.contract.bgPurple, color: "#fff" },

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

@@ -129,8 +129,14 @@ const spec = (0, core_1.defineSpec)({
         {
             variant: "solid",
             tone: "brand",
+            // your-moon/crisp#897: `bgBrandContrast`, not `bgBrandSolid` — white
+            // text on the exact accent blue (#0298d9) only clears 3.23:1;
+            // `bgBrandContrast` is the darker sibling built to clear 4.5:1+ with
+            // white, so `fgOnBrand` (white) stays right rather than `fgOnTone`
+            // (ink read off-brand next to solid `success`/`warning`/`danger`,
+            // which really do need it).
             decls: {
-                background: tokens_1.contract.bgBrandSolid,
+                background: tokens_1.contract.bgBrandContrast,
                 color: tokens_1.contract.fgOnBrand,
                 boxShadow: "none",
             },
@@ -143,7 +149,15 @@ const spec = (0, core_1.defineSpec)({
         {
             variant: "solid",
             tone: "warning",
-            decls: { background: tokens_1.contract.bgWarning, color: tokens_1.contract.fgOnTone, boxShadow: "none" },
+            // seed-identity migration (your-moon/crisp#890): `bgWarningSolid`, not
+            // `bgWarning` — seed's own solid warning fill is a distinct, paler
+            // yellow from the accent every other tone's solid fill reuses
+            // directly (see tokens/palette.ts's `amberSolid` comment).
+            decls: {
+                background: tokens_1.contract.bgWarningSolid,
+                color: tokens_1.contract.fgOnTone,
+                boxShadow: "none",
+            },
         },
         {
             variant: "solid",

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

@@ -30,7 +30,13 @@ const spec = (0, core_1.defineSpec)({
         intent: {
             primary: {
                 decls: {
-                    background: tokens_1.contract.bgBrandSolid,
+                    // your-moon/crisp#897: `bgBrandContrast`, not `bgBrandSolid` —
+                    // white text on the exact accent blue (#0298d9) only clears
+                    // 3.23:1; `bgBrandContrast` is the darker sibling built to clear
+                    // white at 4.5:1+, keeping `fgOnBrand` (white) rather than
+                    // reaching for `fgOnTone` (ink read off-brand — seed's own solid
+                    // buttons use white).
+                    background: tokens_1.contract.bgBrandContrast,
                     color: tokens_1.contract.fgOnBrand,
                     // crisp#494: the inset ring is a black tint, not white -- live-
                     // measured on Attio's own "New Company" button as
@@ -39,12 +45,16 @@ const spec = (0, core_1.defineSpec)({
                     // exactly.
                     boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
                 },
+                // your-moon/crisp#897: a brightness filter, not a second background
+                // swap — matches `danger`'s own pattern below. `bgBrandSolidPressed`
+                // remains the accent's own hover-darken for the many OTHER
+                // consumers that pair `bgBrandSolid` with white already (out of
+                // scope for this fix; tracked separately), so reusing it here would
+                // have made primary's rest-to-hover jump inconsistent with its own
+                // rest fill's new, darker starting point.
                 parts: [
-                    { selector: "&:hover", decls: { background: tokens_1.contract.bgBrandSolidPressed } },
-                    {
-                        selector: "&:active",
-                        decls: { background: tokens_1.contract.bgBrandSolidPressed },
-                    },
+                    { selector: "&:hover", decls: { filter: "brightness(0.96)" } },
+                    { selector: "&:active", decls: { filter: "brightness(0.92)" } },
                 ],
             },
             neutral: {

package/dist/cjs/components/callout/callout.js

@@ -15,11 +15,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`.
  */
-function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
+function Callout({ tone = "neutral", icon, title, children, action, bordered, className, ...rest }) {
     const Fallback = DEFAULT_ICONS[tone];
     const iconNode = icon === undefined
         ? Fallback && (0, jsx_runtime_1.jsx)(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
         : icon;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, callout_recipe_1.calloutRecipe)({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && (0, jsx_runtime_1.jsx)("span", { className: "crisp-callout-icon", children: iconNode }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-callout-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-title", children: title }), children != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-desc", children: children }))] }), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-action", children: action })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, callout_recipe_1.calloutRecipe)({ bordered, className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && (0, jsx_runtime_1.jsx)("span", { className: "crisp-callout-icon", children: iconNode }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-callout-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-title", children: title }), children != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-desc", children: children }))] }), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-action", children: action })] }));
 }
 Callout.displayName = "Callout";

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

@@ -21,8 +21,21 @@ const config = (0, core_1.defineRecipe)({
     &[data-tone="warning"] .crisp-callout-icon { color: ${tokens_1.contract.bgWarning}; }
     &[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
     &[data-tone="danger"] .crisp-callout-icon { color: ${tokens_1.contract.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 ${tokens_1.contract.ringBrandSoft}; border-radius: ${tokens_1.contract.radius.xl}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent);`,
+            false: "",
+        },
+    },
+    defaultVariants: { bordered: false },
     compoundVariants: [],
 });
 exports.calloutRecipe = (0, core_1.resolveRecipe)(config);

package/dist/cjs/components/input/input.js

@@ -37,11 +37,11 @@ exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const input_recipe_1 = require("./input.recipe");
-exports.Input = React.forwardRef(({ size, invalid, className, style, ...props }, ref) => {
+exports.Input = React.forwardRef(({ size, invalid, className, style, suffix, ...props }, ref) => {
     // The wrapper exists only to host the ::after focus ring — an <input> is a
     // replaced element and cannot have one. Everything the consumer passes
     // still lands on the <input> itself, so `id`, `name`, `onChange`, form
     // association and every native attribute behave exactly as before.
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, "data-readonly": props.readOnly ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }), suffix != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-input-suffix", children: suffix })] }));
 });
 exports.Input.displayName = "Input";

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

@@ -41,9 +41,23 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-input-value::placeholder { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
     &:has(.crisp-input-value:disabled) { opacity: 1; }
+
+    /* crisp#634: measured live on Attio's own Settings > Profile read-only
+       primary-email field -- a tinted field, not just muted text, driven off
+       the native \`readOnly\` attribute. \`ringField\` (rgba(0,0,0,.06)) is an
+       exact match for the measured ring; the 2%-fgPrimary tint reuses the
+       same color-mix idiom every other soft crisp surface already uses. */
+    &[data-readonly] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 2%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.ringField}; }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["1"]}; }
   `,
     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: ${tokens_1.contract.size.row}; border-radius: ${tokens_1.contract.radius.md}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
             medium: `height: 32px; border-radius: ${tokens_1.contract.radius.md}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
             large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
         },

package/dist/cjs/components/menu/menu.js

@@ -168,13 +168,13 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
                         : "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: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
-function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
+function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {
     const ctx = React.useContext(MenuContext);
     return ((0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
+        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), count != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-count", children: count }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
 }
 MenuItem.displayName = "MenuItem";
 function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {

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

@@ -57,6 +57,14 @@ const config = (0, core_1.defineRecipe)({
     .crisp-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
     .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent);
+      box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgNeutralSoft};
+      font-variant-numeric: tabular-nums; }
     .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; letter-spacing: 0.02em; }
     .crisp-menu-item-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
     .crisp-menu-item-check--placeholder { width: 15px; }

package/dist/cjs/components/multiselect/multiselect.js

@@ -60,16 +60,18 @@ function Chip({ opt }) {
     return ((0, jsx_runtime_1.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.
  */
 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 = "small", variant = "default", className, "aria-label": ariaLabel, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = (0, core_1.useCrispMessage)(placeholderProp, "Select…");
     const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search…");
@@ -106,8 +108,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) {
@@ -116,7 +122,7 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
             // direction that is (#210)
             const { style, up: flipUp } = (0, core_1.placeFloating)({
                 rect,
-                gap: 4,
+                gap: 8, // seed-design's gutter (crisp/#882, matching Select; was 4)
                 flipBelow: 300,
                 anchor: triggerRef.current,
             });
@@ -161,6 +167,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
@@ -198,11 +208,14 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ invalid, className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ size, variant, invalid, className }), ...rest, children: [name &&
+                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.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();
                     }