@crisp-ui-kit/crisp 0.36.0 → 0.38.0

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

@@ -7,8 +7,10 @@ const tokens_1 = require("../../tokens");
 // (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
 // layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
 // check on the selected one and highlight on hover / keyboard. The listbox is
-// portaled into this root (which is position:relative) so it escapes overflow
-// while keeping these nested styles.
+// portaled to document.body (#339) so no ancestor's transform/backdrop-filter
+// (Dialog's own measured surface sets both) can capture its position: fixed
+// box; z-index 70 keeps it above Dialog/Drawer's z-index 60/61 layers, since
+// it's no longer nested inside whichever one opened it.
 const config = (0, core_1.defineRecipe)({
     name: "select",
     base: `
@@ -31,7 +33,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
 
     & .crisp-select-listbox {
-      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
       max-height: 280px; 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};
@@ -71,8 +73,21 @@ const config = (0, core_1.defineRecipe)({
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
+        // Same ring Input's `invalid` draws, adapted to Select's box-shadow-ring
+        // trigger (a real <button>, so it needs no ::after overlay the way
+        // Input/Textarea do). Outranks hover/open/focus, same reasoning as
+        // Input: a field being corrected stays visibly wrong while it is.
+        invalid: {
+            true: `
+        & .crisp-select-trigger,
+        & .crisp-select-trigger:hover,
+        & .crisp-select-trigger[data-open],
+        & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgDanger}; }
+      `,
+            false: ``,
+        },
     },
-    defaultVariants: { variant: "default", width: "full" },
+    defaultVariants: { variant: "default", width: "full", invalid: false },
     compoundVariants: [],
 });
 exports.selectRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -40,12 +40,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
+const menu_1 = require("../menu");
 const select_1 = require("../select");
 const tabletoolbar_recipe_1 = require("./tabletoolbar.recipe");
 const OP_LABELS = {
     contains: "contains",
     is: "is",
     isnot: "is not",
+    isanyof: "is any of",
     empty: "is empty",
     notempty: "is not empty",
 };
@@ -56,7 +58,16 @@ const OP_ORDER = [
     "empty",
     "notempty",
 ];
+// "isanyof" is appended only for a column that supplies `values` — there is
+// nothing to check off otherwise.
+const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
 const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const opNeedsValues = (op) => op === "isanyof";
+// "Department is any of IT, Finance" past two values becomes "… +N": the
+// chip is one line, and a field can have far more than two facet values.
+const isAnyOfSummary = (values) => values.length <= 2
+    ? values.join(", ")
+    : `${values.slice(0, 2).join(", ")} +${values.length - 2}`;
 const isEmptyValue = (v) => v == null || v === "" || (Array.isArray(v) && v.length === 0);
 const asText = (v) => {
     if (isEmptyValue(v))
@@ -82,7 +93,8 @@ const asText = (v) => {
  * display string, so a grouped-thousands "$1,200" still matches "1200".
  */
 function applyFilters(rows, filters, get = (row, key) => row[key]) {
-    const active = filters.filter((f) => !opNeedsValue(f.op) || f.value.trim() !== "");
+    const active = filters.filter((f) => (!opNeedsValue(f.op) || f.value.trim() !== "") &&
+        (!opNeedsValues(f.op) || (f.values?.length ?? 0) > 0));
     if (!active.length)
         return rows;
     return rows.filter((row) => active.every((f) => {
@@ -92,6 +104,8 @@ function applyFilters(rows, filters, get = (row, key) => row[key]) {
         if (f.op === "notempty")
             return !isEmptyValue(raw);
         const t = asText(raw).toLowerCase();
+        if (f.op === "isanyof")
+            return (f.values ?? []).some((v) => v.toLowerCase() === t);
         const v = f.value.trim().toLowerCase();
         if (f.op === "contains")
             return t.includes(v);
@@ -153,6 +167,8 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
+    // filters the "isanyof" checkbox list, same lifetime as filterQuery above
+    const [anyOfQuery, setAnyOfQuery] = React.useState("");
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -160,8 +176,15 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".crisp-tabletoolbar-menu, [data-menu-trigger]"))
-                setOpenMenu(null);
+            if (t.closest(".crisp-tabletoolbar-menu, [data-menu-trigger]"))
+                return;
+            // #339: a Select opened from inside this popover (the sort row's
+            // direction control) now portals to document.body, so it's no longer
+            // inside .crisp-tabletoolbar-menu by DOM containment -- check the
+            // shared floating-layer stack too.
+            if ((0, core_1.isInsideLaterFloatingLayer)(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -251,9 +274,30 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
                                     .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
-                    const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
+                        (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
+                    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
-                                        autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
+                                        autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                                // biome-ignore lint/a11y/noAutofocus: focus the search field
+                                                autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                                .filter((v) => v
+                                                .toLowerCase()
+                                                .includes(anyOfQuery.trim().toLowerCase()))
+                                                .map((v) => {
+                                                const checked = (cond.values ?? []).includes(v);
+                                                return ((0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
+                                                        const set = new Set(cond.values ?? []);
+                                                        if (next)
+                                                            set.add(v);
+                                                        else
+                                                            set.delete(v);
+                                                        // the column's own order, not click order —
+                                                        // what the chip summary reads out
+                                                        patchFilter(cond.id, {
+                                                            values: col.values?.filter((x) => set.has(x)),
+                                                        });
+                                                    }, children: v }, v));
+                                            })] }))] }))] }, cond.id));
                 }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }

package/dist/cjs/core/floating-portal.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingPortal = FloatingPortal;
+const react_dom_1 = require("react-dom");
+/**
+ * Portals a floating layer (a `position: fixed` listbox/menu/popover
+ * content) to `document.body` — exactly what Tooltip already did with a
+ * bare `createPortal` call, pulled out so `Select`, `MultiSelect`, `Menu`,
+ * `Popover` and `ContextMenu` share the one implementation (#339).
+ *
+ * Needed because a `position: fixed` box resolves against the nearest
+ * ancestor that establishes a containing block for it — not necessarily the
+ * viewport. `transform` (even the identity `scale(1)`), `filter` and
+ * `backdrop-filter` all qualify, and `Dialog`'s own measured surface sets
+ * both a resting `transform: scale(1)` (so its `@starting-style` entrance
+ * has something to animate from) and `backdrop-filter: blur(15px)` (Attio's
+ * frosted-glass modal). A floating layer opened from a trigger inside a
+ * `Dialog` was rendering offset by the dialog's own box instead of anchored
+ * to its trigger.
+ *
+ * Every caller renders this conditionally on its own `open` state, which
+ * starts `false` and is driven only by client interaction — never a prop a
+ * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
+ * touches `document` during SSR, the same safety Tooltip already had.
+ */
+function FloatingPortal({ children, }) {
+    return (0, react_dom_1.createPortal)(children, document.body);
+}

package/dist/cjs/core/floating-stack.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFloatingLayer = registerFloatingLayer;
+exports.isInsideLaterFloatingLayer = isInsideLaterFloatingLayer;
+/**
+ * Tracks every currently-open `FloatingPortal` layer, in open order, so a
+ * layer's outside-click check can tell "outside me" from "inside a layer I
+ * spawned" (#339).
+ *
+ * Portaling `Select`/`MultiSelect`/`Menu`/`Popover`/`ContextMenu` to
+ * `document.body` fixed their own mis-positioning inside a `Dialog`, but it
+ * broke a composition each of them supports: one of these opened INSIDE
+ * another (TableToolbar's sort popover is a `Menu` holding a per-row
+ * `Select`). Before portaling, the inner layer was a DOM descendant of the
+ * outer one, so the outer's `rootRef.contains(target)` check saw a click
+ * inside the inner layer as "inside". Once both portal independently to
+ * `document.body`, they become DOM SIBLINGS — nested in the React tree, not
+ * the DOM tree — so that same check reads the inner layer's own pointerdown
+ * as "outside", and the outer layer closes itself, unmounting the inner one
+ * mid-interaction.
+ *
+ * The fix: each layer registers its content node here on open (removed on
+ * close/unmount), and a layer's outside-click check also accepts a target
+ * inside any layer registered AFTER it — i.e. any layer that could only have
+ * opened from inside it.
+ */
+const stack = [];
+/** Call when a layer opens; call the returned cleanup when it closes. */
+function registerFloatingLayer(el) {
+    stack.push(el);
+    return () => {
+        const i = stack.indexOf(el);
+        if (i >= 0)
+            stack.splice(i, 1);
+    };
+}
+/**
+ * True when `target` sits inside a layer that was registered strictly after
+ * `self` — a layer that could only have been spawned from inside `self`,
+ * directly or through further nesting.
+ *
+ * Pass `null` for `self` when the caller is a hand-rolled dropdown that
+ * doesn't register itself on this stack (RecordsTable's and TableToolbar's
+ * own popovers, e.g.) — every registered layer then counts, which is the
+ * right query for "was this click inside some floating child I opened".
+ */
+function isInsideLaterFloatingLayer(target, self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    for (let i = selfIndex + 1; i < stack.length; i++) {
+        if (stack[i]?.contains(target))
+            return true;
+    }
+    return false;
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
 var cell_date_1 = require("./cell-date");
 Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return cell_date_1.formatCellDate; } });
 Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return cell_date_1.parseCellDate; } });
@@ -26,6 +26,11 @@ var dialog_description_1 = require("./dialog-description");
 Object.defineProperty(exports, "withDescribedBy", { enumerable: true, get: function () { return dialog_description_1.withDescribedBy; } });
 var direction_1 = require("./direction");
 Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function () { return direction_1.isRtlElement; } });
+var floating_portal_1 = require("./floating-portal");
+Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return floating_portal_1.FloatingPortal; } });
+var floating_stack_1 = require("./floating-stack");
+Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.isInsideLaterFloatingLayer; } });
+Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });
 var form_value_1 = require("./form-value");
 Object.defineProperty(exports, "formValueStyle", { enumerable: true, get: function () { return form_value_1.formValueStyle; } });
 var place_floating_1 = require("./place-floating");

package/dist/cjs/product/recordstable/recordstable.js

@@ -499,8 +499,15 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".crisp-recordstable-menu, [data-menu-trigger]"))
-                setOpenMenu(null);
+            if (t.closest(".crisp-recordstable-menu, [data-menu-trigger]"))
+                return;
+            // #339: a Select/MultiSelect/Menu opened from inside this popover now
+            // portals to document.body, so it's no longer inside
+            // .crisp-recordstable-menu by DOM containment -- check the shared
+            // floating-layer stack too.
+            if ((0, core_1.isInsideLaterFloatingLayer)(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -515,8 +522,12 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         if (!ctxMenu)
             return;
         const onDown = (e) => {
-            if (!e.target.closest(".crisp-recordstable-ctx"))
-                setCtxMenu(null);
+            const t = e.target;
+            if (t.closest(".crisp-recordstable-ctx"))
+                return;
+            if ((0, core_1.isInsideLaterFloatingLayer)(t, null))
+                return;
+            setCtxMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setCtxMenu(null);
         document.addEventListener("mousedown", onDown);

package/dist/cjs/tokens/palette.js

@@ -60,4 +60,27 @@ exports.palette = {
     cyan600: { light: "#00b9eb", dark: "#00b9eb" },
     purple600: { light: "#9b69ff", dark: "#9b69ff" },
     graySidebar: { light: "#fbfbfb", dark: "#0e0f10" },
+    // Soft Badge's text colour (#323): the *600 tones above, used directly as
+    // soft-badge text, fail AA on their own soft tint in light mode (2.97-3.87)
+    // and brand fails in dark too (3.83) -- everything else already brightens
+    // enough in dark to pass (measured: 5.60-6.77). Attio's own soft tag pills
+    // (a company's Categories field, app.attio.com, 2026-09-23) don't reuse the
+    // accent colour as text either: they shift it toward black (light) or white
+    // (dark) at roughly the same relative luminance regardless of hue --
+    // measured 5 different category colours in dark mode (L 0.61-0.75) and two
+    // in light (L 0.08-0.10), a tight enough cluster to generalise the SHIFT,
+    // not the exact colour, to crisp's own four accent hues. Computed to clear
+    // AA with the same margin Attio's pills measured at (5.5-6.5:1) against
+    // crisp's EXISTING soft-tint background -- the tint itself is unchanged.
+    // Dark values that already passed keep their *600 dark value unchanged.
+    softBrandText: { light: "#2057bd", dark: "#568df3" },
+    softSuccessText: { light: "#186b3d", dark: "#2ea968" },
+    softWarningText: { light: "#80520d", dark: "#e0982a" },
+    softDangerText: { light: "#a33539", dark: "#ff5a5f" },
+    // Same reasoning, for Badge's neutral tone: fg-muted on bg-raised measures
+    // 4.40 in light (just under AA) and 6.77 in dark (already fine). Unlike
+    // fg-muted/bg-raised themselves (system-wide, measured from Attio, kept
+    // as-is per build/spec-check.mjs's own note), this token exists only for
+    // Badge's soft-neutral text, so darkening it doesn't move any other surface.
+    softNeutralText: { light: "#686870", dark: "#9a9aa2" },
 };

package/dist/cjs/tokens/semantic.js

@@ -54,4 +54,11 @@ exports.semantic = {
     // #fbfbfb — the subtle raised fill; the active tab pill uses the same
     // value as the sidebar, so it shares the palette entry under a neutral name.
     bgSubtle: "graySidebar",
+    /** Soft Badge's text colour (#323) — see palette.ts's comment on the
+     * soft*Text entries for the Attio measurement this is derived from. */
+    fgBrandSoft: "softBrandText",
+    fgSuccessSoft: "softSuccessText",
+    fgWarningSoft: "softWarningText",
+    fgDangerSoft: "softDangerText",
+    fgNeutralSoft: "softNeutralText",
 };

package/dist/contextmenu.css

@@ -1,6 +1,6 @@
 .crisp-contextmenu {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-content { position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
     & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }

package/dist/contextmenu.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-contextmenu {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-content { position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-contextmenu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-menuRow); box-sizing: border-box; padding: 0 var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
     & .crisp-contextmenu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-contextmenu-item:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }

package/dist/dialog.css

@@ -6,7 +6,7 @@
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }

package/dist/dialog.layered.css

@@ -7,7 +7,7 @@
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-4); padding: var(--crisp-space-5) var(--crisp-space-4); }

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

@@ -29,29 +29,35 @@ const spec = defineSpec({
     ],
     variants: {
         tone: {
+            // #323: the soft text colour is a dedicated fg*Soft token, not the
+            // tone's own accent (fgMuted/bgBrandSolid/bgSuccess/bgWarning/bgDanger)
+            // — reusing the accent as soft text is exactly what measured below AA
+            // (2.97-4.40 in light; brand also failed in dark, 3.83). Background and
+            // ring are unchanged: they were never the problem, and neither is a
+            // measured Attio value that moving would help — only the text is.
             neutral: {
                 background: c.bgRaised,
-                color: c.fgMuted,
+                color: c.fgNeutralSoft,
                 boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
             },
             brand: {
                 background: soft(c.bgBrandSolid, 14),
-                color: c.bgBrandSolid,
+                color: c.fgBrandSoft,
                 boxShadow: ring(c.bgBrandSolid, 30),
             },
             success: {
                 background: soft(c.bgSuccess, 14),
-                color: c.bgSuccess,
+                color: c.fgSuccessSoft,
                 boxShadow: ring(c.bgSuccess, 30),
             },
             warning: {
                 background: soft(c.bgWarning, 16),
-                color: c.bgWarning,
+                color: c.fgWarningSoft,
                 boxShadow: ring(c.bgWarning, 32),
             },
             danger: {
                 background: soft(c.bgDanger, 14),
-                color: c.bgDanger,
+                color: c.fgDangerSoft,
                 boxShadow: ring(c.bgDanger, 30),
             },
         },

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
 import { contextmenuRecipe } from "./contextmenu.recipe.js";
 /**
@@ -41,12 +42,28 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
         dismiss: () => close(),
         contentRef: menuRef,
     });
+    // Registers the (now-portaled) menu on the shared floating-layer stack
+    // (#339) so this doesn't get closed out from under itself when it holds
+    // another floating layer -- see core/floating-stack.ts.
+    React.useEffect(() => {
+        if (!pos || !menuRef.current)
+            return;
+        return registerFloatingLayer(menuRef.current);
+    }, [pos]);
     React.useEffect(() => {
         if (!pos)
             return;
         const onDown = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                close();
+            // menuRef too (#339): the menu content portals to document.body, so
+            // it's no longer a descendant of rootRef.
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (menuRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, menuRef.current))
+                return;
+            close();
         };
         const onKey = (e) => e.key === "Escape" && close(true);
         document.addEventListener("pointerdown", onDown);
@@ -56,11 +73,11 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
-                        ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
-                        : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
-                        item.onSelect?.();
-                        close(true);
-                    }, children: [item.icon, item.label, item.shortcut && (_jsx("span", { className: "crisp-contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx(FloatingPortal, { children: _jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+                            ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
+                            : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
+                            item.onSelect?.();
+                            close(true);
+                        }, children: [item.icon, item.label, item.shortcut && (_jsx("span", { className: "crisp-contextmenu-shortcut", children: item.shortcut }))] }, i))) }) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

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

@@ -1,10 +1,13 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-// A right-click menu on the measured popover surface, positioned at the cursor.
+// A right-click menu on the measured popover surface, positioned at the
+// cursor. 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.
 const config = defineRecipe({
     name: "contextmenu",
     base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-content { position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-contextmenu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.menuRow}; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
     & .crisp-contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .crisp-contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }

package/dist/esm/components/dialog/dialog.js

@@ -41,7 +41,7 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
     return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-dialog-content", className), "data-crisp-dialog": id, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {

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

@@ -14,7 +14,7 @@ const config = defineRecipe({
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }

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

@@ -36,7 +36,7 @@ function formatSize(bytes) {
  * is theirs by construction. Controlled or uncontrolled, the same way every
  * other crisp component is.
  */
-export function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
+export function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }) {
     const props = {
         accept,
         disabled: disabledProp,
@@ -87,7 +87,7 @@ export function FileUpload({ className, labels, "aria-label": ariaLabel, accept,
     // 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, 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: () => {
+    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))) })] }));

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
-import { placeFloating } from "../../core/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, } from "../../core/index.js";
 import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
@@ -58,13 +58,30 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         setOpen(false);
         triggerRef.current?.focus?.();
     }, [setOpen]);
+    // Registers the (now-portaled) content on the shared floating-layer stack
+    // (#339) so this doesn't get closed out from under itself when it holds
+    // another floating layer (a Select in a sort popover, e.g.) -- see
+    // core/floating-stack.ts.
+    React.useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        return registerFloatingLayer(contentRef.current);
+    }, [open]);
     // close on outside pointer-down
     React.useEffect(() => {
         if (!open)
             return;
         const onDown = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                setOpen(false);
+            // contentRef too (#339): the menu content portals to document.body, so
+            // it's no longer a descendant of rootRef.
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (contentRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, contentRef.current))
+                return;
+            setOpen(false);
         };
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
@@ -88,7 +105,7 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "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: children }) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { children: _jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "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: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {