@crisp-ui-kit/crisp 0.38.0 → 0.39.0

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

@@ -6,43 +6,55 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // check). The content portals to document.body (#339) so no ancestor's
 // transform/backdrop-filter can capture its position: fixed box; z-index 70
 // keeps it above Dialog/Drawer's 60/61.
+//
+// The menu's floating content and everything inside it live in `globalCss`
+// below, not nested under `&` (#357): nesting compiles to a real descendant
+// combinator scoped to the recipe's root class, which needs actual DOM
+// containment — exactly what the portal to `document.body` breaks. Nested,
+// these rules matched nothing once the content moved and the menu rendered
+// completely unstyled. `font-family`/smoothing are restated on the content's
+// own rule (items then pick font up via their own `font-family: inherit`,
+// which still works — that inheritance is intact WITHIN the portaled
+// subtree, only the link back to the trigger-holding root broke).
 const config = defineRecipe({
     name: "menu",
     base: `
     position: relative; display: inline-flex; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-
-    & .crisp-menu-content {
+  `,
+    globalCss: `
+    .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};
       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};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
-    & .crisp-menu-content[data-up] { transform-origin: bottom left; }
-    & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
-    & .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    .crisp-menu-content[data-align="end"] { transform-origin: top right; }
+    .crisp-menu-content[data-up] { transform-origin: bottom left; }
+    .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
-    & .crisp-menu-item {
+    .crisp-menu-item {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; flex-shrink: 0;
       margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md};
       font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
-    & .crisp-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .crisp-menu-item:focus { outline: none; }
-    & .crisp-menu-item:hover:not([data-disabled]), & .crisp-menu-item:focus-visible:not([data-disabled]), & .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: ${c.bgRaised}; }
-    & .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-menu-item--danger { color: ${c.bgDanger}; }
-    & .crisp-menu-item--danger svg { color: ${c.bgDanger}; }
-    & .crisp-menu-item--danger:hover, & .crisp-menu-item--danger:focus-visible, & .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
-    & .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
-    & .crisp-menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
-    & .crisp-menu-item-check--placeholder { width: 15px; }
+    .crisp-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    .crisp-menu-item:focus { outline: none; }
+    .crisp-menu-item:hover:not([data-disabled]), .crisp-menu-item:focus-visible:not([data-disabled]), .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: ${c.bgRaised}; }
+    .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    .crisp-menu-item--danger { color: ${c.bgDanger}; }
+    .crisp-menu-item--danger svg { color: ${c.bgDanger}; }
+    .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
+    .crisp-menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    .crisp-menu-item-check--placeholder { width: 15px; }
 
-    & .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
-    & .crisp-menu-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-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
+    .crisp-menu-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}; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -154,7 +154,7 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

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

@@ -6,6 +6,19 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // toggle on click. The popover portals to document.body (#339) so no
 // ancestor's transform/backdrop-filter can capture its position: fixed box;
 // z-index 70 keeps it above Dialog/Drawer's 60/61.
+// The listbox and everything inside it (including the recordstable-tag
+// chips, which render inside listbox option rows as well as the trigger)
+// live in `globalCss` below, not nested under `&` (#357): nesting compiles
+// to a real descendant combinator scoped to the recipe's root class, which
+// needs actual DOM containment — exactly what the portal to `document.body`
+// breaks. Nested, these rules matched nothing once the listbox moved and it
+// rendered completely unstyled. The trigger and its own parts stay nested
+// under `&` — the trigger is NOT portaled. `font-family`/smoothing are
+// restated on the listbox's own rule (its children pick font up via their
+// own `font-family: inherit`, which still works — that inheritance is
+// intact WITHIN the portaled subtree, only the link back to the
+// trigger-holding root broke). A flat recordstable-tag selector also works
+// unchanged wherever it's rendered, portaled or not, so it needs no split.
 const config = defineRecipe({
     name: "multiselect",
     base: `
@@ -26,38 +39,40 @@ const config = defineRecipe({
     & .crisp-multiselect-placeholder { color: ${c.fgMuted}; }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-
-    & .crisp-multiselect-listbox {
+  `,
+    globalCss: `
+    .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};
       max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
-    & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .crisp-multiselect-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
-    & .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}; }
-    & .crisp-multiselect-option {
+    .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
+    .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    .crisp-multiselect-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+    .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}; }
+    .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;
     }
-    & .crisp-multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
-    & .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
-    & .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
-    & .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
-    & .crisp-multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    .crisp-multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
+    .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+    .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
+    .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
+    .crisp-multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
   `,
     variants: {
         // Same ring Select's `invalid` draws — see that recipe's comment.

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

@@ -86,7 +86,7 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { children: _jsx("div", { ref: contentRef, className: "crisp-popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: "crisp-popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
                         if (e.key === "Escape") {
                             e.preventDefault();
                             setOpen(false);

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

@@ -6,12 +6,27 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // ancestor's transform/backdrop-filter can capture its position: fixed box;
 // z-index 70 keeps it above Dialog/Drawer's 60/61. The display:contents root
 // is what's left in place, so a consumer's own styling of it survives.
+//
+// The popover's floating content is declared via `globalCss` below, not
+// nested under `&` (#357): nesting compiles to a genuine descendant
+// combinator scoped to the recipe's root class, and the portal moves the
+// content to a DOM sibling of `document.body`, not a descendant of the root
+// — so a nested rule silently matched nothing and the popover rendered
+// completely unstyled (`position: static`, no background, no shadow).
+// `globalCss` is already the escape hatch for CSS a property can't express
+// (`@keyframes`); a portaled part is the same problem, one selector at a
+// time. Every declaration a portaled selector needs — including ones
+// normally inherited from the root, like `font-family` — has to be restated
+// here, since DOM inheritance from the root is exactly what the portal
+// breaks.
 const config = defineRecipe({
     name: "popover",
-    base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-popover-content { 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); } }
-    & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
-    & .crisp-popover-content[data-up] { transform-origin: bottom left; }`,
+    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); } }
+    .crisp-popover-content[data-align="end"] { transform-origin: top right; }
+    .crisp-popover-content[data-up] { transform-origin: bottom left; }
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -144,7 +144,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

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

@@ -8,6 +8,17 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // (Dialog's own measured surface sets both) can capture its position: fixed
 // box; z-index 70 keeps it above Dialog/Drawer's z-index 60/61 layers, since
 // it's no longer nested inside whichever one opened it.
