@crisp-ui-kit/crisp 0.31.6 → 0.32.1

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