@crisp-ui-kit/crisp 0.54.7 → 0.54.9

package/dist/esm/product/savedviews/savedviews.js

@@ -1,32 +1,47 @@
-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 { ChevronDown, MoreVertical, Plus, Users2 } from "lucide-react";
 import * as React from "react";
-import { Menu, MenuItem } from "../../components/menu/index.js";
+import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { useListboxKeyboard } from "../../components/select/index.js";
 import { FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
 import { savedviewsRecipe } from "./savedviews.recipe.js";
+// #618: the same fallback Select's own `optionText` gives a non-string
+// `label` — `keywords` first, then the plain string itself, then (rather
+// than becoming permanently unmatchable) the view's own `id`.
+function viewText(v) {
+    if (v.keywords)
+        return v.keywords;
+    return typeof v.name === "string" ? v.name : v.id;
+}
 /**
  * A saved-view switcher — measured from Attio's "All Companies ▾" menu. A
  * chip trigger opens a popover listing every saved view as a `role="option"`
  * row (leading coloured icon, name, a hover-revealed kebab of
  * rename/duplicate/delete), plus a trailing "Create new view" row. The
  * active view is marked `aria-selected`/`aria-current="page"` and mirrored
- * onto the trigger's own icon/label.
+ * onto the trigger's own icon/label. The panel opens on a "Search views..."
+ * box (#618, P-007) — real DOM focus moves there (`requestAnimationFrame`,
+ * same race `Select`'s own `searchable` variant already guards against),
+ * not virtual focus on the trigger.
  *
- * Keyboard: while the trigger has focus and the panel is open, ↑/↓ move a
- * virtual highlight (`aria-activedescendant`, the same "focus stays on the
- * trigger" model `Select`/`MultiSelect` use without a search field), Enter
- * chooses the highlighted row, Escape closes — deferring to a still-open
- * kebab submenu first (`hasOpenFloatingLayer`), so Escape closes one layer
- * at a time.
+ * Keyboard: while the panel is open, focus lives on the search input — ↑/↓
+ * move a virtual highlight (`aria-activedescendant`) over the (possibly
+ * filtered) view list, Enter chooses the highlighted row, Escape closes,
+ * deferring to a still-open kebab submenu first (`hasOpenFloatingLayer`),
+ * so Escape closes one layer at a time — the same split `Select`'s own
+ * `searchable` variant already uses between its trigger and its own search
+ * input.
  */
-export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, className, "aria-label": ariaLabel, ...rest }) {
+export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, emptyLabel: emptyLabelProp, className, "aria-label": ariaLabel, ...rest }) {
     const createLabel = useCrispMessage(createLabelProp, "Create new view");
     const renameLabel = useCrispMessage(renameLabelProp, "Rename");
     const duplicateLabel = useCrispMessage(duplicateLabelProp, "Duplicate");
     const deleteLabel = useCrispMessage(deleteLabelProp, "Delete");
     const favoriteLabel = useCrispMessage(favoriteLabelProp, "Add to favorites");
     const viewOptionsLabel = useCrispMessage(viewOptionsLabelProp, "View options");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search views...");
+    const searchLabel = useCrispMessage(searchLabelProp, "Filter views");
+    const emptyLabel = useCrispMessage(emptyLabelProp, "No results");
     const autoId = React.useId();
     const triggerId = `${autoId}-trigger`;
     // role="combobox" (below) does not take its name from content — unlike a
@@ -45,13 +60,22 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
     const [highlight, setHighlight] = React.useState(-1);
+    // #618: the panel's own "Search views..." box — real DOM focus lives here
+    // while open, unlike the virtual-focus-on-trigger model this component
+    // used before the search box existed.
+    const [query, setQuery] = React.useState("");
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const panelRef = React.useRef(null);
+    const searchRef = React.useRef(null);
     const activeView = views.find((v) => v.id === activeId) ?? null;
+    const q = query.trim().toLowerCase();
+    const filteredViews = q
+        ? views.filter((v) => viewText(v).toLowerCase().includes(q))
+        : views;
     // the trailing "Create new view" row is one more enabled index, past every
-    // real view
-    const createIndex = views.length;
+    // (possibly filtered) view -- it never itself filters out
+    const createIndex = filteredViews.length;
     const openPanel = () => {
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
@@ -64,8 +88,14 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
             setUp(flipUp);
             setPos(style);
         }
+        setQuery("");
         setHighlight(-1);
         setOpen(true);
+        // Same race Select's own `searchable` variant already guards against
+        // (its own comment: calling focus synchronously here loses to the
+        // portal's own mount timing) -- a `requestAnimationFrame` after the
+        // state update that renders the input wins it.
+        requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
     };
     const close = React.useCallback(() => {
         setOpen(false);
@@ -77,7 +107,7 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
             close();
         }
         else {
-            const v = views[highlight];
+            const v = filteredViews[highlight];
             if (v) {
                 onSelect(v.id);
                 close();
@@ -85,7 +115,7 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
         }
     };
     const { onKeyDown: onNavKeys } = useListboxKeyboard({
-        enabledIndexes: Array.from({ length: views.length + 1 }, (_, i) => i),
+        enabledIndexes: Array.from({ length: filteredViews.length + 1 }, (_, i) => i),
         highlight,
         setHighlight,
         commit,
@@ -144,25 +174,26 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
     const triggerIcon = activeView ? activeView.icon : icon;
     const triggerLabel = activeView ? activeView.name : label;
     return (_jsxs("div", { ref: rootRef, className: savedviewsRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, id: triggerId, type: "button", 
-                // combobox, not the bare default "button" role: aria-activedescendant
-                // (the virtual-focus highlight, same model Select/MultiSelect use
-                // without a search field) is only valid on a widget role that
-                // supports it, and combobox's aria-haspopup explicitly allows
-                // "dialog" — the value Attio's own trigger measures — alongside the
-                // more common "listbox".
-                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-activedescendant": open && highlight >= 0 ? optionId(highlight) : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
-                    if (open)
-                        onNavKeys(e);
-                    else if (e.key === "ArrowDown" || e.key === "Enter") {
+                // combobox: aria-haspopup explicitly allows "dialog" — the value
+                // Attio's own trigger measures — alongside the more common
+                // "listbox". aria-activedescendant lives on the search input (#618)
+                // now that real focus moves there while open, not here — the same
+                // split Select's own `searchable` variant already uses.
+                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
+                    // navigation is handled on the search input while open (#618)
+                    if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openPanel();
                     }
-                }, children: [triggerIcon != null && (_jsx("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), _jsx("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), _jsx(ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [views.map((v, i) => {
+                }, children: [triggerIcon != null && (_jsx("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), _jsx("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), _jsx(ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [_jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchLabel, "aria-controls": panelId, "aria-activedescendant": highlight >= 0 ? optionId(highlight) : undefined, className: "crisp-savedviews-search", value: query, onChange: (e) => {
+                                setQuery(e.target.value);
+                                setHighlight(-1);
+                            }, onKeyDown: onNavKeys }), _jsx("div", { className: "crisp-savedviews-search-sep", "aria-hidden": "true" }), filteredViews.length === 0 && (_jsx("div", { className: "crisp-savedviews-empty", children: emptyLabel })), filteredViews.map((v, i) => {
                             const selected = v.id === activeId;
                             return (_jsxs("div", { id: optionId(i), role: "option", "aria-selected": selected, "aria-current": selected ? "page" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(i), onClick: () => {
                                     onSelect(v.id);
                                     close();
-                                }, children: [v.icon != null && (_jsx("span", { className: "crisp-savedviews-row-icon", children: v.icon })), _jsx("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && (_jsx("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: _jsx(Users2, { size: 12, strokeWidth: 1.75 }) })), _jsx("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: _jsx(MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && (_jsx(MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), _jsx(MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), _jsx(MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), _jsx(MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel })] }) })] }, v.id));
+                                }, children: [v.icon != null && (_jsx("span", { className: "crisp-savedviews-row-icon", children: v.icon })), _jsx("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && (_jsx("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: _jsx(Users2, { size: 12, strokeWidth: 1.75 }) })), _jsx("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: _jsx(MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && (_jsx(MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), _jsx(MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), _jsx(MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel }), (v.createdBy != null || v.createdAt != null) && (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), _jsxs("div", { className: "crisp-savedviews-kebab-footer", children: [v.createdBy != null && (_jsx("div", { className: "crisp-savedviews-kebab-footer-line", children: v.createdBy })), v.createdAt != null && (_jsx("div", { className: "crisp-savedviews-kebab-footer-line", children: v.createdAt }))] })] }))] }) })] }, v.id));
                         }), _jsxs("div", { id: optionId(createIndex), role: "option", "aria-selected": false, "data-highlighted": highlight === createIndex ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(createIndex), onClick: () => {
                                 onCreate();
                                 close();

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

@@ -60,6 +60,21 @@ const config = defineRecipe({
     .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
     .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
+    /* #618 (P-007): the panel's own "Search views..." box — measured live:
+       32px tall, 6px/8px padding, NO border/background/leading icon of its
+       own (unlike Select's own bordered searchable-input pill), 14px text.
+       A hairline divider (borderSubtle, 1px, 3px top margin) separates it
+       from the view list, matching the divider Attio's own kebab menu uses
+       between its action items and the "Created by" footer below. */
+    .crisp-savedviews-search {
+      box-sizing: border-box; display: block; width: 100%; height: 32px; flex-shrink: 0;
+      margin: 0; padding: ${c.space["1.5"]} ${c.space["2"]}; border: none; background: none;
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none;
+    }
+    .crisp-savedviews-search::placeholder { color: ${c.fgMuted}; }
+    .crisp-savedviews-search-sep { height: 1px; flex-shrink: 0; margin: 3px 0 0; background: ${c.borderSubtle}; }
+    .crisp-savedviews-empty { padding: ${c.space["1.5"]} ${c.space["2"]}; font-size: ${c.text.lg}; color: ${c.fgMuted}; }
+
     .crisp-savedviews-row {
       box-sizing: border-box; position: relative; display: flex; align-items: center; gap: ${c.space["1.5"]};
       height: ${c.size.menuRow}; flex-shrink: 0; padding: ${c.space["1.5"]} ${c.space["2"]};
@@ -91,6 +106,18 @@ const config = defineRecipe({
     .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
     .crisp-savedviews-kebab[data-open] { opacity: 1; }
     .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: ${c.bgSurface}; color: ${c.fgPrimary}; }
+
+    /* #618 (P-008): the kebab menu's own "Created by X" / date footer —
+       measured live: 2 stacked lines, 6px/8px padding, 2px gap between
+       them, 12px/500 text, BOTH lines the same color-mix 50% muted (a
+       distinct value from the 63% mix #592's chip breadcrumb uses —
+       independently measured, not assumed to match). */
+    .crisp-savedviews-kebab-footer {
+      display: flex; flex-direction: column; gap: 2px;
+      padding: ${c.space["1.5"]} ${c.space["2"]};
+      font-size: ${c.text.sm}; font-weight: ${c.weight.medium};
+      color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent);
+    }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Building2, ChartNoAxesColumn, ChevronDown, CircleDollarSign, FileText, House, Inbox, LayoutGrid, Mail, MessageSquare, PanelLeft, Phone, Search, Send, SquareCheck, User, UserPlus, Users, Waypoints, } from "lucide-react";
+import { Building2, ChartNoAxesColumn, ChevronDown, CircleDollarSign, FileText, House, Inbox, LayoutGrid, Mail, MessageSquare, PackagePlus, PanelLeft, Phone, Search, Send, Settings, SquareCheck, User, UserPlus, Users, Waypoints, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Badge } from "../../components/badge/index.js";
@@ -44,42 +44,83 @@ export const ATTIO_SIDEBAR_WORKSPACE = {
     avatarLabel: "T",
     avatarTone: "cyan",
 };
-/** The measured main nav — the default `items` prop. */
+/** The measured main nav — the default `items` prop.
+ *
+ * `shortcut` is set only where a live hover produced Attio's "G then
+ * <letter>" tooltip (crisp#633, P-108) -- Calls/Sequences/Workflows showed
+ * no tooltip at all after a 1.2s hover, tried repeatedly, so they're left
+ * without one rather than guessed. */
 export const ATTIO_SIDEBAR_ITEMS = [
-    { label: "Home", icon: IconHome },
+    {
+        label: "Home",
+        icon: IconHome,
+        shortcut: { description: "Go to home page", keys: ["g", "h"] },
+    },
     {
         label: "Tasks",
         icon: IconTasks,
         active: true,
         trailing: (_jsx(Badge, { tone: "brand", variant: "solid", size: "small", children: "1" })),
+        shortcut: { description: "Go to tasks page", keys: ["g", "t"] },
+    },
+    {
+        label: "Notes",
+        icon: IconNotes,
+        shortcut: { description: "Go to all notes page", keys: ["g", "n"] },
+    },
+    {
+        label: "Emails",
+        icon: IconEmails,
+        shortcut: { description: "Go to email drafts page", keys: ["g", "e"] },
     },
-    { label: "Notes", icon: IconNotes },
-    { label: "Emails", icon: IconEmails },
     { label: "Calls", icon: IconCalls },
-    { label: "Reports", icon: IconReports },
+    {
+        label: "Reports",
+        icon: IconReports,
+        shortcut: { description: "Go to reports page", keys: ["g", "d"] },
+    },
     { label: "Sequences", icon: IconSequences },
     { label: "Workflows", icon: IconWorkflows },
 ];
-/** The measured Records section — the default `recordsSection` prop. */
+/** The measured Records section — the default `recordsSection` prop. Same
+ * `shortcut` caveat as `ATTIO_SIDEBAR_ITEMS`: Deals/Users/Workspaces showed
+ * no hover tooltip. `actions` is Attio's own gear + add glyph (P-109),
+ * measured aria-labels "Record options" / "Create new objects or enable
+ * standard objects". */
 export const ATTIO_SIDEBAR_RECORDS_SECTION = {
     label: "Records",
     items: [
-        { label: "Companies", tone: "brand", glyph: GlyphCompanies },
-        { label: "People", tone: "brand", glyph: GlyphPeople },
+        {
+            label: "Companies",
+            tone: "brand",
+            glyph: GlyphCompanies,
+            shortcut: { description: "Go to all companies page", keys: ["g", "c"] },
+        },
+        {
+            label: "People",
+            tone: "brand",
+            glyph: GlyphPeople,
+            shortcut: { description: "Go to all people page", keys: ["g", "p"] },
+        },
         { label: "Deals", tone: "orange", glyph: GlyphDeals },
         { label: "Users", tone: "cyan", glyph: GlyphUsers },
         { label: "Workspaces", tone: "purple", glyph: GlyphWorkspaces },
     ],
+    actions: defaultSectionActions("Record options", "Create new objects or enable standard objects"),
 };
-/** The measured Lists section — the default `listsSection` prop. */
+/** The measured Lists section — the default `listsSection` prop. `actions`
+ * per P-109, measured aria-labels "List options" / "Add list". */
 export const ATTIO_SIDEBAR_LISTS_SECTION = {
     label: "Lists",
     newListLabel: "+ New list",
+    actions: defaultSectionActions("List options", "Add list"),
 };
-/** The measured Chats section — the default `chatsSection` prop. */
+/** The measured Chats section — the default `chatsSection` prop. `actions`
+ * per P-109, measured aria-labels "Chat options" / "New chat". */
 export const ATTIO_SIDEBAR_CHATS_SECTION = {
     label: "Chats",
     items: [{ label: "In-app notification for deal wins", icon: IconChat }],
+    actions: defaultSectionActions("Chat options", "New chat"),
 };
 /** The measured footer copy — the default `footer` prop. */
 export const ATTIO_SIDEBAR_FOOTER = {
@@ -88,8 +129,20 @@ export const ATTIO_SIDEBAR_FOOTER = {
     trialText: "13 days left on trial!",
     trialActionLabel: "Keep Pro",
 };
-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 })] }));
+function SectionHeader({ label, open, onToggle, actions, }) {
+    return (_jsxs("div", { className: "crisp-sidebar-section-header-row", children: [_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 })] }), actions != null && (_jsx("div", { className: "crisp-sidebar-section-actions", children: actions }))] }));
+}
+/** Attio's own two hover-only header actions (crisp#633, P-109), measured on
+ * the Records/Lists/Chats section headers: a gear ("<Section> options") and
+ * an add glyph -- re-measured on all three, the add icon is the SAME glyph
+ * (`icon-defs/cab3218f7a08cd13.svg`) reused everywhere, not a per-section
+ * one, so `PackagePlus` covers Lists/Chats too, not just Records' own
+ * "Create new objects" link. Both are decorative defaults with no handler,
+ * the same trade a consumer already makes with `footer`'s default
+ * "Getting started"/"Keep Pro" buttons — a consumer wanting the real
+ * behaviour passes its own `actions` node instead. */
+function defaultSectionActions(optionsLabel, addLabel) {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": optionsLabel, children: _jsx(Settings, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "crisp-sidebar-section-action", "aria-label": addLabel, children: _jsx(PackagePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }));
 }
 export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, workspaceMenu, 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
@@ -138,14 +191,14 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
         });
     }, []);
     const workspaceTrigger = (_jsxs("button", { type: "button", 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, {})] }));
-    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? (_jsx(Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), _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, href, onSelect }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) }), groups ? (
+    return (_jsxs(Primitive.nav, { ref: ref, asChild: asChild, "aria-label": ariaLabel, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws-row", children: [workspaceMenu ? (_jsx(Menu, { trigger: workspaceTrigger, className: "crisp-sidebar-ws-menuroot", contentClassName: "crisp-sidebar-ws-menu-content", children: workspaceMenu })) : (workspaceTrigger), _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, href, onSelect, shortcut, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, shortcut: shortcut, children: label }, href ?? 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, active, trailing, href, onSelect, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, children: label }, href ?? label))) })] })), footer !== false &&
+                return (_jsxs(React.Fragment, { children: [_jsx(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey), actions: group.actions }), _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, shortcut: item.shortcut, children: item.label }, item.href ?? item.label))) })] }, groupKey));
+            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records"), actions: recordsSection.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph, shortcut }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), shortcut: shortcut, children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists"), actions: listsSection.actions }), _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"), actions: chatsSection.actions }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon, active, trailing, href, onSelect, shortcut, }) => (_jsx(NavItem, { href: href ?? "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, onClick: onSelect, shortcut: shortcut, children: label }, href ?? label))) })] })), footer !== false &&
                 (isSidebarFooterCopy(footer) ? (_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("div", { className: "crisp-sidebar-footer", children: footer }))), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen, items: commandItems })] }));
 });
 Sidebar.displayName = "Sidebar";

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

