@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/entitycard.layered.css

@@ -0,0 +1,28 @@
+@layer crisp-components {
+.crisp-entitycard {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: start;
+    padding: var(--crisp-space-3) var(--crisp-space-4); margin: 0; border: none; border-radius: var(--crisp-radius-xl);
+    background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); color: var(--crisp-fg-primary);
+    font-family: var(--crisp-font-sans); cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    &:hover { box-shadow: inset 0 0 0 1px var(--crisp-border-default), 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
+
+    & .crisp-entitycard-author { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-entitycard-title { margin-top: var(--crisp-space-2); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.1px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-entitycard-excerpt { margin-top: var(--crisp-space-1); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+    & .crisp-entitycard-spacer { flex: 1; min-height: var(--crisp-space-3); }
+    & .crisp-entitycard-foot { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding-top: var(--crisp-space-2-5); margin-top: var(--crisp-space-1); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crisp-fg-primary); }
+    & .crisp-entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-entitycard, .crisp-entitycard * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/esm/components/accordion/accordion.js

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

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

@@ -5,16 +5,16 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "accordion",
     base: `display: flex; flex-direction: column; font-family: ${c.font.sans};
-    & .accordion-item { border-bottom: 1px solid ${c.borderSubtle}; }
-    & .accordion-trigger { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 44px; padding: 0 ${c.space["1"]}; margin: 0; border: none; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; text-align: start; cursor: pointer; }
-    & .accordion-trigger:hover { color: ${c.fgPrimary}; }
-    & .accordion-title { flex: 1; min-width: 0; }
-    & .accordion-chevron { flex-shrink: 0; color: ${c.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 ${c.space["1"]} ${c.space["3"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    & .crisp-accordion-item { border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-accordion-trigger { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: 44px; padding: 0 ${c.space["1"]}; margin: 0; border: none; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; text-align: start; cursor: pointer; }
+    & .crisp-accordion-trigger:hover { color: ${c.fgPrimary}; }
+    & .crisp-accordion-title { flex: 1; min-width: 0; }
+    & .crisp-accordion-chevron { flex-shrink: 0; color: ${c.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 ${c.space["1"]} ${c.space["3"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/badge/badge.js

@@ -3,6 +3,6 @@ import * as React from "react";
 import { Primitive } from "../../core/index.js";
 import { badgeRecipe } from "./badge.recipe.js";
 export const Badge = React.forwardRef(({ tone, size, variant, className, asChild, dot, children, ...props }, ref) => {
-    return (_jsxs(Primitive.span, { ref: ref, asChild: asChild, className: badgeRecipe({ tone, size, variant, className }), ...props, children: [dot && _jsx("span", { className: "badge-dot", "aria-hidden": "true" }), children] }));
+    return (_jsxs(Primitive.span, { ref: ref, asChild: asChild, className: badgeRecipe({ tone, size, variant, className }), ...props, children: [dot && _jsx("span", { className: "crisp-badge-dot", "aria-hidden": "true" }), children] }));
 });
 Badge.displayName = "Badge";

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

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

package/dist/esm/components/barchart/barchart.js

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

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

@@ -5,24 +5,24 @@ import { contract as c } from "../../tokens/index.js";
 // and category labels below. Pure CSS (no SVG), so it scales with its container.
 const config = 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: ${c.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: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${c.space["3"]}; border-bottom: 1px solid ${c.borderDefault}; }
-    & .barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.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: ${c.radius.sm} ${c.radius.sm} 0 0; background: ${c.bgBrandSolid}; transition: height 0.3s ease; }
-    & .barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
-    & .barchart-xaxis { display: flex; gap: ${c.space["3"]}; margin-top: ${c.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: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .barchart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--barchart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.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: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-barchart-plot { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: ${c.space["3"]}; border-bottom: 1px solid ${c.borderDefault}; }
+    & .crisp-barchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.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: ${c.radius.sm} ${c.radius.sm} 0 0; background: ${c.bgBrandSolid}; transition: height 0.3s ease; }
+    & .crisp-barchart-bar[data-empty] { min-height: 2px; opacity: 0.35; }
+    & .crisp-barchart-xaxis { display: flex; gap: ${c.space["3"]}; margin-top: ${c.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: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-barchart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--crisp-barchart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/breadcrumb/breadcrumb.js

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

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

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

package/dist/esm/components/bulkbar/bulkbar.js

@@ -8,9 +8,9 @@ import { bulkbarRecipe } from "./bulkbar.recipe.js";
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
  */
 export function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => (_jsxs(_Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
-    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx(X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
+    return (_jsx("div", { className: bulkbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-bulkbar-bar", children: [count != null && (_jsxs("button", { type: "button", className: "crisp-bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), _jsx(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). */
-export const BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => (_jsxs("button", { ref: ref, type: type ?? "button", className: `bulkbar-btn${danger ? " bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
+export const BulkBarButton = React.forwardRef(({ icon, danger, className, children, type, ...props }, ref) => (_jsxs("button", { ref: ref, type: type ?? "button", className: `crisp-bulkbar-btn${danger ? " crisp-bulkbar-btn--danger" : ""}${className ? ` ${className}` : ""}`, ...props, children: [icon, children] })));
 BulkBarButton.displayName = "BulkBarButton";

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

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

package/dist/esm/components/callout/callout.js

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

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

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

package/dist/esm/components/card/card.js

@@ -5,11 +5,11 @@ import { cardRecipe } from "./card.recipe.js";
 export const Card = React.forwardRef(({ raised, interactive, className, ...props }, ref) => (_jsx("div", { ref: ref, className: cardRecipe({ raised, interactive, className }), ...props })));
 Card.displayName = "Card";
 export function CardHeader({ children, icon, action, }) {
-    return (_jsxs("div", { className: "card-header", children: [icon, _jsx("span", { className: "card-title", children: children }), action] }));
+    return (_jsxs("div", { className: "crisp-card-header", children: [icon, _jsx("span", { className: "crisp-card-title", children: children }), action] }));
 }
 export function CardBody({ children, className, }) {
-    return (_jsx("div", { className: className ? `card-body ${className}` : "card-body", children: children }));
+    return (_jsx("div", { className: className ? `crisp-card-body ${className}` : "crisp-card-body", children: children }));
 }
 export function CardFooter({ children }) {
-    return _jsx("div", { className: "card-footer", children: children });
+    return _jsx("div", { className: "crisp-card-footer", children: children });
 }

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

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

package/dist/esm/components/columncalc/columncalc.js

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

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

@@ -10,18 +10,25 @@ const config = 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: ${c.space["1"]}; width: 100%; height: 100%; min-height: ${c.size.tableRow}; margin: 0; padding: 0 ${c.space["3"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .columncalc-trigger:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.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: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
-    & .columncalc-op { color: ${c.fgMuted}; }
-    & .columncalc-section { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }`,
+    & .crisp-columncalc-trigger { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; height: 100%; min-height: ${c.size.tableRow}; margin: 0; padding: 0 ${c.space["3"]}; border: none; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.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: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
+    & .crisp-columncalc-op { color: ${c.fgMuted}; }
+    & .crisp-columncalc-section { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

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

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

@@ -4,15 +4,15 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "contextmenu",
     base: `display: contents; font-family: ${c.font.sans};
-    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.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: ${c.space["2"]}; width: 100%; height: ${c.size.menuRow}; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
-    & .contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
-    & .contextmenu-item--danger { color: ${c.bgDanger}; }
-    & .contextmenu-item--danger svg { color: ${c.bgDanger}; }
-    & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
-    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
-    & .contextmenu-sep { height: 1px; margin: ${c.space["1"]} 0; border: none; background: ${c.borderSubtle}; }`,
+    & .crisp-contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.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: ${c.space["2"]}; width: 100%; height: ${c.size.menuRow}; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
+    & .crisp-contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .crisp-contextmenu-item--danger { color: ${c.bgDanger}; }
+    & .crisp-contextmenu-item--danger svg { color: ${c.bgDanger}; }
+    & .crisp-contextmenu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .crisp-contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
+    & .crisp-contextmenu-sep { height: 1px; margin: ${c.space["1"]} 0; border: none; background: ${c.borderSubtle}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/datatable/datatable.js

@@ -80,7 +80,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 = _jsx("span", { className: "datatable-muted", children: "\u2014" });
+    const empty = _jsx("span", { className: "crisp-datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
             const raw = (typeof value === "object" && value ? value : { name: asText(value) });
@@ -89,7 +89,7 @@ function renderTyped(col, value, avatarTone, display) {
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
+            return (_jsxs("span", { className: "crisp-datatable-entity", children: [_jsx("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _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
@@ -99,7 +99,7 @@ function renderTyped(col, value, avatarTone, display) {
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return (_jsx("span", { className: "datatable-tags", children: tags.map((t) => (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return (_jsx("span", { className: "crisp-datatable-tags", children: tags.map((t) => (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
@@ -107,14 +107,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 (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
+            return (_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 ? _jsx("span", { className: "datatable-num", children: text }) : text;
+            return isNum ? _jsx("span", { className: "crisp-datatable-num", children: text }) : text;
         }
     }
 }
@@ -417,13 +417,13 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     function ChevronFor({ colKey }) {
         const dir = sortDirByKey.get(colKey);
         if (dir)
-            return dir === "asc" ? (_jsx(ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
-        return (_jsx(ChevronsUpDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+            return dir === "asc" ? (_jsx(ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
+        return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
-                }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(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
@@ -439,10 +439,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = (_jsxs("span", { className: "datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
                                     return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? (_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) => {
@@ -452,10 +452,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }
                                                     else if (e.key === "Escape")
                                                         setRenaming(null);
-                                                } })) : columnMenu ? (_jsxs(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
+                                                } })) : columnMenu ? (_jsxs(Menu, { align: "start", trigger: _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: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => (_jsxs(React.Fragment, { children: [group !== null && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: totalCols, className: "datatable-group", children: [_jsx("span", { className: "datatable-group-label", children: group }), _jsx("span", { className: "datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
+                                                        : col.key} column options`, children: inner }), children: [_jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), _jsx(MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), _jsx(MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), _jsx(MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), _jsx(MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? (_jsx("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && (_jsx("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                })] }) }), _jsx(TableBody, { children: error ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, children: _jsx("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => (_jsxs(React.Fragment, { children: [group !== null && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [_jsx("span", { className: "crisp-datatable-group-label", children: group }), _jsx("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => (_jsxs(TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
                                         dragRowId &&
                                         dragRowId !== row.id &&
                                         dropRowId === row.id
@@ -471,18 +471,18 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                             e.preventDefault();
                                             reorderRows(dragRowId, row.id);
                                         }
-                                        : undefined, children: [showGrip && (_jsx(TableCell, { className: "datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: _jsx("button", { type: "button", className: "datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
+                                        : undefined, children: [showGrip && (_jsx(TableCell, { className: "crisp-datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: _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: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
+                                                }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(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 (_jsx(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: _jsx("input", { className: "datatable-edit", 
+                                                return (_jsx(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: _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)
@@ -493,7 +493,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                                 setEditing(null);
                                                         }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
                                             }
-                                            return (_jsx(TableCell, { align: alignFor(col), ...sticky, className: col.editable ? "datatable-editable" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return (_jsx(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
@@ -511,6 +513,6 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 }, children: col.render
                                                     ? col.render(value, row)
                                                     : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";