@crisp-ui-kit/crisp 0.57.1 → 0.57.3

package/dist/cjs/components/chipgroup/chipgroup.js

@@ -0,0 +1,51 @@
+"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.ChipGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const chipgroup_recipe_1 = require("./chipgroup.recipe");
+/**
+ * A single-line, horizontally-scrolling row of `Chip`s (or anything else),
+ * with scroll-snap — for a filter/status row that would otherwise wrap onto
+ * a second line once it runs out of width (crisp#908). Every child snaps to
+ * the row's start edge and never shrinks, so scrolling always lands a chip
+ * flush against the left edge rather than mid-chip.
+ */
+exports.ChipGroup = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.div, { ref: ref, asChild: asChild, role: "group", className: (0, chipgroup_recipe_1.chipgroupRecipe)({ className }), ...props }));
+});
+exports.ChipGroup.displayName = "ChipGroup";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipgroupRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// your-moon/crisp#908: a horizontally-scrolling, single-line row for a set of
+// `Chip`s -- Naver/Kakao both solve "many filter/status chips" this way
+// (docs/study/korean/: Naver home `comp_snap_list`, `scroll-snap-type: x
+// mandatory`; Daum `UL.grid_xscroll`, native overflow with no snap). crisp
+// had no equivalent: a consumer's own flex row wraps chips onto a second
+// line once they run out of horizontal space, which breaks the one-line
+// table-header density Attio parity is built on (GRC's own toolbar filter
+// row and record tabs, per the issue). No new visual values -- the gap
+// between chips reuses `Chip`'s own measured 3px inter-child gap
+// (chip.recipe.ts's `gap: "3px"` comment), and the scrollbar is hidden the
+// same way `WheelPicker`'s already-shipped scroll column does
+// (`scrollbar-width: none` + the `-webkit-scrollbar` pseudo), not a new
+// pattern invented for this component.
+const config = (0, core_1.defineRecipe)({
+    name: "chipgroup",
+    base: `
+    display: flex; flex-wrap: nowrap; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+    overflow-x: auto; overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; -ms-overflow-style: none;
+    &::-webkit-scrollbar { display: none; }
+    & > * { flex-shrink: 0; scroll-snap-align: start; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.chipgroupRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipgroupRecipe = exports.ChipGroup = void 0;
+var chipgroup_1 = require("./chipgroup");
+Object.defineProperty(exports, "ChipGroup", { enumerable: true, get: function () { return chipgroup_1.ChipGroup; } });
+var chipgroup_recipe_1 = require("./chipgroup.recipe");
+Object.defineProperty(exports, "chipgroupRecipe", { enumerable: true, get: function () { return chipgroup_recipe_1.chipgroupRecipe; } });

package/dist/cjs/components/datatable/datatable.js

@@ -407,7 +407,11 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.onEntityClick ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, "data-shape": col.avatarShape === "circle" ? "circle" : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.href ? ((0, jsx_runtime_1.jsx)("a", { href: col.href(row), className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
+                            // same reasoning as onEntityClick's stopPropagation below --
+                            // this must not also trigger the row's own onRowClick.
+                            ev.stopPropagation();
+                        }, children: e.name })) : col.onEntityClick ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
                             // the cell's own click already just selects (see the
                             // TableCell onClick above) -- this must additionally stop
                             // the row's onRowClick from firing, since this name points

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

@@ -116,7 +116,13 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    /* #719: overflow: clip, not hidden, on every truncation rule below --
+       hidden still honours a programmatic scrollLeft assignment (found via
+       a screenshot tool that pans anything with scrollWidth > clientWidth),
+       blanking or fragmenting the visible text even though real user
+       scrolling was already blocked. clip renders the ellipsis identically
+       and leaves no scroll position to move. */
+    & .crisp-datatable-th-label { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     /* #465: 12px per the comment above (and Attio's measured header cell
        padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
        own documented value. */
@@ -203,7 +209,7 @@ const config = (0, core_1.defineRecipe)({
     /* reference picker: a leading 16px avatar per option, plus a trailing
        "Create X" row when the consumer supplies one (#449) -- same measured
        values as RecordsTable's own .crisp-recordstable-refoption*. */
-    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
@@ -289,8 +295,11 @@ const config = (0, core_1.defineRecipe)({
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
-    & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
+    /* #893: shared by the button (onEntityClick, a different record) and
+       the anchor (href, the row's own record) -- was button-only, which
+       silently left a real <a> unstyled the day #893 added one. */
+    & .crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
        column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --
@@ -304,7 +313,13 @@ const config = (0, core_1.defineRecipe)({
     & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
     & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
     & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    /* #892: the default shape's radius was a stray literal (radius.sm, 6px)
+       -- Attio's own real company/object avatar measures 30%, which is
+       Avatar's own already-shipped shape="rounded" value, not a new number.
+       shape="circle" reuses Avatar's own shape="circle" value (radius.full)
+       the same way, measured live on a real Attio person avatar. */
+    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-avatar[data-shape="circle"] { border-radius: ${tokens_1.contract.radius.full}; }
     & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
@@ -326,7 +341,7 @@ const config = (0, core_1.defineRecipe)({
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
-    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
     /* phone cell type/editor (#765) -- measured live: the dial-code prefix
        is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -58,7 +58,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", width = "full", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = (0, core_1.useCrispMessage)(placeholderProp, "Set date…");
     const clearLabel = (0, core_1.useCrispMessage)(clearLabelProp, "Clear date");
@@ -79,7 +79,7 @@ function DatePickerField({ value, defaultValue, onValueChange, onChange, placeho
         onValueChange?.(null);
         onChange?.(null);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ width, className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
                             // DatePickerProps is a union over selectionMode, and TypeScript
                             // cannot narrow it through a spread: it tries every branch and
                             // reports the range one as missing props. The field is always

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

@@ -13,7 +13,7 @@ const config = (0, core_1.defineRecipe)({
     display: inline-flex; font-family: ${tokens_1.contract.font.sans};
 
     & .crisp-datepickerfield-box {
-      display: inline-flex; align-items: center;
+      display: inline-flex; align-items: center; width: 100%;
       box-sizing: border-box; height: 32px; margin: 0;
       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);
@@ -22,6 +22,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     & .crisp-datepickerfield-trigger {
+      flex: 1; min-width: 0;
       display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
       height: 100%; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0;
       border: none; background: none; color: inherit; font-family: inherit;
@@ -51,8 +52,20 @@ const config = (0, core_1.defineRecipe)({
     }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // crisp#980: full (default) fills its container, matching Select's own
+        // width variant/default -- so a form composing DatePickerField alongside
+        // Input/Select via FormField gets one consistent column width across
+        // every field type, not just some of them. auto sizes to content, the
+        // behaviour every consumer got unconditionally before this.
+        width: {
+            full: `width: 100%;`,
+            auto: `width: auto;`,
+        },
+    },
+    defaultVariants: {
+        width: "full",
+    },
     compoundVariants: [],
 });
 exports.datepickerfieldRecipe = Object.assign((0, core_1.resolveRecipe)(config), {

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

@@ -3,11 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// A modal dialog surface — measured from a create-record modal: a radius-16
-// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
-// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
-// 2-layer black shadow) with a bordered header (title + close), a scrollable
-// body, and a bordered footer for the primary action.
+// your-moon/crisp#934: was a radius-16 frosted-glass card (a
+// 60%-tinted, 15px-backdrop-blurred outer shell wrapping a solid radius-12
+// inner card) -- owner-directed: Dialog's identity now follows seed-design
+// (daangn), whose own Dialog spec has no shadow/blur/tint property at all;
+// elevation there is conveyed purely by a darker backdrop scrim plus the
+// existing scale+fade entrance animation (which crisp already had). Flat
+// single surface now: `.crisp-dialog-content` is a bare, invisible sizing
+// wrapper (no background/radius/shadow of its own); `.crisp-dialog-card` is
+// the one real surface, radius bumped from `xl` (12px) to `3xl` (20px,
+// seed's own shared floating-surface radius, `$radius.r5`), no shadow.
+// `bgScrim` itself also moved toward seed's own darker backdrop value
+// (`tokens/palette.ts`). The alert variant no longer needs its own override
+// of either rule -- both variants now render the identical flat surface.
 //
 // #414: the footer's submit-key caps (⌘/Enter) used to be one span drawing a
 // visible pill (18px, 22%-white background). Attio's own are two separate
@@ -21,10 +29,8 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: ${tokens_1.contract.bgScrim}; }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
     & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: ${tokens_1.contract.space["4"]}; }
-    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
-    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
-    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius["3xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
@@ -46,7 +52,12 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; }
     & .crisp-dialog-field-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). Scoped to this one fill only -- Dialog's own frosted-
+       surface identity (#934) is untouched here. */
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandContrast}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
     & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
     & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-style: normal; font-size: 10px; }`,
     variants: {},

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

@@ -31,9 +31,14 @@ const config = (0, core_1.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: ${tokens_1.contract.space["2"]};
     & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid ${tokens_1.contract.borderSubtle}; background: none; color: ${tokens_1.contract.fgMuted}; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: ${tokens_1.contract.tracking["20"]}; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
     & .crisp-emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
             // #603: Attio's zero-*records* table state (Users/Workspaces with
@@ -48,7 +53,7 @@ const config = (0, core_1.defineRecipe)({
             // by the consumer via the existing `icon` prop, same as every
             // other variant.
             records: `& .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.tracking["20"]}; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }`,
         },
     },

package/dist/cjs/components/fileupload/fileupload.js

@@ -35,6 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fileUploadLabels = void 0;
+exports.FileUploadItem = FileUploadItem;
+exports.formatSize = formatSize;
 exports.FileUpload = FileUpload;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_file_upload_1 = require("@seed-design/react-file-upload");
@@ -54,6 +56,21 @@ exports.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.
+ */
+function FileUploadItem({ name, size, status, progress, onRemove, removeLabel, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("li", { className: className
+            ? `crisp-fileupload-item ${className}`
+            : "crisp-fileupload-item", "data-status": status, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-name", children: name }), status === "uploading" && progress != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress", role: "progressbar", "aria-valuenow": Math.round(progress), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": name, children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress-fill", style: { width: `${progress}%` } }) })), size != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-size", children: formatSize(size) })), onRemove && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": removeLabel, onClick: onRemove, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) }))] }));
+}
 /** 1000-based, matching how every file manager reports size. */
 function formatSize(bytes) {
     if (bytes < 1000)
@@ -140,8 +157,8 @@ function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, di
     // focus should land next.
     const rootRef = React.useRef(null);
     const focusAfterRemoval = (0, core_1.useFocusAfterRemoval)(rootRef, ".crisp-fileupload-remove", dropzoneRef);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "crisp-fileupload-item", "data-status": entry.status, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-name", children: entry.file.name }), entry.status === "uploading" && entry.progress != null && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-progress-fill", style: { width: `${entry.progress}%` } }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-item-size", children: formatSize(entry.file.size) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-fileupload-remove", "aria-label": `${t.remove}: ${entry.file.name}`, onClick: () => {
-                                focusAfterRemoval(i);
-                                removeFileEntry(entry.id);
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }, entry.id))) })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, ...rest, className: (0, fileupload_recipe_1.fileuploadRecipe)({ className }), children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-title", children: t.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-fileupload-hint", children: t.hint })] }), (0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-fileupload-input" }), acceptedFileEntries.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-list", children: acceptedFileEntries.map((entry, i) => ((0, jsx_runtime_1.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))) })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-fileupload-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-fileupload-error", children: `${r.file.name}: ${r.errors.map((e) => t.errors[e] ?? e).join(" ")}` }, r.file.name))) })] }));
 }

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputRecipe = exports.Input = void 0;
+exports.inputRecipe = exports.InputShell = exports.Input = void 0;
 var input_1 = require("./input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
+Object.defineProperty(exports, "InputShell", { enumerable: true, get: function () { return input_1.InputShell; } });
 var input_recipe_1 = require("./input.recipe");
 Object.defineProperty(exports, "inputRecipe", { enumerable: true, get: function () { return input_recipe_1.inputRecipe; } });

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
+exports.InputShell = exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const input_recipe_1 = require("./input.recipe");
@@ -45,3 +45,33 @@ exports.Input = React.forwardRef(({ size, invalid, className, style, suffix, ...
     return ((0, jsx_runtime_1.jsxs)("span", { className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, "data-readonly": props.readOnly ? "" : undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }), suffix != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-input-suffix", children: suffix })] }));
 });
 exports.Input.displayName = "Input";
+/**
+ * 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.
+ */
+exports.InputShell = React.forwardRef(({ size, invalid, className, style, suffix, readOnly, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, input_recipe_1.inputRecipe)({ size, invalid, className }), style: style, "data-readonly": readOnly ? "" : undefined, ...props, children: [children, suffix != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-input-suffix", children: suffix })] })));
+exports.InputShell.displayName = "InputShell";

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

@@ -4,11 +4,13 @@ exports.inputRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // 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
@@ -23,7 +25,7 @@ const config = (0, core_1.defineRecipe)({
     name: "input",
     base: `
     position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
-    width: 100%; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.textField};
+    width: 100%; background: ${tokens_1.contract.bgSurface}; border: 1px solid ${tokens_1.contract.borderDefault};
     font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
 
     &::after {
@@ -46,8 +48,10 @@ const config = (0, core_1.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, ${tokens_1.contract.fgPrimary} 2%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.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, ${tokens_1.contract.fgPrimary} 2%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.ringField}; }
     & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: ${tokens_1.contract.space["1"]}; }
   `,
     variants: {
@@ -59,7 +63,10 @@ const config = (0, core_1.defineRecipe)({
             // padding `medium` already uses, just 4px shorter.
             sm: `height: ${tokens_1.contract.size.row}; border-radius: ${tokens_1.contract.radius.md}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
             medium: `height: 32px; border-radius: ${tokens_1.contract.radius.md}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["2.5"]}; }`,
-            large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
+            // 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: ${tokens_1.contract.radius.xl}; & .crisp-input-value { padding-inline: ${tokens_1.contract.space["3"]}; }`,
         },
         invalid: {
             // critical outranks focus: a field that is wrong stays visibly wrong

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

@@ -144,12 +144,28 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
+    const { onKeyDown: onContentKeyDown, items } = (0, menu_keyboard_1.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,
@@ -165,7 +181,7 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
     });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {

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; } });