+// The listbox and everything inside it live in `globalCss` below, not
+// nested under `&` (#357): nesting compiles to a real descendant combinator
+// scoped to the recipe's root class, which needs actual DOM containment —
+// exactly what the portal to `document.body` breaks. Nested, these rules
+// matched nothing once the listbox moved and it rendered completely
+// unstyled. The trigger and its own parts stay nested under `&` — the
+// trigger is NOT portaled, it stays where it was authored. `font-family`/
+// smoothing are restated on the listbox's own rule (its children pick font
+// up via their own `font-family: inherit`, which still works — that
+// inheritance is intact WITHIN the portaled subtree, only the link back to
+// the trigger-holding root broke).
 const config = defineRecipe({
     name: "select",
     base: `
@@ -28,31 +39,33 @@ const config = defineRecipe({
     & .crisp-select-placeholder { color: ${c.fgMuted}; }
     & .crisp-select-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-
-    & .crisp-select-listbox {
+  `,
+    globalCss: `
+    .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};
       max-height: 280px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .crisp-select-listbox[data-up] { transform-origin: bottom; }
-    & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .crisp-select-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
-    & .crisp-select-search svg { flex-shrink: 0; }
-    & .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}; }
-    & .crisp-select-option {
+    .crisp-select-listbox[data-up] { transform-origin: bottom; }
+    .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    .crisp-select-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+    .crisp-select-search svg { flex-shrink: 0; }
+    .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}; }
+    .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};
       font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
-    & .crisp-select-option[data-highlighted] { background: ${c.bgRaised}; }
-    & .crisp-select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
-    & .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-select-option-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    .crisp-select-option[data-highlighted] { background: ${c.bgRaised}; }
+    .crisp-select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
+    .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .crisp-select-option-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
   `,
     variants: {
         // ghost: borderless at rest (transparent), reveals a subtle fill on hover —

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { createPortal } from "react-dom";
 /**
  * Portals a floating layer (a `position: fixed` listbox/menu/popover
@@ -19,7 +20,26 @@ import { createPortal } from "react-dom";
  * starts `false` and is driven only by client interaction — never a prop a
  * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
  * touches `document` during SSR, the same safety Tooltip already had.
+ *
+ * `sourceRef` is the caller's own root — still in its original DOM position,
+ * never portaled — used to carry a `data-theme` set on some ancestor of it
+ * onto the portaled content (#357). `[data-theme="dark"]` is a normal
+ * attribute selector: it needs the themed element to be an actual DOM
+ * ancestor, which a consumer that scopes theming below `<html>`/`<body>`
+ * (crisp's own visual-test harness does exactly this, per case) no longer
+ * is once the content moves to `document.body` — the popover rendered in
+ * the PAGE's theme instead of the SUBTREE's. Re-declaring the attribute
+ * directly on the portaled root re-establishes it for CSS attribute
+ * selectors AND for `var()` resolution, since a custom property set under
+ * `[data-theme="dark"] { --crisp-x: ... }` only reaches descendants of an
+ * element carrying that attribute.
  */
-export function FloatingPortal({ children, }) {
-    return createPortal(children, document.body);
+export function FloatingPortal({ children, sourceRef, }) {
+    const theme = sourceRef.current
+        ?.closest("[data-theme]")
+        ?.getAttribute("data-theme");
+    const content = theme
+        ? React.cloneElement(children, { "data-theme": theme })
+        : children;
+    return createPortal(content, document.body);
 }

package/dist/menu.css

@@ -1,24 +1,39 @@
+
+    .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);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-menu-content[data-align="end"] { transform-origin: top right; }
+    .crisp-menu-content[data-up] { transform-origin: bottom left; }
+    .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-menu-item {
+      box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); flex-shrink: 0;
+      margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md);
+      font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; white-space: nowrap;
+    }
+    .crisp-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    .crisp-menu-item:focus { outline: none; }
+    .crisp-menu-item:hover:not([data-disabled]), .crisp-menu-item:focus-visible:not([data-disabled]), .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: var(--crisp-bg-raised); }
+    .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    .crisp-menu-item--danger { color: var(--crisp-bg-danger); }
+    .crisp-menu-item--danger svg { color: var(--crisp-bg-danger); }
+    .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
+    .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--crisp-space-3); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); letter-spacing: 0.02em; }
+    .crisp-menu-item-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
+    .crisp-menu-item-check--placeholder { width: 15px; }
+
+    .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: var(--crisp-space-1) calc(-1 * var(--crisp-space-1)); background: var(--crisp-border-subtle); }
+    .crisp-menu-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-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
-    & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
-    & .crisp-menu-content[data-up] { transform-origin: bottom left; }
-    & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
-    & .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .crisp-menu-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); flex-shrink: 0; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; white-space: nowrap; }
-    & .crisp-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-menu-item:focus { outline: none; }
-    & .crisp-menu-item:hover:not([data-disabled]), & .crisp-menu-item:focus-visible:not([data-disabled]), & .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: var(--crisp-bg-raised); }
-    & .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-menu-item--danger { color: var(--crisp-bg-danger); }
-    & .crisp-menu-item--danger svg { color: var(--crisp-bg-danger); }
-    & .crisp-menu-item--danger:hover, & .crisp-menu-item--danger:focus-visible, & .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
-    & .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--crisp-space-3); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); letter-spacing: 0.02em; }
-    & .crisp-menu-item-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
-    & .crisp-menu-item-check--placeholder { width: 15px; }
-    & .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: var(--crisp-space-1) calc(-1 * var(--crisp-space-1)); background: var(--crisp-border-subtle); }
-    & .crisp-menu-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); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/menu.layered.css

