@crisp-ui-kit/crisp 0.23.0 → 0.23.2

package/dist/cjs/components/accordion/accordion.js

@@ -45,6 +45,7 @@ const accordion_recipe_1 = require("./accordion.recipe");
  */
 const toSet = (v) => new Set(v == null ? [] : Array.isArray(v) ? v : [v]);
 function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }) {
+    const uid = React.useId();
     const [internal, setInternal] = React.useState(() => toSet(defaultValue));
     // `value` present means the caller owns the open set; our own state is then
     // never read, so a click can only change what is shown by going through
@@ -62,8 +63,13 @@ function Accordion({ items, multiple, value, defaultValue, onValueChange, classN
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, accordion_recipe_1.accordionRecipe)({ className }), ...rest, children: items.map((item) => {
             const isOpen = open.has(item.value);
-            const panelId = `accordion-panel-${item.value}`;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "accordion-title", children: item.title }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, className: "accordion-panel", role: "region", "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-panel-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
+            // Scoped to this instance. `accordion-panel-${value}` is global, so two
+            // accordions with an item of the same value on one page mint the same
+            // id twice — and getElementById returns the first, so the second
+            // accordion's triggers silently control the first one's panels (#227).
+            const panelId = `${uid}-panel-${item.value}`;
+            const triggerId = `${uid}-trigger-${item.value}`;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", id: triggerId, className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "accordion-title", children: item.title }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, className: "accordion-panel", role: "region", "aria-labelledby": triggerId, "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-panel-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
         }) }));
 }
 Accordion.displayName = "Accordion";

package/dist/cjs/components/datepicker/datepicker.js

@@ -60,7 +60,9 @@ function Header({ api }) {
     // in RTL the chevrons swap: "previous" is on the right
     const previousDirection = api.isRtl ? "right" : "left";
     const nextDirection = api.isRtl ? "left" : "right";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-header-label": "", children: api.headerLabel }), (0, jsx_runtime_1.jsx)("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
+                    ? api.monthYearButtonProps["aria-controls"]
+                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-header-label": "", children: api.headerLabel }), (0, jsx_runtime_1.jsx)("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
 }
 function TwoMonthHeader({ api, label, labelId, position, }) {
     const isFirst = position === "first";
@@ -83,7 +85,7 @@ function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement
                         : labelId, className: "datepicker-grid", children: [showWeekdays && (0, jsx_runtime_1.jsx)(WeekdayRow, { api: api }), month.weeks.map((week) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => ((0, jsx_runtime_1.jsx)(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
 }
 function WheelView({ api }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+    return ((0, jsx_runtime_1.jsx)("div", { ...api.wheelProps, className: "datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
                 {
                     key: "year",
                     label: api.ariaLabels.yearWheel,

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

@@ -45,6 +45,12 @@ const tabs_keyboard_1 = require("./tabs-keyboard");
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
 function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+    // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
+    // so two tab bars sharing a value mint the same id twice and every
+    // aria-labelledby resolves to the first one (#227).
+    const uid = React.useId();
+    const tabId = (v) => `${uid}-tab-${v}`;
+    const panelId = (v) => `${uid}-panel-${v}`;
     const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]?.value);
     const active = value ?? internal;
     const listRef = React.useRef(null);
@@ -79,11 +85,11 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, cla
     });
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,
-                        } }))] }), children && ((0, jsx_runtime_1.jsx)("div", { className: "tabs-panel", role: "tabpanel", id: `panel-${active}`, "aria-labelledby": `tab-${active}`, 
+                        } }))] }), children && ((0, jsx_runtime_1.jsx)("div", { className: "tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a tabpanel is focusable per the WAI-ARIA tabs pattern
                 tabIndex: 0, children: children(active) }))] }));
 }

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

@@ -231,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", { ...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)(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/accordion/accordion.js