@@ -16,9 +16,14 @@ const config = defineRecipe({
   ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: ${c.space.px}; margin-top: ${c.space["2"]}; }
   & .crisp-sidebar-section[data-collapsed] { display: none; }
   & .crisp-sidebar-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; }
-  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
+  & .crisp-sidebar-section-header-row { display: flex; align-items: center; }
+  & .crisp-sidebar-section-header { display: flex; align-items: center; gap: ${c.space["1"]}; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
   & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
   & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
+  & .crisp-sidebar-section-actions { display: flex; align-items: center; gap: ${c.space["1"]}; flex-shrink: 0; padding-inline-end: ${c.space["1"]}; opacity: 0; transition: opacity .12s ease; }
+  & .crisp-sidebar-section-header-row:hover .crisp-sidebar-section-actions, & .crisp-sidebar-section-header-row:focus-within .crisp-sidebar-section-actions { opacity: 1; }
+  & .crisp-sidebar-section-action { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: ${c.space["5"]}; height: ${c.space["5"]}; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: transparent; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 0.14s, color 0.14s; }
+  & .crisp-sidebar-section-action:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
   & .crisp-sidebar-ws-row { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; padding: 0 ${c.space["2"]}; }
   & .crisp-sidebar-ws-menuroot { display: flex; flex: 1; min-width: 0; }
   & .crisp-sidebar-ws { box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: ${c.radius.lg}; font-family: inherit; font-size: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color 0.16s; }

package/dist/esm/tokens/palette.js

@@ -17,6 +17,15 @@ export const palette = {
     // off-limits to toggle, same restriction as `ringField`/`ringSwitch`) —
     // reuses `line200`'s dark line colour rather than inventing a new one.
     line150: { light: "#e6e7ea", dark: "#212224" },
+    // The filter chip's field/value segments while the condition is
+    // incomplete (no value typed yet) — measured live on Attio's own filter
+    // chip (`rgb(246,247,247)`), lighter than `gray50` (#f4f4f5, close but not
+    // equal). The chip's operator/kebab segments stay `gray00` in the same
+    // state; only the two text-content segments carry this muted fill. Dark
+    // value not independently re-measured (Attio's dark theme is off-limits to
+    // toggle) — reuses `gray50`'s dark value, the nearest existing "muted
+    // surface" tone, rather than inventing a third dark gray.
+    gray25: { light: "#f6f7f7", dark: "#101112" },
     ringNeutral: { light: "transparent", dark: "#212224" },
     // Text-entry fields (Input, Textarea) — measured live on app.attio.com's
     // Settings page, a real typed field: `inset 0 0 0 1px rgba(0,0,0,.06)`,
@@ -37,6 +46,22 @@ export const palette = {
     ringSwitch: { light: "#d9dade", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
+    // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
+    // Create-attribute FormDialog, both themes: `rgba(0,0,0,.25)` light,
+    // `rgba(0,0,0,.55)` dark. `Dialog`'s own backdrop had shipped fully
+    // `transparent` (AUTHORING's Lesson 14 measured the command palette has
+    // NO dark backdrop and that got generalized to every `Dialog`, which this
+    // corrects — the palette is a different surface from a plain content
+    // dialog and really does dim the page).
+    bgScrim: { light: "rgba(0,0,0,0.25)", dark: "rgba(0,0,0,0.55)" },
+    // The discard-confirm's description line (crisp#677, `Dialog`'s new
+    // `variant="alert"`) — measured live, both themes, over `popoverBg`: a
+    // theme-relative alpha rather than a flat gray, so it stays legible if
+    // `popoverBg` itself ever shifts.
+    fgAlertDescription: {
+        light: "rgba(0,0,0,0.63)",
+        dark: "rgba(255,255,255,0.6)",
+    },
     overlayFrost: { light: "#ffffff", dark: "#1c1d1f" },
     shadowOverlay1: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.48)" },
     shadowOverlay2: { light: "rgba(28,40,64,0.16)", dark: "rgba(0,0,0,0.64)" },
@@ -113,7 +138,13 @@ export const palette = {
     // fg-muted/bg-raised themselves (system-wide, measured from Attio, kept
     // as-is per build/spec-check.mjs's own note), this token exists only for
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
-    softNeutralText: { light: "#686870", dark: "#9a9aa2" },
+    // crisp#696: re-measured live (Standard/System pills, object settings) at
+    // rgb(80,81,85) -- darker than the #686870 above, which only ever cleared
+    // AA, never matched the reference. Only the light side moves: dark
+    // (#9a9aa2) already passed and Attio's own dark theme stays off-limits to
+    // toggle, the same restriction this file notes throughout (ringField,
+    // ringSwitch, line150).
+    softNeutralText: { light: "#505155", dark: "#9a9aa2" },
     // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
     // own role pill ("Admin", app.attio.com/<ws>/settings/members-and-teams):
     // background rgb(245,240,255), text rgb(98,56,181), ring rgb(232,221,254)

package/dist/esm/tokens/semantic.js

@@ -8,15 +8,26 @@ export const semantic = {
     fgOnTone: "ink",
     bgSurface: "gray00",
     bgRaised: "gray50",
+    /** A surface lighter than `bgRaised` for content that isn't actionable
+     *  yet — the filter chip's field/value segments before the condition has
+     *  a value (see palette.ts's `gray25`). */
+    bgSurfaceMuted: "gray25",
     borderDefault: "line200",
     borderSubtle: "line100",
     /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
     borderDropzone: "line150",
+    /** A hairline between adjacent same-height segments (the filter chip's
+     *  field/operator/value/kebab boxes) — same measured hex as
+     *  `borderDropzone` (`line150`), aliased under its own name because the
+     *  two consumers share nothing but the colour. */
+    borderDivider: "line150",
     ringNeutral: "ringNeutral",
     ringField: "ringField",
     ringSwitch: "ringSwitch",
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
+    bgScrim: "bgScrim",
+    fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",
     shadowOverlay2: "shadowOverlay2",

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "borderDefault" | "borderSubtle" | "borderDropzone" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;

package/dist/native/tokens.js

@@ -10,14 +10,18 @@ export const tokens = {
       "fgOnTone": "#101112",
       "bgSurface": "#ffffff",
       "bgRaised": "#f4f4f5",
+      "bgSurfaceMuted": "#f6f7f7",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
       "borderDropzone": "#e6e7ea",
+      "borderDivider": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -51,7 +55,7 @@ export const tokens = {
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870",
+      "fgNeutralSoft": "#505155",
       "bgPurpleSoft": "#f5f0ff",
       "fgPurpleSoft": "#6238b5",
       "ringPurpleSoft": "#e8ddfe"
@@ -63,14 +67,18 @@ export const tokens = {
       "fgOnTone": "#101112",
       "bgSurface": "#0a0a0a",
       "bgRaised": "#101112",
+      "bgSurfaceMuted": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
       "borderDropzone": "#212224",
+      "borderDivider": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",
@@ -120,11 +128,14 @@ export const tokens = {
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
       "line150": "#e6e7ea",
+      "gray25": "#f6f7f7",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
+      "bgScrim": "rgba(0,0,0,0.25)",
+      "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
       "shadowOverlay2": "rgba(28,40,64,0.16)",
@@ -158,7 +169,7 @@ export const tokens = {
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870",
+      "softNeutralText": "#505155",
       "purpleTint": "#f5f0ff",
       "softPurpleText": "#6238b5",
       "purpleRing": "#e8ddfe"
@@ -172,11 +183,14 @@ export const tokens = {
       "line200": "#212224",
       "line100": "#1c1d1f",
       "line150": "#212224",
+      "gray25": "#101112",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
+      "bgScrim": "rgba(0,0,0,0.55)",
+      "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
       "shadowOverlay2": "rgba(0,0,0,0.64)",

package/dist/navitem.css

@@ -1,3 +1,10 @@
+
+    .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--crisp-space-3); }
+    .crisp-navitem-shortcut-desc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: var(--crisp-weight-regular); color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  
 .crisp-navitem {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/navitem.layered.css

@@ -1,4 +1,11 @@
 @layer crisp-components {
+
+    .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--crisp-space-3); }
+    .crisp-navitem-shortcut-desc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: var(--crisp-weight-regular); color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  
 .crisp-navitem {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding-inline: var(--crisp-space-2); padding-inline-end: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; line-height: 20px; color: var(--crisp-fg-primary); text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s;
     & .crisp-navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }