@crisp-ui-kit/crisp 0.43.0 → 0.45.0

package/dist/chip.css

@@ -0,0 +1,27 @@
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}

package/dist/chip.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface ChipVariants {
+  tone?: "neutral" | "brand" | "success" | "warning" | "danger" | "purple" | "cyan" | "orange";
+}
+
+export declare const chipRecipe: RecipeFn<{ tone: { neutral: string; brand: string; success: string; warning: string; danger: string; purple: string; cyan: string; orange: string } }>;

package/dist/chip.layered.css

@@ -0,0 +1,29 @@
+@layer crisp-components {
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+}

package/dist/cjs/components/chip/chip.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const chip_recipe_1 = require("./chip.recipe");
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+exports.Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, chip_recipe_1.chipRecipe)({ tone, className }), ...props, children: children }));
+});
+exports.Chip.displayName = "Chip";

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.chipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${tokens_1.contract.fgPrimary})`;
+const spec = (0, core_1.defineSpec)({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: tokens_1.contract.size.chip,
+        paddingInline: tokens_1.contract.space["1"],
+        borderRadius: tokens_1.contract.radius.chip,
+        fontSize: tokens_1.contract.text.lg,
+        lineHeight: "20px",
+        fontWeight: tokens_1.contract.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(tokens_1.contract.fgPrimary, 6),
+                color: soft(tokens_1.contract.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderSubtle}`,
+            },
+            brand: {
+                background: soft(tokens_1.contract.bgBrandSolid, 14),
+                color: onFg(tokens_1.contract.bgBrandSolid, 82),
+                boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(tokens_1.contract.bgSuccess, 16),
+                color: onFg(tokens_1.contract.bgSuccess, 78),
+                boxShadow: ring(tokens_1.contract.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(tokens_1.contract.bgWarning, 18),
+                color: onFg(tokens_1.contract.bgWarning, 82),
+                boxShadow: ring(tokens_1.contract.bgWarning, 30),
+            },
+            danger: {
+                background: soft(tokens_1.contract.bgDanger, 15),
+                color: onFg(tokens_1.contract.bgDanger, 80),
+                boxShadow: ring(tokens_1.contract.bgDanger, 30),
+            },
+            purple: {
+                background: soft(tokens_1.contract.bgPurple, 16),
+                color: onFg(tokens_1.contract.bgPurple, 80),
+                boxShadow: ring(tokens_1.contract.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(tokens_1.contract.bgCyan, 18),
+                color: onFg(tokens_1.contract.bgCyan, 82),
+                boxShadow: ring(tokens_1.contract.bgCyan, 30),
+            },
+            orange: {
+                background: soft(tokens_1.contract.bgOrange, 16),
+                color: onFg(tokens_1.contract.bgOrange, 82),
+                boxShadow: ring(tokens_1.contract.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.chipRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipRecipe = exports.Chip = void 0;
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+var chip_recipe_1 = require("./chip.recipe");
+Object.defineProperty(exports, "chipRecipe", { enumerable: true, get: function () { return chip_recipe_1.chipRecipe; } });

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

@@ -21,7 +21,12 @@ const config = (0, core_1.defineRecipe)({
     name: "contextmenu",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};`,
     globalCss: `
-    .crisp-contextmenu-content { font-family: ${tokens_1.contract.font.sans}; position: fixed; z-index: 70; min-width: 200px; box-sizing: border-box; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: ${tokens_1.contract.font.sans}; position: fixed; z-index: 70; pointer-events: auto; min-width: 200px; box-sizing: border-box; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
     .crisp-contextmenu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     .crisp-contextmenu-item:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }

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

@@ -26,9 +26,14 @@ const config = (0, core_1.defineRecipe)({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
       box-shadow: ${tokens_1.elevation.floating};

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

@@ -44,9 +44,14 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
       max-height: 300px; 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};

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

@@ -26,7 +26,12 @@ const config = (0, core_1.defineRecipe)({
     name: "popover",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};`,
     globalCss: `
-    .crisp-popover-content { font-family: ${tokens_1.contract.font.sans}; position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.floating}; 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: ${tokens_1.contract.font.sans}; position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.floating}; 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/cjs/components/select/select.recipe.js

@@ -44,9 +44,14 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; 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};

package/dist/cjs/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./components/button"), exports);
 __exportStar(require("./components/callout"), exports);
 __exportStar(require("./components/card"), exports);
 __exportStar(require("./components/checkbox"), exports);
+__exportStar(require("./components/chip"), exports);
 __exportStar(require("./components/columncalc"), exports);
 __exportStar(require("./components/contextmenu"), exports);
 __exportStar(require("./components/datatable"), exports);

package/dist/cjs/product/recordpanel/recordpanel.js

@@ -72,6 +72,19 @@ function RecordPanel({ record, columns, onClose, className, closeLabel = "Close
     // both close on the same keypress, since neither knows about the other --
     // none of the five are built on this listener or registered anywhere it
     // can see, only on the shared floating-stack this checks instead.
+    //
+    // The listener has to run in the CAPTURE phase, not bubble (#376): Menu's
+    // own Escape handling is a React onKeyDown on its content div -- a bubble
+    // -phase synthetic handler, which fires (and, closing Menu, synchronously
+    // unregisters it from the floating stack) BEFORE a bubble-phase listener
+    // on `document` ever sees the event. `hasOpenFloatingLayer()` read AFTER
+    // that already reflects Menu's own reaction, not the state Escape actually
+    // arrived in, so it raced and lost every time -- confirmed by logging the
+    // registration order in a real browser, not by reasoning about it. Capture
+    // fires top-down, before Menu's bubble handler runs at all, so the check
+    // sees the state as it stood when the key was pressed. This mirrors how
+    // Zag's own `trackEscapeKeydown` (Dialog/Drawer's Escape handling) already
+    // listens on `document` in capture, for the same reason.
     React.useEffect(() => {
         if (!record)
             return;
@@ -80,8 +93,8 @@ function RecordPanel({ record, columns, onClose, className, closeLabel = "Close
                 return;
             onClose();
         };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
+        document.addEventListener("keydown", onKey, true);
+        return () => document.removeEventListener("keydown", onKey, true);
     }, [record, onClose]);
     if (!record)
         return null;

package/dist/contextmenu.css

@@ -1,5 +1,10 @@
 
-    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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,6 +1,11 @@
 @layer crisp-components {
 
-    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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/esm/components/chip/chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { chipRecipe } from "./chip.recipe.js";
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+export const Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, className }), ...props, children: children }));
+});
+Chip.displayName = "Chip";

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

@@ -0,0 +1,77 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${c.fgPrimary})`;
+const spec = defineSpec({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: c.size.chip,
+        paddingInline: c.space["1"],
+        borderRadius: c.radius.chip,
+        fontSize: c.text.lg,
+        lineHeight: "20px",
+        fontWeight: c.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(c.fgPrimary, 6),
+                color: soft(c.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${c.borderSubtle}`,
+            },
+            brand: {
+                background: soft(c.bgBrandSolid, 14),
+                color: onFg(c.bgBrandSolid, 82),
+                boxShadow: ring(c.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(c.bgSuccess, 16),
+                color: onFg(c.bgSuccess, 78),
+                boxShadow: ring(c.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(c.bgWarning, 18),
+                color: onFg(c.bgWarning, 82),
+                boxShadow: ring(c.bgWarning, 30),
+            },
+            danger: {
+                background: soft(c.bgDanger, 15),
+                color: onFg(c.bgDanger, 80),
+                boxShadow: ring(c.bgDanger, 30),
+            },
+            purple: {
+                background: soft(c.bgPurple, 16),
+                color: onFg(c.bgPurple, 80),
+                boxShadow: ring(c.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(c.bgCyan, 18),
+                color: onFg(c.bgCyan, 82),
+                boxShadow: ring(c.bgCyan, 30),
+            },
+            orange: {
+                background: soft(c.bgOrange, 16),
+                color: onFg(c.bgOrange, 82),
+                boxShadow: ring(c.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+const config = specToRecipe(spec);
+export const chipRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

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

@@ -0,0 +1,2 @@
+export { Chip } from "./chip.js";
+export { chipRecipe } from "./chip.recipe.js";

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

@@ -18,7 +18,12 @@ const config = defineRecipe({
     name: "contextmenu",
     base: `display: contents; font-family: ${c.font.sans};`,
     globalCss: `
-    .crisp-contextmenu-content { font-family: ${c.font.sans}; 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: ${c.font.sans}; position: fixed; z-index: 70; pointer-events: auto; 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/menu/menu.recipe.js

@@ -23,9 +23,14 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};

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

@@ -41,9 +41,14 @@ const config = defineRecipe({
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};

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

@@ -23,7 +23,12 @@ const config = defineRecipe({
     name: "popover",
     base: `display: contents; font-family: ${c.font.sans};`,
     globalCss: `
-    .crisp-popover-content { font-family: ${c.font.sans}; position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: ${c.font.sans}; position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; 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/esm/components/select/select.recipe.js

@@ -41,9 +41,14 @@ const config = defineRecipe({
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
   `,
     globalCss: `
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; pointer-events: auto; 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/index.js

@@ -13,6 +13,7 @@ export * from "./components/button/index.js";
 export * from "./components/callout/index.js";
 export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
+export * from "./components/chip/index.js";
 export * from "./components/columncalc/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";

package/dist/esm/product/recordpanel/recordpanel.js

@@ -36,6 +36,19 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
     // both close on the same keypress, since neither knows about the other --
     // none of the five are built on this listener or registered anywhere it
     // can see, only on the shared floating-stack this checks instead.
+    //
+    // The listener has to run in the CAPTURE phase, not bubble (#376): Menu's
+    // own Escape handling is a React onKeyDown on its content div -- a bubble
+    // -phase synthetic handler, which fires (and, closing Menu, synchronously
+    // unregisters it from the floating stack) BEFORE a bubble-phase listener
+    // on `document` ever sees the event. `hasOpenFloatingLayer()` read AFTER
+    // that already reflects Menu's own reaction, not the state Escape actually
+    // arrived in, so it raced and lost every time -- confirmed by logging the
+    // registration order in a real browser, not by reasoning about it. Capture
+    // fires top-down, before Menu's bubble handler runs at all, so the check
+    // sees the state as it stood when the key was pressed. This mirrors how
+    // Zag's own `trackEscapeKeydown` (Dialog/Drawer's Escape handling) already
+    // listens on `document` in capture, for the same reason.
     React.useEffect(() => {
         if (!record)
             return;
@@ -44,8 +57,8 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
                 return;
             onClose();
         };
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
+        document.addEventListener("keydown", onKey, true);
+        return () => document.removeEventListener("keydown", onKey, true);
     }, [record, onClose]);
     if (!record)
         return null;

package/dist/menu.css

@@ -1,7 +1,12 @@
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/menu.layered.css

@@ -1,8 +1,13 @@
 @layer crisp-components {
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/multiselect.css

@@ -1,7 +1,12 @@
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/multiselect.layered.css

@@ -1,8 +1,13 @@
 @layer crisp-components {
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/popover.css

@@ -1,5 +1,10 @@
 
-    .crisp-popover-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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,6 +1,11 @@
 @layer crisp-components {
 
-    .crisp-popover-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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

@@ -1,7 +1,12 @@
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/select.layered.css

@@ -1,8 +1,13 @@
 @layer crisp-components {
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/styles.css

@@ -428,6 +428,34 @@
   }
 }
 
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
@@ -459,7 +487,12 @@
 }
 
 
-    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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); }
@@ -985,9 +1018,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);
@@ -1031,9 +1069,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);
@@ -1095,7 +1138,12 @@
 }
 
 
-    .crisp-popover-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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; }
   
@@ -1261,9 +1309,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

package/dist/styles.layered.css

@@ -429,6 +429,34 @@
   }
 }
 
+.crisp-chip {
+  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--tone_neutral {
+  background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
@@ -460,7 +488,12 @@
 }
 
 
-    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-contextmenu-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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); }
@@ -986,9 +1019,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, so every item was unclickable, hit-testing right
+       through to whatever real element sat behind it. */
     .crisp-menu-content {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);
@@ -1032,9 +1070,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-multiselect-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);
@@ -1096,7 +1139,12 @@
 }
 
 