@@ -9,6 +9,7 @@ import { accordionRecipe } from "./accordion.recipe.js";
  */
 const toSet = (v) => new Set(v == null ? [] : Array.isArray(v) ? v : [v]);
 export function Accordion({ items, multiple, value, defaultValue, onValueChange, className, ...rest }) {
+    const uid = React.useId();
     const [internal, setInternal] = React.useState(() => toSet(defaultValue));
     // `value` present means the caller owns the open set; our own state is then
     // never read, so a click can only change what is shown by going through
@@ -26,8 +27,13 @@ export function Accordion({ items, multiple, value, defaultValue, onValueChange,
     };
     return (_jsx("div", { className: accordionRecipe({ className }), ...rest, children: items.map((item) => {
             const isOpen = open.has(item.value);
-            const panelId = `accordion-panel-${item.value}`;
-            return (_jsxs("div", { className: "accordion-item", children: [_jsxs("button", { type: "button", className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [_jsx("span", { className: "accordion-title", children: item.title }), _jsx(ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx("div", { id: panelId, className: "accordion-panel", role: "region", "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: _jsx("div", { className: "accordion-panel-inner", children: _jsx("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
+            // Scoped to this instance. `accordion-panel-${value}` is global, so two
+            // accordions with an item of the same value on one page mint the same
+            // id twice — and getElementById returns the first, so the second
+            // accordion's triggers silently control the first one's panels (#227).
+            const panelId = `${uid}-panel-${item.value}`;
+            const triggerId = `${uid}-trigger-${item.value}`;
+            return (_jsxs("div", { className: "accordion-item", children: [_jsxs("button", { type: "button", id: triggerId, className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [_jsx("span", { className: "accordion-title", children: item.title }), _jsx(ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx("div", { id: panelId, className: "accordion-panel", role: "region", "aria-labelledby": triggerId, "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: _jsx("div", { className: "accordion-panel-inner", children: _jsx("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
         }) }));
 }
 Accordion.displayName = "Accordion";

package/dist/esm/components/datepicker/datepicker.js

@@ -24,7 +24,9 @@ function Header({ api }) {
     // in RTL the chevrons swap: "previous" is on the right
     const previousDirection = api.isRtl ? "right" : "left";
     const nextDirection = api.isRtl ? "left" : "right";
-    return (_jsxs("div", { className: "datepicker-header", children: [_jsxs("button", { ...api.monthYearButtonProps, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [_jsx("span", { "data-date-picker-header-label": "", children: api.headerLabel }), _jsx("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "datepicker-nav", children: [_jsx(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), _jsx(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+    return (_jsxs("div", { className: "datepicker-header", children: [_jsxs("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
+                    ? api.monthYearButtonProps["aria-controls"]
+                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [_jsx("span", { "data-date-picker-header-label": "", children: api.headerLabel }), _jsx("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "datepicker-nav", children: [_jsx(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), _jsx(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
 }
 function TwoMonthHeader({ api, label, labelId, position, }) {
     const isFirst = position === "first";
@@ -47,7 +49,7 @@ function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement
                         : labelId, className: "datepicker-grid", children: [showWeekdays && _jsx(WeekdayRow, { api: api }), month.weeks.map((week) => (_jsx("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => (_jsx(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
 }
 function WheelView({ api }) {
-    return (_jsx("div", { className: "datepicker-wheel-container", children: _jsx(WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+    return (_jsx("div", { ...api.wheelProps, className: "datepicker-wheel-container", children: _jsx(WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
                 {
                     key: "year",
                     label: api.ariaLabels.yearWheel,

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

@@ -9,6 +9,12 @@ import { useTablistKeyboard } from "./tabs-keyboard.js";
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
 export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+    // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
+    // so two tab bars sharing a value mint the same id twice and every
+    // aria-labelledby resolves to the first one (#227).
+    const uid = React.useId();
+    const tabId = (v) => `${uid}-tab-${v}`;
+    const panelId = (v) => `${uid}-panel-${v}`;
     const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]?.value);
     const active = value ?? internal;
     const listRef = React.useRef(null);
@@ -43,11 +49,11 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
     });
     return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return (_jsxs("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
+                        return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && (_jsx("span", { className: "tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,
-                        } }))] }), children && (_jsx("div", { className: "tabs-panel", role: "tabpanel", id: `panel-${active}`, "aria-labelledby": `tab-${active}`, 
+                        } }))] }), children && (_jsx("div", { className: "tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a tabpanel is focusable per the WAI-ARIA tabs pattern
                 tabIndex: 0, children: children(active) }))] }));
 }

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

@@ -194,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", { ...rest, ...withDescribedBy(dlg.getContentProps(), describedBy), className: cx("command-content", className), 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/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/package.json

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