@crisp-ui-kit/crisp 0.56.0 → 0.57.1

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

@@ -3,31 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiselectRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// 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 = (0, core_1.defineRecipe)({
     name: "multiselect",
     base: `
@@ -35,53 +31,63 @@ const config = (0, core_1.defineRecipe)({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .crisp-multiselect-trigger {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; min-width: 0; min-height: ${tokens_1.contract.size.menuRow};
-      margin: 0; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["2"]};
-      border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
-      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.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 ${tokens_1.contract.strokeSelectTrigger}; background: transparent; cursor: pointer; text-align: start;
+      font-family: inherit; color: ${tokens_1.contract.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: ${tokens_1.contract.bgRaised}; }
-    & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.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: ${tokens_1.contract.bgSelectPressed}; }
+    & .crisp-multiselect-trigger:focus-visible { outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px; }
+    & .crisp-multiselect-trigger:disabled { background: ${tokens_1.contract.bgSelectDisabled}; cursor: not-allowed; }
+    & .crisp-multiselect-trigger:disabled .crisp-multiselect-placeholder,
+    & .crisp-multiselect-trigger:disabled .crisp-multiselect-chevron { color: ${tokens_1.contract.fgDisabled}; }
+    & .crisp-multiselect-trigger[aria-readonly="true"] { background: ${tokens_1.contract.bgSelectDisabled}; cursor: default; }
     & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
-    & .crisp-multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
-    & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
+    & .crisp-multiselect-placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
+    /* closeRotateDuration/openRotateDuration, same asymmetric timing as
+       Select's own chevron (see that recipe's comment). */
+    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.space.px};
-      max-height: 300px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
-      border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
-      box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.space["2"]};
+      max-height: 480px; overflow-y: auto; padding: ${tokens_1.contract.space["2"]};
+      border-radius: ${tokens_1.contract.radius["3xl"]}; background: ${tokens_1.contract.bgSelectListbox};
+      box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["2"]}) calc(-1 * ${tokens_1.contract.space["2"]}) ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    .crisp-multiselect-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-multiselect-search input::placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
+    /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
+    .crisp-multiselect-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]} 0; font-size: ${tokens_1.contract.text.md}; line-height: 18px; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgNeutralSubtle}; }
     .crisp-multiselect-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
-      padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; cursor: pointer; text-align: start;
+      box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0;
+      padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["4"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.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: ${tokens_1.contract.bgRaised}; }
+    .crisp-multiselect-option:active { background: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; color: transparent; }
     .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${tokens_1.contract.bgBrandSolid}; box-shadow: none; color: #fff; }
-    .crisp-multiselect-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    .crisp-multiselect-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}; }
 
     .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
     .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
@@ -93,18 +99,51 @@ 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: {
-        // 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 ${tokens_1.contract.bgDanger}; }
+        // 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}; }
       `,
+            large: `
+        & .crisp-multiselect-trigger { min-height: ${tokens_1.contract.size.selectTriggerLg}; border-radius: ${tokens_1.contract.radius.xl}; gap: ${tokens_1.contract.space["2.5"]}; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["4"]}; }
+        & .crisp-multiselect-chevron { width: ${tokens_1.contract.size.selectIconLg}; height: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.bgSelectPressed}; }
+      `,
+        },
     },
-    defaultVariants: { invalid: false },
+    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/listbox-keyboard.js

@@ -14,7 +14,7 @@ exports.useListboxKeyboard = useListboxKeyboard;
  * NOT for `WheelPicker`: that is an always-visible multi-column wheel that
  * commits on move, so Enter, Escape and Tab have no meaning in it.
  */
-function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss = close, }) {
+function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss = close, commitOnSpace = false, }) {
     const move = (dir) => {
         if (enabledIndexes.length === 0)
             return;
@@ -53,6 +53,12 @@ function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, c
                 e.preventDefault();
                 commit();
                 break;
+            case " ":
+                if (!commitOnSpace)
+                    break;
+                e.preventDefault();
+                commit();
+                break;
             case "Escape":
                 e.preventDefault();
                 close();

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

@@ -46,13 +46,16 @@ function optionText(o) {
     return typeof o.label === "string" ? o.label : o.value;
 }
 /**
- * A select / dropdown — the settings control, measured live, with an
- * optional Linear-style search. A `role="combobox"` trigger opens a
- * `role="listbox"`; pass `searchable` to add a filter field at the top (with a
- * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
- * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
+ * A select / dropdown, built to seed-design's Select (crisp/#867) rather than
+ * measured from Attio — a deliberate one-component exception, the same way
+ * `DatePicker` follows seed's calendar structure — with an optional
+ * Linear-style search seed itself has no equivalent of. A `role="combobox"`
+ * trigger opens a `role="listbox"`; pass `searchable` to add a filter field
+ * at the top (with a "No results" empty state). Full keyboard model — ↑/↓
+ * 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", searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, 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.
@@ -99,8 +102,12 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
+    // seed-design's `interactive` (crisp/#867): disabled AND readOnly both
+    // refuse to open, but only `disabled` removes the button from the tab
+    // order and greys its text — readOnly stays focusable, full-strength ink.
+    const interactive = !disabled && !readOnly;
     const openMenu = () => {
-        if (disabled)
+        if (!interactive)
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
@@ -109,7 +116,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
             // direction that is (#210)
             const { style, up: flipUp } = (0, core_1.placeFloating)({
                 rect,
-                gap: 4,
+                gap: 8, // seed-design's select.yaml `gutter` (crisp/#867; was 4)
                 flipBelow: 260,
                 anchor: triggerRef.current,
             });
@@ -143,8 +150,14 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         commit: () => pick(filtered[highlight]),
         close,
         dismiss: () => setOpen(false),
+        // Space also commits when the trigger itself owns navigation (crisp/#867,
+        // matching seed-design). Never on the search input's own wiring below —
+        // that one omits this option, so Space stays a normal character there.
+        commitOnSpace: !searchable,
     });
     const onTriggerKeyDown = (e) => {
+        if (!interactive)
+            return;
         if (!open) {
             if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
@@ -201,10 +214,10 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, 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", 
+    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, 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);
@@ -215,7 +228,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                             // heading, not one each.
                             const showGroupLabel = opt.group !== undefined &&
                                 opt.group !== filtered[i - 1]?.group;
-                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-select-option-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-description", children: opt.description })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label })), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";