@crisp-ui-kit/crisp 0.36.0 → 0.37.0

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

@@ -4,8 +4,10 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // (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 = defineRecipe({
     name: "select",
     base: `
@@ -28,7 +30,7 @@ const config = 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: ${c.space.px};
+      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 280px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
 import * as React from "react";
-import { useFocusAfterRemoval } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, useFocusAfterRemoval } from "../../core/index.js";
+import { MenuCheckboxItem } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
 const OP_LABELS = {
     contains: "contains",
     is: "is",
     isnot: "is not",
+    isanyof: "is any of",
     empty: "is empty",
     notempty: "is not empty",
 };
@@ -18,7 +20,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))
@@ -44,7 +55,8 @@ const asText = (v) => {
  * display string, so a grouped-thousands "$1,200" still matches "1200".
  */
 export 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) => {
@@ -54,6 +66,8 @@ export 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);
@@ -115,6 +129,8 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     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(() => {
@@ -122,8 +138,15 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
             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 (isInsideLaterFloatingLayer(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -213,9 +236,30 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                     .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_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 (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_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 ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_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 (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), opsFor(col).map((op) => (_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 ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_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 && (_jsxs(_Fragment, { children: [_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 (_jsx(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));
                 }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }

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

@@ -0,0 +1,25 @@
+import { createPortal } from "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.
+ */
+export function FloatingPortal({ children, }) {
+    return createPortal(children, document.body);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * 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. */
+export 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".
+ */
+export 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/esm/core/index.js

@@ -3,6 +3,8 @@ export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
+export { FloatingPortal } from "./floating-portal.js";
+export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/product/recordstable/recordstable.js

@@ -14,7 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
-import { isRtlElement, usePrefersReducedMotion } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, isRtlElement, usePrefersReducedMotion, } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -460,8 +460,15 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
             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 (isInsideLaterFloatingLayer(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -476,8 +483,12 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         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 (isInsideLaterFloatingLayer(t, null))
+                return;
+            setCtxMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setCtxMenu(null);
         document.addEventListener("mousedown", onDown);

package/dist/menu.css

@@ -1,6 +1,6 @@
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); 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; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }

package/dist/menu.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); 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; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }

package/dist/multiselect.css

@@ -8,7 +8,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/multiselect.layered.css

@@ -9,7 +9,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/popover.css

@@ -1,6 +1,6 @@
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }

package/dist/popover.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }

package/dist/select.css

@@ -8,7 +8,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .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: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/select.layered.css

@@ -9,7 +9,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .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: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/styles.css

@@ -450,7 +450,7 @@
 
 .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); }
@@ -710,7 +710,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); }
@@ -973,7 +973,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); 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; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1012,7 +1012,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1045,7 +1045,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1217,7 +1217,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .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: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/styles.layered.css

@@ -451,7 +451,7 @@
 
 .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); }
@@ -711,7 +711,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); }
@@ -974,7 +974,7 @@
 
 .crisp-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; 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); 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; }
     & .crisp-menu-content[data-up] { transform-origin: bottom left; }
     & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
@@ -1013,7 +1013,7 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
@@ -1046,7 +1046,7 @@
 
 .crisp-popover {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }
 }
@@ -1218,7 +1218,7 @@
     & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .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: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
+    & .crisp-select-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 280px; overflow-y: auto; 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); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
     & .crisp-select-listbox[data-up] { transform-origin: bottom; }
     & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -8,18 +8,27 @@ export type ToolbarSort = {
     key: string;
     dir: SortDir;
 };
-export type ToolbarFilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
+export type ToolbarFilterOp = "contains" | "is" | "isnot" | "isanyof" | "empty" | "notempty";
 export type ToolbarFilter = {
     id: string;
     key: string;
     op: ToolbarFilterOp;
     value: string;
+    /** Selected values for `"isanyof"` — ignored by every other op. */
+    values?: string[];
 };
 export type TableToolbarColumn = {
     key: string;
     label: string;
     /** Leading field-type icon, shown in the field pickers. */
     icon?: IconType;
+    /**
+     * This column's distinct values (a status/select field's option set, e.g.).
+     * Supplying it adds `"isanyof"` — a searchable checkbox list, Attio's
+     * faceted multi-select filter — to the column's condition picker. Omit it
+     * for a free-text column; there is nothing to check off.
+     */
+    values?: string[];
 };
 export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /** The fields that can be sorted and filtered on. */

package/dist/types/core/floating-portal.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+/**
+ * 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.
+ */
+export declare function FloatingPortal({ children, }: {
+    children: React.ReactNode;
+}): React.ReactPortal;

package/dist/types/core/floating-stack.d.ts

@@ -0,0 +1,13 @@
+/** Call when a layer opens; call the returned cleanup when it closes. */
+export declare function registerFloatingLayer(el: HTMLElement): () => void;
+/**
+ * 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".
+ */
+export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;

package/dist/types/core/index.d.ts

@@ -3,6 +3,8 @@ export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
+export { FloatingPortal } from "./floating-portal";
+export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",