@crisp-ui-kit/crisp 0.57.0 → 0.57.2

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

@@ -4,11 +4,25 @@ exports.menuRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A dropdown menu — same popover surface used for ⋯ / sort / filter
-// menus (measured from listboxes): radius 12, 4px padding, a layered
-// soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
-// check). The content 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.
+// menus (measured from listboxes): 4px padding, over 32px items (radius 8,
+// icon + label + optional shortcut / check). The content 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.
+//
+// your-moon/crisp#934: radius and shadow are seed-design's,
+// not Attio's -- Menu is the ONE component the seed raw dump confirms
+// actually uses a shadow token at all (every other floating surface in
+// seed's own spec has none). Radius moved from `radius.xl` (12px, this
+// component's own private value) to `radius["3xl"]` (20px) -- seed treats
+// "floating surface radius" as one shared value across Dialog/Menu/Select,
+// not a per-component one; `radius["3xl"]` is already that shared token
+// (Select's listbox, crisp/#867; Dialog, this same PR). Shadow moved from
+// `elevation.floating` (crisp's own 4-layer blue-tinted glow, still used by
+// Popover/ContextMenu/Toast/etc -- NOT touched here, out of scope) to
+// `elevation.selectFloating` -- already seed's exact flat `$shadow.s3`
+// value, already in this file (Select's own listbox, #867), reused rather
+// than duplicated.
 //
 // The menu's floating content and everything inside it live in `globalCss`
 // below, not nested under `&` (#357): nesting compiles to a real descendant
@@ -35,8 +49,8 @@ const config = (0, core_1.defineRecipe)({
       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};
       min-width: 200px; max-height: 360px; 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};
+      border-radius: ${tokens_1.contract.radius["3xl"]}; background: ${tokens_1.contract.bgPopover};
+      box-shadow: ${tokens_1.elevation.selectFloating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     .crisp-menu-content[data-align="end"] { transform-origin: top right; }

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menusheetRecipe = exports.MenuSheetItem = exports.MenuSheetGroup = exports.MenuSheet = void 0;
+var menusheet_1 = require("./menusheet");
+Object.defineProperty(exports, "MenuSheet", { enumerable: true, get: function () { return menusheet_1.MenuSheet; } });
+Object.defineProperty(exports, "MenuSheetGroup", { enumerable: true, get: function () { return menusheet_1.MenuSheetGroup; } });
+Object.defineProperty(exports, "MenuSheetItem", { enumerable: true, get: function () { return menusheet_1.MenuSheetItem; } });
+var menusheet_recipe_1 = require("./menusheet.recipe");
+Object.defineProperty(exports, "menusheetRecipe", { enumerable: true, get: function () { return menusheet_recipe_1.menusheetRecipe; } });

package/dist/cjs/components/menusheet/menusheet.js

@@ -0,0 +1,133 @@
+"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.MenuSheet = MenuSheet;
+exports.MenuSheetGroup = MenuSheetGroup;
+exports.MenuSheetItem = MenuSheetItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const menu_keyboard_1 = require("../menu/menu-keyboard");
+const menusheet_recipe_1 = require("./menusheet.recipe");
+const MenuSheetContext = React.createContext(null);
+let instanceCounter = 0;
+function useMenuSheetInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-menusheet-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A mobile menu sheet -- a focus-trapped bottom sheet (same Zag dialog
+ * machine as BottomSheet) whose body is a role=menu list, with the identical
+ * keyboard model Menu already uses: arrow keys move, Home/End jump,
+ * typeahead, Enter/Space select, Escape closes. Compose items with
+ * MenuSheetItem, and group a run of them in one rounded card with
+ * MenuSheetGroup.
+ */
+function MenuSheet({ open, onOpenChange, title, description, footer, "aria-label": ariaLabel, children, className, "aria-describedby": describedBy, ...rest }) {
+    const id = useMenuSheetInstanceId();
+    const listRef = React.useRef(null);
+    const service = (0, react_1.useMachine)(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
+        // Without this, Zag's own focus trap parks initial focus on the dialog
+        // surface itself, which wins the race against useMenuKeyboard's rAF-
+        // scheduled "focus the first item" effect below -- the two compete for
+        // the same job and Zag's own dialog-level default was landing last.
+        // Pointing it at the first menu item directly makes Zag do that job
+        // itself instead of fighting useMenuKeyboard for it.
+        initialFocusEl() {
+            return (listRef.current?.querySelector(menu_keyboard_1.MENU_ITEM_SELECTOR) ?? null);
+        },
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+    const { onKeyDown: menuKeyDown, items } = (0, menu_keyboard_1.useMenuKeyboard)({
+        open: api.open,
+        close,
+        contentRef: listRef,
+    });
+    // Roving tabindex: exactly one item is a real Tab stop at a time (#237 --
+    // "selected, or first when none" -- is right in every state but the one
+    // that matters, so it is enforced imperatively here rather than trusted to
+    // a per-render default). useMenuKeyboard moves FOCUS with arrow keys; this
+    // keeps the tabindex in sync with wherever that focus actually lands,
+    // including the initial auto-focus Zag's own initialFocusEl performs.
+    const onFocus = React.useCallback((e) => {
+        for (const el of items())
+            el.tabIndex = -1;
+        e.target.tabIndex = 0;
+    }, [items]);
+    React.useEffect(() => {
+        if (!api.open)
+            return;
+        const [first] = items();
+        if (first)
+            first.tabIndex = 0;
+    }, [api.open, items]);
+    const ctx = React.useMemo(() => ({ close }), [close]);
+    if (!api.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, menusheet_recipe_1.menusheetRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-menusheet-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-menusheet-positioner", children: (0, jsx_runtime_1.jsxs)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: className
+                            ? `crisp-menusheet-content ${className}`
+                            : "crisp-menusheet-content", children: [(title != null || description != null) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-menusheet-header", children: [title != null && ((0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "crisp-menusheet-title", children: title })), description != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menusheet-description", children: description }))] })), (0, jsx_runtime_1.jsx)(MenuSheetContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)("div", { ref: listRef, role: "menu", className: "crisp-menusheet-list", onKeyDown: menuKeyDown, onFocus: onFocus, children: children }) }), footer != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-menusheet-footer", children: footer }))] }) })] }) }));
+}
+MenuSheet.displayName = "MenuSheet";
+function MenuSheetGroup({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-menusheet-group", children: children });
+}
+MenuSheetGroup.displayName = "MenuSheetGroup";
+function MenuSheetItem({ children, icon, description, tone = "neutral", disabled, onSelect, closeOnSelect = true, }) {
+    const ctx = React.useContext(MenuSheetContext);
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, "data-tone": tone, className: "crisp-menusheet-item", onClick: () => {
+            onSelect?.();
+            if (closeOnSelect)
+                ctx?.close();
+        }, children: [icon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menusheet-item-icon", children: icon })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-menusheet-item-content", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-menusheet-item-label", children: children }), description != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menusheet-item-description", children: description }))] })] }));
+}
+MenuSheetItem.displayName = "MenuSheetItem";

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menusheetRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A mobile menu sheet -- daangn/seed-design components menu-sheet.yaml and
+// menu-sheet-item.yaml (dev at e1c486b904297f7b6a8f17b8523f732c37015d60), not
+// Attio (no such component there; crisp#911). Same @zag-js/dialog machine as
+// BottomSheet, and the identical role=menu keyboard model Menu already uses
+// (useMenuKeyboard, shared rather than reimplemented). Differs from
+// BottomSheet in every slot value: r5 radius (not r6), content-level padding
+// (not per-slot), no header alignment / close-button matrix at all -- menu
+// sheet has neither in its own schema. Every numeric value cites its yaml
+// line. NOTE: no apostrophes in this file -- one broke the recipe compiler
+// silently on BottomSheet, see AUTHORING.md Lesson 64.
+const config = (0, core_1.defineRecipe)({
+    name: "menusheet",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .crisp-menusheet-backdrop {
+      position: fixed; inset: 0; z-index: 60;
+      background: ${tokens_1.contract.bgOverlayStrong}; /* menu-sheet.yaml:95 backdrop.color = $color.bg.overlay */
+      opacity: 1; transition: opacity 100ms cubic-bezier(0,0,.15,1); /* menu-sheet.yaml:96-98 enterDuration/enterTimingFunction = $duration.d2/$timing-function.enter */
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-menusheet-positioner {
+      position: fixed; inset: 0; z-index: 61;
+      display: flex; align-items: flex-end; justify-content: center;
+    }
+    & .crisp-menusheet-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; box-sizing: border-box; display: flex; flex-direction: column;
+      overflow: hidden; width: 100%; max-width: 480px; /* menu-sheet.yaml:104 content.maxWidth */
+      max-height: 85vh;
+      background: ${tokens_1.contract.bgSurface}; /* menu-sheet.yaml:103 content.color = $color.bg.layer-floating */
+      padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; /* menu-sheet.yaml:105-107 content.paddingX/paddingTop/paddingBottom = global-gutter/x6/x4 (16px/24px/16px) */
+      border-radius: ${tokens_1.contract.radius["3xl"]} ${tokens_1.contract.radius["3xl"]} 0 0; /* menu-sheet.yaml:108 content.topCornerRadius = $radius.r5 (20px) */
+      transform: translateY(0);
+      transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* menu-sheet.yaml:109-110 content.enterDuration/enterTimingFunction (enter-expressive) */
+      @starting-style { transform: translateY(100%); }
+    }
+    & .crisp-menusheet-header {
+      display: flex; flex-direction: column;
+      gap: ${tokens_1.contract.space["1"]}; /* menu-sheet.yaml:115 header.gap = $dimension.x1 (4px) */
+      padding-bottom: ${tokens_1.contract.space["4"]}; /* menu-sheet.yaml:116 header.paddingBottom = $dimension.x4 (16px) */
+      flex-shrink: 0;
+    }
+    & .crisp-menusheet-title {
+      color: ${tokens_1.contract.fgPrimary}; /* menu-sheet.yaml:121 title.color = $color.fg.neutral */
+      font-size: 18px; line-height: 24px; font-weight: ${tokens_1.contract.weight.bold}; /* menu-sheet.yaml:118-120 title.fontSize/lineHeight/fontWeight = $font-size.t6/$line-height.t6/bold */
+    }
+    & .crisp-menusheet-description {
+      color: ${tokens_1.contract.fgMuted}; /* menu-sheet.yaml:126 description.color = $color.fg.neutral-muted */
+      font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.regular}; /* menu-sheet.yaml:123-125 description.fontSize/lineHeight/fontWeight = $font-size.t4/$line-height.t4/regular */
+    }
+    & .crisp-menusheet-list {
+      display: flex; flex-direction: column;
+      gap: ${tokens_1.contract.space["2.5"]}; /* menu-sheet.yaml:129 list.gap = $dimension.x2_5 (10px) */
+      overflow-y: auto; min-height: 0;
+    }
+    & .crisp-menusheet-group {
+      display: flex; flex-direction: column;
+      border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; /* menu-sheet.yaml:131 group.cornerRadius = $radius.r4 (16px) */
+    }
+    & .crisp-menusheet-group > * + * { border-top: 1px solid ${tokens_1.contract.strokeGroupDivider}; } /* menu-sheet.yaml:132-134 divider.strokeBottomWidth/strokeColor = 1px/$color.stroke.neutral-muted */
+    & .crisp-menusheet-footer {
+      flex-shrink: 0;
+      padding-top: ${tokens_1.contract.space["2.5"]}; /* menu-sheet.yaml:136 footer.paddingTop = $dimension.x2_5 (10px) */
+    }
+    & .crisp-menusheet-item {
+      position: relative; box-sizing: border-box; display: flex; align-items: center;
+      width: 100%; min-height: 52px; /* menu-sheet-item.yaml:72 root.minHeight */
+      padding: ${tokens_1.contract.space["3.5"]} ${tokens_1.contract.space["4"]}; gap: ${tokens_1.contract.space["3.5"]}; /* menu-sheet-item.yaml:73-75 root.paddingX/paddingY/gap = x4/x3_5/x3_5 (16px/14px/14px) */
+      border: none; margin: 0; cursor: pointer; text-align: start;
+      background: ${tokens_1.contract.bgNeutralWeak}; /* menu-sheet-item.yaml:71 root.color = $color.bg.neutral-weak */
+      font-family: inherit;
+    }
+    & .crisp-menusheet-item:hover,
+    & .crisp-menusheet-item:active { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, ${tokens_1.contract.bgNeutralWeak}); } /* menu-sheet-item.yaml:90-91 pressed.root.color = $color.bg.neutral-weak-pressed, approximated as a tint over the base fill */
+    & .crisp-menusheet-item:active .crisp-menusheet-item-content { transform: scale(0.98); } /* menu-sheet-item.yaml:92 pressed.root.scaleScope = content */
+    & .crisp-menusheet-item-icon { flex-shrink: 0; display: inline-flex; width: 22px; height: 22px; } /* menu-sheet-item.yaml:77 prefixIcon.size */
+    & .crisp-menusheet-item-content {
+      flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
+      gap: ${tokens_1.contract.space["0.5"]}; /* menu-sheet-item.yaml:79 content.gap = $dimension.x0_5 (2px) */
+      transition: transform 150ms cubic-bezier(0,0,.15,1);
+    }
+    & .crisp-menusheet-item-label {
+      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.regular}; /* menu-sheet-item.yaml:81-83 label.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */
+    }
+    & .crisp-menusheet-item-description {
+      color: ${tokens_1.contract.fgNeutralSubtle}; /* menu-sheet-item.yaml:88 description.color = $color.fg.neutral-subtle */
+      font-size: ${tokens_1.contract.text.md}; line-height: 18px; font-weight: ${tokens_1.contract.weight.medium}; /* menu-sheet-item.yaml:85-87 description.fontSize/lineHeight/fontWeight = $font-size.t3/$line-height.t3/medium */
+    }
+    & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-icon,
+    & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-label { color: ${tokens_1.contract.fgPrimary}; } /* menu-sheet-item.yaml:93-98 tone=neutral */
+    & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-icon,
+    & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-label { color: ${tokens_1.contract.fgDanger}; } /* menu-sheet-item.yaml:99-104 tone=critical */
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.menusheetRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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…");
@@ -222,7 +222,7 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
                 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-multiselect-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-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-multiselect-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);
-                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                    }, onKeyDown: onNavKeys })] })), searchable && (0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-divider" }), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const sel = selectedSet.has(opt.value);
                             // #343: a header renders once per run of same-`group`
                             // options, so consecutive rows sharing a group render one

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

@@ -16,10 +16,14 @@ const tokens_1 = require("../../tokens");
 // 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 search row now follows seed too (owner decision, 2026-09-26: Select
+// AND MultiSelect both follow seed-design, superseding #481's old Attio
+// lock on this row's geometry -- crisp/#904's MultiSelect follow-up). It
+// reads the exact same composed @seed-design/rootage `text-input.yaml`
+// (variant=outline,size=medium) values #913 resolved for Select's own
+// search row -- see that recipe's matching comment for the full citation.
+// `build/spec-check.mjs`'s guard was rewritten to assert these seed values
+// instead of the old 36px Attio measurement.
 //
 // The listbox portals to `document.body` (#339), so its rules live in
 // `globalCss`, not nested under `&` -- see Select's own recipe for the full
@@ -64,13 +68,19 @@ const config = (0, core_1.defineRecipe)({
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     .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}; }
+    /* Seed geometry (build/spec-check.mjs guards these four properties
+       directly), superseding #481's old Attio lock -- see this file's
+       header comment and Select's matching .crisp-select-search comment
+       for the full citation. An ordinary flex child of the listbox, so its
+       own 8px gap provides the inset/seam on every side, same as Select. */
+    .crisp-multiselect-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-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.fgSelectNeutral}; }
+    .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}; line-height: 19px; color: ${tokens_1.contract.fgSelectNeutral}; }
     .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
