@crisp-ui-kit/crisp 0.46.0 → 0.48.0

package/dist/avatar.css

@@ -1,5 +1,5 @@
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
     & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
@@ -9,7 +9,7 @@
   height: 20px; width: 20px; font-size: 10px;
 }
 .crisp-avatar--size_lg {
-  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
+  height: 24px; width: 24px; font-size: var(--crisp-text-lg);
 }
 .crisp-avatar--size_xl {
   height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -21,7 +21,7 @@
   border-radius: 30%;
 }
 .crisp-avatar--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
   background: var(--crisp-bg-brand-solid); color: #fff;

package/dist/avatar.layered.css

@@ -1,6 +1,6 @@
 @layer crisp-components {
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
     & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
@@ -10,7 +10,7 @@
   height: 20px; width: 20px; font-size: 10px;
 }
 .crisp-avatar--size_lg {
-  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
+  height: 24px; width: 24px; font-size: var(--crisp-text-lg);
 }
 .crisp-avatar--size_xl {
   height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -22,7 +22,7 @@
   border-radius: 30%;
 }
 .crisp-avatar--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
   background: var(--crisp-bg-brand-solid); color: #fff;

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

@@ -11,7 +11,7 @@ const spec = (0, core_1.defineSpec)({
         justifyContent: "center",
         flexShrink: 0,
         fontFamily: tokens_1.contract.font.sans,
-        fontWeight: tokens_1.contract.weight.semibold,
+        fontWeight: tokens_1.contract.weight.medium,
         overflow: "hidden",
         userSelect: "none",
     },
@@ -26,7 +26,7 @@ const spec = (0, core_1.defineSpec)({
         size: {
             sm: { height: "16px", width: "16px", fontSize: "9px" },
             md: { height: "20px", width: "20px", fontSize: "10px" },
-            lg: { height: "24px", width: "24px", fontSize: tokens_1.contract.text.sm },
+            lg: { height: "24px", width: "24px", fontSize: tokens_1.contract.text.lg },
             xl: { height: "32px", width: "32px", fontSize: tokens_1.contract.text.lg },
         },
         shape: {
@@ -36,7 +36,7 @@ const spec = (0, core_1.defineSpec)({
         tone: {
             neutral: {
                 background: tokens_1.contract.bgRaised,
-                color: tokens_1.contract.fgMuted,
+                color: tokens_1.contract.fgNeutralMuted,
                 boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
             },
             brand: { background: tokens_1.contract.bgBrandSolid, color: "#fff" },

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

@@ -8,7 +8,7 @@ const spec = defineSpec({
         justifyContent: "center",
         flexShrink: 0,
         fontFamily: c.font.sans,
-        fontWeight: c.weight.semibold,
+        fontWeight: c.weight.medium,
         overflow: "hidden",
         userSelect: "none",
     },
@@ -23,7 +23,7 @@ const spec = defineSpec({
         size: {
             sm: { height: "16px", width: "16px", fontSize: "9px" },
             md: { height: "20px", width: "20px", fontSize: "10px" },
-            lg: { height: "24px", width: "24px", fontSize: c.text.sm },
+            lg: { height: "24px", width: "24px", fontSize: c.text.lg },
             xl: { height: "32px", width: "32px", fontSize: c.text.lg },
         },
         shape: {
@@ -33,7 +33,7 @@ const spec = defineSpec({
         tone: {
             neutral: {
                 background: c.bgRaised,
-                color: c.fgMuted,
+                color: c.fgNeutralMuted,
                 boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
             },
             brand: { background: c.bgBrandSolid, color: "#fff" },

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

@@ -155,7 +155,7 @@
 }
 
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
     & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
@@ -165,7 +165,7 @@
   height: 20px; width: 20px; font-size: 10px;
 }
 .crisp-avatar--size_lg {
-  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
+  height: 24px; width: 24px; font-size: var(--crisp-text-lg);
 }
 .crisp-avatar--size_xl {
   height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -177,7 +177,7 @@
   border-radius: 30%;
 }
 .crisp-avatar--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
   background: var(--crisp-bg-brand-solid); color: #fff;
@@ -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; }

package/dist/styles.layered.css

@@ -156,7 +156,7 @@
 }
 
 .crisp-avatar {
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
     & img { width: 100%; height: 100%; object-fit: cover; }
 }
 .crisp-avatar--size_sm {
@@ -166,7 +166,7 @@
   height: 20px; width: 20px; font-size: 10px;
 }
 .crisp-avatar--size_lg {
-  height: 24px; width: 24px; font-size: var(--crisp-text-sm);
+  height: 24px; width: 24px; font-size: var(--crisp-text-lg);
 }
 .crisp-avatar--size_xl {
   height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -178,7 +178,7 @@
   border-radius: 30%;
 }
 .crisp-avatar--tone_neutral {
-  background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+  background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
   background: var(--crisp-bg-brand-solid); color: #fff;
@@ -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; }

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/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.46.0",
+  "version": "0.48.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",