@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/checkbox.layered.css

@@ -0,0 +1,21 @@
+@layer crisp-components {
+.crisp-checkbox {
+  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm)
+  ; background: var(--crisp-bg-surface)
+  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary)
+  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
+  &:checked, &:indeterminate { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; }
+  &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+  &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
+  &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-checkbox, .crisp-checkbox * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

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

@@ -69,7 +69,7 @@ function Accordion({ items, multiple, value, defaultValue, onValueChange, classN
             // accordion's triggers silently control the first one's panels (#227).
             const panelId = `${uid}-panel-${item.value}`;
             const triggerId = `${uid}-trigger-${item.value}`;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", id: triggerId, className: "accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "accordion-title", children: item.title }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, className: "accordion-panel", role: "region", "aria-labelledby": triggerId, "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-panel-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "accordion-content", children: item.content }) }) })] }, item.value));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-accordion-item", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", id: triggerId, className: "crisp-accordion-trigger", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-accordion-title", children: item.title }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-accordion-chevron", size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)("div", { id: panelId, className: "crisp-accordion-panel", role: "region", "aria-labelledby": triggerId, "data-open": isOpen ? "" : undefined, hidden: !isOpen, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-accordion-panel-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-accordion-content", children: item.content }) }) })] }, item.value));
         }) }));
 }
 Accordion.displayName = "Accordion";

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

@@ -8,16 +8,16 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "accordion",
     base: `display: flex; flex-direction: column; font-family: ${tokens_1.contract.font.sans};
-    & .accordion-item { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .accordion-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: 44px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0; border: none; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; text-align: start; cursor: pointer; }
-    & .accordion-trigger:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .accordion-title { flex: 1; min-width: 0; }
-    & .accordion-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .2s ease; }
-    & .accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
-    & .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
-    & .accordion-panel[data-open] { grid-template-rows: 1fr; }
-    & .accordion-panel-inner { overflow: hidden; }
-    & .accordion-content { padding: 0 ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    & .crisp-accordion-item { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-accordion-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: 44px; padding: 0 ${tokens_1.contract.space["1"]}; margin: 0; border: none; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; text-align: start; cursor: pointer; }
+    & .crisp-accordion-trigger:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-accordion-title { flex: 1; min-width: 0; }
+    & .crisp-accordion-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .2s ease; }
+    & .crisp-accordion-trigger[aria-expanded="true"] .crisp-accordion-chevron { transform: rotate(180deg); }
+    & .crisp-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
+    & .crisp-accordion-panel[data-open] { grid-template-rows: 1fr; }
+    & .crisp-accordion-panel-inner { overflow: hidden; }
+    & .crisp-accordion-content { padding: 0 ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["3"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/badge/badge.js

@@ -39,6 +39,6 @@ const React = __importStar(require("react"));
 const core_1 = require("../../core");
 const badge_recipe_1 = require("./badge.recipe");
 exports.Badge = React.forwardRef(({ tone, size, variant, className, asChild, dot, children, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, badge_recipe_1.badgeRecipe)({ tone, size, variant, className }), ...props, children: [dot && (0, jsx_runtime_1.jsx)("span", { className: "badge-dot", "aria-hidden": "true" }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, badge_recipe_1.badgeRecipe)({ tone, size, variant, className }), ...props, children: [dot && (0, jsx_runtime_1.jsx)("span", { className: "crisp-badge-dot", "aria-hidden": "true" }), children] }));
 });
 exports.Badge.displayName = "Badge";

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

@@ -6,7 +6,7 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "badge",
     base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.1px; white-space: nowrap;
-    & .badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: currentColor; }`,
+    & .crisp-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.full}; background: currentColor; }`,
     variants: {
         tone: {
             neutral: `background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgMuted}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault};`,

package/dist/cjs/components/barchart/barchart.js

@@ -36,10 +36,10 @@ function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n
         `Bar chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, barchart_recipe_1.barchartRecipe)({ className }), ...rest, style: {
             height,
-            "--barchart-yaxis-width": yAxisWidthValue,
-        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "barchart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "barchart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "barchart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => ((0, jsx_runtime_1.jsx)("div", { className: "barchart-col", children: (0, jsx_runtime_1.jsx)("div", { className: "barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
+            "--crisp-barchart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-barchart-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-yaxis", children: tickValues.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-barchart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-barchart-plot", children: [tickValues.map((t) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), data.map((d) => ((0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-col", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-bar", "data-empty": d.value <= 0 ? "" : undefined, style: {
                                         height: `${Math.max(0, (d.value / top) * 100)}%`,
                                         background: color,
-                                    }, title: `${d.label}: ${format(d.value)}` }) }, d.label)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "barchart-xaxis", "data-inset": "", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "barchart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "barchart-axis-title", children: xAxisTitle }))] }));
+                                    }, title: `${d.label}: ${format(d.value)}` }) }, d.label)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-xaxis", "data-inset": "", children: data.map((d) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-barchart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-barchart-axis-title", children: xAxisTitle }))] }));
 }
 BarChart.displayName = "BarChart";

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

@@ -8,24 +8,24 @@ const tokens_1 = require("../../tokens");
 // and category labels below. Pure CSS (no SVG), so it scales with its container.
 const config = (0, core_1.defineRecipe)({
     name: "barchart",
-    // --barchart-yaxis-width is the one source of truth for the value-axis
+    // --crisp-barchart-yaxis-width is the one source of truth for the value-axis
     // gutter: the component sets it (auto-sized to the longest tick label, or
     // pinned via `yAxisWidth`) on the root element, and it inherits down to the
     // x-axis padding and axis title so they never drift out of alignment. 34px
     // is only the pre-JS fallback (e.g. if `barchartRecipe` is used bare).
-    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --barchart-yaxis-width: 34px;
-    & .barchart-body { display: flex; flex: 1; min-height: 0; }
-    & .barchart-yaxis { position: relative; flex-shrink: 0; width: var(--barchart-yaxis-width); }
-    & .barchart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
-    & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
-    & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
-    & .barchart-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
-    & .barchart-bar { width: 100%; max-width: 96px; border-radius: ${tokens_1.contract.radius.sm} ${tokens_1.contract.radius.sm} 0 0; background: ${tokens_1.contract.bgBrandSolid}; transition: height 0.3s ease; }
-    & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
-    & .barchart-xaxis { display: flex; gap: ${tokens_1.contract.space["3"]}; margin-top: ${tokens_1.contract.space["1.5"]}; }
-    & .barchart-xaxis[data-inset] { padding-inline-start: var(--barchart-yaxis-width); }
-    & .barchart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-    & .barchart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; --crisp-barchart-yaxis-width: 34px;
+    & .crisp-barchart-body { display: flex; flex: 1; min-height: 0; }
+    & .crisp-barchart-yaxis { position: relative; flex-shrink: 0; width: var(--crisp-barchart-yaxis-width); }
+    & .crisp-barchart-ytick { position: absolute; inset-inline-end: ${tokens_1.contract.space["2"]}; transform: translateY(50%); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .crisp-barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderDefault}; }
+    & .crisp-barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${tokens_1.contract.borderSubtle}; pointer-events: none; }
+    & .crisp-barchart-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
+    & .crisp-barchart-bar { width: 100%; max-width: 96px; border-radius: ${tokens_1.contract.radius.sm} ${tokens_1.contract.radius.sm} 0 0; background: ${tokens_1.contract.bgBrandSolid}; transition: height 0.3s ease; }
+    & .crisp-barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
+    & .crisp-barchart-xaxis { display: flex; gap: ${tokens_1.contract.space["3"]}; margin-top: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-barchart-xaxis[data-inset] { padding-inline-start: var(--crisp-barchart-yaxis-width); }
+    & .crisp-barchart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-barchart-axis-title { margin-top: ${tokens_1.contract.space["1"]}; padding-inline-start: var(--crisp-barchart-yaxis-width); text-align: center; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -47,7 +47,7 @@ function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb",
     return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "breadcrumb-item", href: item.href, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "breadcrumb-sep", children: sep })] }, i));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-breadcrumb-item", href: item.href, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
         }) }));
 }
 Breadcrumb.displayName = "Breadcrumb";

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

@@ -7,12 +7,12 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "breadcrumb",
     base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg};
-    & .breadcrumb-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; height: 24px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; color: ${tokens_1.contract.fgMuted}; text-decoration: none; white-space: nowrap; }
-    & .breadcrumb-item svg { flex-shrink: 0; }
-    & a.breadcrumb-item:hover, & button.breadcrumb-item:hover { color: ${tokens_1.contract.fgPrimary}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
-    & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
-    & .breadcrumb-item[aria-current] { color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }
+    & .crisp-breadcrumb-item { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; height: 24px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; color: ${tokens_1.contract.fgMuted}; text-decoration: none; white-space: nowrap; }
+    & .crisp-breadcrumb-item svg { flex-shrink: 0; }
+    & a.crisp-breadcrumb-item:hover, & button.crisp-breadcrumb-item:hover { color: ${tokens_1.contract.fgPrimary}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
+    & button.crisp-breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
+    & .crisp-breadcrumb-item[aria-current] { color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }
     ${core_1.rtlFlipCss}
   `,
     variants: {},

package/dist/cjs/components/bulkbar/bulkbar.js

@@ -45,9 +45,9 @@ const bulkbar_recipe_1 = require("./bulkbar.recipe");
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
  */
 function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bulkbar-bar", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-bulkbar-bar", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
 }
 BulkBar.displayName = "BulkBar";
 /** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */
-exports.BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: type ?? "button", className: `bulkbar-btn${danger ? " bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
+exports.BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: type ?? "button", className: `crisp-bulkbar-btn${danger ? " crisp-bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
 exports.BulkBarButton.displayName = "BulkBarButton";

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

@@ -13,16 +13,16 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "bulkbar",
     base: `position: absolute; left: 0; right: 0; bottom: ${tokens_1.contract.space["4"]}; display: flex; justify-content: center; pointer-events: none; z-index: 10;
-    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; height: 48px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["1.5"]}; border-radius: 14px; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.floating}; color: ${tokens_1.contract.fgPrimary}; transition: opacity .16s ease, transform .16s ease; }
-    & .bulkbar-bar { @starting-style { opacity: 0; transform: translateY(10px); } }
-    & .bulkbar-count { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .bulkbar-count:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .bulkbar-count svg { flex-shrink: 0; }
-    & .bulkbar-btn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .bulkbar-btn:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .bulkbar-btn--danger { color: ${tokens_1.contract.bgDanger}; }
-    & .bulkbar-btn--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
-    & .bulkbar-btn svg { flex-shrink: 0; }`,
+    & .crisp-bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; height: 48px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["1.5"]}; border-radius: 14px; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.floating}; color: ${tokens_1.contract.fgPrimary}; transition: opacity .16s ease, transform .16s ease; }
+    & .crisp-bulkbar-bar { @starting-style { opacity: 0; transform: translateY(10px); } }
+    & .crisp-bulkbar-count { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-bulkbar-count:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-bulkbar-count svg { flex-shrink: 0; }
+    & .crisp-bulkbar-btn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .crisp-bulkbar-btn:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-bulkbar-btn--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-bulkbar-btn--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .crisp-bulkbar-btn svg { flex-shrink: 0; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/callout/callout.js

@@ -20,6 +20,6 @@ function Callout({ tone = "neutral", icon, title, children, action, className, .
     const iconNode = icon === undefined
         ? Fallback && (0, jsx_runtime_1.jsx)(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
         : icon;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, callout_recipe_1.calloutRecipe)({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && (0, jsx_runtime_1.jsx)("span", { className: "callout-icon", children: iconNode }), (0, jsx_runtime_1.jsxs)("div", { className: "callout-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "callout-title", children: title }), children != null && (0, jsx_runtime_1.jsx)("div", { className: "callout-desc", children: children })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "callout-action", children: action })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, callout_recipe_1.calloutRecipe)({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && (0, jsx_runtime_1.jsx)("span", { className: "crisp-callout-icon", children: iconNode }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-callout-body", children: [title != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-title", children: title }), children != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-desc", children: children }))] }), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-callout-action", children: action })] }));
 }
 Callout.displayName = "Callout";

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

@@ -8,19 +8,19 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "callout",
     base: `display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-radius: ${tokens_1.contract.radius.lg}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary};
-    & .callout-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
-    & .callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .callout-title { font-weight: ${tokens_1.contract.weight.semibold}; }
-    & .callout-desc { color: ${tokens_1.contract.fgMuted}; }
-    & .callout-action { flex-shrink: 0; }
+    & .crisp-callout-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-callout-title { font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .crisp-callout-desc { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-callout-action { flex-shrink: 0; }
     &[data-tone="info"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 8%, transparent); }
-    &[data-tone="info"] .callout-icon { color: ${tokens_1.contract.bgBrandSolid}; }
+    &[data-tone="info"] .crisp-callout-icon { color: ${tokens_1.contract.bgBrandSolid}; }
     &[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 10%, transparent); }
-    &[data-tone="success"] .callout-icon { color: ${tokens_1.contract.bgSuccess}; }
+    &[data-tone="success"] .crisp-callout-icon { color: ${tokens_1.contract.bgSuccess}; }
     &[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 12%, transparent); }
-    &[data-tone="warning"] .callout-icon { color: ${tokens_1.contract.bgWarning}; }
+    &[data-tone="warning"] .crisp-callout-icon { color: ${tokens_1.contract.bgWarning}; }
     &[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
-    &[data-tone="danger"] .callout-icon { color: ${tokens_1.contract.bgDanger}; }`,
+    &[data-tone="danger"] .crisp-callout-icon { color: ${tokens_1.contract.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/card/card.js

@@ -44,11 +44,11 @@ const card_recipe_1 = require("./card.recipe");
 exports.Card = React.forwardRef(({ raised, interactive, className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, card_recipe_1.cardRecipe)({ raised, interactive, className }), ...props })));
 exports.Card.displayName = "Card";
 function CardHeader({ children, icon, action, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "card-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "card-title", children: children }), action] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-card-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-card-title", children: children }), action] }));
 }
 function CardBody({ children, className, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className ? `card-body ${className}` : "card-body", children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className ? `crisp-card-body ${className}` : "crisp-card-body", children: children }));
 }
 function CardFooter({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "card-footer", children: children });
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-card-footer", children: children });
 }

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

@@ -9,11 +9,11 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "card",
     base: `display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
-    & .card-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; }
-    & .card-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .card-body { flex: 1; min-height: 0; padding: ${tokens_1.contract.space["4"]}; }
-    & .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
+    & .crisp-card-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .crisp-card-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-card-body { flex: 1; min-height: 0; padding: ${tokens_1.contract.space["4"]}; }
+    & .crisp-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
     variants: {
         raised: {
             true: `box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -4px rgba(28,40,64,0.08);`,

package/dist/cjs/components/columncalc/columncalc.js

@@ -135,5 +135,5 @@ function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opPr
         ...(numeric ? exports.NUMERIC_CALCS : []),
         "none",
     ];
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, columncalc_recipe_1.columncalcRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 12, strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-placeholder", children: addLabel })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "columncalc-value", children: format(result, op) }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-op", children: labelFor(op) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [(0, jsx_runtime_1.jsx)("div", { className: "columncalc-section", children: sectionLabel }), ops.map((o) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, columncalc_recipe_1.columncalcRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 12, strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-columncalc-placeholder", children: addLabel })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-columncalc-value", children: format(result, op) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-columncalc-op", children: labelFor(op) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-columncalc-section", children: sectionLabel }), ops.map((o) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
 }

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

@@ -13,18 +13,25 @@ const config = (0, core_1.defineRecipe)({
 /* Menu wraps its trigger in a flex div that sizes to content, which would
        shrink the button back to its text. Make the wrapper fill too, so the
        whole cell stays clickable. */
-    & .menu { width: 100%; height: 100%; }
+    & .crisp-menu { width: 100%; height: 100%; }
+        /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
+       soon as the hover tint paints. Everything else that fills a grid cell
+       agrees -- recordstable-sum-btn, the same summary trigger, declares no
+       radius, and datatable-grip and the embedded pickers zero theirs. An 8px
+       radius survived the chip-to-full-cell conversion and shipped rounded
+       until #282, so the spec check now guards it. */
         /* The hit target is the WHOLE summary cell -- measured 246x37 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu. */
-    & .columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .columncalc-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
-    & .columncalc-trigger[data-align="right"] { justify-content: flex-end; }
-    & .columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
-    & .columncalc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
-    & .columncalc-op { color: ${tokens_1.contract.fgMuted}; }
-    & .columncalc-section { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }`,
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-columncalc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
+    & .crisp-columncalc-op { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-columncalc-section { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -92,11 +92,11 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
-                        ? "contextmenu-item contextmenu-item--danger"
-                        : "contextmenu-item", tabIndex: -1, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+                        ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
+                        : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                         item.onSelect?.();
                         close(true);
-                    }, children: [item.icon, item.label, item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
+                    }, children: [item.icon, item.label, item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

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

@@ -7,15 +7,15 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "contextmenu",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .contextmenu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
-    & .contextmenu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .contextmenu-item:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
-    & .contextmenu-item--danger { color: ${tokens_1.contract.bgDanger}; }
-    & .contextmenu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
-    & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
-    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; }
-    & .contextmenu-sep { height: 1px; margin: ${tokens_1.contract.space["1"]} 0; border: none; background: ${tokens_1.contract.borderSubtle}; }`,
+    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-contextmenu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
+    & .crisp-contextmenu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-contextmenu-item:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    & .crisp-contextmenu-item--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-contextmenu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .crisp-contextmenu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .crisp-contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; }
+    & .crisp-contextmenu-sep { height: 1px; margin: ${tokens_1.contract.space["1"]} 0; border: none; background: ${tokens_1.contract.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],