+    /* Same header/body seam as Select's own .crisp-select-divider -- see
+       that recipe's comment for the seed source (select.yaml's divider
+       slot, stroke.neutral-muted). */
+    .crisp-multiselect-divider { flex-shrink: 0; height: 1px; margin-inline: ${tokens_1.contract.space["4"]}; background: ${tokens_1.contract.strokeSelectDivider}; }
     /* 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 {
@@ -99,9 +109,32 @@ 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.
+        //
+        // crisp/#904 (MultiSelect follow-up, briefly moved then reverted, same
+        // ruling as Select's own): `small`'s `gap` moved from `space["1"]`
+        // (4px) to `space["2"]` (8px), matching `medium`/`large`'s seed gap --
+        // team-lead's review ruling on Select's matching change reversed it:
+        // padding AND gap are SPACING, and the owner's direction is "sizes/
+        // spacing from Attio, look from seed", not seed's literal gap number.
+        // Back to `space["1"]` (4px), the original pre-#882 Attio-measured
+        // value. `padding` was never touched either way: the pre-#882,
+        // Attio-measured asymmetric padding a chip-wrapping trigger needs
+        // (chips sit close to the start edge, the chevron gets more room at
+        // the end) -- seed has no multi-value combobox of its own to source a
+        // replacement number from (see this file's header comment) even if
+        // the ruling had gone the other way.
         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 +167,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,11 +217,11 @@ 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);
-                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                    }, onKeyDown: onNavKeys })] })), searchable && (0, jsx_runtime_1.jsx)("div", { className: "crisp-select-divider" }), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
                             // #343: a header renders once per run of same-`group`
                             // options, so consecutive rows sharing a group render one