@crisp-ui-kit/crisp 0.57.1 → 0.57.3

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

@@ -28,9 +28,14 @@ const config = defineRecipe({
             // A full-view empty state (measured from a filtered-to-zero records table):
             // a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
             // then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
+            // *Correction (crisp#933):* the original pass above didn't check letter-spacing.
+            // `records` below is the exact same title component (confirmed live at
+            // /techpartners/users and /techpartners/workspaces, both "No X records" at
+            // 20px/600/24px) and measures `-0.4px` -- exactly `c.tracking["20"]` (#909),
+            // not a coincidence, just a value nobody read off this element until now.
             page: `gap: ${c.space["2"]};
     & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: ${c.space["2"]}; border-radius: ${c.radius.full}; border: 1px solid ${c.borderSubtle}; background: none; color: ${c.fgMuted}; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: ${c.tracking["20"]}; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
     & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
             // #603: Attio's zero-*records* table state (Users/Workspaces with
@@ -45,7 +50,7 @@ const config = defineRecipe({
             // by the consumer via the existing `icon` prop, same as every
             // other variant.
             records: `& .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: ${c.tracking["20"]}; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }`,
         },
     },

package/dist/esm/components/fileupload/fileupload.js

@@ -17,8 +17,23 @@ export const fileUploadLabels = {
         INVALID_TYPE: "That file type is not accepted.",
     },
 };
+/**
+ * One row of `FileUpload`'s own accepted-file list (crisp#965) — icon-free
+ * name + trailing size + remove, `min-height: size.tableRow` on `bgRaised`
+ * (measured from a data-grid row, see `fileupload.recipe.ts`). Exported on
+ * its own because `FileUpload` internally only lists `File` objects from the
+ * current browser session; a caller with already-persisted attachments
+ * (fetched from a server, never a real `File`) has no `acceptedFileEntries`
+ * to hand it and needs the identical row for its own list instead of
+ * hand-rolling one.
+ */
+export function FileUploadItem({ name, size, status, progress, onRemove, removeLabel, className, }) {
+    return (_jsxs("li", { className: className
+            ? `crisp-fileupload-item ${className}`
+            : "crisp-fileupload-item", "data-status": status, children: [_jsx("span", { className: "crisp-fileupload-item-name", children: name }), status === "uploading" && progress != null && (_jsx("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": name, children: _jsx("span", { className: "crisp-fileupload-progress-fill", style: { width: `${progress}%` } }) })), size != null && (_jsx("span", { className: "crisp-fileupload-item-size", children: formatSize(size) })), onRemove && (_jsx("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": removeLabel, onClick: onRemove, children: _jsx(X, { size: 13, strokeWidth: 2 }) }))] }));
+}
 /** 1000-based, matching how every file manager reports size. */
-function formatSize(bytes) {
+export function formatSize(bytes) {
     if (bytes < 1000)
         return `${bytes} B`;
     const units = ["kB", "MB", "GB", "TB"];
@@ -103,8 +118,8 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, id, acc
     // focus should land next.
     const rootRef = React.useRef(null);
     const focusAfterRemoval = useFocusAfterRemoval(rootRef, ".crisp-fileupload-remove", dropzoneRef);
-    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "crisp-fileupload-title", children: t.title }), _jsx("span", { className: "crisp-fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsxs("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [_jsx("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && (_jsx("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(entry.progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": entry.file.name, children: _jsx("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), _jsx("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), _jsx("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
-                                focusAfterRemoval(i);
-                                removeFileEntry(entry.id);
-                            }, children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), _jsx("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+    return (_jsxs("div", { ref: rootRef, ...rest, className: fileuploadRecipe({ className }), children: [_jsxs("button", { ...dropzoneProps, ref: dropzoneRef, type: "button", className: "crisp-fileupload-zone", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel ?? t.hint, disabled: disabled, "data-dragging": dragging ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": invalid ? "" : undefined, onClick: () => openFilePicker(), children: [_jsx("span", { className: "crisp-fileupload-title", children: t.title }), _jsx("span", { className: "crisp-fileupload-hint", children: t.hint })] }), _jsx("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && (_jsx("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => (_jsx(FileUploadItem, { name: entry.file.name, size: entry.file.size, status: entry.status, progress: entry.status === "uploading" ? entry.progress : undefined, removeLabel: `${t.remove}: ${entry.file.name}`, onRemove: () => {
+                        focusAfterRemoval(i);
+                        removeFileEntry(entry.id);
+                    } }, entry.id))) })), _jsx("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }

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

@@ -1,2 +1,2 @@
-export { Input } from "./input.js";
+export { Input, InputShell, } from "./input.js";
 export { inputRecipe } from "./input.recipe.js";

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

@@ -9,3 +9,33 @@ export const Input = React.forwardRef(({ size, invalid, className, style, suffix
     return (_jsxs("span", { className: inputRecipe({ size, invalid, className }), style: style, "data-readonly": props.readOnly ? "" : undefined, children: [_jsx("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }), suffix != null && _jsx("span", { className: "crisp-input-suffix", children: suffix })] }));
 });
 Input.displayName = "Input";
+/**
+ * crisp#917: the same field chrome `Input` draws (border, focus ring,
+ * radius, size, invalid/read-only states) around arbitrary children instead
+ * of a hardcoded `<input>` — for a third-party editor (CodeMirror, a
+ * rich-text widget, a masked-input library) that needs to mount into a
+ * plain element rather than a native `<input>`.
+ *
+ * Deliberately NOT `asChild` (crisp's usual `Primitive`/`Slot` pattern, used
+ * by `Button`/`Chip`/`Avatar`/etc. elsewhere): those merge the shell's own
+ * props onto ONE child, replacing it outright — correct when the shell
+ * and the interactive surface are the same element. `Input`'s real shape is
+ * TWO parts, an outer shell hosting the `::after` focus ring plus an inner
+ * value that carries the actual text/interaction; a rich editor mounts its
+ * own DOM subtree inside a container div, which is exactly what `children`
+ * gives it, not what replacing a single node would.
+ *
+ * Only draws the OUTER shell (`inputRecipe`'s own class — border, ring,
+ * radius, size-driven height, background, `data-readonly` tint) around
+ * `children` unchanged, the same granularity GRC's own pre-existing
+ * workaround (internal/grc#159, reaching into `.crisp-input`/
+ * `.crisp-input--size_medium` by hand) already used — NOT `.crisp-input-
+ * value`'s own text-field resets (`border: none`, `padding-inline`, `font:
+ * inherit`, …), which assume a real `<input>` and would fight a rich
+ * editor's own internal layout. A child that wants to fill the shell the
+ * way `Input`'s own `<input>` does should set its own sizing (e.g. `flex: 1
+ * 1 auto; min-width: 0; width: 100%; height: 100%`), same as any block
+ * content dropped into an `inline-flex` container.
+ */
+export const InputShell = React.forwardRef(({ size, invalid, className, style, suffix, readOnly, children, ...props }, ref) => (_jsxs("div", { ref: ref, className: inputRecipe({ size, invalid, className }), style: style, "data-readonly": readOnly ? "" : undefined, ...props, children: [children, suffix != null && _jsx("span", { className: "crisp-input-suffix", children: suffix })] })));
+InputShell.displayName = "InputShell";

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

@@ -1,11 +1,13 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c, elevation as e } from "../../tokens/index.js";
+import { contract as c } from "../../tokens/index.js";
 // Geometry is measured: 32/36px tall, r8/r10, 10/12px side padding.
-// The shadow is `elevation.textField` (#466), not `elevation.field` — a real
-// typed field on Attio's own Settings page carries one 1px ring, not
-// `field`'s button-chrome glow/drop-shadow layers too; `field`'s own doc
-// comment had claimed "inputs, textareas" among its consumers, which this
-// corrects.
+// your-moon/crisp#910: the rest-state edge used to be `elevation.textField`,
+// a `box-shadow` ring (#466's fix for a real typed field's 1px ring, not
+// `field`'s button-chrome glow/drop-shadow layers) -- now a real `border`,
+// matching seed-design's own `text-input.yaml` (an actual border that
+// THICKENS on focus/invalid, not a fixed-width ring that only recolors).
+// `borderDefault` (#dcdee3) is seed's own `stroke.neutral-weak`, already the
+// crisp token's exact value.
 // The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
 // ring on an ::after overlay that is present-but-transparent at rest, so
 // focusing cannot shift layout the way a width change would, and animates
@@ -20,7 +22,7 @@ const config = defineRecipe({
     name: "input",
     base: `
     position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
-    width: 100%; background: ${c.bgSurface}; box-shadow: ${e.textField};
+    width: 100%; background: ${c.bgSurface}; border: 1px solid ${c.borderDefault};
     font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px;
 
     &::after {
@@ -43,8 +45,10 @@ const config = defineRecipe({
        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, ${c.fgPrimary} 2%, transparent); box-shadow: inset 0 0 0 1px ${c.ringField}; }
+       same color-mix idiom every other soft crisp surface already uses.
+       \`border-color: transparent\` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px ${c.ringField}; }
     & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: ${c.space["1"]}; }
   `,
     variants: {
@@ -56,7 +60,10 @@ const config = defineRecipe({
             // padding `medium` already uses, just 4px shorter.
             sm: `height: ${c.size.row}; border-radius: ${c.radius.md}; & .crisp-input-value { padding-inline: ${c.space["2.5"]}; }`,
             medium: `height: 32px; border-radius: ${c.radius.md}; & .crisp-input-value { padding-inline: ${c.space["2.5"]}; }`,
-            large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${c.space["3"]}; }`,
+            // your-moon/crisp#910: was a stray literal \`10px\` -- seed's own
+            // large-size field radius is \`$radius.r3\` = 12px (\`text-input.yaml\`),
+            // matching Button's own \`lg\` fix in the same PR.
+            large: `height: 36px; border-radius: ${c.radius.xl}; & .crisp-input-value { padding-inline: ${c.space["3"]}; }`,
         },
         invalid: {
             // critical outranks focus: a field that is wrong stays visibly wrong

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

@@ -104,12 +104,28 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
+    const { onKeyDown: onContentKeyDown, items } = useMenuKeyboard({
         open,
         close,
         dismiss: () => setOpen(false),
         contentRef,
     });
+    // Roving tabindex (crisp#964): every item hardcodes tabIndex={-1} for the
+    // arrow-key model above, which means none of them is ever a real Tab stop
+    // on its own -- kept in sync with wherever focus actually lands, same as
+    // MenuSheet's identical fix (#966).
+    const onContentFocus = React.useCallback((e) => {
+        for (const el of items())
+            el.tabIndex = -1;
+        e.target.tabIndex = 0;
+    }, [items]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const [first] = items();
+        if (first)
+            first.tabIndex = 0;
+    }, [open, items]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,
@@ -125,7 +141,7 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
     });
     return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: contentClassName
                         ? `crisp-menu-content ${contentClassName}`
-                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -1,11 +1,25 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
 // 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
@@ -32,8 +46,8 @@ const config = defineRecipe({
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
-      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
-      box-shadow: ${e.floating};
+      border-radius: ${c.radius["3xl"]}; background: ${c.bgPopover};
+      box-shadow: ${e.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/esm/components/menusheet/index.js

@@ -0,0 +1,2 @@
+export { MenuSheet, MenuSheetGroup, MenuSheetItem, } from "./menusheet.js";
+export { menusheetRecipe } from "./menusheet.recipe.js";

package/dist/esm/components/menusheet/menusheet.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import * as React from "react";
+import { hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
+import { MENU_ITEM_SELECTOR, useMenuKeyboard } from "../menu/menu-keyboard.js";
+import { menusheetRecipe } from "./menusheet.recipe.js";
+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.
+ */
+export 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 = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        onEscapeKeyDown(event) {
+            if (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_ITEM_SELECTOR) ?? null);
+        },
+    });
+    const api = dialog.connect(service, normalizeProps);
+    const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+    const { onKeyDown: menuKeyDown, items } = 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 (_jsx(Portal, { children: _jsxs("div", { className: menusheetRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-menusheet-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-menusheet-positioner", children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: className
+                            ? `crisp-menusheet-content ${className}`
+                            : "crisp-menusheet-content", children: [(title != null || description != null) && (_jsxs("div", { className: "crisp-menusheet-header", children: [title != null && (_jsx("span", { ...api.getTitleProps(), className: "crisp-menusheet-title", children: title })), description != null && (_jsx("span", { className: "crisp-menusheet-description", children: description }))] })), _jsx(MenuSheetContext.Provider, { value: ctx, children: _jsx("div", { ref: listRef, role: "menu", className: "crisp-menusheet-list", onKeyDown: menuKeyDown, onFocus: onFocus, children: children }) }), footer != null && (_jsx("div", { className: "crisp-menusheet-footer", children: footer }))] }) })] }) }));
+}
+MenuSheet.displayName = "MenuSheet";
+export function MenuSheetGroup({ children }) {
+    return _jsx("div", { className: "crisp-menusheet-group", children: children });
+}
+MenuSheetGroup.displayName = "MenuSheetGroup";
+export function MenuSheetItem({ children, icon, description, tone = "neutral", disabled, onSelect, closeOnSelect = true, }) {
+    const ctx = React.useContext(MenuSheetContext);
+    return (_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 && (_jsx("span", { className: "crisp-menusheet-item-icon", children: icon })), _jsxs("span", { className: "crisp-menusheet-item-content", children: [_jsx("span", { className: "crisp-menusheet-item-label", children: children }), description != null && (_jsx("span", { className: "crisp-menusheet-item-description", children: description }))] })] }));
+}
+MenuSheetItem.displayName = "MenuSheetItem";

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

@@ -0,0 +1,100 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "menusheet",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .crisp-menusheet-backdrop {
+      position: fixed; inset: 0; z-index: 60;
+      background: ${c.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: ${c.bgSurface}; /* menu-sheet.yaml:103 content.color = $color.bg.layer-floating */
+      padding: ${c.space["6"]} ${c.space["4"]} ${c.space["4"]}; /* menu-sheet.yaml:105-107 content.paddingX/paddingTop/paddingBottom = global-gutter/x6/x4 (16px/24px/16px) */
+      border-radius: ${c.radius["3xl"]} ${c.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: ${c.space["1"]}; /* menu-sheet.yaml:115 header.gap = $dimension.x1 (4px) */
+      padding-bottom: ${c.space["4"]}; /* menu-sheet.yaml:116 header.paddingBottom = $dimension.x4 (16px) */
+      flex-shrink: 0;
+    }
+    & .crisp-menusheet-title {
+      color: ${c.fgPrimary}; /* menu-sheet.yaml:121 title.color = $color.fg.neutral */
+      font-size: 18px; line-height: 24px; font-weight: ${c.weight.bold}; /* menu-sheet.yaml:118-120 title.fontSize/lineHeight/fontWeight = $font-size.t6/$line-height.t6/bold */
+    }
+    & .crisp-menusheet-description {
+      color: ${c.fgMuted}; /* menu-sheet.yaml:126 description.color = $color.fg.neutral-muted */
+      font-size: ${c.text.lg}; line-height: 19px; font-weight: ${c.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: ${c.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: ${c.radius["2xl"]}; overflow: hidden; /* menu-sheet.yaml:131 group.cornerRadius = $radius.r4 (16px) */
+    }
+    & .crisp-menusheet-group > * + * { border-top: 1px solid ${c.strokeGroupDivider}; } /* menu-sheet.yaml:132-134 divider.strokeBottomWidth/strokeColor = 1px/$color.stroke.neutral-muted */
+    & .crisp-menusheet-footer {
+      flex-shrink: 0;
+      padding-top: ${c.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: ${c.space["3.5"]} ${c.space["4"]}; gap: ${c.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: ${c.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, ${c.fgPrimary} 6%, ${c.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: ${c.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: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.regular}; /* menu-sheet-item.yaml:81-83 label.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */
+    }
+    & .crisp-menusheet-item-description {
+      color: ${c.fgNeutralSubtle}; /* menu-sheet-item.yaml:88 description.color = $color.fg.neutral-subtle */
+      font-size: ${c.text.md}; line-height: 18px; font-weight: ${c.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: ${c.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: ${c.fgDanger}; } /* menu-sheet-item.yaml:99-104 tone=critical */
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const menusheetRecipe = resolveRecipe(config);
+export default config;

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

@@ -186,7 +186,7 @@ id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPl
                 }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _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 && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _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 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                    }, onKeyDown: onNavKeys })] })), searchable && _jsx("div", { className: "crisp-multiselect-divider" }), filtered.length === 0 ? (_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/esm/components/multiselect/multiselect.recipe.js

@@ -13,10 +13,14 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // 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
@@ -61,13 +65,19 @@ const config = 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: ${c.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${c.space["2"]}) calc(-1 * ${c.space["2"]}) ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]}; color: ${c.fgNeutralMuted}; }
+    /* 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: ${c.space["2"]}; height: ${c.size.selectTriggerMd}; flex-shrink: 0; padding: 0 ${c.space["3.5"]}; border: 1px solid ${c.strokeSelectTrigger}; border-radius: ${c.radius.md}; color: ${c.fgNeutralMuted}; }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgSelectNeutral}; }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; line-height: 19px; color: ${c.fgSelectNeutral}; }
     .crisp-multiselect-search input::placeholder { color: ${c.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: ${c.space["4"]}; background: ${c.strokeSelectDivider}; }
     /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
     .crisp-multiselect-label { padding: ${c.space["2"]} ${c.space["4"]} 0; font-size: ${c.text.md}; line-height: 18px; font-weight: ${c.weight.regular}; color: ${c.fgNeutralSubtle}; }
     .crisp-multiselect-option {
@@ -103,6 +113,20 @@ const config = defineRecipe({
         // 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: ${c.size.menuRow}; border-radius: ${c.radius.md}; gap: ${c.space["1"]}; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]}; }

package/dist/esm/components/select/select.js

@@ -185,7 +185,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);
-                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                    }, onKeyDown: onNavKeys })] })), searchable && _jsx("div", { className: "crisp-select-divider" }), filtered.length === 0 ? (_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