@crisp-ui-kit/crisp 0.22.0 → 0.23.1

package/dist/cjs/components/dialog/dialog.js

@@ -41,6 +41,7 @@ const dialog = __importStar(require("@zag-js/dialog"));
 const react_1 = require("@zag-js/react");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const dialog_recipe_1 = require("./dialog.recipe");
 // A globally unique id per mounted instance (see command.tsx for the rationale —
 // the machine defers its dismissal listeners a frame, so tree-relative useId
@@ -59,7 +60,7 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured Attio modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
     const id = useDialogInstanceId();
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,
@@ -75,7 +76,10 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("dialog-content", className), "data-crisp-dialog": id, 
+                        // `width` is the component's own knob, so it wins over a passed
+                        // maxWidth; everything else a consumer sets survives
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 function DialogBody({ children, className, }) {

package/dist/cjs/components/drawer/drawer.js

@@ -41,6 +41,7 @@ const dialog = __importStar(require("@zag-js/dialog"));
 const react_1 = require("@zag-js/react");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const drawer_recipe_1 = require("./drawer.recipe");
 let instanceCounter = 0;
 function useDrawerInstanceId() {
@@ -56,7 +57,7 @@ function useDrawerInstanceId() {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, className, "aria-describedby": describedBy, ...rest }) {
     const id = useDrawerInstanceId();
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,
@@ -69,7 +70,7 @@ function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label":
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, drawer_recipe_1.drawerRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: (0, jsx_runtime_1.jsxs)("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "drawer-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, drawer_recipe_1.drawerRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: (0, jsx_runtime_1.jsxs)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("drawer-content", className), children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "drawer-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
 }
 Drawer.displayName = "Drawer";
 function DrawerBody({ children }) {

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

@@ -53,6 +53,13 @@ const MenuContext = React.createContext(null);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
 function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+    // The surface and the button that opens it were two unconnected nodes: the
+    // menu/dialog had no id, so nothing could point at it, and no accessible
+    // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
+    // surface by its own trigger is the WAI menu-button recommendation, and it
+    // needs no invented copy (#225).
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const open = openProp ?? internalOpen;
     const setOpen = React.useCallback((next) => {
@@ -110,14 +117,18 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
     });
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
+        id: triggerId,
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        // only while the surface exists — a reference to a node that is not
+        // there is not a relationship
+        "aria-controls": open ? surfaceId : undefined,
         onClick: (e) => {
             trigger.props.onClick?.(e);
             setOpen(!open);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: "menu-content", role: "menu", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: "menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
 }
 Menu.displayName = "Menu";
 function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -44,6 +44,13 @@ const popover_recipe_1 = require("./popover.recipe");
  * closes on outside pointer-down and Escape. Controlled or self-managed.
  */
 function Popover({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, className, }) {
+    // The surface and the button that opens it were two unconnected nodes: the
+    // menu/dialog had no id, so nothing could point at it, and no accessible
+    // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
+    // surface by its own trigger is the WAI menu-button recommendation, and it
+    // needs no invented copy (#225).
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const open = openProp ?? internalOpen;
     const rootRef = React.useRef(null);
@@ -87,14 +94,18 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
     }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
+        id: triggerId,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
+        // only while the surface exists — a reference to a node that is not
+        // there is not a relationship
+        "aria-controls": open ? surfaceId : undefined,
         onClick: (e) => {
             trigger.props.onClick?.(e);
             setOpen(!open);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, popover_recipe_1.popoverRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)("div", { className: "popover-content", role: "dialog", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, popover_recipe_1.popoverRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)("div", { className: "popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
                     if (e.key === "Escape") {
                         e.preventDefault();
                         setOpen(false);

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

@@ -45,6 +45,7 @@ const tooltip_recipe_1 = require("./tooltip.recipe");
  * above the trigger (flipping below near the top edge).
  */
 function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+    const tipId = React.useId();
     const triggerRef = React.useRef(null);
     const timer = React.useRef(undefined);
     const [pos, setPos] = React.useState(null);
@@ -82,9 +83,26 @@ function Tooltip({ content, children, side = "top", delay = 350, open: openProp,
         setOpen(false);
     };
     React.useEffect(() => () => clearTimeout(timer.current), []);
-    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: children }), open &&
+    // The whole point of a tooltip is the description it gives its trigger, and
+    // 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
+    // wiring, #225).
+    const described = React.isValidElement(children) && open
+        ? React.cloneElement(children, {
+            "aria-describedby": [
+                children.props["aria-describedby"],
+                tipId,
+            ]
+                .filter(Boolean)
+                .join(" "),
+        })
+        : 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", { role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)(), style: {
+                (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

package/dist/cjs/core/dialog-description.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withDescribedBy = withDescribedBy;
+/**
+ * Zag's dialog machine always advertises a description: `getContentProps()`
+ * returns an `aria-describedby` pointing at the id of a description element.
+ * crisp renders no such element — Attio's modals have a title and a body, no
+ * description line — so the reference dangles, and a dangling id is not a
+ * relationship a screen reader can follow.
+ *
+ * It also silenced the consumer's own: the machine's props are spread after
+ * anything passed in, so a real `aria-describedby` was overwritten by the
+ * missing one every time (#223).
+ *
+ * Drop the machine's value, and let the caller's stand when there is one. A
+ * consumer who wants a description points at a node inside their own children,
+ * which is the only place one exists.
+ */
+function withDescribedBy(contentProps, describedBy) {
+    const { "aria-describedby": _machine, ...rest } = contentProps;
+    return describedBy ? { ...rest, "aria-describedby": describedBy } : rest;
+}

package/dist/cjs/core/index.js

@@ -14,11 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
 Object.defineProperty(exports, "defineRecipe", { enumerable: true, get: function () { return define_1.defineRecipe; } });
+var dialog_description_1 = require("./dialog-description");
+Object.defineProperty(exports, "withDescribedBy", { enumerable: true, get: function () { return dialog_description_1.withDescribedBy; } });
 var direction_1 = require("./direction");
 Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function () { return direction_1.isRtlElement; } });
 var place_floating_1 = require("./place-floating");

package/dist/cjs/product/command/command.js

@@ -42,6 +42,7 @@ const react_1 = require("@zag-js/react");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const kbd_1 = require("../../components/kbd");
+const core_1 = require("../../core");
 const command_recipe_1 = require("./command.recipe");
 const IconHome = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.House, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
 const IconTasks = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
@@ -146,7 +147,7 @@ function useCommandInstanceId() {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-function Command({ open, onOpenChange, items = exports.defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, }) {
+function Command({ open, onOpenChange, items = exports.defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
     const instanceId = useCommandInstanceId();
     const dialogId = `${instanceId}-dialog`;
     const comboId = `${instanceId}-combobox`;
@@ -230,7 +231,7 @@ function Command({ open, onOpenChange, items = exports.defaultCommandItems, plac
     };
     if (!dlg.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, command_recipe_1.commandRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...dlg.getContentProps(), className: "command-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "command-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "command-control", children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, command_recipe_1.commandRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(dlg.getContentProps(), describedBy), className: (0, core_1.cx)("command-content", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "command-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "command-control", children: [(0, jsx_runtime_1.jsx)("label", { ...combo.getLabelProps(), className: "command-srlabel", children: ariaLabel }), (0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
                                         const Icon = item.icon;
                                         const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
                                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroup && ((0, jsx_runtime_1.jsx)("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), (0, jsx_runtime_1.jsxs)("div", { ...combo.getItemProps({ item }), className: "command-item", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "command-item-label", children: item.label }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: key }, key))) }))] })] }, item.id));

package/dist/cjs/product/command/command.recipe.js

@@ -13,6 +13,12 @@ const config = (0, core_1.defineRecipe)({
   & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
   & .command-control { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
   & .command-control svg { flex-shrink: 0; }
+  /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
+     aria-labelledby at it, and without it both were unnamed and the reference
+     resolved to nothing (#225). Clipped rather than display:none, which would
+     take it out of the tree it exists for. */
+  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
   & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.xl}; color: ${tokens_1.contract.fgPrimary}; }
   & .command-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
   & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2.5"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; }

package/dist/command.css

@@ -7,6 +7,12 @@
   & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; }
   & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); }
   & .command-control svg { flex-shrink: 0; }
+  /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
+     aria-labelledby at it, and without it both were unnamed and the reference
+     resolved to nothing (#225). Clipped rather than display:none, which would
+     take it out of the tree it exists for. */
+  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
   & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); }
   & .command-input::placeholder { color: var(--fg-muted); }
   & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); }

package/dist/esm/components/dialog/dialog.js

@@ -3,6 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
+import { cx, withDescribedBy } from "../../core/index.js";
 import { dialogRecipe } from "./dialog.recipe.js";
 // A globally unique id per mounted instance (see command.tsx for the rationale —
 // the machine defers its dismissal listeners a frame, so tree-relative useId
@@ -21,7 +22,7 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured Attio modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
     const id = useDialogInstanceId();
     const service = useMachine(dialog.machine, {
         id,
@@ -37,7 +38,10 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("dialog-content", className), "data-crisp-dialog": id, 
+                        // `width` is the component's own knob, so it wins over a passed
+                        // maxWidth; everything else a consumer sets survives
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "dialog-card", children: [title != null && (_jsxs("div", { className: "dialog-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {

package/dist/esm/components/drawer/drawer.js

@@ -3,6 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
+import { cx, withDescribedBy } from "../../core/index.js";
 import { drawerRecipe } from "./drawer.recipe.js";
 let instanceCounter = 0;
 function useDrawerInstanceId() {
@@ -18,7 +19,7 @@ function useDrawerInstanceId() {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label": ariaLabel, closeLabel = "Close", children, className, "aria-describedby": describedBy, ...rest }) {
     const id = useDrawerInstanceId();
     const service = useMachine(dialog.machine, {
         id,
@@ -31,7 +32,7 @@ export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...api.getContentProps(), className: "drawer-content", children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
+    return (_jsx(Portal, { children: _jsxs("div", { className: drawerRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "drawer-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "drawer-positioner", "data-side": side, children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("drawer-content", className), children: [title != null && (_jsxs("div", { className: "drawer-header", children: [icon, _jsx("span", { ...api.getTitleProps(), className: "drawer-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "drawer-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) })] }) }));
 }
 Drawer.displayName = "Drawer";
 export function DrawerBody({ children }) {

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

@@ -13,6 +13,13 @@ const MenuContext = React.createContext(null);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
 export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+    // The surface and the button that opens it were two unconnected nodes: the
+    // menu/dialog had no id, so nothing could point at it, and no accessible
+    // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
+    // surface by its own trigger is the WAI menu-button recommendation, and it
+    // needs no invented copy (#225).
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const open = openProp ?? internalOpen;
     const setOpen = React.useCallback((next) => {
@@ -70,14 +77,18 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
     });
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
+        id: triggerId,
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        // only while the surface exists — a reference to a node that is not
+        // there is not a relationship
+        "aria-controls": open ? surfaceId : undefined,
         onClick: (e) => {
             trigger.props.onClick?.(e);
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "menu-content", role: "menu", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -8,6 +8,13 @@ import { popoverRecipe } from "./popover.recipe.js";
  * closes on outside pointer-down and Escape. Controlled or self-managed.
  */
 export function Popover({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, className, }) {
+    // The surface and the button that opens it were two unconnected nodes: the
+    // menu/dialog had no id, so nothing could point at it, and no accessible
+    // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
+    // surface by its own trigger is the WAI menu-button recommendation, and it
+    // needs no invented copy (#225).
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
     const open = openProp ?? internalOpen;
     const rootRef = React.useRef(null);
@@ -51,14 +58,18 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
     }, [open, setOpen]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
+        id: triggerId,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
+        // only while the surface exists — a reference to a node that is not
+        // there is not a relationship
+        "aria-controls": open ? surfaceId : undefined,
         onClick: (e) => {
             trigger.props.onClick?.(e);
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx("div", { className: "popover-content", role: "dialog", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx("div", { className: "popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
                     if (e.key === "Escape") {
                         e.preventDefault();
                         setOpen(false);

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

@@ -9,6 +9,7 @@ import { tooltipRecipe } from "./tooltip.recipe.js";
  * above the trigger (flipping below near the top edge).
  */
 export function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
+    const tipId = React.useId();
     const triggerRef = React.useRef(null);
     const timer = React.useRef(undefined);
     const [pos, setPos] = React.useState(null);
@@ -46,9 +47,26 @@ export function Tooltip({ content, children, side = "top", delay = 350, open: op
         setOpen(false);
     };
     React.useEffect(() => () => clearTimeout(timer.current), []);
-    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: children }), open &&
+    // The whole point of a tooltip is the description it gives its trigger, and
+    // 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
+    // wiring, #225).
+    const described = React.isValidElement(children) && open
+        ? React.cloneElement(children, {
+            "aria-describedby": [
+                children.props["aria-describedby"],
+                tipId,
+            ]
+                .filter(Boolean)
+                .join(" "),
+        })
+        : 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", { role: "tooltip", className: tooltipRecipe(), style: {
+                createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe(), style: {
                         left: pos.left,
                         top: pos.top,
                         transform: pos.below

package/dist/esm/core/dialog-description.js

@@ -0,0 +1,19 @@
+/**
+ * Zag's dialog machine always advertises a description: `getContentProps()`
+ * returns an `aria-describedby` pointing at the id of a description element.
+ * crisp renders no such element — Attio's modals have a title and a body, no
+ * description line — so the reference dangles, and a dangling id is not a
+ * relationship a screen reader can follow.
+ *
+ * It also silenced the consumer's own: the machine's props are spread after
+ * anything passed in, so a real `aria-describedby` was overwritten by the
+ * missing one every time (#223).
+ *
+ * Drop the machine's value, and let the caller's stand when there is one. A
+ * consumer who wants a description points at a node inside their own children,
+ * which is the only place one exists.
+ */
+export function withDescribedBy(contentProps, describedBy) {
+    const { "aria-describedby": _machine, ...rest } = contentProps;
+    return describedBy ? { ...rest, "aria-describedby": describedBy } : rest;
+}

package/dist/esm/core/index.js

@@ -1,5 +1,6 @@
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
+export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/product/command/command.js

@@ -5,6 +5,7 @@ import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { Building2, CircleDollarSign, House, ListTodo, Search, Settings, SquareCheck, User, UserPlus, } from "lucide-react";
 import * as React from "react";
 import { Kbd } from "../../components/kbd/index.js";
+import { cx, withDescribedBy } from "../../core/index.js";
 import { commandRecipe } from "./command.recipe.js";
 const IconHome = () => (_jsx(House, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
 const IconTasks = () => (_jsx(SquareCheck, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
@@ -109,7 +110,7 @@ function useCommandInstanceId() {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export function Command({ open, onOpenChange, items = defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, }) {
+export function Command({ open, onOpenChange, items = defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, className, "aria-describedby": describedBy, ...rest }) {
     const instanceId = useCommandInstanceId();
     const dialogId = `${instanceId}-dialog`;
     const comboId = `${instanceId}-combobox`;
@@ -193,7 +194,7 @@ export function Command({ open, onOpenChange, items = defaultCommandItems, place
     };
     if (!dlg.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: _jsx("div", { ...dlg.getContentProps(), className: "command-content", children: _jsxs("div", { className: "command-card", children: [_jsxs("div", { className: "command-control", children: [_jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
+    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(dlg.getContentProps(), describedBy), className: cx("command-content", className), children: _jsxs("div", { className: "command-card", children: [_jsxs("div", { className: "command-control", children: [_jsx("label", { ...combo.getLabelProps(), className: "command-srlabel", children: ariaLabel }), _jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
                                         const Icon = item.icon;
                                         const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
                                         return (_jsxs(React.Fragment, { children: [showGroup && (_jsx("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), _jsxs("div", { ...combo.getItemProps({ item }), className: "command-item", children: [_jsx(Icon, {}), _jsx("span", { className: "command-item-label", children: item.label }), item.shortcut && (_jsx("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) }))] })] }, item.id));

package/dist/esm/product/command/command.recipe.js

@@ -10,6 +10,12 @@ const config = defineRecipe({
   & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
   & .command-control { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
   & .command-control svg { flex-shrink: 0; }
+  /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
+     aria-labelledby at it, and without it both were unnamed and the reference
+     resolved to nothing (#225). Clipped rather than display:none, which would
+     take it out of the tree it exists for. */
+  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
   & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${c.font.sans}; font-size: ${c.text.xl}; color: ${c.fgPrimary}; }
   & .command-input::placeholder { color: ${c.fgMuted}; }
   & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]} ${c.space["2.5"]}; display: flex; flex-direction: column; gap: ${c.space.px}; }

package/dist/styles.css

@@ -1976,6 +1976,12 @@
   & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; }
   & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); }
   & .command-control svg { flex-shrink: 0; }
+  /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
+     aria-labelledby at it, and without it both were unnamed and the reference
+     resolved to nothing (#225). Clipped rather than display:none, which would
+     take it out of the tree it exists for. */
+  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
   & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); }
   & .command-input::placeholder { color: var(--fg-muted); }
   & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); }

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

@@ -1,5 +1,15 @@
 import * as React from "react";
-export type DialogProps = {
+/**
+ * Root props land on the DIALOG SURFACE — the element that carries
+ * `role="dialog"` — not on the portal wrapper. That is what a consumer needs
+ * to reach: `aria-describedby` has to sit beside `aria-modal` to associate the
+ * description, and a `data-testid` or a `style` is wanted on the panel, not on
+ * the full-viewport layer behind it (#223).
+ *
+ * `id` and the aria wiring are the machine's: it mints the ids that link the
+ * title and the description, so those are spread after anything passed in.
+ */
+export type DialogProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
     /** Controlled open state. */
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -19,7 +29,7 @@ export type DialogProps = {
  * Escape / outside-click dismissal) with the measured Attio modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel, children, }: DialogProps): React.JSX.Element | null;
+export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel, children, className, style, "aria-describedby": describedBy, ...rest }: DialogProps): React.JSX.Element | null;
 export declare namespace Dialog {
     var displayName: string;
 }

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

@@ -1,5 +1,9 @@
 import * as React from "react";
-export type DrawerProps = {
+/**
+ * Root props land on the DRAWER SURFACE — the element carrying `role="dialog"`
+ * — not on the portal wrapper, for the same reason as Dialog (#223).
+ */
+export type DrawerProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Which edge the sheet slides in from (default right). */
@@ -16,7 +20,7 @@ export type DrawerProps = {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, closeLabel, children, }: DrawerProps): React.JSX.Element | null;
+export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, closeLabel, children, className, "aria-describedby": describedBy, ...rest }: DrawerProps): React.JSX.Element | null;
 export declare namespace Drawer {
     var displayName: string;
 }

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

@@ -2,7 +2,12 @@ import * as React from "react";
 export type TooltipProps = {
     /** The hint text/content shown on hover or focus. */
     content: React.ReactNode;
-    /** The trigger element. */
+    /**
+     * 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.
+     */
     children: React.ReactNode;
     /** Preferred side; flips to the other axis end when there's no room. */
     side?: "top" | "bottom";

package/dist/types/core/dialog-description.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Zag's dialog machine always advertises a description: `getContentProps()`
+ * returns an `aria-describedby` pointing at the id of a description element.
+ * crisp renders no such element — Attio's modals have a title and a body, no
+ * description line — so the reference dangles, and a dangling id is not a
+ * relationship a screen reader can follow.
+ *
+ * It also silenced the consumer's own: the machine's props are spread after
+ * anything passed in, so a real `aria-describedby` was overwritten by the
+ * missing one every time (#223).
+ *
+ * Drop the machine's value, and let the caller's stand when there is one. A
+ * consumer who wants a description points at a node inside their own children,
+ * which is the only place one exists.
+ */
+export declare function withDescribedBy<T extends Record<string, unknown>>(contentProps: T, describedBy: string | undefined): Omit<T, "aria-describedby"> & {
+    "aria-describedby"?: string;
+};

package/dist/types/core/index.d.ts

@@ -1,5 +1,6 @@
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
+export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/dist/types/product/command/command.d.ts

@@ -13,7 +13,11 @@ export type CommandItem = {
 };
 /** crisp's own generic command set (not copied from any product). */
 export declare const defaultCommandItems: CommandItem[];
-export type CommandProps = {
+/**
+ * Root props land on the PALETTE SURFACE — the element carrying
+ * `role="dialog"` — not on the portal wrapper (#223).
+ */
+export type CommandProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> & {
     /** Controlled open state — the caller owns when the palette is shown. */
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -50,4 +54,4 @@ export type CommandProps = {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export declare function Command({ open, onOpenChange, items, placeholder, "aria-label": ariaLabel, navigateLabel, selectLabel, emptyLabel, query: queryProp, onQueryChange, filterItems, }: CommandProps): React.JSX.Element | null;
+export declare function Command({ open, onOpenChange, items, placeholder, "aria-label": ariaLabel, navigateLabel, selectLabel, emptyLabel, query: queryProp, onQueryChange, filterItems, className, "aria-describedby": describedBy, ...rest }: CommandProps): React.JSX.Element | null;

package/package.json

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