@crisp-ui-kit/crisp 0.57.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/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/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,6 +41,14 @@ 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: {

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

@@ -71,7 +71,7 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, n
 // 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, readOnly, invalid, size = "medium", variant = "default", 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…");

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

@@ -99,9 +99,18 @@ const config = (0, core_1.defineRecipe)({
     .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgOrange} 30%, transparent); }
   `,
     variants: {
-        // seed's two trigger sizes, same tokens as Select's. medium is the
-        // default -- closest to crisp's previous single size.
+        // Owner's follow-up after #867/#879/#882 (crisp/#889): SIZE is Attio's
+        // again, LOOK stays seed's -- see Select's own recipe comment for the
+        // full reasoning (measured live in GRC's "New employee" dialog: a 40px
+        // trigger next to a 32px `Input` visibly mismatched). `small` is the new
+        // default: `c.size.menuRow` (32px) and the original, pre-#882
+        // Attio-measured asymmetric padding for a chip-wrapping trigger.
+        // `medium`/`large` (seed's own 40/52px) stay, opt-in.
         size: {
+            small: `
+        & .crisp-multiselect-trigger { min-height: ${tokens_1.contract.size.menuRow}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["2"]}; }
+        & .crisp-multiselect-chevron { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; }
+      `,
             medium: `
         & .crisp-multiselect-trigger { min-height: ${tokens_1.contract.size.selectTriggerMd}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3.5"]}; }
         & .crisp-multiselect-chevron { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; }
@@ -134,7 +143,7 @@ const config = (0, core_1.defineRecipe)({
       `,
         },
     },
-    defaultVariants: { size: "medium", invalid: false, variant: "default" },
+    defaultVariants: { size: "small", invalid: false, variant: "default" },
     compoundVariants: [],
 });
 exports.multiselectRecipe = Object.assign((0, core_1.resolveRecipe)(config), {

package/dist/cjs/components/progress/progress.js

@@ -4,11 +4,12 @@ exports.Progress = Progress;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const progress_recipe_1 = require("./progress.recipe");
 /**
- * A progress bar — a continuous brand fill, or a segmented row of pills when
- * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
- * `role="progressbar"` and the ARIA value attributes.
+ * A progress bar — a continuous brand fill, a segmented row of pills when
+ * `segments` is set (the "Getting started 3/6" pattern), or a small ring
+ * (`variant="circular"`, a character-counter's own progress). Reports its
+ * state via `role="progressbar"` and the ARIA value attributes.
  */
-function Progress({ value, max = 100, segments, "aria-label": ariaLabel, className, ...rest }) {
+function Progress({ value, max = 100, segments, variant = "linear", size = 18, "aria-label": ariaLabel, className, ...rest }) {
     const pct = Math.max(0, Math.min(100, (value / max) * 100));
     const aria = {
         role: "progressbar",
@@ -17,6 +18,22 @@ function Progress({ value, max = 100, segments, "aria-label": ariaLabel, classNa
         "aria-valuemax": max,
         "aria-label": ariaLabel,
     };
+    if (variant === "circular") {
+        // Measured live: an 18x18 SVG, r=7.4, stroke-width 1.6 (a 0.6px margin on
+        // each side) — a two-circle ring (a soft-tinted track + a brand arc),
+        // the same track tint Badge/Callout's own `soft(bgBrandSolid, 14%)`
+        // formula already gives.
+        const strokeWidth = size * (1.6 / 18);
+        const r = size / 2 - strokeWidth;
+        const circumference = 2 * Math.PI * r;
+        const offset = circumference * (1 - pct / 100);
+        // The measured sample was at value=0 (a full, invisible offset either
+        // way), so the arc's start point couldn't be read off that one DOM
+        // snapshot -- 12 o'clock is the conventional start for this shape and
+        // isn't itself in tension with anything measured, but isn't independently
+        // confirmed at a nonzero value either.
+        return ((0, jsx_runtime_1.jsx)("div", { ...aria, className: (0, progress_recipe_1.progressRecipe)({ className }), ...rest, "data-variant": "circular", children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "crisp-progress-circle-track", r: r, cx: size / 2, cy: size / 2, strokeWidth: strokeWidth, fill: "transparent" }), (0, jsx_runtime_1.jsx)("circle", { className: "crisp-progress-circle-fill", r: r, cx: size / 2, cy: size / 2, strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})` })] }) }));
+    }
     if (segments && segments > 0) {
         const filled = Math.round((pct / 100) * segments);
         return ((0, jsx_runtime_1.jsx)("div", { ...aria, className: (0, progress_recipe_1.progressRecipe)({ className }), ...rest, "data-segmented": "", children: Array.from({ length: segments }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));

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

@@ -52,6 +52,36 @@ const spec = (0, core_1.defineSpec)({
             selector: "&[data-segmented] .crisp-progress-seg[data-filled]",
             decls: { background: tokens_1.contract.bgBrandSolid },
         },
+        // crisp#634: measured live on Attio's own Settings > Profile
+        // character-counter ring — the track tint is the same
+        // `soft(bgBrandSolid, 14%)` formula Badge/Callout already use (measured
+        // rgb(229,238,255), within the same noise this codebase already treats
+        // as equivalent), the arc is the plain brand fill.
+        {
+            selector: '&[data-variant="circular"]',
+            decls: {
+                display: "inline-flex",
+                height: "auto",
+                borderRadius: "0",
+                background: "transparent",
+                overflow: "visible",
+            },
+        },
+        {
+            slot: "circleTrack",
+            selector: "& .crisp-progress-circle-track",
+            decls: {
+                stroke: `color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent)`,
+            },
+        },
+        {
+            slot: "circleFill",
+            selector: "& .crisp-progress-circle-fill",
+            decls: {
+                stroke: tokens_1.contract.bgBrandSolid,
+                transition: "stroke-dashoffset 0.25s ease",
+            },
+        },
     ],
 });
 exports.spec = spec;

package/dist/cjs/components/select/select.js

@@ -55,7 +55,7 @@ function optionText(o) {
  * move, Enter/Space pick, Esc close, Home/End jump, opens upward when tight.
  * Controlled or uncontrolled.
  */
-function Select({ options, value, defaultValue, onValueChange, name, required, placeholder: placeholderProp, variant = "default", width = "full", size = "medium", searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
+function Select({ options, value, defaultValue, onValueChange, name, required, placeholder: placeholderProp, variant = "default", width = "full", size = "small", searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default, or that
     // default itself with no provider — unchanged from before this existed.
@@ -217,7 +217,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, size, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), (0, jsx_runtime_1.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, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.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, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.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);

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

@@ -88,9 +88,19 @@ const config = (0, core_1.defineRecipe)({
     }
     .crisp-select-listbox[data-up] { transform-origin: bottom left; }
     .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    .crisp-select-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["2"]}) calc(-1 * ${tokens_1.contract.space["2"]}) ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgNeutralMuted}; }
+    /* Composed from @seed-design/rootage's text-input.yaml
+       (variant=outline,size=medium) -- seed's Select has no search field of
+       its own to resolve this from (see the file header), so this reuses
+       the SAME tokens #867 already resolved for the trigger at this size:
+       minHeight x10 (${tokens_1.contract.size.selectTriggerMd}), paddingX x3_5
+       (${tokens_1.contract.space["3.5"]}), gap x2 (${tokens_1.contract.space["2"]}), cornerRadius r2
+       (${tokens_1.contract.radius.md}), strokeColor stroke.neutral-weak
+       (${tokens_1.contract.strokeSelectTrigger}) -- a real bordered field sitting flush
+       inside the listbox's own 8px padding, replacing the old bare
+       34px/no-border/bleeds-to-the-edge strip (crisp/#904). */
+    .crisp-select-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.selectTriggerMd}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3.5"]}; border: 1px solid ${tokens_1.contract.strokeSelectTrigger}; border-radius: ${tokens_1.contract.radius.md}; color: ${tokens_1.contract.fgNeutralMuted}; }
     .crisp-select-search svg { flex-shrink: 0; }
-    .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgSelectNeutral}; }
+    .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 19px; color: ${tokens_1.contract.fgSelectNeutral}; }
     .crisp-select-search input::placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
     .crisp-select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgNeutralSubtle}; }
     /* select.yaml's groupLabel -- font-size/line-height/weight are the same
@@ -124,9 +134,26 @@ const config = (0, core_1.defineRecipe)({
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
-        // seed's two trigger/item sizes (select-trigger.yaml / select-item.yaml).
-        // medium is the default -- closest to crisp's previous single size.
+        // Owner's follow-up after #867/#879 (crisp/#889): the LOOK stays seed's
+        // (border, listbox, radius, shadow, items, states, all unchanged below),
+        // but the SIZE is Attio's again -- a 40px trigger next to a 32px `Input`
+        // in the same form visibly mismatched (measured live in GRC's own "New
+        // employee" dialog). `small` is the new default: Attio's original
+        // 32px `c.size.menuRow`, `Input`'s own radius/padding/line-height so the
+        // two line up exactly, not just approximately. `medium`/`large` (seed's
+        // own 40/52px) stay, opt-in. Item rows are IDENTICAL across all three --
+        // only the trigger differs; only it was ever the mismatch.
         size: {
+            small: `
+        & .crisp-select-trigger { height: ${tokens_1.contract.size.menuRow}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["1.5"]}; padding-inline: ${tokens_1.contract.space["2.5"]}; }
+        & .crisp-select-value, & .crisp-select-placeholder { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; }
+        & .crisp-select-chevron { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; }
+        .crisp-select-option { gap: ${tokens_1.contract.space["2"]}; }
+        .crisp-select-option-label { font-size: ${tokens_1.contract.text.lg}; line-height: 19px; }
+        .crisp-select-option-description { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; }
+        .crisp-select-option-check { width: ${tokens_1.contract.space["3"]}; height: ${tokens_1.contract.space["3"]}; }
+        .crisp-select-label { padding-top: ${tokens_1.contract.space["2"]}; }
+      `,
             medium: `
         & .crisp-select-trigger { height: ${tokens_1.contract.size.selectTriggerMd}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["2"]}; padding-inline: ${tokens_1.contract.space["3.5"]}; }
         & .crisp-select-value, & .crisp-select-placeholder { font-size: ${tokens_1.contract.text.lg}; line-height: 19px; }
@@ -178,7 +205,7 @@ const config = (0, core_1.defineRecipe)({
     },
     defaultVariants: {
         width: "full",
-        size: "medium",
+        size: "small",
         invalid: false,
         variant: "default",
     },

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

@@ -36,13 +36,14 @@ const spec = (0, core_1.defineSpec)({
             muted: { color: tokens_1.contract.fgNeutralMuted },
             // #858: no new measurement -- both reuse tokens already measured
             // against Attio for the same colours in a different arrangement.
-            // `brand` is `textlink`'s own reused brand-text colour (`bgBrandSolid`,
-            // the same alias GRC's own `--color-fg-brand` resolves to). `danger`
-            // is `fgDanger` ("solid critical/destructive TEXT... an overdue
-            // due-date, a destructive menu item's label" -- see its own doc in
-            // tokens/semantic.ts), not `fgDangerSoft` (that one's a soft Badge
-            // pill's text, a different measured hex).
-            brand: { color: tokens_1.contract.bgBrandSolid },
+            // `brand` is `textlink`'s own reused brand-text colour, now
+            // `fgBrandContrast` (your-moon/crisp#897: the plain accent,
+            // `bgBrandSolid`, only clears 3.23:1 as text on a white page).
+            // `danger` is `fgDanger` ("solid critical/destructive TEXT... an
+            // overdue due-date, a destructive menu item's label" -- see its own
+            // doc in tokens/semantic.ts), not `fgDangerSoft` (that one's a soft
+            // Badge pill's text, a different measured hex).
+            brand: { color: tokens_1.contract.fgBrandContrast },
             danger: { color: tokens_1.contract.fgDanger },
         },
     },

package/dist/cjs/components/textarea/textarea.js

@@ -36,13 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const progress_1 = require("../progress");
 const textarea_recipe_1 = require("./textarea.recipe");
 /**
  * A multiline text field — measured from settings. Forwards every native
  * `<textarea>` prop; pass `showCount` with `maxLength` to render a live
  * character counter (which turns red if the value exceeds the limit).
  */
-exports.Textarea = React.forwardRef(({ showCount, maxLength, className, wrapperClassName, value, defaultValue, onChange, 
+exports.Textarea = React.forwardRef(({ showCount, showProgress, maxLength, className, wrapperClassName, value, defaultValue, onChange, 
 // `style` is pulled out and put on the ROOT, the way Input does it.
 // Everything else belongs on the <textarea> -- id, name, form
 // association, aria -- but `style` sizes the visual box, and the box is
@@ -58,6 +59,6 @@ style, ...props }, ref) => {
                         if (value === undefined)
                             setCount(e.target.value.length);
                         onChange?.(e);
-                    }, ...props }) }), counted && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+                    }, ...props }) }), counted && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [showProgress && ((0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", value: len, max: maxLength ?? 0, className: "crisp-textarea-progress" })), len, " / ", maxLength] }))] }));
 });
 exports.Textarea.displayName = "Textarea";

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

@@ -49,8 +49,9 @@ const config = (0, core_1.defineRecipe)({
     &[data-invalid] .crisp-textarea-wrap::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${tokens_1.contract.bgDanger}; }
     &[data-counted] .crisp-textarea-field { padding-bottom: ${tokens_1.contract.space["5"]}; }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${tokens_1.contract.space["2.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: ${tokens_1.contract.space["2.5"]}; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-textarea-progress { flex-shrink: 0; }
   `,
     variants: {},
     defaultVariants: {},