@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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: [],

package/dist/cjs/components/datatable/datatable.js

@@ -116,7 +116,7 @@ function formatCell(type, v, symbol) {
 // display string belongs -- as an entity's name, a status' label -- while the
 // raw value keeps driving structure and tone.
 function renderTyped(col, value, avatarTone, display) {
-    const empty = (0, jsx_runtime_1.jsx)("span", { className: "datatable-muted", children: "\u2014" });
+    const empty = (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
             const raw = (typeof value === "object" && value ? value : { name: asText(value) });
@@ -125,7 +125,7 @@ function renderTyped(col, value, avatarTone, display) {
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
             // asking for a format on a tag column means "render it your way" -- show
@@ -135,7 +135,7 @@ function renderTyped(col, value, avatarTone, display) {
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
@@ -143,14 +143,14 @@ function renderTyped(col, value, avatarTone, display) {
                 return empty;
             // tone is looked up by the RAW status, so formatting the label (casing,
             // translation) can never silently repaint the chip
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
             const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
-            return isNum ? (0, jsx_runtime_1.jsx)("span", { className: "datatable-num", children: text }) : text;
+            return isNum ? (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-num", children: text }) : text;
         }
     }
 }
@@ -453,13 +453,13 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     function ChevronFor({ colKey }) {
         const dir = sortDirByKey.get(colKey);
         if (dir)
-            return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
-        return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+            return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
+        return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
-                }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
                                     const Icon = col.icon;
                                     // The sort direction was painted (`data-sorted`) and never
                                     // announced: a screen reader heard the same header before and
@@ -475,10 +475,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
-                                                autoFocus: true, className: "datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
+                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
                                                     setRenaming(null);
                                                 }, onKeyDown: (e) => {
@@ -488,10 +488,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }
                                                     else if (e.key === "Escape")
                                                         setRenaming(null);
-                                                } })) : columnMenu ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
+                                                } })) : columnMenu ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
-                                                        : col.key} column options`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [group !== null && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(table_1.TableCell, { colSpan: totalCols, className: "datatable-group", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-group-label", children: group }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
+                                                        : col.key} column options`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [group !== null && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(table_1.TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-label", children: group }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
                                         dragRowId &&
                                         dragRowId !== row.id &&
                                         dropRowId === row.id
@@ -507,18 +507,18 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                             e.preventDefault();
                                             reorderRows(dragRowId, row.id);
                                         }
-                                        : undefined, children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
+                                        : undefined, children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
                                                     setDragRowId(row.id);
                                                     e.dataTransfer.effectAllowed = "move";
                                                 }, onDragEnd: () => {
                                                     setDragRowId(null);
                                                     setDropRowId(null);
-                                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
+                                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
                                             const value = cellValue(col, row);
                                             const sticky = stickyCol(i);
                                             if (isEditing) {
-                                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { className: "datatable-edit", 
+                                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                         autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, defaultValue: col.type === "date"
                                                             ? toDateInputValue(value)
@@ -529,7 +529,9 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                                 setEditing(null);
                                                         }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
                                             }
-                                            return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, className: col.editable ? "datatable-editable" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, className: col.editable
+                                                    ? "crisp-datatable-editable"
+                                                    : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: (e) => {
                                                     // the keyboard model's anchor; also opens the
@@ -547,6 +549,6 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 }, children: col.render
                                                     ? col.render(value, row)
                                                     : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";