@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/esm/product/appshell/appshell.js

@@ -66,9 +66,9 @@ export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 2
         window.addEventListener("pointerup", onUp);
     };
     const toggleCollapse = () => setCollapsed(!collapsed);
-    return (_jsxs("div", { className: appshellRecipe({ className }), ...rest, children: [_jsxs("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
+    return (_jsxs("div", { className: appshellRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
                     width: collapsed ? 0 : width,
                     transition: dragging ? "none" : "width .14s ease",
-                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
+                }, children: [_jsx("div", { className: "crisp-appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "crisp-appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "crisp-appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "crisp-appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
 }
 AppShell.displayName = "AppShell";

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

@@ -7,14 +7,14 @@ const config = defineRecipe({
     name: "appshell",
     base: `
     display: flex; height: 100%; width: 100%; overflow: hidden; background: ${c.bgSurface}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
-    & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color .16s, height .16s; }
-    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: ${c.bgBrandSolid}; }
-    & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
-    & .appshell-expand { position: absolute; top: ${c.space["2"]}; inset-inline-start: ${c.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${c.size.row}; height: ${c.size.row}; padding: 0; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .appshell-expand:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
+    & .crisp-appshell-side-inner { height: 100%; }
+    & .crisp-appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color .16s, height .16s; }
+    & .crisp-appshell-resize:hover::after, & .crisp-appshell-resize[data-dragging]::after { width: 2px; background: ${c.bgBrandSolid}; }
+    & .crisp-appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+    & .crisp-appshell-expand { position: absolute; top: ${c.space["2"]}; inset-inline-start: ${c.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${c.size.row}; height: ${c.size.row}; padding: 0; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-appshell-expand:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
   
     ${rtlFlipCss}
   `,

package/dist/esm/product/authshell/authshell.js

@@ -13,6 +13,6 @@ export function AuthShell({ progress, logo, title, children, preview, footer, cl
     const pct = hasProgress
         ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
         : 0;
-    return (_jsxs("div", { className: authshellRecipe({ className }), ...rest, children: [hasProgress && (_jsx("div", { className: "authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "authshell-logo", children: logo }), _jsxs("div", { className: "authshell-card", children: [_jsx("div", { className: "authshell-pane", children: _jsxs("div", { className: "authshell-body", children: [title != null && _jsx("div", { className: "authshell-title", children: title }), _jsx("div", { className: "authshell-form", children: children })] }) }), preview != null && _jsx("div", { className: "authshell-preview", children: preview })] }), footer != null && _jsx("div", { className: "authshell-footer", children: footer })] }));
+    return (_jsxs("div", { className: authshellRecipe({ className }), ...rest, children: [hasProgress && (_jsx("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "crisp-authshell-logo", children: logo }), _jsxs("div", { className: "crisp-authshell-card", children: [_jsx("div", { className: "crisp-authshell-pane", children: _jsxs("div", { className: "crisp-authshell-body", children: [title != null && (_jsx("div", { className: "crisp-authshell-title", children: title })), _jsx("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && (_jsx("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && _jsx("div", { className: "crisp-authshell-footer", children: footer })] }));
 }
 AuthShell.displayName = "AuthShell";

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

@@ -13,40 +13,40 @@ const config = defineRecipe({
     background: ${c.bgSurface}; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${c.borderDefault}; }
-    & .authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
+    & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${c.borderDefault}; }
+    & .crisp-authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
-    & .authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
+    & .crisp-authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
 
-    & .authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
+    & .crisp-authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
 
-    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
 
-    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${c.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${c.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
-    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${c.bgSubtle} 0%, transparent) 0%, ${c.bgSubtle} 100%); pointer-events: none; }
+    & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${c.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${c.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${c.bgSubtle} 0%, transparent) 0%, ${c.bgSubtle} 100%); pointer-events: none; }
 
-    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${c.space["8"]}; align-items: center; }
+    & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${c.space["8"]}; align-items: center; }
 
-    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; align-self: stretch; }
+    & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; align-self: stretch; }
 
-    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+    & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
 
-    & .authshell-footer { margin-top: ${c.space["6"]}; display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; line-height: 16px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
-    & .authshell-footer a { color: inherit; font-weight: ${c.weight.medium}; text-decoration: underline; }
+    & .crisp-authshell-footer { margin-top: ${c.space["6"]}; display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; line-height: 16px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-authshell-footer a { color: inherit; font-weight: ${c.weight.medium}; text-decoration: underline; }
 
     /* Auth-surface control treatment: flatter than the in-app chrome — a plain
        hairline ring instead of elevation.field's soft glow, and a 36px (not
-       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
-    & .authshell-body .formfield-label { font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); padding-inline-start: ${c.space["1"]}; }
-    & .authshell-body .formfield { gap: ${c.space["1"]}; }
-    & .authshell-body .input { height: 34px; padding-inline: ${c.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
-    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-authshell-body .crisp-formfield-label { font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); padding-inline-start: ${c.space["1"]}; }
+    & .crisp-authshell-body .crisp-formfield { gap: ${c.space["1"]}; }
+    & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: ${c.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
        button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
        the in-app button's rgba(255,255,255,0.07) highlight. */
-    & .authshell-body .button { height: 36px; padding-inline: ${c.space["3"]}; border-radius: 10px; }
-    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+    & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: ${c.space["3"]}; border-radius: 10px; }
+    & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
 
     /* The preview pane drops out in JS on narrow viewports (measured: two
        panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
@@ -55,7 +55,7 @@ const config = defineRecipe({
        a viewport query would keep the 1130px card and overflow it. Asking the
        shell's own width is what "there isn't room for the preview" means. */
     container-type: inline-size;
-    @container (max-width: 1200px) { & .authshell-preview { display: none; } }`,
+    @container (max-width: 1200px) { & .crisp-authshell-preview { display: none; } }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/board/board.js

@@ -50,7 +50,7 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
     };
     return (_jsxs("div", { ref: rootRef, className: boardRecipe({ className }), ...rest, children: [columns.map((col) => {
                 const colCards = cards.filter((c) => c.columnId === col.id);
-                return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                return (_jsxs("div", { className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
                         if (!dragId)
                             return;
                         e.preventDefault();
@@ -65,7 +65,7 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                             move(dragId, col.id);
                         setDragId(null);
                         setOverCol(null);
-                    }, children: [_jsxs("div", { className: "board-col-header", children: [col.accent && (_jsx("span", { className: "board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "board-col-title", children: col.title }), _jsx("span", { className: "board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "board-card", role: "listitem", 
+                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-board-card", role: "listitem", 
                                     // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
                                     tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
                                         setDragId(null);
@@ -84,6 +84,6 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                         if (delta && moveByKey(card, delta))
                                             e.preventDefault();
                                     }, children: renderCard(card) }, card.id)))] })] }, col.id));
-            }), _jsx("div", { className: "board-live", role: "status", "aria-live": "polite", children: announcement })] }));
+            }), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -6,24 +6,24 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "board",
     base: `display: flex; gap: ${c.space["3"]}; height: 100%; box-sizing: border-box; padding: ${c.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${c.font.sans};
-    & .board-col { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
-    & .board-col-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; flex-shrink: 0; }
-    & .board-col-dot { width: 9px; height: 9px; border-radius: ${c.radius.full}; flex-shrink: 0; }
-    & .board-col-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .board-col-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .board-col-add:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .board-col-body { display: flex; flex-direction: column; gap: ${c.space["2"]}; flex: 1; min-height: 48px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; overflow-y: auto; transition: background 0.12s; }
-    & .board-col[data-over] .board-col-body { background: color-mix(in srgb, ${c.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
-    & .board-newcard { display: flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .board-newcard:hover { background: color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; }
-    & .board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
-    & .board-card:active { cursor: grabbing; }
-    & .board-card[data-dragging] { opacity: 0.4; }
-    & .board-card:focus { outline: none; }
-    & .board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    & .crisp-board-col { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
+    & .crisp-board-col-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; flex-shrink: 0; }
+    & .crisp-board-col-dot { width: 9px; height: 9px; border-radius: ${c.radius.full}; flex-shrink: 0; }
+    & .crisp-board-col-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-board-col-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-board-col-add:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-board-col-body { display: flex; flex-direction: column; gap: ${c.space["2"]}; flex: 1; min-height: 48px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; overflow-y: auto; transition: background 0.12s; }
+    & .crisp-board-col[data-over] .crisp-board-col-body { background: color-mix(in srgb, ${c.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
+    & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-board-newcard:hover { background: color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
+    & .crisp-board-card:active { cursor: grabbing; }
+    & .crisp-board-card[data-dragging] { opacity: 0.4; }
+    & .crisp-board-card:focus { outline: none; }
+    & .crisp-board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
     /* announced, never drawn */
-    & .board-live {
+    & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }`,

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

@@ -220,9 +220,9 @@ export function Command({ open, onOpenChange, items = defaultCommandItems, place
     };
     if (!dlg.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(dlg.getContentProps(), describedBy), className: cx("command-content", className), children: _jsxs("div", { className: "command-card", children: [_jsxs("div", { className: "command-control", children: [_jsx("label", { ...combo.getLabelProps(), className: "command-srlabel", children: ariaLabel }), _jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
+    return (_jsx(Portal, { children: _jsxs("div", { className: commandRecipe(), children: [_jsx("div", { ...dlg.getBackdropProps(), className: "crisp-command-backdrop" }), _jsx("div", { ...dlg.getPositionerProps(), className: "crisp-command-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(dlg.getContentProps(), describedBy), className: cx("crisp-command-content", className), children: _jsxs("div", { className: "crisp-command-card", children: [_jsxs("div", { className: "crisp-command-control", children: [_jsx("label", { ...combo.getLabelProps(), className: "crisp-command-srlabel", children: ariaLabel }), _jsx(IconSearch, {}), _jsx("input", { ref: inputRef, ...combo.getInputProps(), className: "crisp-command-input", placeholder: placeholder })] }), _jsx("div", { ...combo.getContentProps(), className: "crisp-command-list", children: filteredItems.length === 0 ? (_jsx("div", { className: "crisp-command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
                                         const Icon = item.icon;
                                         const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
-                                        return (_jsxs(React.Fragment, { children: [showGroup && (_jsx("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), _jsxs("div", { ...combo.getItemProps({ item }), className: "command-item", children: [_jsx(Icon, {}), _jsx("span", { className: "command-item-label", children: item.label }), item.shortcut && (_jsx("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) }))] })] }, item.id));
-                                    })) }), _jsxs("div", { className: "command-footer", children: [_jsxs("span", { className: "command-footer-nav", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), navigateLabel] }), _jsxs("button", { type: "button", className: "command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [_jsx("span", { className: "command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), _jsx("span", { className: "command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
+                                        return (_jsxs(React.Fragment, { children: [showGroup && (_jsx("div", { className: "crisp-command-group-label", "aria-hidden": "true", children: item.group })), _jsxs("div", { ...combo.getItemProps({ item }), className: "crisp-command-item", children: [_jsx(Icon, {}), _jsx("span", { className: "crisp-command-item-label", children: item.label }), item.shortcut && (_jsx("span", { className: "crisp-command-item-shortcut", children: item.shortcut.map((key) => (_jsx(Kbd, { children: key }, key))) }))] })] }, item.id));
+                                    })) }), _jsxs("div", { className: "crisp-command-footer", children: [_jsxs("span", { className: "crisp-command-footer-nav", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), navigateLabel] }), _jsxs("button", { type: "button", className: "crisp-command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [_jsx("span", { className: "crisp-command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), _jsx("span", { className: "crisp-command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
 }

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

@@ -3,36 +3,36 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "command",
     base: `display: contents; font-family: ${c.font.sans}
-  ; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-  & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
-  & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
-  & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-  & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
-  & .command-control { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
-  & .command-control svg { flex-shrink: 0; }
+  ; & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+  & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+  & .crisp-command-control { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+  & .crisp-command-control svg { flex-shrink: 0; }
   /* The palette's label element. It exists for the assistive tree only: zag's
      combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
-  & .command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-  & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${c.font.sans}; font-size: ${c.text.xl}; color: ${c.fgPrimary}; }
-  & .command-input::placeholder { color: ${c.fgMuted}; }
-  & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]} ${c.space["2.5"]}; display: flex; flex-direction: column; gap: ${c.space.px}; }
-  & .command-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-  & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.xl}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; }
-  & .command-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
-  & .command-item[data-highlighted] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-  & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["0.5"]}; }
-  & .command-group-label { padding: ${c.space["2"]} ${c.space["2.5"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
-  & .command-list > .command-group-label:first-child { padding-top: ${c.space["1"]}; }
-  & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
-  & .command-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-  & .command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-  & .command-footer-action:disabled { opacity: 0.5; cursor: default; }
-  & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }
+  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${c.font.sans}; font-size: ${c.text.xl}; color: ${c.fgPrimary}; }
+  & .crisp-command-input::placeholder { color: ${c.fgMuted}; }
+  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]} ${c.space["2.5"]}; display: flex; flex-direction: column; gap: ${c.space.px}; }
+  & .crisp-command-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding-inline: ${c.space["2.5"]}; border-radius: ${c.radius.xl}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; }
+  & .crisp-command-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["0.5"]}; }
+  & .crisp-command-group-label { padding: ${c.space["2"]} ${c.space["2.5"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: ${c.space["1"]}; }
+  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
+  & .crisp-command-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${c.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/product/entitycard/entitycard.js

@@ -6,6 +6,6 @@ import { entitycardRecipe } from "./entitycard.recipe.js";
  * right-aligned date. Rendered as a button so the whole card is clickable.
  */
 export function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, ...rest }) {
-    return (_jsxs("button", { type: "button", className: entitycardRecipe({ className }), ...rest, onClick: onClick, "aria-label": ariaLabel, children: [author != null && _jsx("span", { className: "entitycard-author", children: author }), _jsx("span", { className: "entitycard-title", children: title }), excerpt != null && _jsx("span", { className: "entitycard-excerpt", children: excerpt }), _jsx("span", { className: "entitycard-spacer" }), (footer != null || date != null) && (_jsxs("span", { className: "entitycard-foot", children: [footer, date != null && _jsx("span", { className: "entitycard-date", children: date })] }))] }));
+    return (_jsxs("button", { type: "button", className: entitycardRecipe({ className }), ...rest, onClick: onClick, "aria-label": ariaLabel, children: [author != null && (_jsx("span", { className: "crisp-entitycard-author", children: author })), _jsx("span", { className: "crisp-entitycard-title", children: title }), excerpt != null && (_jsx("span", { className: "crisp-entitycard-excerpt", children: excerpt })), _jsx("span", { className: "crisp-entitycard-spacer" }), (footer != null || date != null) && (_jsxs("span", { className: "crisp-entitycard-foot", children: [footer, date != null && (_jsx("span", { className: "crisp-entitycard-date", children: date }))] }))] }));
 }
 EntityCard.displayName = "EntityCard";

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

@@ -14,13 +14,13 @@ const config = defineRecipe({
     &:hover { box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
     &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }
 
-    & .entitycard-author { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .entitycard-title { margin-top: ${c.space["2"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; letter-spacing: -0.1px; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .entitycard-excerpt { margin-top: ${c.space["1"]}; font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-    & .entitycard-spacer { flex: 1; min-height: ${c.space["3"]}; }
-    & .entitycard-foot { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding-top: ${c.space["2.5"]}; margin-top: ${c.space["1"]}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgPrimary}; }
-    & .entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }`,
+    & .crisp-entitycard-author { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-entitycard-title { margin-top: ${c.space["2"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; letter-spacing: -0.1px; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-entitycard-excerpt { margin-top: ${c.space["1"]}; font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+    & .crisp-entitycard-spacer { flex: 1; min-height: ${c.space["3"]}; }
+    & .crisp-entitycard-foot { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding-top: ${c.space["2.5"]}; margin-top: ${c.space["1"]}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${c.fgPrimary}; }
+    & .crisp-entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/flowcanvas/flowcanvas.js

@@ -64,9 +64,9 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
             ...rest.style,
             backgroundSize: `${GRID * zoom}px ${GRID * zoom}px`,
             backgroundPosition: `${pan.x}px ${pan.y}px`,
-        }, role: "application", "aria-label": ariaLabel ?? "Flow canvas", onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "flowcanvas-viewport", style: {
+        }, role: "application", "aria-label": ariaLabel ?? "Flow canvas", onPointerDown: onBackgroundPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "crisp-flowcanvas-viewport", style: {
                     transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                }, children: [_jsxs("svg", { className: "flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: edgesLabel }), edges.map((edge) => {
+                }, children: [_jsxs("svg", { className: "crisp-flowcanvas-edges", "aria-hidden": "true", children: [_jsx("title", { children: edgesLabel }), edges.map((edge) => {
                                 const a = byId.get(edge.from);
                                 const b = byId.get(edge.to);
                                 if (!a || !b)
@@ -76,12 +76,12 @@ export function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth
                                 const tx = b.x;
                                 const ty = b.y + nodeHeight / 2;
                                 const c = Math.max(30, Math.abs(tx - sx) / 2);
-                                return (_jsxs("g", { children: [_jsx("path", { className: "flowcanvas-edge", d: `M ${sx} ${sy} C ${sx + c} ${sy}, ${tx - c} ${ty}, ${tx} ${ty}` }), _jsx("circle", { className: "flowcanvas-edge-dot", cx: sx, cy: sy, r: 3 }), _jsx("circle", { className: "flowcanvas-edge-dot", cx: tx, cy: ty, r: 3 })] }, `${edge.from}-${edge.to}`));
-                            })] }), nodes.map((node) => (_jsx("div", { className: "flowcanvas-node", "data-dragging": drag.current &&
+                                return (_jsxs("g", { children: [_jsx("path", { className: "crisp-flowcanvas-edge", d: `M ${sx} ${sy} C ${sx + c} ${sy}, ${tx - c} ${ty}, ${tx} ${ty}` }), _jsx("circle", { className: "crisp-flowcanvas-edge-dot", cx: sx, cy: sy, r: 3 }), _jsx("circle", { className: "crisp-flowcanvas-edge-dot", cx: tx, cy: ty, r: 3 })] }, `${edge.from}-${edge.to}`));
+                            })] }), nodes.map((node) => (_jsx("div", { className: "crisp-flowcanvas-node", "data-dragging": drag.current &&
                             "id" in drag.current &&
                             drag.current.id === node.id
                             ? ""
-                            : undefined, style: { left: node.x, top: node.y, width: nodeWidth }, onPointerDown: (e) => onNodePointerDown(e, node), children: renderNode(node) }, node.id)))] }), _jsxs("div", { className: "flowcanvas-toolbar", children: [_jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomOutLabel, onClick: () => setZoom((z) => clampZoom(z - 0.1)), children: _jsx(Minus, { size: 16, strokeWidth: 2 }) }), _jsxs("span", { className: "flowcanvas-tool flowcanvas-tool-zoom", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", className: "flowcanvas-tool", "aria-label": zoomInLabel, onClick: () => setZoom((z) => clampZoom(z + 0.1)), children: _jsx(Plus, { size: 16, strokeWidth: 2 }) }), _jsx("span", { className: "flowcanvas-tool-sep" }), _jsx("button", { type: "button", className: "flowcanvas-tool", onClick: () => {
+                            : undefined, style: { left: node.x, top: node.y, width: nodeWidth }, onPointerDown: (e) => onNodePointerDown(e, node), children: renderNode(node) }, node.id)))] }), _jsxs("div", { className: "crisp-flowcanvas-toolbar", children: [_jsx("button", { type: "button", className: "crisp-flowcanvas-tool", "aria-label": zoomOutLabel, onClick: () => setZoom((z) => clampZoom(z - 0.1)), children: _jsx(Minus, { size: 16, strokeWidth: 2 }) }), _jsxs("span", { className: "crisp-flowcanvas-tool crisp-flowcanvas-tool-zoom", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", className: "crisp-flowcanvas-tool", "aria-label": zoomInLabel, onClick: () => setZoom((z) => clampZoom(z + 0.1)), children: _jsx(Plus, { size: 16, strokeWidth: 2 }) }), _jsx("span", { className: "crisp-flowcanvas-tool-sep" }), _jsx("button", { type: "button", className: "crisp-flowcanvas-tool", onClick: () => {
                             setZoom(1);
                             setPan({ x: 40, y: 40 });
                         }, children: resetLabel })] })] }));

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

@@ -6,17 +6,17 @@ const config = defineRecipe({
     name: "flowcanvas",
     base: `position: relative; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; background-color: ${c.bgSurface}; background-image: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 14%, transparent) 1px, transparent 1px); font-family: ${c.font.sans}; cursor: grab; touch-action: none; user-select: none;
     &[data-panning] { cursor: grabbing; }
-    & .flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
-    & .flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
-    & .flowcanvas-edge { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); stroke-width: 1.5; }
-    & .flowcanvas-edge-dot { fill: ${c.bgBrandSolid}; }
-    & .flowcanvas-node { position: absolute; cursor: grab; }
-    & .flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
-    & .flowcanvas-toolbar { position: absolute; bottom: ${c.space["4"]}; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: ${c.space["1"]}; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 4px 14px -4px rgba(28,40,64,0.16); }
-    & .flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; height: 30px; min-width: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .flowcanvas-tool:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
-    & .flowcanvas-tool-zoom { min-width: 48px; }
-    & .flowcanvas-tool-sep { width: 1px; height: 18px; background: ${c.borderSubtle}; }`,
+    & .crisp-flowcanvas-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
+    & .crisp-flowcanvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
+    & .crisp-flowcanvas-edge { fill: none; stroke: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); stroke-width: 1.5; }
+    & .crisp-flowcanvas-edge-dot { fill: ${c.bgBrandSolid}; }
+    & .crisp-flowcanvas-node { position: absolute; cursor: grab; }
+    & .crisp-flowcanvas-node[data-dragging] { cursor: grabbing; z-index: 10; }
+    & .crisp-flowcanvas-toolbar { position: absolute; bottom: ${c.space["4"]}; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: ${c.space["1"]}; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px ${c.borderDefault}, 0 4px 14px -4px rgba(28,40,64,0.16); }
+    & .crisp-flowcanvas-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; height: 30px; min-width: 30px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-flowcanvas-tool:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-flowcanvas-tool-zoom { min-width: 48px; }
+    & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: ${c.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/inbox/inbox.js

@@ -20,6 +20,6 @@ export function Inbox({ notifications = [], title = "Notifications", tabs, activ
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "inbox-head", children: [_jsx("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "inbox-empty", children: [_jsx("span", { className: "inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "inbox-row-body", children: [_jsx("span", { className: "inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
+    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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

@@ -11,30 +11,30 @@ const config = defineRecipe({
     box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .inbox-head { padding: ${c.space["3"]} ${c.space["3"]} 0; }
-    & .inbox-title { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
-    & .inbox-tabs { display: flex; gap: ${c.space["3"]}; margin-top: ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
-    & .inbox-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
-    & .inbox-tab:hover { color: ${c.fgPrimary}; }
-    & .inbox-tab[data-active] { color: ${c.bgBrandSolid}; box-shadow: inset 0 -2px 0 ${c.bgBrandSolid}; }
-    & .inbox-tab-count { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .inbox-tab[data-active] .inbox-tab-count { color: ${c.bgBrandSolid}; }
+    & .crisp-inbox-head { padding: ${c.space["3"]} ${c.space["3"]} 0; }
+    & .crisp-inbox-title { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; }
+    & .crisp-inbox-tabs { display: flex; gap: ${c.space["3"]}; margin-top: ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; }
+    & .crisp-inbox-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 2px; margin: 0; border: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
+    & .crisp-inbox-tab:hover { color: ${c.fgPrimary}; }
+    & .crisp-inbox-tab[data-active] { color: ${c.bgBrandSolid}; box-shadow: inset 0 -2px 0 ${c.bgBrandSolid}; }
+    & .crisp-inbox-tab-count { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-inbox-tab[data-active] .crisp-inbox-tab-count { color: ${c.bgBrandSolid}; }
 
-    & .inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
-    & .inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .inbox-row:hover { background: ${c.bgRaised}; }
-    & .inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
-    & .inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .inbox-row-msg { font-size: ${c.text.lg}; line-height: 18px; color: ${c.fgPrimary}; }
-    & .inbox-row-msg b { font-weight: ${c.weight.semibold}; }
-    & .inbox-row-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: ${c.space["1"]}; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; }
+    & .crisp-inbox-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["1"]}; display: flex; flex-direction: column; gap: 1px; }
+    & .crisp-inbox-row { display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; padding: ${c.space["2"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-inbox-row:hover { background: ${c.bgRaised}; }
+    & .crisp-inbox-row-avatar { flex-shrink: 0; margin-top: 1px; }
+    & .crisp-inbox-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-inbox-row-msg { font-size: ${c.text.lg}; line-height: 18px; color: ${c.fgPrimary}; }
+    & .crisp-inbox-row-msg b { font-weight: ${c.weight.semibold}; }
+    & .crisp-inbox-row-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-inbox-row-unread { flex-shrink: 0; width: 8px; height: 8px; margin-top: ${c.space["1"]}; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; }
 
-    & .inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1"]}; padding: ${c.space["6"]} ${c.space["4"]}; text-align: center; }
-    & .inbox-empty-icon { display: inline-flex; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); }
-    & .inbox-empty-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .inbox-empty-sub { font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; max-width: 260px; }
-    & .inbox-empty-action { margin-top: ${c.space["2"]}; }`,
+    & .crisp-inbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1"]}; padding: ${c.space["6"]} ${c.space["4"]}; text-align: center; }
+    & .crisp-inbox-empty-icon { display: inline-flex; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); }
+    & .crisp-inbox-empty-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-inbox-empty-sub { font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; max-width: 260px; }
+    & .crisp-inbox-empty-action { margin-top: ${c.space["2"]}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/listpage/listpage.js

@@ -4,9 +4,9 @@ import { listpageRecipe } from "./listpage.recipe.js";
  * Renders a real `<button>` when `onClick` is given, else a plain row. */
 export function ListRow({ children, onClick, }) {
     if (onClick) {
-        return (_jsx("button", { type: "button", className: "listpage-row", onClick: onClick, children: children }));
+        return (_jsx("button", { type: "button", className: "crisp-listpage-row", onClick: onClick, children: children }));
     }
-    return _jsx("div", { className: "listpage-row", children: children });
+    return _jsx("div", { className: "crisp-listpage-row", children: children });
 }
 /**
  * The entity-list page shell — measured from Reports/Sequences/Tasks/
@@ -16,6 +16,6 @@ export function ListRow({ children, onClick, }) {
  */
 export function ListPage({ leading, trailing, count, favorites, favoritesLabel = "Favorites", columns, groups, emptyLabel = "Nothing here yet", className, ...rest }) {
     const total = groups?.reduce((s, g) => s + g.rows.length, 0) ?? 0;
-    return (_jsxs("div", { className: listpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "listpage-toolbar", children: [_jsx("div", { className: "listpage-toolbar-lead", children: leading }), count != null && _jsx("div", { className: "listpage-count", children: count }), trailing != null && (_jsx("div", { className: "listpage-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "listpage-body", children: [favorites != null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "listpage-section-label", children: favoritesLabel }), _jsx("div", { className: "listpage-favorites", "data-dashed": "", children: favorites })] })), columns && columns.length > 0 && (_jsx("div", { className: "listpage-colhead", children: columns.map((col, i) => (_jsxs("span", { className: "listpage-colhead-cell", children: [col.icon, col.label] }, i))) })), total === 0 && !groups?.length ? (_jsx("div", { className: "listpage-empty", children: emptyLabel })) : (groups?.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "listpage-group", children: [g.label, g.count != null && (_jsx("span", { className: "listpage-group-count", children: g.count }))] }), g.rows] }, g.id))))] })] }));
+    return (_jsxs("div", { className: listpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-listpage-toolbar", children: [_jsx("div", { className: "crisp-listpage-toolbar-lead", children: leading }), count != null && _jsx("div", { className: "crisp-listpage-count", children: count }), trailing != null && (_jsx("div", { className: "crisp-listpage-toolbar-trail", children: trailing }))] }), _jsxs("div", { className: "crisp-listpage-body", children: [favorites != null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "crisp-listpage-section-label", children: favoritesLabel }), _jsx("div", { className: "crisp-listpage-favorites", "data-dashed": "", children: favorites })] })), columns && columns.length > 0 && (_jsx("div", { className: "crisp-listpage-colhead", children: columns.map((col, i) => (_jsxs("span", { className: "crisp-listpage-colhead-cell", children: [col.icon, col.label] }, i))) })), total === 0 && !groups?.length ? (_jsx("div", { className: "crisp-listpage-empty", children: emptyLabel })) : (groups?.map((g) => (_jsxs("div", { children: [_jsxs("div", { className: "crisp-listpage-group", children: [g.label, g.count != null && (_jsx("span", { className: "crisp-listpage-group-count", children: g.count }))] }), g.rows] }, g.id))))] })] }));
 }
 ListPage.displayName = "ListPage";

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

@@ -9,32 +9,32 @@ const config = defineRecipe({
     base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
-    & .listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
-    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
+    & .crisp-listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+    & .crisp-listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-listpage-count + .crisp-listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
 
-    & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
+    & .crisp-listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
 
-    & .listpage-section-label { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; border-radius: ${c.radius.xl};
+    & .crisp-listpage-section-label { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; border-radius: ${c.radius.xl};
       background: repeating-linear-gradient(0deg, transparent, transparent) padding-box,
         border-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
-    & .listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 14%, transparent); }
+    & .crisp-listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 14%, transparent); }
 
-    & .listpage-colhead { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 40px; padding: 0 ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .crisp-listpage-colhead { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 40px; padding: 0 ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
 
-    & .listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .listpage-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+    & .crisp-listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-listpage-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
 
-    & .listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
-    & .listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
-    & .listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
-    & .listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .crisp-listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
+    & .crisp-listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
+    & .crisp-listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
 
-    & .listpage-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    & .crisp-listpage-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/product/navitem/navitem.js

@@ -3,6 +3,6 @@ import * as React from "react";
 import { Primitive } from "../../core/index.js";
 import { navitemRecipe } from "./navitem.recipe.js";
 export const NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
-    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "navitem-label", children: children }), trailing != null && (_jsx("span", { className: "navitem-trailing", children: trailing }))] }));
+    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "crisp-navitem-label", children: children }), trailing != null && (_jsx("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
 });
 NavItem.displayName = "NavItem";