@crisp-ui-kit/crisp 0.40.0 → 0.42.0

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
 const menu_1 = require("../menu");
@@ -44,7 +45,7 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
+function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -109,7 +110,7 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asChild ? ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: (0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }) })), pos && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

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

@@ -59,9 +59,14 @@ const config = (0, core_1.defineRecipe)({
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${tokens_1.contract.bgSurface};
     }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
     & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
-      height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralSubtle};
+      height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralMuted};
       font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium};
     }
 

package/dist/cjs/core/primitive.js

@@ -37,7 +37,7 @@ exports.Primitive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
-const NODES = ["button", "div", "span", "a", "input", "p"];
+const NODES = ["button", "div", "span", "a", "input", "p", "nav"];
 exports.Primitive = NODES.reduce((acc, node) => {
     const Component = React.forwardRef(({ asChild, ...props }, ref) => {
         const Comp = asChild ? react_slot_1.Slot : node;

package/dist/cjs/product/sidebar/sidebar.js

@@ -117,7 +117,7 @@ exports.ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 }
-exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = exports.ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = exports.ATTIO_SIDEBAR_FOOTER, commandItems, commandOpen: commandOpenProp, defaultCommandOpen, onCommandOpenChange, commandShortcut = true, "aria-label": ariaLabel = "Main", ...props }, ref) => {
     // Seeded once, on mount, from whatever groups start collapsed — not
     // reactive to `groups` changing later, matching every other piece of
     // this component's state (recordsSection/listsSection/chatsSection have
@@ -125,8 +125,22 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set(groups
         ?.filter((g) => g.defaultCollapsed)
         .map((g) => g.key ?? g.label)));
-    const [commandOpen, setCommandOpen] = React.useState(false);
+    // Controlled/uncontrolled triad (#364), same shape as Popover/Menu's own
+    // `open` -- an app driving a single ⌘K listener needs to be able to set
+    // `commandOpen` itself, not just read it.
+    const [internalCommandOpen, setInternalCommandOpen] = React.useState(defaultCommandOpen ?? false);
+    const commandOpen = commandOpenProp ?? internalCommandOpen;
+    const setCommandOpen = React.useCallback((next) => {
+        if (commandOpenProp === undefined)
+            setInternalCommandOpen(next);
+        onCommandOpenChange?.(next);
+    }, [commandOpenProp, onCommandOpenChange]);
     React.useEffect(() => {
+        // #364: skip attaching entirely when the app owns its own ⌘K listener
+        // -- two listeners on the same key both firing opened two overlapping
+        // command palettes.
+        if (!commandShortcut)
+            return;
         function handleKeyDown(event) {
             if ((event.metaKey || event.ctrlKey) &&
                 event.key.toLowerCase() === "k") {
@@ -136,7 +150,7 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
         }
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
-    }, []);
+    }, [commandShortcut, setCommandOpen]);
     const toggleSection = React.useCallback((key) => {
         setCollapsedSections((prev) => {
             const next = new Set(prev);
@@ -149,13 +163,13 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
             return next;
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
             // #325: navigation as data, reusing the exact section markup/
             // recipe above — SectionHeader + .crisp-sidebar-section — instead
             // of the three fixed Attio sections.
             groups.map((group) => {
                 const groupKey = group.key ?? group.label;
                 return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? (0, jsx_runtime_1.jsx)(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, children: item.label }, item.href ?? item.label))) })] }, groupKey));
-            })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+            })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 exports.Sidebar.displayName = "Sidebar";

package/dist/datepicker.css

@@ -11,47 +11,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -59,34 +59,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/datepicker.layered.css

