@crisp-ui-kit/crisp 0.31.6 → 0.32.1

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

@@ -20,7 +20,7 @@ const config = defineRecipe({
     display: flex; flex-direction: column; gap: ${c.space["2"]};
     font-family: ${c.font.sans}; min-width: 0;
 
-    & .fileupload-zone {
+    & .crisp-fileupload-zone {
       box-sizing: border-box; position: relative;
       display: flex; flex-direction: column; align-items: center;
       justify-content: center; gap: ${c.space["1"]};
@@ -31,53 +31,53 @@ const config = defineRecipe({
       transition: background-color .12s, border-color .12s;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-zone:hover { background: ${c.bgRaised}; }
-    & .fileupload-zone:focus-visible { outline-color: ${c.strokeFocusRing}; }
-    & .fileupload-zone[data-dragging] {
+    & .crisp-fileupload-zone:hover { background: ${c.bgRaised}; }
+    & .crisp-fileupload-zone:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-fileupload-zone[data-dragging] {
       border-color: ${c.bgBrandSolid};
       background: color-mix(in srgb, ${c.bgBrandSolid} 6%, transparent);
     }
-    & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
-    & .fileupload-zone[data-invalid] { border-color: ${c.bgDanger}; }
+    & .crisp-fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
+    & .crisp-fileupload-zone[data-invalid] { border-color: ${c.bgDanger}; }
 
     /* "No files" 16/20 weight 600 */
-    & .fileupload-title {
+    & .crisp-fileupload-title {
       color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 20px;
       font-weight: ${c.weight.semibold};
     }
     /* The hint line, 14/20 weight 500 at 63% of the foreground */
-    & .fileupload-hint {
+    & .crisp-fileupload-hint {
       color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent);
       font-size: ${c.text.lg}; line-height: 20px;
       font-weight: ${c.weight.medium};
     }
 
-    & .fileupload-input {
+    & .crisp-fileupload-input {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
 
-    & .fileupload-list { display: flex; flex-direction: column; gap: ${c.space["1"]}; margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-list { display: flex; flex-direction: column; gap: ${c.space["1"]}; margin: 0; padding: 0; list-style: none; }
     /* the row height crisp measured for a data-grid row */
-    & .fileupload-item {
+    & .crisp-fileupload-item {
       display: flex; align-items: center; gap: ${c.space["2"]};
       min-height: ${c.size.tableRow}; padding: 0 ${c.space["2"]};
       border-radius: ${c.radius.md}; background: ${c.bgRaised};
       font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
     }
-    & .fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .fileupload-item-size { flex-shrink: 0; color: ${c.fgMuted}; font-size: ${c.text.sm}; font-variant-numeric: tabular-nums; }
-    & .fileupload-item[data-status="error"] { color: ${c.bgDanger}; }
-    & .fileupload-item[data-status="error"] .fileupload-item-size { color: ${c.bgDanger}; }
+    & .crisp-fileupload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-fileupload-item-size { flex-shrink: 0; color: ${c.fgMuted}; font-size: ${c.text.sm}; font-variant-numeric: tabular-nums; }
+    & .crisp-fileupload-item[data-status="error"] { color: ${c.bgDanger}; }
+    & .crisp-fileupload-item[data-status="error"] .crisp-fileupload-item-size { color: ${c.bgDanger}; }
 
     /* progress track, reusing the measured Progress geometry */
-    & .fileupload-progress {
+    & .crisp-fileupload-progress {
       flex-shrink: 0; width: 64px; height: 4px; border-radius: ${c.radius.full};
       background: ${c.bgNeutralWeak}; overflow: hidden;
     }
-    & .fileupload-progress-fill { height: 100%; background: ${c.bgBrandSolid}; transition: width .2s ease; }
+    & .crisp-fileupload-progress-fill { height: 100%; background: ${c.bgBrandSolid}; transition: width .2s ease; }
 
-    & .fileupload-remove {
+    & .crisp-fileupload-remove {
       display: inline-flex; align-items: center; justify-content: center;
       flex-shrink: 0; width: ${c.size.icon}; height: ${c.size.icon};
       padding: 0; border: none; border-radius: ${c.radius.sm};
@@ -85,15 +85,15 @@ const config = defineRecipe({
       font-family: inherit;
       outline: 2px solid transparent; outline-offset: -2px;
     }
-    & .fileupload-remove:hover { color: ${c.fgPrimary}; }
-    & .fileupload-remove:focus-visible { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-fileupload-remove:hover { color: ${c.fgPrimary}; }
+    & .crisp-fileupload-remove:focus-visible { outline-color: ${c.strokeFocusRing}; }
 
-    & .fileupload-errors { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
+    & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; margin: 0; padding: 0; list-style: none; }
     /* out of flow while empty, so the always-mounted live region costs no
        layout: display:none would take it out of the accessibility tree, which
        is the one thing it exists to be in */
-    & .fileupload-errors:empty { position: absolute; }
-    & .fileupload-error { color: ${c.bgDanger}; font-size: ${c.text.md}; line-height: 18px; }
+    & .crisp-fileupload-errors:empty { position: absolute; }
+    & .crisp-fileupload-error { color: ${c.bgDanger}; font-size: ${c.text.md}; line-height: 18px; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/formfield/formfield.js

@@ -66,6 +66,6 @@ export function FormField({ label, htmlFor, required, optional, description, err
         invalid: error != null,
         required: !!required,
     });
-    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "crisp-formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "crisp-formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "crisp-formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "crisp-formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "crisp-formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

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

@@ -6,11 +6,11 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "formfield",
     base: `display: flex; flex-direction: column; gap: ${c.space["1.5"]}; box-sizing: border-box; font-family: ${c.font.sans};
-    & .formfield-label { display: inline-flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .formfield-required { color: ${c.bgDanger}; }
-    & .formfield-optional { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); font-weight: ${c.weight.regular}; }
-    & .formfield-desc { font-size: ${c.text.sm}; line-height: 16px; color: ${c.fgMuted}; }
-    & .formfield-error { font-size: ${c.text.sm}; line-height: 16px; color: ${c.bgDanger}; }`,
+    & .crisp-formfield-label { display: inline-flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-formfield-required { color: ${c.bgDanger}; }
+    & .crisp-formfield-optional { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); font-weight: ${c.weight.regular}; }
+    & .crisp-formfield-desc { font-size: ${c.text.sm}; line-height: 16px; color: ${c.fgMuted}; }
+    & .crisp-formfield-error { font-size: ${c.text.sm}; line-height: 16px; color: ${c.bgDanger}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/input/input.js

@@ -6,6 +6,6 @@ export const Input = React.forwardRef(({ size, invalid, className, style, ...pro
     // replaced element and cannot have one. Everything the consumer passes
     // still lands on the <input> itself, so `id`, `name`, `onChange`, form
     // association and every native attribute behave exactly as before.
-    return (_jsx("span", { className: inputRecipe({ size, invalid, className }), style: style, children: _jsx("input", { ref: ref, className: "input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+    return (_jsx("span", { className: inputRecipe({ size, invalid, className }), style: style, children: _jsx("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
 });
 Input.displayName = "Input";

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

@@ -25,19 +25,19 @@ const config = defineRecipe({
     }
     &:focus-within::after { border-color: ${c.strokeFieldFocus}; }
 
-    & .input-value {
+    & .crisp-input-value {
       box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
       align-self: stretch; margin: 0; border: none; background: none; outline: none;
       font: inherit; color: ${c.fgPrimary};
     }
-    & .input-value::placeholder { color: ${c.fgMuted}; }
-    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
-    &:has(.input-value:disabled) { opacity: 1; }
+    & .crisp-input-value::placeholder { color: ${c.fgMuted}; }
+    & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.crisp-input-value:disabled) { opacity: 1; }
   `,
     variants: {
         size: {
-            medium: `height: 32px; border-radius: ${c.radius.md}; & .input-value { padding-inline: ${c.space["2.5"]}; }`,
-            large: `height: 36px; border-radius: 10px; & .input-value { padding-inline: ${c.space["3"]}; }`,
+            medium: `height: 32px; border-radius: ${c.radius.md}; & .crisp-input-value { padding-inline: ${c.space["2.5"]}; }`,
+            large: `height: 36px; border-radius: 10px; & .crisp-input-value { padding-inline: ${c.space["3"]}; }`,
         },
         invalid: {
             // critical outranks focus: a field that is wrong stays visibly wrong

package/dist/esm/components/linechart/linechart.js

@@ -43,12 +43,12 @@ export function LineChart({ data, height = 240, max, ticks = 5, color, area = tr
         `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
     return (_jsxs("div", { className: linechartRecipe({ className }), ...rest, style: {
             height,
-            "--linechart-yaxis-width": yAxisWidthValue,
-        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "linechart-body", children: [_jsx("div", { className: "linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "linechart-area", d: areaPath }), _jsx("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
-                                pts.map((p, i) => (_jsx("span", { className: "linechart-dot-html", style: {
+            "--crisp-linechart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "crisp-linechart-body", children: [_jsx("div", { className: "crisp-linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "crisp-linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "crisp-linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "crisp-linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "crisp-linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "crisp-linechart-area", d: areaPath }), _jsx("polyline", { className: "crisp-linechart-line", points: line, style: { stroke: color } })] })), dots &&
+                                pts.map((p, i) => (_jsx("span", { className: "crisp-linechart-dot-html", style: {
                                         left: `${p.x}%`,
                                         bottom: `${p.frac * 100}%`,
                                         borderColor: color,
-                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), _jsx("div", { className: "linechart-xaxis", children: data.map((d) => (_jsx("span", { className: "linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "linechart-axis-title", children: xAxisTitle }))] }));
+                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), _jsx("div", { className: "crisp-linechart-xaxis", children: data.map((d) => (_jsx("span", { className: "crisp-linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "crisp-linechart-axis-title", children: xAxisTitle }))] }));
 }
 LineChart.displayName = "LineChart";

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

@@ -6,24 +6,24 @@ import { contract as c } from "../../tokens/index.js";
 // its box (non-scaling stroke keeps the line crisp); axes are HTML.
 const config = defineRecipe({
     name: "linechart",
-    // --linechart-yaxis-width is the one source of truth for the value-axis
+    // --crisp-linechart-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 `linechartRecipe` is used bare).
-    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans}; --linechart-yaxis-width: 34px;
-    & .linechart-body { display: flex; flex: 1; min-height: 0; }
-    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
-    & .linechart-ytick { position: absolute; inset-inline-end: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${c.borderDefault}; }
-    & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
-    & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
-    & .linechart-area { fill: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); stroke: none; }
-    & .linechart-line { fill: none; stroke: ${c.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
-    & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${c.radius.full}; background: ${c.bgSurface}; border: 2px solid ${c.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
-    & .linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-inline-start: var(--linechart-yaxis-width); }
-    & .linechart-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}; }
-    & .linechart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--linechart-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-linechart-yaxis-width: 34px;
+    & .crisp-linechart-body { display: flex; flex: 1; min-height: 0; }
+    & .crisp-linechart-yaxis { position: relative; flex-shrink: 0; width: var(--crisp-linechart-yaxis-width); }
+    & .crisp-linechart-ytick { position: absolute; inset-inline-end: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${c.borderDefault}; }
+    & .crisp-linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
+    & .crisp-linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    & .crisp-linechart-area { fill: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); stroke: none; }
+    & .crisp-linechart-line { fill: none; stroke: ${c.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    & .crisp-linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${c.radius.full}; background: ${c.bgSurface}; border: 2px solid ${c.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
+    & .crisp-linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-inline-start: var(--crisp-linechart-yaxis-width); }
+    & .crisp-linechart-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-linechart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--crisp-linechart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/menu/menu.js

@@ -88,27 +88,27 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
     const ctx = React.useContext(MenuContext);
-    return (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `menu-item${danger ? " menu-item--danger" : ""}`, onClick: () => {
+    return (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, _jsx("span", { className: "menu-item-label", children: children }), shortcut && _jsx("span", { className: "menu-item-shortcut", children: shortcut })] }));
+        }, children: [icon, _jsx("span", { className: "crisp-menu-item-label", children: children }), shortcut && _jsx("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
 }
 MenuItem.displayName = "MenuItem";
 export function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
-    return (_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? (_jsx(Check, { className: "menu-item-check", size: 15, strokeWidth: 2 })) : (_jsx("span", { className: "menu-item-check--placeholder" })), _jsx("span", { className: "menu-item-label", children: children })] }));
+    return (_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "crisp-menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? (_jsx(Check, { className: "crisp-menu-item-check", size: 15, strokeWidth: 2 })) : (_jsx("span", { className: "crisp-menu-item-check--placeholder" })), _jsx("span", { className: "crisp-menu-item-label", children: children })] }));
 }
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 export function MenuSeparator() {
-    return _jsx("hr", { className: "menu-sep" });
+    return _jsx("hr", { className: "crisp-menu-sep" });
 }
 MenuSeparator.displayName = "MenuSeparator";
 export function MenuLabel({ children }) {
-    return _jsx("div", { className: "menu-label", children: children });
+    return _jsx("div", { className: "crisp-menu-label", children: children });
 }
 MenuLabel.displayName = "MenuLabel";

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

@@ -11,37 +11,37 @@ const config = defineRecipe({
     position: relative; display: inline-flex; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .menu-content {
+    & .crisp-menu-content {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .menu-content[data-align="end"] { transform-origin: top right; }
-    & .menu-content[data-up] { transform-origin: bottom left; }
-    & .menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
-    & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-menu-content[data-align="end"] { transform-origin: top right; }
+    & .crisp-menu-content[data-up] { transform-origin: bottom left; }
+    & .crisp-menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    & .crisp-menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
 
-    & .menu-item {
+    & .crisp-menu-item {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; flex-shrink: 0;
       margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md};
       font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
-    & .menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .menu-item:focus { outline: none; }
-    & .menu-item:hover:not([data-disabled]), & .menu-item:focus-visible:not([data-disabled]), & .menu-item[data-highlighted]:not([data-disabled]) { background: ${c.bgRaised}; }
-    & .menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .menu-item--danger { color: ${c.bgDanger}; }
-    & .menu-item--danger svg { color: ${c.bgDanger}; }
-    & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
-    & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
-    & .menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
-    & .menu-item-check--placeholder { width: 15px; }
+    & .crisp-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-menu-item:focus { outline: none; }
+    & .crisp-menu-item:hover:not([data-disabled]), & .crisp-menu-item:focus-visible:not([data-disabled]), & .crisp-menu-item[data-highlighted]:not([data-disabled]) { background: ${c.bgRaised}; }
+    & .crisp-menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-menu-item--danger { color: ${c.bgDanger}; }
+    & .crisp-menu-item--danger svg { color: ${c.bgDanger}; }
+    & .crisp-menu-item--danger:hover, & .crisp-menu-item--danger:focus-visible, & .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
+    & .crisp-menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    & .crisp-menu-item-check--placeholder { width: 15px; }
 
-    & .menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
-    & .menu-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
+    & .crisp-menu-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/multiselect/multiselect.js

@@ -21,7 +21,7 @@ function toneFor(t) {
     return TONES[h % TONES.length];
 }
 function Chip({ opt }) {
-    return (_jsx("span", { className: "recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
+    return (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**
  * A multi-select / tag editor — measured from a cell tag picker. The
@@ -130,19 +130,19 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -11,52 +11,52 @@ const config = defineRecipe({
     position: relative; display: inline-flex; width: 100%; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .multiselect-trigger {
+    & .crisp-multiselect-trigger {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; min-width: 0; min-height: ${c.size.menuRow};
       margin: 0; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]};
       border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
       font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; text-align: start;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
-    & .multiselect-trigger:hover { background: ${c.bgRaised}; }
-    & .multiselect-trigger[data-open], & .multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
-    & .multiselect-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; }
-    & .multiselect-placeholder { color: ${c.fgMuted}; }
-    & .multiselect-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
-    & .multiselect-trigger[data-open] .multiselect-chevron { transform: rotate(180deg); }
+    & .crisp-multiselect-trigger:hover { background: ${c.bgRaised}; }
+    & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
+    & .crisp-multiselect-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-multiselect-placeholder { color: ${c.fgMuted}; }
+    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
+    & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
 
-    & .multiselect-listbox {
+    & .crisp-multiselect-listbox {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .multiselect-listbox[data-up] { transform-origin: bottom left; }
-    & .multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .multiselect-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
-    & .multiselect-search svg { flex-shrink: 0; }
-    & .multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
-    & .multiselect-search input::placeholder { color: ${c.fgMuted}; }
-    & .multiselect-option {
+    & .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
+    & .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-multiselect-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+    & .crisp-multiselect-search svg { flex-shrink: 0; }
+    & .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
+    & .crisp-multiselect-search input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
       padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; cursor: pointer; text-align: start;
     }
-    & .multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
-    & .multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
-    & .multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
-    & .multiselect-option[aria-selected="true"] .multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
-    & .multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-multiselect-option[data-highlighted] { background: ${c.bgRaised}; }
+    & .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+    & .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: ${c.radius.sm}; box-shadow: inset 0 0 0 1.5px ${c.borderDefault}; color: transparent; }
+    & .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
+    & .crisp-multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
+    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/popover/popover.js

@@ -69,7 +69,7 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx("div", { className: "popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx("div", { className: "crisp-popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
                     if (e.key === "Escape") {
                         e.preventDefault();
                         setOpen(false);

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

@@ -7,9 +7,9 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "popover",
     base: `display: contents; font-family: ${c.font.sans};
-    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .popover-content[data-align="end"] { transform-origin: top right; }
-    & .popover-content[data-up] { transform-origin: bottom left; }`,
+    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
+    & .crisp-popover-content[data-up] { transform-origin: bottom left; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/progress/progress.js

@@ -16,8 +16,8 @@ export function Progress({ value, max = 100, segments, "aria-label": ariaLabel,
     };
     if (segments && segments > 0) {
         const filled = Math.round((pct / 100) * segments);
-        return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, "data-segmented": "", children: Array.from({ length: segments }, (_, i) => (_jsx("span", { className: "progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
+        return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, "data-segmented": "", children: Array.from({ length: segments }, (_, i) => (_jsx("span", { className: "crisp-progress-seg", "data-filled": i < filled ? "" : undefined }, i))) }));
     }
-    return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, children: _jsx("span", { className: "progress-fill", style: { width: `${pct}%` } }) }));
+    return (_jsx("div", { ...aria, className: progressRecipe({ className }), ...rest, children: _jsx("span", { className: "crisp-progress-fill", style: { width: `${pct}%` } }) }));
 }
 Progress.displayName = "Progress";

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

@@ -5,10 +5,10 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "progress",
     base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden;
-    & .progress-fill { display: block; height: 100%; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; transition: width 0.25s ease; }
+    & .crisp-progress-fill { display: block; height: 100%; border-radius: ${c.radius.full}; background: ${c.bgBrandSolid}; transition: width 0.25s ease; }
     &[data-segmented] { display: flex; gap: ${c.space["1"]}; background: transparent; overflow: visible; }
-    &[data-segmented] .progress-seg { flex: 1; height: 100%; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); transition: background 0.2s; }
-    &[data-segmented] .progress-seg[data-filled] { background: ${c.bgBrandSolid}; }`,
+    &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); transition: background 0.2s; }
+    &[data-segmented] .crisp-progress-seg[data-filled] { background: ${c.bgBrandSolid}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/quantitypicker/quantitypicker.js

@@ -23,7 +23,7 @@ function Value() {
     // rendered text the engine's own rather than a second derivation of it.
     const { max, getValueText, valueDisplayProps } = useQuantityPickerContext();
     const { children: valueText, ...displayProps } = valueDisplayProps;
-    return (_jsxs("span", { ...displayProps, className: "quantitypicker-value", children: [_jsx("span", { className: "quantitypicker-placeholder", "aria-hidden": "true", children: getValueText(String(max), max) }), _jsx("span", { className: "quantitypicker-text", children: valueText })] }));
+    return (_jsxs("span", { ...displayProps, className: "crisp-quantitypicker-value", children: [_jsx("span", { className: "crisp-quantitypicker-placeholder", "aria-hidden": "true", children: getValueText(String(max), max) }), _jsx("span", { className: "crisp-quantitypicker-text", children: valueText })] }));
 }
 function DecrementIcon({ size }) {
     const { isRemoveButton, decrementLoading } = useQuantityPickerContext();
@@ -59,6 +59,6 @@ export function QuantityPicker({ size = "medium", fill = false, className, name,
     // A `<label for>` cannot name a div, and this root is a role="group" (#247).
     const rootRef = React.useRef(null);
     useLabelAssociation(rootRef);
-    return (_jsxs(QuantityPickerRoot, { ref: rootRef, ...props, className: quantitypickerRecipe({ size, fill, className }), children: [_jsx(QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: _jsx(DecrementIcon, { size: size }) }), _jsx("span", { className: "quantitypicker-divider" }), _jsx(Value, {}), _jsx("span", { className: "quantitypicker-divider" }), _jsx(QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: _jsx(IncrementIcon, { size: size }) }), name ? _jsx(QuantityPickerHiddenInput, { name: name }) : null] }));
+    return (_jsxs(QuantityPickerRoot, { ref: rootRef, ...props, className: quantitypickerRecipe({ size, fill, className }), children: [_jsx(QuantityPickerDecrementButton, { className: "crisp-quantitypicker-button", "aria-label": decrementLabel, children: _jsx(DecrementIcon, { size: size }) }), _jsx("span", { className: "crisp-quantitypicker-divider" }), _jsx(Value, {}), _jsx("span", { className: "crisp-quantitypicker-divider" }), _jsx(QuantityPickerIncrementButton, { className: "crisp-quantitypicker-button", "aria-label": incrementLabel, children: _jsx(IncrementIcon, { size: size }) }), name ? _jsx(QuantityPickerHiddenInput, { name: name }) : null] }));
 }
 QuantityPicker.displayName = "QuantityPicker";