@crisp-ui-kit/crisp 0.42.0 → 0.44.0

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.js

@@ -195,7 +195,12 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const sel = selectedSet.has(opt.value);
-                            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] })] }, opt.value));
                         }))] }) }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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};
@@ -58,6 +63,10 @@ const config = (0, core_1.defineRecipe)({
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; cursor: pointer; text-align: start;

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.js

@@ -185,7 +185,12 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
-                            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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};
@@ -59,6 +64,10 @@ const config = (0, core_1.defineRecipe)({
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     .crisp-select-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
     .crisp-select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md};

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/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.js

@@ -159,7 +159,12 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const sel = selectedSet.has(opt.value);
-                            return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-multiselect-label", children: opt.group })), _jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] })] }, opt.value));
                         }))] }) }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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};
@@ -55,6 +60,10 @@ const config = defineRecipe({
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     .crisp-multiselect-search input::placeholder { color: ${c.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; cursor: pointer; text-align: start;

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.js

@@ -149,7 +149,12 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
-                            return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                            // #343: a header renders once per run of same-`group`
+                            // options, so consecutive rows sharing a group render one
+                            // heading, not one each.
+                            const showGroupLabel = opt.group !== undefined &&
+                                opt.group !== filtered[i - 1]?.group;
+                            return (_jsxs(React.Fragment, { children: [showGroupLabel && (_jsx("div", { className: "crisp-select-label", children: opt.group })), _jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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};
@@ -56,6 +61,10 @@ const config = defineRecipe({
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     .crisp-select-search input::placeholder { color: ${c.fgMuted}; }
     .crisp-select-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md};

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);
@@ -13,6 +18,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;

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);
@@ -14,6 +19,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;

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);
@@ -14,6 +19,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

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);
@@ -15,6 +20,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

package/dist/styles.css

@@ -459,7 +459,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 +990,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 +1041,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);
@@ -1045,6 +1060,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;
@@ -1091,7 +1110,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; }
   
@@ -1257,9 +1281,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);
@@ -1272,6 +1301,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

package/dist/styles.layered.css

@@ -460,7 +460,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 +991,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 +1042,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);
@@ -1046,6 +1061,10 @@
     .crisp-multiselect-search svg { flex-shrink: 0; }
     .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;
@@ -1092,7 +1111,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; }
   
@@ -1258,9 +1282,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);
@@ -1273,6 +1302,10 @@
     .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* #343: same measured values as Menu's own group heading
+       (crisp-menu-label) -- reused rather than re-measured, since it's the
+       same "small muted heading above a run of rows" treatment. */
+    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
       padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);

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

@@ -4,6 +4,14 @@ export type MultiSelectOption = {
     label: string;
     /** Chip colour tone; falls back to a deterministic pastel per value. */
     tone?: string;
+    /**
+     * Group heading, rendered above this option (#343). A header renders once
+     * per run of consecutive options sharing the same `group` — like native
+     * `<optgroup>`, grouping is positional: pre-sort `options` so same-group
+     * rows are adjacent, or the same label renders more than once. Options
+     * with no `group` render exactly as before this existed.
+     */
+    group?: string;
 };
 export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: MultiSelectOption[];

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

@@ -7,6 +7,14 @@ export type SelectOption = {
     /** A status colour dot shown before the label (status/select fields). */
     color?: string;
     disabled?: boolean;
+    /**
+     * Group heading, rendered above this option (#343). A header renders once
+     * per run of consecutive options sharing the same `group` — like native
+     * `<optgroup>`, grouping is positional: pre-sort `options` so same-group
+     * rows are adjacent, or the same label renders more than once. Options
+     * with no `group` render exactly as before this existed.
+     */
+    group?: string;
 };
 export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: SelectOption[];

package/package.json

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