@@ -12,47 +12,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -60,34 +60,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
@@ -8,7 +9,7 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
+export function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -73,7 +74,7 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return (_jsxs(_Fragment, { children: [asChild ? (_jsx(Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : (_jsx("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: _jsx("div", { onContextMenu: open, children: children }) })), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

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

@@ -56,9 +56,14 @@ const config = defineRecipe({
       display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
       position: relative; z-index: 2; background: ${c.bgSurface};
     }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
     & .crisp-datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
-      height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
+      height: ${c.size.calendarCell}; color: ${c.fgNeutralMuted};
       font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
     }
 

package/dist/esm/core/primitive.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-const NODES = ["button", "div", "span", "a", "input", "p"];
+const NODES = ["button", "div", "span", "a", "input", "p", "nav"];
 export const Primitive = NODES.reduce((acc, node) => {
     const Component = React.forwardRef(({ asChild, ...props }, ref) => {
         const Comp = asChild ? Slot : node;

package/dist/esm/product/sidebar/sidebar.js

@@ -81,7 +81,7 @@ export const ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return (_jsxs("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }));
 }
-export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = ATTIO_SIDEBAR_FOOTER, commandItems, commandOpen: commandOpenProp, defaultCommandOpen, onCommandOpenChange, commandShortcut = true, "aria-label": ariaLabel = "Main", ...props }, ref) => {
     // Seeded once, on mount, from whatever groups start collapsed — not
     // reactive to `groups` changing later, matching every other piece of
     // this component's state (recordsSection/listsSection/chatsSection have
@@ -89,8 +89,22 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set(groups
         ?.filter((g) => g.defaultCollapsed)
         .map((g) => g.key ?? g.label)));
-    const [commandOpen, setCommandOpen] = React.useState(false);
+    // Controlled/uncontrolled triad (#364), same shape as Popover/Menu's own
+    // `open` -- an app driving a single ⌘K listener needs to be able to set
+    // `commandOpen` itself, not just read it.
+    const [internalCommandOpen, setInternalCommandOpen] = React.useState(defaultCommandOpen ?? false);
+    const commandOpen = commandOpenProp ?? internalCommandOpen;
+    const setCommandOpen = React.useCallback((next) => {
+        if (commandOpenProp === undefined)
+            setInternalCommandOpen(next);
+        onCommandOpenChange?.(next);
+    }, [commandOpenProp, onCommandOpenChange]);
     React.useEffect(() => {
+        // #364: skip attaching entirely when the app owns its own ⌘K listener
+        // -- two listeners on the same key both firing opened two overlapping
+        // command palettes.
+        if (!commandShortcut)
+            return;
         function handleKeyDown(event) {
             if ((event.metaKey || event.ctrlKey) &&
                 event.key.toLowerCase() === "k") {
@@ -100,7 +114,7 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
         }
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
-    }, []);
+    }, [commandShortcut, setCommandOpen]);
     const toggleSection = React.useCallback((key) => {
         setCollapsedSections((prev) => {
             const next = new Set(prev);
@@ -113,13 +127,13 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
             return next;
         });
     }, []);
-    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
+    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
             // #325: navigation as data, reusing the exact section markup/
             // recipe above — SectionHeader + .crisp-sidebar-section — instead
             // of the three fixed Attio sections.
             groups.map((group) => {
                 const groupKey = group.key ?? group.label;
                 return (_jsxs(React.Fragment, { children: [_jsx(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey) }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => (_jsx(NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? _jsx(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, children: item.label }, item.href ?? item.label))) })] }, groupKey));
-            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) })] })), _jsxs("div", { className: "crisp-sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsxs("div", { className: "crisp-sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) })] })), _jsxs("div", { className: "crisp-sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsxs("div", { className: "crisp-sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 Sidebar.displayName = "Sidebar";

package/dist/styles.css

@@ -601,47 +601,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -649,34 +649,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

package/dist/styles.layered.css

@@ -602,47 +602,47 @@
     & .crisp-datepicker-nav-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
     & .crisp-datepicker-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 2; background: var(--crisp-bg-surface); }
-    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
+    /* fgNeutralMuted, not seed's fgNeutralSubtle (#367): 3.42:1 in light
+       against bgSurface, fails AA for this 12px text. Not an Attio
+       measurement -- accessibility wins over the seed reference.
+       neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
+       already fine at 9.43:1). */
+    & .crisp-datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
+      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-datepicker-month-label {
+      display: flex; align-items: center; height: 24px;
+      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
+      font-weight: var(--crisp-weight-medium);
+    }
+
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
-    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-    /* The bridge joining days inside a completed range. The endpoints do NOT carry data-in-range -- only the interior days do -- so these are three independent rules, not a base plus two modifiers. A modifier that sets only inset-inline-start never generates a pseudo element on an endpoint, which leaves a half-cell of white between the endpoint's pill and the run of grey beside it. Each rule declares its
-       own content. */
-    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before {
-      content: ""; position: absolute; z-index: -1; inset-inline: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 50%; inset-inline-end: 0;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
-    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      content: ""; position: absolute; z-index: -1;
-      inset-inline-start: 0; inset-inline-end: 50%;
-      top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak);
-    }
 
-    & .crisp-datepicker-date {
-      position: relative; display: flex; width: 100%; height: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0;
-      align-items: flex-start; justify-content: center;
-      border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--crisp-fg-primary); font: inherit; outline: none;
+    & .crisp-datepicker-cell {
+      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
       isolation: isolate;
     }
+    & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+    & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
+    & .crisp-datepicker-date { position: relative; display: flex; width: 100%; height: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; align-items: flex-start; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--crisp-fg-primary); font: inherit; outline: none; isolation: isolate; }
     /* the round day highlight, behind the numeral */