@@ -1,25 +1,40 @@
 @layer crisp-components {
+
+    .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);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-menu-content[data-align="end"] { transform-origin: top right; }
+    .crisp-menu-content[data-up] { transform-origin: bottom left; }
+    .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-menu-item {
+      box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); flex-shrink: 0;
+      margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md);
+      font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; white-space: nowrap;
+    }
+    .crisp-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    .crisp-menu-item:focus { outline: none; }
+    .crisp-menu-item:hover:not([data-disabled]), .crisp-menu-item:focus-visible:not([data-disabled]), .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: var(--crisp-bg-raised); }
+    .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    .crisp-menu-item--danger { color: var(--crisp-bg-danger); }
+    .crisp-menu-item--danger svg { color: var(--crisp-bg-danger); }
+    .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
+    .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--crisp-space-3); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); letter-spacing: 0.02em; }
+    .crisp-menu-item-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
+    .crisp-menu-item-check--placeholder { width: 15px; }
+
+    .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: var(--crisp-space-1) calc(-1 * var(--crisp-space-1)); background: var(--crisp-border-subtle); }
+    .crisp-menu-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-menu {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-menu-content { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
-    & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
-    & .crisp-menu-content[data-up] { transform-origin: bottom left; }
-    & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
-    & .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .crisp-menu-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); flex-shrink: 0; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; white-space: nowrap; }
-    & .crisp-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-menu-item:focus { outline: none; }
-    & .crisp-menu-item:hover:not([data-disabled]), & .crisp-menu-item:focus-visible:not([data-disabled]), & .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: var(--crisp-bg-raised); }
-    & .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-menu-item--danger { color: var(--crisp-bg-danger); }
-    & .crisp-menu-item--danger svg { color: var(--crisp-bg-danger); }
-    & .crisp-menu-item--danger:hover, & .crisp-menu-item--danger:focus-visible, & .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
-    & .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--crisp-space-3); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); letter-spacing: 0.02em; }
-    & .crisp-menu-item-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
-    & .crisp-menu-item-check--placeholder { width: 15px; }
-    & .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: var(--crisp-space-1) calc(-1 * var(--crisp-space-1)); background: var(--crisp-border-subtle); }
-    & .crisp-menu-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); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/multiselect.css

@@ -1,3 +1,37 @@
+
+    .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);
+      max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
+    .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+    .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); }
+    .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;
+    }
+    .crisp-multiselect-option[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+    .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1.5px var(--crisp-border-default); color: transparent; }
+    .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: var(--crisp-bg-brand-solid); box-shadow: none; color: #fff; }
+    .crisp-multiselect-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+
+    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+    .crisp-recordstable-tag[data-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)); }
+  
 .crisp-multiselect {
   position: relative; display: inline-flex; width: 100%; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-multiselect-trigger { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; min-width: 0; min-height: var(--crisp-size-menuRow); margin: 0; padding: var(--crisp-space-0-5) var(--crisp-space-1-5) var(--crisp-space-0-5) var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; text-align: start; transition: background-color .12s ease, box-shadow .12s ease; }
@@ -8,27 +42,6 @@
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-muted); }
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
-    & .crisp-multiselect-listbox { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px); max-height: 300px; overflow-y: auto; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; }
-    & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
-    & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
-    & .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); }
-    & .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; }
-    & .crisp-multiselect-option[data-highlighted] { background: var(--crisp-bg-raised); }
-    & .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
-    & .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1.5px var(--crisp-border-default); color: transparent; }
-    & .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: var(--crisp-bg-brand-solid); box-shadow: none; color: #fff; }
-    & .crisp-multiselect-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
-    & .crisp-recordstable-tag[data-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)); }
 }
 .crisp-multiselect--invalid_true {
   & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }