@crisp-ui-kit/crisp 0.31.5 → 0.32.0

package/dist/cjs/components/multiselect/multiselect.js

@@ -57,7 +57,7 @@ function toneFor(t) {
     return TONES[h % TONES.length];
 }
 function Chip({ opt }) {
-    return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
+    return ((0, jsx_runtime_1.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
@@ -166,19 +166,19 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -14,52 +14,52 @@ const config = (0, core_1.defineRecipe)({
     position: relative; display: inline-flex; width: 100%; font-family: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; width: 100%; min-width: 0; min-height: ${tokens_1.contract.size.menuRow};
       margin: 0; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["2"]};
       border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; text-align: start;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
-    & .multiselect-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .multiselect-trigger[data-open], & .multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; }
-    & .multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .multiselect-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
-    & .multiselect-trigger[data-open] .multiselect-chevron { transform: rotate(180deg); }
+    & .crisp-multiselect-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; }
+    & .crisp-multiselect-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-multiselect-chevron { flex-shrink: 0; color: ${tokens_1.contract.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: ${tokens_1.contract.space.px};
       max-height: 300px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
       box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .multiselect-search input::placeholder { color: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-multiselect-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; cursor: pointer; text-align: start;
     }
-    & .multiselect-option[data-highlighted] { background: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; color: transparent; }
-    & .multiselect-option[aria-selected="true"] .multiselect-check { background: ${tokens_1.contract.bgBrandSolid}; box-shadow: none; color: #fff; }
-    & .multiselect-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-multiselect-option[data-highlighted] { background: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; color: transparent; }
+    & .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${tokens_1.contract.bgBrandSolid}; box-shadow: none; color: #fff; }
+    & .crisp-multiselect-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 
-    & .recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
-    & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
+    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/popover/popover.js

@@ -105,7 +105,7 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
             setOpen(!open);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, popover_recipe_1.popoverRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, popover_recipe_1.popoverRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.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/cjs/components/popover/popover.recipe.js

@@ -10,9 +10,9 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "popover",
     base: `display: contents; font-family: ${tokens_1.contract.font.sans};
-    & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.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/cjs/components/progress/progress.js

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

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

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

package/dist/cjs/components/quantitypicker/quantitypicker.js

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

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

@@ -47,7 +47,7 @@ const config = (0, core_1.defineRecipe)({
 
     &[data-invalid] { box-shadow: inset 0 0 0 2px ${tokens_1.contract.bgDanger}; }
 
-    & .quantitypicker-button {
+    & .crisp-quantitypicker-button {
       display: inline-flex; flex-shrink: 0; box-sizing: border-box;
       align-items: center; justify-content: center;
       border: none; padding: 0; cursor: pointer;
@@ -55,28 +55,28 @@ const config = (0, core_1.defineRecipe)({
       transition: background-color .15s ease, outline-color .15s ease;
       outline: 2px solid transparent; outline-offset: 2px;
     }
-    & .quantitypicker-button:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
-    & .quantitypicker-button:not([data-disabled]):hover { background: ${tokens_1.contract.bgRaised}; }
-    & .quantitypicker-button[data-loading] { background: ${tokens_1.contract.bgRaised}; }
-    & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: ${tokens_1.contract.fgDisabled}; }
+    & .crisp-quantitypicker-button:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .crisp-quantitypicker-button:not([data-disabled]):hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-quantitypicker-button[data-loading] { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-quantitypicker-button[data-disabled] { cursor: not-allowed; color: ${tokens_1.contract.fgDisabled}; }
 
-    & .quantitypicker-value {
+    & .crisp-quantitypicker-value {
       display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
       align-items: center; justify-content: center;
       padding-inline: ${tokens_1.contract.space["2"]};
       font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
     }
-    & .quantitypicker-value[data-disabled] { color: ${tokens_1.contract.fgDisabled}; }
-    & .quantitypicker-placeholder {
+    & .crisp-quantitypicker-value[data-disabled] { color: ${tokens_1.contract.fgDisabled}; }
+    & .crisp-quantitypicker-placeholder {
       grid-column: 1; grid-row: 1; visibility: hidden;
       font-variant-numeric: tabular-nums;
     }
-    & .quantitypicker-text {
+    & .crisp-quantitypicker-text {
       grid-column: 1; grid-row: 1; text-align: center;
       font-variant-numeric: tabular-nums;
     }
 
-    & .quantitypicker-divider {
+    & .crisp-quantitypicker-divider {
       flex-shrink: 0; width: 1px; height: ${tokens_1.contract.space["4"]};
       background: ${tokens_1.contract.borderSubtle};
     }
@@ -85,18 +85,18 @@ const config = (0, core_1.defineRecipe)({
         size: {
             small: `
         height: 36px; border-radius: ${tokens_1.contract.radius.md};
-        & .quantitypicker-button { width: 36px; height: 36px; border-radius: ${tokens_1.contract.radius.md}; }
-        & .quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
+        & .crisp-quantitypicker-button { width: 36px; height: 36px; border-radius: ${tokens_1.contract.radius.md}; }
+        & .crisp-quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
       `,
             medium: `
         height: 40px; border-radius: ${tokens_1.contract.radius.md};
-        & .quantitypicker-button { width: 40px; height: 40px; border-radius: ${tokens_1.contract.radius.md}; }
-        & .quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
+        & .crisp-quantitypicker-button { width: 40px; height: 40px; border-radius: ${tokens_1.contract.radius.md}; }
+        & .crisp-quantitypicker-value { font-size: ${tokens_1.contract.text.xl}; line-height: 22px; }
       `,
             large: `
         height: 52px; border-radius: ${tokens_1.contract.radius.xl};
-        & .quantitypicker-button { width: 52px; height: 52px; border-radius: ${tokens_1.contract.radius.xl}; }
-        & .quantitypicker-value { font-size: 18px; line-height: 24px; }
+        & .crisp-quantitypicker-button { width: 52px; height: 52px; border-radius: ${tokens_1.contract.radius.xl}; }
+        & .crisp-quantitypicker-value { font-size: 18px; line-height: 24px; }
       `,
         },
         /** `fill` stretches to the row it sits in; seed's `layout_fill`. */

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -78,6 +78,6 @@ function Radio({ value, label, children, disabled }) {
     const checked = ctx.value === value;
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": checked, disabled: disabled, "data-value": value, "data-checked": checked ? "" : undefined, 
         // roving tabindex: the selected (or first, when none) radio is tabbable
-        tabIndex: checked ? 0 : -1, className: "radio", onClick: () => ctx.select(value), children: ctx.variant === "card" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-preview", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "radio-cardfoot", children: (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "radio-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "radio-label", children: label ?? children })] })) }));
+        tabIndex: checked ? 0 : -1, className: "crisp-radio", onClick: () => ctx.select(value), children: ctx.variant === "card" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-radio-preview", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-radio-cardfoot", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-radio-label", children: label }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-radio-dot" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-radio-label", children: label ?? children })] })) }));
 }
 Radio.displayName = "Radio";

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

@@ -13,22 +13,22 @@ const config = (0, core_1.defineRecipe)({
     display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .radio { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; }
-    & .radio:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .radio:focus-visible { outline: none; }
-    & .radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; transition: box-shadow .12s ease; }
-    & .radio:hover .radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); }
-    & .radio[data-checked] .radio-dot { box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.bgBrandSolid}; }
-    & .radio[data-checked] .radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; }
-    & .radio:focus-visible .radio-dot { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
-    & .radio-label { min-width: 0; }
+    & .crisp-radio { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; }
+    & .crisp-radio:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-radio:focus-visible { outline: none; }
+    & .crisp-radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: ${tokens_1.contract.radius.full}; box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.borderDefault}; transition: box-shadow .12s ease; }
+    & .crisp-radio:hover .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); }
+    & .crisp-radio[data-checked] .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-radio[data-checked] .crisp-radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-radio:focus-visible .crisp-radio-dot { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
+    & .crisp-radio-label { min-width: 0; }
 
     &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: ${tokens_1.contract.space["3"]}; }
-    &[data-variant="card"] .radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: ${tokens_1.contract.radius["2xl"]}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; overflow: hidden; transition: box-shadow .12s ease; }
-    &[data-variant="card"] .radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); }
-    &[data-variant="card"] .radio[data-checked] { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    &[data-variant="card"] .radio-preview { flex: 1; min-height: 0; background: ${tokens_1.contract.bgRaised}; }
-    &[data-variant="card"] .radio-cardfoot { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; }
+    &[data-variant="card"] .crisp-radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: ${tokens_1.contract.radius["2xl"]}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; overflow: hidden; transition: box-shadow .12s ease; }
+    &[data-variant="card"] .crisp-radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); }
+    &[data-variant="card"] .crisp-radio[data-checked] { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    &[data-variant="card"] .crisp-radio-preview { flex: 1; min-height: 0; background: ${tokens_1.contract.bgRaised}; }
+    &[data-variant="card"] .crisp-radio-cardfoot { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/resizablepanel/resizablepanel.js

@@ -169,8 +169,8 @@ function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeChange,
         minWidth: min,
         maxWidth: maxStyle,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, resizablepanel_recipe_1.resizablepanelRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, className: "resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: "resizablepanel-inner", children: children }), (0, jsx_runtime_1.jsx)("div", { className: handleVariant === "column"
-                            ? "resizablepanel-handle resizablepanel-handle--column"
-                            : "resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && ((0, jsx_runtime_1.jsx)("span", { className: "resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, resizablepanel_recipe_1.resizablepanelRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, className: "crisp-resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-resizablepanel-inner", children: children }), (0, jsx_runtime_1.jsx)("div", { className: handleVariant === "column"
+                            ? "crisp-resizablepanel-handle crisp-resizablepanel-handle--column"
+                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
 }
 ResizablePanel.displayName = "ResizablePanel";

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

@@ -20,46 +20,46 @@ const config = (0, core_1.defineRecipe)({
     name: "resizablepanel",
     base: `
     position: relative; display: flex; height: 100%;
-    & .resizablepanel-spacer { flex: 0 0 auto; height: 100%; transition: width 0.14s; }
-    & .resizablepanel-panel { position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: hidden; background: ${tokens_1.contract.bgSurface}; }
-    & .resizablepanel-panel[data-side="left"] { left: 0; }
-    & .resizablepanel-panel[data-side="right"] { right: 0; }
+    & .crisp-resizablepanel-spacer { flex: 0 0 auto; height: 100%; transition: width 0.14s; }
+    & .crisp-resizablepanel-panel { position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: hidden; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-resizablepanel-panel[data-side="left"] { left: 0; }
+    & .crisp-resizablepanel-panel[data-side="right"] { right: 0; }
 
     /* docked */
-    & .resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
-    & .resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; }
-    & .resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
+    & .crisp-resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid ${tokens_1.contract.borderSubtle}; }
 
     /* floating — position: fixed, 8px gutter, r10, the measured floating elevation.
        Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
-    & .resizablepanel-panel[data-floating="true"] { position: fixed; top: ${tokens_1.contract.space["2"]}; bottom: ${tokens_1.contract.space["2"]}; border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: ${tokens_1.elevation.floating}; transform: none; transition: transform 0.14s, padding 0.14s; }
-    & .resizablepanel-panel[data-floating="true"][data-side="left"] { padding: ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; @starting-style { transform: translateX(calc(-100% - ${tokens_1.contract.space["2"]})); } }
-    & .resizablepanel-panel[data-floating="true"][data-side="right"] { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} 0; @starting-style { transform: translateX(calc(100% + ${tokens_1.contract.space["2"]})); } }
+    & .crisp-resizablepanel-panel[data-floating="true"] { position: fixed; top: ${tokens_1.contract.space["2"]}; bottom: ${tokens_1.contract.space["2"]}; border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: ${tokens_1.elevation.floating}; transform: none; transition: transform 0.14s, padding 0.14s; }
+    & .crisp-resizablepanel-panel[data-floating="true"][data-side="left"] { padding: ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; @starting-style { transform: translateX(calc(-100% - ${tokens_1.contract.space["2"]})); } }
+    & .crisp-resizablepanel-panel[data-floating="true"][data-side="right"] { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]} 0; @starting-style { transform: translateX(calc(100% + ${tokens_1.contract.space["2"]})); } }
 
-    & .resizablepanel-inner { height: 100%; opacity: 1; }
-    & .resizablepanel-panel[data-floating="true"] .resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
+    & .crisp-resizablepanel-inner { height: 100%; opacity: 1; }
+    & .crisp-resizablepanel-panel[data-floating="true"] .crisp-resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
 
     /* handle — variant "panel" (default): a 10px hit target, its ::before the
        only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
-    & .resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
-    & .resizablepanel-handle[data-side="left"] { right: 0; }
-    & .resizablepanel-handle[data-side="right"] { left: 0; }
-    & .resizablepanel-handle::before { content: ""; position: absolute; top: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color 0.16s, height 0.16s; }
-    & .resizablepanel-handle[data-side="left"]::before { right: 0; }
-    & .resizablepanel-handle[data-side="right"]::before { left: 0; }
-    & .resizablepanel-handle:hover::before, & .resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
+    & .crisp-resizablepanel-handle[data-side="left"] { right: 0; }
+    & .crisp-resizablepanel-handle[data-side="right"] { left: 0; }
+    & .crisp-resizablepanel-handle::before { content: ""; position: absolute; top: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color 0.16s, height 0.16s; }
+    & .crisp-resizablepanel-handle[data-side="left"]::before { right: 0; }
+    & .crisp-resizablepanel-handle[data-side="right"]::before { left: 0; }
+    & .crisp-resizablepanel-handle:hover::before, & .crisp-resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: ${tokens_1.contract.bgBrandSolid}; }
 
     /* handle — variant "column": a wider 7px hit target straddling a 1px
        divider (table column edges), with a real 3px inner bar whose opacity
        comes in on a 100ms DELAY — distinct from the panel variant's instant
        ::before swap. */
-    /* .resizablepanel-handle.resizablepanel-handle--column (both classes) to
+    /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
        out-specificity the base [data-side] left/right rules above, which
        otherwise tie-break by source order alone and would win. */
-    & .resizablepanel-handle.resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }
-    & .resizablepanel-handle--column::before { content: none; }
-    & .resizablepanel-handle-inner { width: 3px; height: 100%; border-radius: 3px; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity 0.1s 0.1s; }
-    & .resizablepanel-handle--column:hover .resizablepanel-handle-inner, & .resizablepanel-handle--column[data-dragging="true"] .resizablepanel-handle-inner { opacity: 1; }
+    & .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }
+    & .crisp-resizablepanel-handle--column::before { content: none; }
+    & .crisp-resizablepanel-handle-inner { width: 3px; height: 100%; border-radius: 3px; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity 0.1s 0.1s; }
+    & .crisp-resizablepanel-handle--column:hover .crisp-resizablepanel-handle-inner, & .crisp-resizablepanel-handle--column[data-dragging="true"] .crisp-resizablepanel-handle-inner { opacity: 1; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/segmented/segmented.js

@@ -54,7 +54,7 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
     // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure when the value or option set changes
     React.useLayoutEffect(() => {
         const root = rootRef.current;
-        const el = root?.querySelector(".segmented-item[data-selected]");
+        const el = root?.querySelector(".crisp-segmented-item[data-selected]");
         if (!el) {
             setThumb(null);
             return;
@@ -73,15 +73,15 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
     // A `<label for>` cannot name a div, and this root is a role="radiogroup"
     // (#247).
     (0, core_1.useLabelAssociation)(rootRef);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,
                 } })), options.map((opt) => {
                 const on = opt.value === selected;
                 const iconOnly = opt.label == null && opt.icon != null;
                 return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": on, "aria-label": opt["aria-label"], disabled: opt.disabled, "data-selected": on ? "" : undefined, "data-value": opt.value, tabIndex: on ? 0 : -1, className: iconOnly
-                        ? "segmented-item segmented-item--icon"
-                        : "segmented-item", onClick: () => select(opt.value), children: [opt.icon, opt.label] }, opt.value));
+                        ? "crisp-segmented-item crisp-segmented-item--icon"
+                        : "crisp-segmented-item", onClick: () => select(opt.value), children: [opt.icon, opt.label] }, opt.value));
             })] }));
 }
 Segmented.displayName = "Segmented";

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