-    & .crisp-datepicker-date::before {
-      content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      border-radius: var(--crisp-radius-md);
-      background: transparent; transform: translateX(-50%);
-    }
+    & .crisp-datepicker-date::before { content: ""; position: absolute; z-index: -1; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); border-radius: var(--crisp-radius-md); background: transparent; transform: translateX(-50%); }
     & .crisp-datepicker-date[data-today]::before { background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-date[data-selected]::before { background: var(--crisp-bg-brand-solid); }
     & .crisp-datepicker-date[data-selected] { color: var(--crisp-fg-on-brand); }
@@ -650,34 +650,35 @@
     & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
     & .crisp-datepicker-date[data-unavailable] { color: var(--crisp-fg-disabled); }
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
-    & .crisp-datepicker-date:focus-visible::after {
-      content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%;
-      width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--crisp-radius-md);
-      outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px;
+    & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
+      align-items: center; justify-content: center;
     }
 
-    & .crisp-datepicker-date-content {
-      position: relative; z-index: 1; display: flex; width: 100%;
-      min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box;
-      flex-direction: column; align-items: center; gap: 3px;
-      padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit;
-      font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      font-variant-numeric: tabular-nums;
-    }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill.
-       Without this the content column top-aligns the glyph and the pill reads
-       as offset — the cell is 48px, the pill 42px inset 3px, and only a
-       42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: var(--crisp-size-menuRow); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--crisp-bg-surface);
+    }
     & .crisp-datepicker-wheel { width: 100%; }
-    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+
+    & .crisp-datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
+
     /* announced, never drawn */
-    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
 }
 .crisp-datepicker--visibleRange_month {
   

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

@@ -17,13 +17,23 @@ export type ContextMenuProps = {
     /** Accessible name for the menu surface. */
     menuLabel?: string;
     className?: string;
+    /**
+     * Render `onContextMenu` and the trigger ref directly onto `children`
+     * instead of wrapping it in a `<div>` (#340) — needed when `children` is
+     * an element that cannot have a wrapping element inserted around it, such
+     * as a `<tr>` inside a `<tbody>` (the browser's HTML parser hoists the row
+     * out of the wrapping `<div>`, breaking both the layout and the
+     * right-click target). `children` must then be a single valid React
+     * element, same as any other `asChild` in crisp (`core/primitive.tsx`).
+     */
+    asChild?: boolean;
 };
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, menuLabel, className, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel, className, asChild, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare const NODES: readonly ["button", "div", "span", "a", "input", "p"];
+declare const NODES: readonly ["button", "div", "span", "a", "input", "p", "nav"];
 type NodeName = (typeof NODES)[number];
 type PrimitiveProps<E extends NodeName> = React.ComponentPropsWithoutRef<E> & {
     asChild?: boolean;

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { AvatarProps } from "../../components/avatar";
+import { type CommandItem } from "../command";
 type IconProps = {
     className?: string;
 };
@@ -115,6 +116,27 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
+    /**
+     * Command-palette items, forwarded to the internal `Command`'s own
+     * `items` prop. Omit for Command's built-in Attio set (#364: GRC's
+     * commands aren't Attio's, and there was no way to reach them).
+     */
+    commandItems?: CommandItem[];
+    /** Controlled open state for the command palette. Omit to let Sidebar
+     *  manage it (see `defaultCommandOpen`). */
+    commandOpen?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultCommandOpen?: boolean;
+    onCommandOpenChange?: (open: boolean) => void;
+    /**
+     * Whether Sidebar attaches its own ⌘K/Ctrl+K document listener to open
+     * the command palette (default `true`). Set `false` when the app already
+     * owns a single global ⌘K listener — e.g. to route the same shortcut to
+     * more than Sidebar's palette elsewhere in the page — and drives
+     * `commandOpen` itself; two listeners on the same key both firing opened
+     * two overlapping instances (#364).
+     */
+    commandShortcut?: boolean;
 };
 /** The measured workspace switcher — the default `workspace` prop. */
 export declare const ATTIO_SIDEBAR_WORKSPACE: SidebarWorkspace;
@@ -160,5 +182,26 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
     groups?: SidebarNavGroup[];
     /** Footer copy (onboarding pill, invite row, trial banner). */
     footer?: SidebarFooter;
-} & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Command-palette items, forwarded to the internal `Command`'s own
+     * `items` prop. Omit for Command's built-in Attio set (#364: GRC's
+     * commands aren't Attio's, and there was no way to reach them).
+     */
+    commandItems?: CommandItem[];
+    /** Controlled open state for the command palette. Omit to let Sidebar
+     *  manage it (see `defaultCommandOpen`). */
+    commandOpen?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultCommandOpen?: boolean;
+    onCommandOpenChange?: (open: boolean) => void;
+    /**
+     * Whether Sidebar attaches its own ⌘K/Ctrl+K document listener to open
+     * the command palette (default `true`). Set `false` when the app already
+     * owns a single global ⌘K listener — e.g. to route the same shortcut to
+     * more than Sidebar's palette elsewhere in the page — and drives
+     * `commandOpen` itself; two listeners on the same key both firing opened
+     * two overlapping instances (#364).
+     */
+    commandShortcut?: boolean;
+} & React.RefAttributes<HTMLElement>>;
 export {};

package/package.json

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