-    .crisp-popover-content { font-family: var(--crisp-font-sans); 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); } }
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled content is outside Zag's knowledge -- it
+       inherited the lock, unclickable, hit-testing right through to
+       whatever real element sat behind it. */
+    .crisp-popover-content { font-family: var(--crisp-font-sans); position: fixed; z-index: 70; pointer-events: auto; 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; }
   
@@ -1262,9 +1310,14 @@
 }
 
 
+    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
+       on document.body while open (Zag re-enables it only on layers IT
+       tracks), and the portaled listbox is outside Zag's knowledge -- it
+       inherited the lock, so every option was unclickable, hit-testing
+       right through to whatever real element sat behind it. */
     .crisp-select-listbox {
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      position: fixed; z-index: 70; pointer-events: auto; 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);

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { chipRecipe } from "./chip.recipe";
+export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof chipRecipe> & {
+    asChild?: boolean;
+};
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+}> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/chip/chip.recipe.d.ts

@@ -0,0 +1,100 @@
+declare const spec: {
+    readonly name: "chip";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly height: `var(--${string})`;
+        readonly paddingInline: `var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly lineHeight: "20px";
+        readonly fontWeight: `var(--${string})`;
+        readonly whiteSpace: "nowrap";
+    };
+    readonly variants: {
+        readonly tone: {
+            readonly neutral: {
+                readonly background: string;
+                readonly color: string;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly success: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly warning: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly danger: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly purple: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly cyan: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly orange: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly tone: "neutral";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}>;
+export declare const chipRecipe: import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

package/dist/types/components/chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip, type ChipProps } from "./chip";
+export { chipRecipe } from "./chip.recipe";

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
+export * from "./components/chip";
 export * from "./components/columncalc";
 export * from "./components/contextmenu";
 export * from "./components/datatable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -88,6 +88,11 @@
       "import": "./dist/esm/components/checkbox/index.js",
       "require": "./dist/cjs/components/checkbox/index.js"
     },
+    "./chip": {
+      "types": "./dist/types/components/chip/index.d.ts",
+      "import": "./dist/esm/components/chip/index.js",
+      "require": "./dist/cjs/components/chip/index.js"
+    },
     "./columncalc": {
       "types": "./dist/types/components/columncalc/index.d.ts",
       "import": "./dist/esm/components/columncalc/index.js",