@crisp-ui-kit/crisp 0.45.0 → 0.47.0

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

@@ -126,6 +126,24 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
         open,
         close,

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

@@ -125,10 +125,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -182,6 +182,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", 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-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

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

@@ -109,6 +109,23 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

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

@@ -117,10 +117,10 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -177,6 +177,24 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.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

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

@@ -13,7 +13,7 @@ const config = (0, core_1.defineRecipe)({
     base: `display: block; box-sizing: border-box; background: ${tokens_1.contract.bgSurface};
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }

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

@@ -4,18 +4,25 @@ exports.tabsRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = (0, core_1.defineRecipe)({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; box-sizing: content-box; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${tokens_1.contract.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -24,7 +31,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${tokens_1.contract.space["2"]}); left: 0; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/cjs/components/tooltip/tooltip.js

@@ -33,19 +33,55 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = Tooltip;
+exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const tooltip_recipe_1 = require("./tooltip.recipe");
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function")
+                ref(node);
+            else
+                ref.current = node;
+        }
+    };
+}
 /**
  * A hover/focus tooltip — a dark hint chip measured live. Wraps its
  * trigger in an inline element, shows after `delay` on pointer-enter / focus,
- * and hides on leave / blur / Escape. The bubble is portaled and positioned
- * above the trigger (flipping below near the top edge).
+ * and hides on leave / blur / Escape (`asChild` skips the wrapper — see its
+ * doc). The bubble is portaled and positioned above the trigger (flipping
+ * below near the top edge).
+ *
+ * Composable as another component's trigger (#360: wrapping a `Popover`'s
+ * or `Menu`'s trigger in a `Tooltip` silently broke it). A composer clones
+ * a `ref`/`id`/`aria-*`/`onClick` onto whatever element it's handed —
+ * `Tooltip` wasn't `forwardRef` and didn't read any of the rest, so they
+ * landed on the `<Tooltip>` element itself, where nothing forwarded them
+ * anywhere. Both now merge onto the actual trigger via `Slot` (the same
+ * mechanism `ContextMenu`'s `asChild` uses) — the wrapping `<span>` can't
+ * carry them for the same reason it can't carry `aria-describedby` (below):
+ * a screen reader reads state off the focused element, not an ancestor.
  */
-function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+exports.Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, "aria-describedby": restDescribedBy, 
+// Not forwarded, even though a composer's other rest props are
+// (below): `style` sizes a VISUAL box, and Tooltip's wrapper has none
+// of its own -- the box that matters is whatever the consumer's own
+// trigger renders as, which they already own and can style directly.
+// Also matches Popover/Menu's own composer contract: their
+// cloneElement injects ref/id/aria-*/onClick, never style.
+style: _style, ...rest }, forwardedRef) => {
     const tipId = React.useId();
+    // The trigger's box for positioning the bubble: the wrapper `<span>` in
+    // the default mode (it exists and hugs the child tightly even when
+    // `children` isn't a single element, so hover positioning never depends
+    // on Slot succeeding), or the child itself in `asChild` mode (there is
+    // no wrapper to measure).
     const triggerRef = React.useRef(null);
     const timer = React.useRef(undefined);
     const [pos, setPos] = React.useState(null);
@@ -87,27 +123,50 @@ function Tooltip({ content, children, side = "top", delay = 350, open: openProp,
     // the only way a screen reader learns of one is `aria-describedby` on the
     // element that gets focus. It cannot go on the wrapper: a description on a
     // non-focusable span around a button is never announced. So the trigger is
-    // cloned, keeping any aria-describedby it already had, and the reference is
-    // only present while the bubble is (a reference to a removed node is dead
+    // Slot-merged, keeping any aria-describedby it already had (plus a
+    // composer's, if any — see restDescribedBy above), and the tipId is only
+    // present while the bubble is (a reference to a removed node is dead
     // wiring, #225).
-    const described = React.isValidElement(children) && open
-        ? React.cloneElement(children, {
-            "aria-describedby": [
-                children.props["aria-describedby"],
-                tipId,
-            ]
-                .filter(Boolean)
-                .join(" "),
-        })
+    const isElement = React.isValidElement(children);
+    const ownDescribedBy = isElement
+        ? children.props["aria-describedby"]
+        : undefined;
+    const describedBy = [ownDescribedBy, restDescribedBy, open ? tipId : undefined]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    // Baked onto a CLONE, not passed as a prop to <Slot> below: Slot's own
+    // mergeProps lets the child's OWN pre-existing prop win over anything
+    // unrecognised (it only special-cases style/className/on* handlers), so
+    // a `describedBy` passed to Slot would be silently discarded in favour
+    // of the child's original, un-merged `aria-describedby` the moment the
+    // child already had one.
+    const describedChild = isElement
+        ? React.cloneElement(children, { "aria-describedby": describedBy })
         : children;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: openAfterDelay, onPointerLeave: close, onFocusCapture: openAfterDelay, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: described }), open &&
-                pos != null &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: tipId, role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)(), style: {
-                        left: pos.left,
-                        top: pos.top,
-                        transform: pos.below
-                            ? "translate(-50%, 0)"
-                            : "translate(-50%, -100%)",
-                    }, children: content }), document.body)] }));
-}
-Tooltip.displayName = "Tooltip";
+    const hoverHandlers = {
+        onPointerEnter: openAfterDelay,
+        onPointerLeave: close,
+        onFocusCapture: openAfterDelay,
+        onBlurCapture: close,
+        onKeyDown: (e) => e.key === "Escape" && close(),
+    };
+    const portal = open &&
+        pos != null &&
+        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: tipId, role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)(), style: {
+                left: pos.left,
+                top: pos.top,
+                transform: pos.below
+                    ? "translate(-50%, 0)"
+                    : "translate(-50%, -100%)",
+            }, children: content }), document.body);
+    if (asChild) {
+        // No wrapper at all: the child carries the hover/focus/Escape
+        // handling AND the composer's ref/id/aria-*/onClick directly. Not an
+        // element (asChild has nothing to attach to) degrades the same way
+        // #225 already documented for aria-describedby: renders, but neither
+        // hovers nor composes.
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isElement ? ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: mergeRefs(triggerRef, forwardedRef), ...hoverHandlers, ...rest, children: describedChild })) : (children), portal] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, style: { display: "inline-flex" }, ...hoverHandlers, children: isElement ? ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: forwardedRef, ...rest, children: describedChild })) : (children) }), portal] }));
+});
+exports.Tooltip.displayName = "Tooltip";

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

@@ -86,6 +86,24 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (`useMenuKeyboard`'s onKeyDown, below) only fires once
+    // focus is actually inside `.crisp-menu-content` -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (menu-keyboard.ts), not
+    // synchronously. An Escape pressed before that frame paints reaches
+    // whatever still has focus (the trigger button), which is outside the
+    // content div's subtree, so `onContentKeyDown` never sees it and nothing
+    // closes. This listener doesn't depend on focus location, so it closes
+    // regardless -- the same pattern `ContextMenu` already uses for the
+    // identical reason (its own comment: "Escape is handled twice on
+    // purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
         open,
         close,

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

@@ -89,10 +89,10 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const activeId = open && highlight >= 0 && highlight < filtered.length
         ? optionId(highlight)
         : undefined;
@@ -146,6 +146,18 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back) -- see Select's
+    // matching comment: the listbox's own Escape handling depends on focus
+    // already being inside it, which a requestAnimationFrame moves there
+    // asynchronously after open, so an Escape pressed before that frame
+    // paints is missed entirely. This closes regardless of focus location.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
                 (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", 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-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)

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

@@ -73,6 +73,23 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open, setOpen]);
+    // A document-level fallback for Escape (#376 come back). The content's own
+    // Escape handling (its `onKeyDown`, below) only fires when focus is
+    // already inside `.crisp-popover-content` -- but Popover, unlike Menu,
+    // never moves focus there on open at all, so that handler only ever fires
+    // if a consumer's own content happens to contain something already
+    // focused. In the common case (trigger stays focused after the click that
+    // opened it) Escape reached nothing and did nothing. This listener
+    // doesn't depend on focus location, so it closes regardless -- the same
+    // pattern `ContextMenu` already uses for the identical reason (its own
+    // comment: "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,

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

@@ -81,10 +81,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         if (searchable)
             requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
-    const close = () => {
+    const close = React.useCallback(() => {
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
-    };
+    }, []);
     const pick = (opt) => {
         if (!opt || opt.disabled)
             return;
@@ -141,6 +141,24 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
+    // A document-level fallback for Escape (#376 come back): the listbox's own
+    // Escape handling lives on `useListboxKeyboard`'s `onKeyDown`, which only
+    // fires once focus is actually inside the listbox -- but focus lands there
+    // via a `requestAnimationFrame` scheduled on open (below), not
+    // synchronously. Escape pressed before that frame paints reaches whatever
+    // still has focus (the trigger, or the search input before ITS OWN focus
+    // lands), which is outside the listbox's own subtree, so its handler never
+    // sees the keydown at all and nothing closes. This listener doesn't depend
+    // on focus location, so it closes regardless -- the same pattern
+    // `ContextMenu` already uses for the identical reason (its own comment:
+    // "Escape is handled twice on purpose").
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
     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

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

@@ -10,7 +10,7 @@ const config = defineRecipe({
     base: `display: block; box-sizing: border-box; background: ${c.bgSurface};
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
-    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }

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

@@ -1,18 +1,25 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
-// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
-// with a 2px ink underline that slides along the baseline; inactive tabs are
-// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
-// and an optional count badge. Measured from the live app: 28px pills, 4/8
-// padding, 6px icon-label gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// The list itself is the 36px bar — the 28px tab row plus the 8px the
+// baseline needs, reserved as bottom padding so it's real box height and not
+// paint that trailing content can sit on top of. The bar carries 12px inline
+// padding too, and draws its own full-width `::after` baseline in
+// borderSubtle at its bottom edge, spanning that padding. The active tab is
+// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
+// underline that sits on the baseline (painted above it) and slides along it;
+// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// a 16px leading icon and an optional count badge. Measured from the live
+// app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
+// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
 const config = defineRecipe({
     name: "tabs",
     base: `
     display: flex; flex-direction: column; min-height: 0; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; box-sizing: content-box; height: ${c.size.row}; padding: 0 ${c.space["3"]} ${c.space["2"]}; flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${c.borderSubtle}; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -21,7 +28,7 @@ const config = defineRecipe({
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/esm/components/tooltip/tooltip.js

@@ -1,15 +1,51 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { tooltipRecipe } from "./tooltip.recipe.js";
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function")
+                ref(node);
+            else
+                ref.current = node;
+        }
+    };
+}
 /**
  * A hover/focus tooltip — a dark hint chip measured live. Wraps its
  * trigger in an inline element, shows after `delay` on pointer-enter / focus,
- * and hides on leave / blur / Escape. The bubble is portaled and positioned
- * above the trigger (flipping below near the top edge).
+ * and hides on leave / blur / Escape (`asChild` skips the wrapper — see its
+ * doc). The bubble is portaled and positioned above the trigger (flipping
+ * below near the top edge).
+ *
+ * Composable as another component's trigger (#360: wrapping a `Popover`'s
+ * or `Menu`'s trigger in a `Tooltip` silently broke it). A composer clones
+ * a `ref`/`id`/`aria-*`/`onClick` onto whatever element it's handed —
+ * `Tooltip` wasn't `forwardRef` and didn't read any of the rest, so they
+ * landed on the `<Tooltip>` element itself, where nothing forwarded them
+ * anywhere. Both now merge onto the actual trigger via `Slot` (the same
+ * mechanism `ContextMenu`'s `asChild` uses) — the wrapping `<span>` can't
+ * carry them for the same reason it can't carry `aria-describedby` (below):
+ * a screen reader reads state off the focused element, not an ancestor.
  */
-export function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+export const Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, "aria-describedby": restDescribedBy, 
+// Not forwarded, even though a composer's other rest props are
+// (below): `style` sizes a VISUAL box, and Tooltip's wrapper has none
+// of its own -- the box that matters is whatever the consumer's own
+// trigger renders as, which they already own and can style directly.
+// Also matches Popover/Menu's own composer contract: their
+// cloneElement injects ref/id/aria-*/onClick, never style.
+style: _style, ...rest }, forwardedRef) => {
     const tipId = React.useId();
+    // The trigger's box for positioning the bubble: the wrapper `<span>` in
+    // the default mode (it exists and hugs the child tightly even when
+    // `children` isn't a single element, so hover positioning never depends
+    // on Slot succeeding), or the child itself in `asChild` mode (there is
+    // no wrapper to measure).
     const triggerRef = React.useRef(null);
     const timer = React.useRef(undefined);
     const [pos, setPos] = React.useState(null);
@@ -51,27 +87,50 @@ export function Tooltip({ content, children, side = "top", delay = 350, open: op
     // the only way a screen reader learns of one is `aria-describedby` on the
     // element that gets focus. It cannot go on the wrapper: a description on a
     // non-focusable span around a button is never announced. So the trigger is
-    // cloned, keeping any aria-describedby it already had, and the reference is
-    // only present while the bubble is (a reference to a removed node is dead
+    // Slot-merged, keeping any aria-describedby it already had (plus a
+    // composer's, if any — see restDescribedBy above), and the tipId is only
+    // present while the bubble is (a reference to a removed node is dead
     // wiring, #225).
-    const described = React.isValidElement(children) && open
-        ? React.cloneElement(children, {
-            "aria-describedby": [
-                children.props["aria-describedby"],
-                tipId,
-            ]
-                .filter(Boolean)
-                .join(" "),
-        })
+    const isElement = React.isValidElement(children);
+    const ownDescribedBy = isElement
+        ? children.props["aria-describedby"]
+        : undefined;
+    const describedBy = [ownDescribedBy, restDescribedBy, open ? tipId : undefined]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    // Baked onto a CLONE, not passed as a prop to <Slot> below: Slot's own
+    // mergeProps lets the child's OWN pre-existing prop win over anything
+    // unrecognised (it only special-cases style/className/on* handlers), so
+    // a `describedBy` passed to Slot would be silently discarded in favour
+    // of the child's original, un-merged `aria-describedby` the moment the
+    // child already had one.
+    const describedChild = isElement
+        ? React.cloneElement(children, { "aria-describedby": describedBy })
         : children;
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: openAfterDelay, onPointerLeave: close, onFocusCapture: openAfterDelay, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: described }), open &&
-                pos != null &&
-                createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe(), style: {
-                        left: pos.left,
-                        top: pos.top,
-                        transform: pos.below
-                            ? "translate(-50%, 0)"
-                            : "translate(-50%, -100%)",
-                    }, children: content }), document.body)] }));
-}
+    const hoverHandlers = {
+        onPointerEnter: openAfterDelay,
+        onPointerLeave: close,
+        onFocusCapture: openAfterDelay,
+        onBlurCapture: close,
+        onKeyDown: (e) => e.key === "Escape" && close(),
+    };
+    const portal = open &&
+        pos != null &&
+        createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe(), style: {
+                left: pos.left,
+                top: pos.top,
+                transform: pos.below
+                    ? "translate(-50%, 0)"
+                    : "translate(-50%, -100%)",
+            }, children: content }), document.body);
+    if (asChild) {
+        // No wrapper at all: the child carries the hover/focus/Escape
+        // handling AND the composer's ref/id/aria-*/onClick directly. Not an
+        // element (asChild has nothing to attach to) degrades the same way
+        // #225 already documented for aria-describedby: renders, but neither
+        // hovers nor composes.
+        return (_jsxs(_Fragment, { children: [isElement ? (_jsx(Slot, { ref: mergeRefs(triggerRef, forwardedRef), ...hoverHandlers, ...rest, children: describedChild })) : (children), portal] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, ...hoverHandlers, children: isElement ? (_jsx(Slot, { ref: forwardedRef, ...rest, children: describedChild })) : (children) }), portal] }));
+});
 Tooltip.displayName = "Tooltip";

package/dist/styles.css

@@ -1514,7 +1514,7 @@
   display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }
@@ -1625,7 +1625,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1634,7 +1635,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/styles.layered.css

@@ -1515,7 +1515,7 @@
   display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }
@@ -1626,7 +1626,8 @@
 
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -1635,7 +1636,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/table.css

@@ -2,7 +2,7 @@
   display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }

package/dist/table.layered.css

@@ -3,7 +3,7 @@
   display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }

package/dist/tabs.css

@@ -1,6 +1,7 @@
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -9,7 +10,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

package/dist/tabs.layered.css

@@ -1,7 +1,8 @@
 @layer crisp-components {
 .crisp-tabs {
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
     & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
@@ -10,7 +11,7 @@
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
-    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { flex: 1; min-height: 0; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }

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

@@ -1,12 +1,14 @@
 import * as React from "react";
-export type TooltipProps = {
+export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"span">, "content" | "children"> & {
     /** The hint text/content shown on hover or focus. */
     content: React.ReactNode;
     /**
-     * The trigger element. A SINGLE element: it is cloned to carry the
-     * `aria-describedby` that makes the hint reachable, so anything else — a
-     * string, a fragment, several children — renders and hovers correctly but
-     * cannot be described to a screen reader.
+     * The trigger element. A SINGLE element: it carries the
+     * `aria-describedby` that makes the hint reachable (and, when `Tooltip`
+     * itself is composed as another component's trigger, e.g. `Popover`'s
+     * `trigger` prop cloning in a `ref`/`id`/`aria-*`/`onClick` — #360 — those
+     * too), so anything else — a string, a fragment, several children —
+     * renders and hovers correctly but can't carry either.
      */
     children: React.ReactNode;
     /** Preferred side; flips to the other axis end when there's no room. */
@@ -20,14 +22,67 @@ export type TooltipProps = {
     defaultOpen?: boolean;
     /** Fires with the next open state, controlled or not. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Attach directly to the child instead of wrapping it in a `<span>`
+     * (#360). The wrapper's `display: inline-flex` makes the child a flex
+     * item of a NEW container; flex items default to `min-width: auto` and
+     * won't shrink below their own content's width, so a child depending on
+     * an ANCESTOR's width constraint — most commonly `text-overflow:
+     * ellipsis` inside a fixed-width cell — silently stops truncating once
+     * it's wrapped. `asChild` requires a single element, the same as
+     * `ContextMenu`'s.
+     */
+    asChild?: boolean;
 };
 /**
  * A hover/focus tooltip — a dark hint chip measured live. Wraps its
  * trigger in an inline element, shows after `delay` on pointer-enter / focus,
- * and hides on leave / blur / Escape. The bubble is portaled and positioned
- * above the trigger (flipping below near the top edge).
+ * and hides on leave / blur / Escape (`asChild` skips the wrapper — see its
+ * doc). The bubble is portaled and positioned above the trigger (flipping
+ * below near the top edge).
+ *
+ * Composable as another component's trigger (#360: wrapping a `Popover`'s
+ * or `Menu`'s trigger in a `Tooltip` silently broke it). A composer clones
+ * a `ref`/`id`/`aria-*`/`onClick` onto whatever element it's handed —
+ * `Tooltip` wasn't `forwardRef` and didn't read any of the rest, so they
+ * landed on the `<Tooltip>` element itself, where nothing forwarded them
+ * anywhere. Both now merge onto the actual trigger via `Slot` (the same
+ * mechanism `ContextMenu`'s `asChild` uses) — the wrapping `<span>` can't
+ * carry them for the same reason it can't carry `aria-describedby` (below):
+ * a screen reader reads state off the focused element, not an ancestor.
  */
-export declare function Tooltip({ content, children, side, delay, open: openProp, defaultOpen, onOpenChange, }: TooltipProps): React.JSX.Element;
-export declare namespace Tooltip {
-    var displayName: string;
-}
+export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children" | "content"> & {
+    /** The hint text/content shown on hover or focus. */
+    content: React.ReactNode;
+    /**
+     * The trigger element. A SINGLE element: it carries the
+     * `aria-describedby` that makes the hint reachable (and, when `Tooltip`
+     * itself is composed as another component's trigger, e.g. `Popover`'s
+     * `trigger` prop cloning in a `ref`/`id`/`aria-*`/`onClick` — #360 — those
+     * too), so anything else — a string, a fragment, several children —
+     * renders and hovers correctly but can't carry either.
+     */
+    children: React.ReactNode;
+    /** Preferred side; flips to the other axis end when there's no room. */
+    side?: "top" | "bottom";
+    /** Delay in ms before showing (default 350). Hides immediately. */
+    delay?: number;
+    /** Controlled open state. Omit to let Tooltip manage it (see defaultOpen).
+     * A controlled tooltip shows at once — `delay` only paces hover. */
+    open?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state, controlled or not. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Attach directly to the child instead of wrapping it in a `<span>`
+     * (#360). The wrapper's `display: inline-flex` makes the child a flex
+     * item of a NEW container; flex items default to `min-width: auto` and
+     * won't shrink below their own content's width, so a child depending on
+     * an ANCESTOR's width constraint — most commonly `text-overflow:
+     * ellipsis` inside a fixed-width cell — silently stops truncating once
+     * it's wrapped. `asChild` requires a single element, the same as
+     * `ContextMenu`'s.
+     */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLElement>>;

package/package.json

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