@@ -8,13 +8,13 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "segmented",
     base: `position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["0.5"]}; border-radius: ${tokens_1.contract.radius.lg}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); font-family: ${tokens_1.contract.font.sans};
-    & .segmented-thumb { position: absolute; top: ${tokens_1.contract.space["0.5"]}; left: 0; height: 26px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.06); pointer-events: none; z-index: 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); }
-    & .segmented-item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 26px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: color 0.15s ease; }
-    & .segmented-item svg { flex-shrink: 0; }
-    & .segmented-item:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .segmented-item[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
-    & .segmented-item[disabled] { opacity: 0.4; cursor: default; }
-    & .segmented-item--icon { width: 26px; padding: 0; }`,
+    & .crisp-segmented-thumb { position: absolute; top: ${tokens_1.contract.space["0.5"]}; left: 0; height: 26px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.06); pointer-events: none; z-index: 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); }
+    & .crisp-segmented-item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 26px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: color 0.15s ease; }
+    & .crisp-segmented-item svg { flex-shrink: 0; }
+    & .crisp-segmented-item:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-segmented-item[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-segmented-item[disabled] { opacity: 0.4; cursor: default; }
+    & .crisp-segmented-item--icon { width: 26px; padding: 0; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/cjs/components/select/select.js

@@ -159,12 +159,12 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, 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: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, 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-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));
 }
 Select.displayName = "Select";