@crisp-ui-kit/crisp 0.31.6 → 0.32.1

package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js

@@ -1,3 +1,4 @@
+import { CLASS_PREFIX } from "../../core/namespace.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
 // The measured chrome of the table toolbar: the Sort/Filter controls, the
 // menu/popover surface they open into, the sort-condition rows, and the filter
@@ -13,67 +14,67 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // block, and those depend on following `.menu` in source order. Keeping the
 // split preserves that cascade exactly, which is what lets the generated CSS
 // stay byte-for-byte identical to what shipped before the extraction.
-export const toolbarChromeHead = (p) => `    & .${p}-toolbar { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
-    & .${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
-    & .${p}-search svg { flex-shrink: 0; }
-    & .${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
-    & .${p}-search input::placeholder { color: ${c.fgMuted}; }
-    & .${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-tool:hover { background: ${c.bgRaised}; }
-    & .${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .${p}-tool--active { background: ${c.bgRaised}; }
-    & .${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); color: ${c.fgMuted}; }
-    & .${p}-tool--ghost:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
-    & .${p}-toolgroup { position: relative; display: inline-flex; }
-    & .${p}-menu { position: absolute; top: calc(100% + ${c.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgPopover}; box-shadow: ${e.floating}; display: flex; flex-direction: column; gap: ${c.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
-    & .${p}-menu { @starting-style { opacity: 0; transform: scale(0.96); } }`;
-export const toolbarChromeBody = (p) => `    & .${p}-menu-head { padding: ${c.space["1"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .${p}-sortpop { min-width: 460px; overflow: visible; padding: ${c.space["1.5"]}; gap: ${c.space["1"]}; }
-    & .${p}-sort-empty { padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .${p}-sort-row { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
-    & .${p}-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * ${c.space["1"]}); padding: 0; border: none; background: none; color: ${c.fgMuted}; cursor: grab; }
-    & .${p}-sort-grip:active { cursor: grabbing; }
-    & .${p}-sort-grip:hover { color: ${c.fgPrimary}; }
-    & .${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
-    & .${p}-sort-optlabel svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .${p}-sort-field { flex: 1; min-width: 0; }
-    & .${p}-sort-dir { width: 136px; flex-shrink: 0; }
-    & .${p}-sort-field .select-trigger, & .${p}-sort-dir .select-trigger { height: 28px; padding-right: ${c.space["1"]}; }
-    & .${p}-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .${p}-sort-remove:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
-    & .${p}-sort-addrow { display: flex; padding: ${c.space["0.5"]} 0; }
-    & .${p}-sort-add { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-sort-add:hover { background: ${c.bgRaised}; }
-    & .${p}-sort-add svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .${p}-sort-foot { display: flex; padding: ${c.space["1.5"]} ${c.space["1"]} ${c.space["0.5"]}; }
-    & .${p}-sort-learn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.lg}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-decoration: none; }
-    & .${p}-sort-learn svg { flex-shrink: 0; }
-    & .${p}-sort-learn:hover { color: ${c.fgPrimary}; }
-    & .${p}-menu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.row}; 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: left; cursor: pointer; }
-    & .${p}-menu-item:hover { background: ${c.bgRaised}; }
-    & .${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
-    & .${p}-menu-item:disabled:hover { background: none; }
-    & .${p}-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
-    & .${p}-menu-item[data-on] svg { color: ${c.bgBrandSolid}; }
-    & .${p}-menu-item .${p}-menu-check { margin-left: auto; }
-    & .${p}-menu-input { height: ${c.size.row}; margin: ${c.space["0.5"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; }
-    & .${p}-menu-sep { height: 1px; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
-    & .${p}-menu--up { top: auto; bottom: calc(100% + ${c.space["1"]}); transform-origin: bottom; }
-    & .${p}-menu--right { left: auto; right: 0; }
-    & .${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
-    & .${p}-menu--hdr { min-width: 200px; }
-    & .${p}-menu-item--danger { color: ${c.bgDanger}; }
-    & .${p}-menu-item--danger svg { color: ${c.bgDanger}; }
-    & .${p}-menu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
-    & .${p}-menu-check { margin-left: auto; color: ${c.bgBrandSolid}; }
-    & .${p}-fchip { display: inline-flex; align-items: center; height: ${c.size.row}; padding-right: ${c.space["1"]}; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; background: ${c.bgSurface}; font-size: ${c.text.md}; color: ${c.fgPrimary}; white-space: nowrap; }
-    & .${p}-fchip-main { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${c.space["1"]} 0 ${c.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; cursor: pointer; }
-    & .${p}-fchip-field { font-weight: ${c.weight.medium}; }
-    & .${p}-fchip-op { color: ${c.fgMuted}; }
-    & .${p}-fchip-val { font-weight: ${c.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
-    & .${p}-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; }
-    & .${p}-fchip-x:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); color: ${c.fgPrimary}; }
-    & .${p}-spacer { flex: 1; }
-    & .${p}-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .${p}-new { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-new:hover { background: ${c.bgBrandSolidPressed}; }`;
+export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
+    & .${CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
+    & .${CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
+    & .${CLASS_PREFIX}${p}-search input::placeholder { color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-tool:hover { background: ${c.bgRaised}; }
+    & .${CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-tool--active { background: ${c.bgRaised}; }
+    & .${CLASS_PREFIX}${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-tool--ghost:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .${CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }
+    & .${CLASS_PREFIX}${p}-menu { position: absolute; top: calc(100% + ${c.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; background: ${c.bgPopover}; box-shadow: ${e.floating}; display: flex; flex-direction: column; gap: ${c.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .${CLASS_PREFIX}${p}-menu { @starting-style { opacity: 0; transform: scale(0.96); } }`;
+export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head { padding: ${c.space["1"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-sortpop { min-width: 460px; overflow: visible; padding: ${c.space["1.5"]}; gap: ${c.space["1"]}; }
+    & .${CLASS_PREFIX}${p}-sort-empty { padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-sort-row { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .${CLASS_PREFIX}${p}-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * ${c.space["1"]}); padding: 0; border: none; background: none; color: ${c.fgMuted}; cursor: grab; }
+    & .${CLASS_PREFIX}${p}-sort-grip:active { cursor: grabbing; }
+    & .${CLASS_PREFIX}${p}-sort-grip:hover { color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
+    & .${CLASS_PREFIX}${p}-sort-optlabel svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-sort-field { flex: 1; min-width: 0; }
+    & .${CLASS_PREFIX}${p}-sort-dir { width: 136px; flex-shrink: 0; }
+    & .${CLASS_PREFIX}${p}-sort-field .crisp-select-trigger, & .${CLASS_PREFIX}${p}-sort-dir .crisp-select-trigger { height: 28px; padding-right: ${c.space["1"]}; }
+    & .${CLASS_PREFIX}${p}-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .${CLASS_PREFIX}${p}-sort-remove:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-sort-addrow { display: flex; padding: ${c.space["0.5"]} 0; }
+    & .${CLASS_PREFIX}${p}-sort-add { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]} 0 ${c.space["1.5"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-sort-add:hover { background: ${c.bgRaised}; }
+    & .${CLASS_PREFIX}${p}-sort-add svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-sort-foot { display: flex; padding: ${c.space["1.5"]} ${c.space["1"]} ${c.space["0.5"]}; }
+    & .${CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.lg}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-decoration: none; }
+    & .${CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
+    & .${CLASS_PREFIX}${p}-sort-learn:hover { color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.row}; 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: left; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-menu-item:hover { background: ${c.bgRaised}; }
+    & .${CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
+    & .${CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
+    & .${CLASS_PREFIX}${p}-menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-menu-item[data-on] svg { color: ${c.bgBrandSolid}; }
+    & .${CLASS_PREFIX}${p}-menu-item .${CLASS_PREFIX}${p}-menu-check { margin-left: auto; }
+    & .${CLASS_PREFIX}${p}-menu-input { height: ${c.size.row}; margin: ${c.space["0.5"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; }
+    & .${CLASS_PREFIX}${p}-menu-sep { height: 1px; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
+    & .${CLASS_PREFIX}${p}-menu--up { top: auto; bottom: calc(100% + ${c.space["1"]}); transform-origin: bottom; }
+    & .${CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
+    & .${CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
+    & .${CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
+    & .${CLASS_PREFIX}${p}-menu-item--danger { color: ${c.bgDanger}; }
+    & .${CLASS_PREFIX}${p}-menu-item--danger svg { color: ${c.bgDanger}; }
+    & .${CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .${CLASS_PREFIX}${p}-menu-check { margin-left: auto; color: ${c.bgBrandSolid}; }
+    & .${CLASS_PREFIX}${p}-fchip { display: inline-flex; align-items: center; height: ${c.size.row}; padding-right: ${c.space["1"]}; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; background: ${c.bgSurface}; font-size: ${c.text.md}; color: ${c.fgPrimary}; white-space: nowrap; }
+    & .${CLASS_PREFIX}${p}-fchip-main { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${c.space["1"]} 0 ${c.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-fchip-field { font-weight: ${c.weight.medium}; }
+    & .${CLASS_PREFIX}${p}-fchip-op { color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-fchip-val { font-weight: ${c.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .${CLASS_PREFIX}${p}-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-fchip-x:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-spacer { flex: 1; }
+    & .${CLASS_PREFIX}${p}-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .${CLASS_PREFIX}${p}-new { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-new:hover { background: ${c.bgBrandSolidPressed}; }`;

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -122,7 +122,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".tabletoolbar-menu, [data-menu-trigger]"))
+            if (!t.closest(".crisp-tabletoolbar-menu, [data-menu-trigger]"))
                 setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
@@ -154,7 +154,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     // with Escape because nothing in it is focused any more (#239).
     const sortListRef = React.useRef(null);
     const addSortRef = React.useRef(null);
-    const focusAfterSortRemoval = useFocusAfterRemoval(sortListRef, ".tabletoolbar-sort-remove", addSortRef);
+    const focusAfterSortRemoval = useFocusAfterRemoval(sortListRef, ".crisp-tabletoolbar-sort-remove", addSortRef);
     const removeSort = (i) => {
         focusAfterSortRemoval(i);
         putSorts(sorts.filter((_, j) => j !== i));
@@ -178,44 +178,44 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
         : sorts.length
             ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", children: [_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [_jsx("button", { type: "button", className: "tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
+                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
                                                 value: c.key,
-                                                label: c.icon ? (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
+                                                label: c.icon ? (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                 keywords: c.label,
-                                            })), "aria-label": sortFieldLabel }), _jsx(Select, { className: "tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                            })), "aria-label": sortFieldLabel }), _jsx(Select, { className: "crisp-tabletoolbar-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
                                                 {
                                                     value: "asc",
-                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
+                                                    label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), ascendingLabel] })),
                                                     keywords: ascendingLabel,
                                                 },
                                                 {
                                                     value: "desc",
-                                                    label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
+                                                    label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `Filter · ${activeFilters}`
-                                        : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                                        : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
                                     autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), columns
                                     .filter((col) => col.label
                                     .toLowerCase()
                                     .includes(filterQuery.trim().toLowerCase()))
-                                    .map((col) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
+                                    .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return (_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("span", { className: "tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
-                }), _jsx("span", { className: "tabletoolbar-spacer" }), count != null && _jsx("span", { className: "tabletoolbar-count", children: count }), children] }) }));
+                }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }

package/dist/esm/components/tabs/tabs.js

@@ -47,13 +47,13 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
         select,
         listRef,
     });
-    return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
+    return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
-                    }), indicator && (_jsx("span", { className: "tabs-indicator", style: {
+                        return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "crisp-tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
+                    }), indicator && (_jsx("span", { className: "crisp-tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,
-                        } }))] }), children && (_jsx("div", { className: "tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 
+                        } }))] }), children && (_jsx("div", { className: "crisp-tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a tabpanel is focusable per the WAI-ARIA tabs pattern
                 tabIndex: 0, children: children(active) }))] }));
 }

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

@@ -12,18 +12,18 @@ const config = defineRecipe({
     display: flex; flex-direction: column; min-height: 0; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
-    & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
-    & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
-    & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
-    & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
-    & .tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
-    & .tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
-    & .tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .tabs-tab[data-selected] .tabs-tab-badge { color: ${c.fgPrimary}; }
-    & .tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .tabs-panel { flex: 1; min-height: 0; }
-    & .tabs-panel:focus-visible { outline: none; }
+    & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; flex-shrink: 0; }
+    & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${c.space["1"]}; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
+    & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
+    & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * ${c.space["2"]}); left: 0; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel:focus-visible { outline: none; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/textarea/textarea.js

@@ -11,10 +11,10 @@ export const Textarea = React.forwardRef(({ showCount, maxLength, className, wra
     const [count, setCount] = React.useState(initial);
     const len = value !== undefined ? String(value).length : count;
     const counted = showCount && maxLength != null;
-    return (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [_jsx("span", { className: "textarea-wrap", children: _jsx("textarea", { ref: ref, className: `textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
+    return (_jsxs("div", { className: textareaRecipe({ className: wrapperClassName }), "data-counted": counted ? "" : undefined, children: [_jsx("span", { className: "crisp-textarea-wrap", children: _jsx("textarea", { ref: ref, className: `crisp-textarea-field${className ? ` ${className}` : ""}`, maxLength: maxLength, value: value, defaultValue: defaultValue, onChange: (e) => {
                         if (value === undefined)
                             setCount(e.target.value.length);
                         onChange?.(e);
-                    }, ...props }) }), counted && (_jsxs("span", { className: "textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
+                    }, ...props }) }), counted && (_jsxs("span", { className: "crisp-textarea-count", "data-over": len > (maxLength ?? 0) ? "" : undefined, "aria-hidden": "true", children: [len, " / ", maxLength] }))] }));
 });
 Textarea.displayName = "Textarea";

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

@@ -8,7 +8,7 @@ const config = defineRecipe({
     base: `
     position: relative; display: block; width: 100%; font-family: ${c.font.sans};
 
-    & .textarea-field {
+    & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
       margin: 0; padding: ${c.space["1.5"]} ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md};
       background: ${c.bgSurface}; box-shadow: ${e.field};
@@ -16,24 +16,24 @@ const config = defineRecipe({
       outline: none; transition: box-shadow .15s ease;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
-    & .textarea-field::placeholder { color: ${c.fgMuted}; }
-    & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-textarea-field::placeholder { color: ${c.fgMuted}; }
+    & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
 
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
-    & .textarea-wrap { position: relative; display: block; }
-    & .textarea-wrap::after {
+    & .crisp-textarea-wrap { position: relative; display: block; }
+    & .crisp-textarea-wrap::after {
       content: ""; position: absolute; inset: 0; border-radius: ${c.radius.md};
       border: 2px solid transparent; transition: border-color .1s ease;
       pointer-events: none;
     }
-    & .textarea-wrap:focus-within::after { border-color: ${c.strokeFieldFocus}; }
-    &[data-invalid] .textarea-wrap::after { border-color: ${c.bgDanger}; }
-    &[data-invalid] .textarea-wrap:focus-within::after { border-color: ${c.bgDanger}; }
-    &[data-counted] .textarea-field { padding-bottom: ${c.space["5"]}; }
-    & .textarea-count { position: absolute; inset-inline-end: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
-    & .textarea-count[data-over] { color: ${c.bgDanger}; }
+    & .crisp-textarea-wrap:focus-within::after { border-color: ${c.strokeFieldFocus}; }
+    &[data-invalid] .crisp-textarea-wrap::after { border-color: ${c.bgDanger}; }
+    &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: ${c.bgDanger}; }
+    &[data-counted] .crisp-textarea-field { padding-bottom: ${c.space["5"]}; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
+    & .crisp-textarea-count[data-over] { color: ${c.bgDanger}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/toast/toast.js

@@ -12,10 +12,10 @@ const ICONS = {
 };
 function ToastCard({ item, onClose, dismissLabel, }) {
     const Icon = ICONS[item.tone ?? "info"];
-    return (_jsxs("div", { className: "toast", "data-tone": item.tone ?? "info", children: [_jsx("span", { className: "toast-icon", children: _jsx(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsxs("div", { className: "toast-body", children: [_jsx("div", { className: "toast-title", children: item.title }), item.description != null && (_jsx("div", { className: "toast-desc", children: item.description })), item.action && (_jsx("button", { type: "button", className: "toast-action", onClick: () => {
+    return (_jsxs("div", { className: "crisp-toast", "data-tone": item.tone ?? "info", children: [_jsx("span", { className: "crisp-toast-icon", children: _jsx(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsxs("div", { className: "crisp-toast-body", children: [_jsx("div", { className: "crisp-toast-title", children: item.title }), item.description != null && (_jsx("div", { className: "crisp-toast-desc", children: item.description })), item.action && (_jsx("button", { type: "button", className: "crisp-toast-action", onClick: () => {
                             item.action?.onClick();
                             onClose();
-                        }, children: item.action.label }))] }), _jsx("button", { type: "button", className: "toast-close", "aria-label": dismissLabel, onClick: onClose, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
+                        }, children: item.action.label }))] }), _jsx("button", { type: "button", className: "crisp-toast-close", "aria-label": dismissLabel, onClick: onClose, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
 }
 /**
  * Wrap your app in a `ToastProvider`, then call `useToast().toast({...})` from
@@ -33,7 +33,7 @@ export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismi
     // the stack, which is the only sensible place left.
     const viewportRef = React.useRef(null);
     const cameFrom = React.useRef(null);
-    const focusAfterDismiss = useFocusAfterRemoval(viewportRef, ".toast-close", cameFrom);
+    const focusAfterDismiss = useFocusAfterRemoval(viewportRef, ".crisp-toast-close", cameFrom);
     // Tracked from the document, not from the viewport's own focus event: a
     // focusin's relatedTarget is the element LOSING focus, which browsers fill
     // in and happy-dom does not, and either way it is only right when focus
@@ -71,7 +71,7 @@ export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismi
         return () => map.forEach(clearTimeout);
     }, []);
     const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { ref: viewportRef, className: "toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => (_jsx(ToastCard, { item: t, onClose: () => {
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { ref: viewportRef, className: "crisp-toast-viewport", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: items.map((t, i) => (_jsx(ToastCard, { item: t, onClose: () => {
                             focusAfterDismiss(i);
                             dismiss(t.id);
                         }, dismissLabel: dismissLabel }, t.id))) }) })] }));

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

@@ -6,20 +6,20 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "toast",
     base: `display: contents; font-family: ${c.font.sans};
-    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
-    & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
-    & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
-    & .toast[data-tone="info"] .toast-icon { color: ${c.bgBrandSolid}; }
-    & .toast[data-tone="success"] .toast-icon { color: ${c.bgSuccess}; }
-    & .toast[data-tone="warning"] .toast-icon { color: ${c.bgWarning}; }
-    & .toast[data-tone="danger"] .toast-icon { color: ${c.bgDanger}; }
-    & .toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    & .toast-title { font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .toast-desc { font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .toast-action { align-self: flex-start; margin-top: ${c.space["1.5"]}; height: 24px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .toast-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); }
-    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
-    & .toast-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }`,
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
+    & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: ${c.bgBrandSolid}; }
+    & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: ${c.bgSuccess}; }
+    & .crisp-toast[data-tone="warning"] .crisp-toast-icon { color: ${c.bgWarning}; }
+    & .crisp-toast[data-tone="danger"] .crisp-toast-icon { color: ${c.bgDanger}; }
+    & .crisp-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .crisp-toast-title { font-size: ${c.text.md}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-toast-desc { font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-toast-action { align-self: flex-start; margin-top: ${c.space["1.5"]}; height: 24px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    & .crisp-toast-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); }
+    & .crisp-toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-toast-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/wheelpicker/wheelpicker.js

@@ -88,14 +88,14 @@ export function WheelPicker({ columns, value: valueProp, defaultValue, onValueCh
         else if (e.key === "End")
             go(col.options.length - 1);
     };
-    return (_jsxs("div", { className: wheelpickerRecipe({ size, className }), ...rest, children: [_jsx("div", { className: "wheelpicker-indicator", "aria-hidden": "true" }), _jsx("div", { className: "wheelpicker-fog", children: _jsx("div", { className: "wheelpicker-columns", children: columns.map((col) => (_jsx("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "wheelpicker-column", ref: (el) => {
+    return (_jsxs("div", { className: wheelpickerRecipe({ size, className }), ...rest, children: [_jsx("div", { className: "crisp-wheelpicker-indicator", "aria-hidden": "true" }), _jsx("div", { className: "crisp-wheelpicker-fog", children: _jsx("div", { className: "crisp-wheelpicker-columns", children: columns.map((col) => (_jsx("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "crisp-wheelpicker-column", ref: (el) => {
                             if (el)
                                 refs.current.set(col.key, el);
                             else
                                 refs.current.delete(col.key);
                         }, onScroll: () => onScroll(col), onKeyDown: (e) => onKeyDown(e, col), children: col.options.map((opt) => {
                             const selected = opt.value === value[col.key];
-                            return (_jsx("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
+                            return (_jsx("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "crisp-wheelpicker-item", onClick: () => {
                                     commit(col.key, opt.value);
                                     scrollTo(col.key, col.options.indexOf(opt), glide);
                                 }, children: opt.label }, opt.value));

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

@@ -21,7 +21,7 @@ const config = defineRecipe({
     background: ${c.bgSurface}; font-family: ${c.font.sans};
 
     /* the band the selected row sits in; behind the items, never hit-tested */
-    & .wheelpicker-indicator {
+    & .crisp-wheelpicker-indicator {
       position: absolute; z-index: 0; inset-inline: ${c.space["4"]}; top: 50%;
       transform: translateY(-50%); border-radius: ${c.radius.md};
       background: ${c.bgNeutralWeak}; pointer-events: none;
@@ -29,39 +29,39 @@ const config = defineRecipe({
 
     /* fades the rows furthest from the centre, so the column reads as a wheel
        rather than a list. 40% of the viewport, capped, top and bottom. */
-    & .wheelpicker-fog {
+    & .crisp-wheelpicker-fog {
       position: relative; z-index: 1; height: 100%; overflow: hidden;
       mask-image: linear-gradient(
         to bottom,
         transparent 0,
-        #000 var(--wheelpicker-fog),
-        #000 calc(100% - var(--wheelpicker-fog)),
+        #000 var(--crisp-wheelpicker-fog),
+        #000 calc(100% - var(--crisp-wheelpicker-fog)),
         transparent 100%
       );
     }
-    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+    & .crisp-wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
 
-    & .wheelpicker-column {
+    & .crisp-wheelpicker-column {
       box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
       overflow-x: hidden; overflow-y: auto;
       overscroll-behavior-y: contain; overscroll-behavior-x: none;
       scroll-snap-type: y mandatory; touch-action: pan-y;
       scrollbar-width: none; -ms-overflow-style: none; outline: none;
-      padding-block: var(--wheelpicker-offset);
+      padding-block: var(--crisp-wheelpicker-offset);
     }
-    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+    & .crisp-wheelpicker-column::-webkit-scrollbar { display: none; }
 
-    & .wheelpicker-item {
+    & .crisp-wheelpicker-item {
       display: flex; align-items: center; justify-content: center;
       scroll-snap-align: center; user-select: none; white-space: nowrap;
       padding-inline: ${c.space["4"]}; color: ${c.fgDisabled};
       background: none; border: none; font: inherit; cursor: pointer;
     }
-    & .wheelpicker-item[data-selected] { color: ${c.fgPrimary}; }
+    & .crisp-wheelpicker-item[data-selected] { color: ${c.fgPrimary}; }
 
     /* the ring is drawn on the SELECTED row, and only for keyboard focus:
        a pointer user has just tapped the row they meant and does not need it */
-    & .wheelpicker-column:focus-visible .wheelpicker-item[data-selected] {
+    & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] {
       outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
       border-radius: ${c.radius.md};
     }
@@ -69,16 +69,16 @@ const config = defineRecipe({
     variants: {
         size: {
             small: `
-        height: 180px; --wheelpicker-offset: 72px;
-        --wheelpicker-fog: min(40%, 108px);
-        & .wheelpicker-indicator { height: 36px; }
-        & .wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
+        height: 180px; --crisp-wheelpicker-offset: 72px;
+        --crisp-wheelpicker-fog: min(40%, 108px);
+        & .crisp-wheelpicker-indicator { height: 36px; }
+        & .crisp-wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
       `,
             medium: `
-        height: 220px; --wheelpicker-offset: 88px;
-        --wheelpicker-fog: min(40%, 132px);
-        & .wheelpicker-indicator { height: 44px; }
-        & .wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
+        height: 220px; --crisp-wheelpicker-offset: 88px;
+        --crisp-wheelpicker-fog: min(40%, 132px);
+        & .crisp-wheelpicker-indicator { height: 44px; }
+        & .crisp-wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
       `,
         },
     },

package/dist/esm/core/namespace.js

@@ -0,0 +1,14 @@
+// The single source of truth for crisp's CSS namespace (issue #276).
+//
+// Every class and custom property the stylesheet puts into a consumer's
+// GLOBAL scope goes through one of these two prefixes. Classes are generated
+// in two places that must agree byte-for-byte — `build/generate-recipes.mjs`
+// (the CSS selectors) and `core/resolve.ts` (the runtime `className` string) —
+// and custom properties in two more — `build/generate-tokens.mjs` (the `:root`
+// declarations) and `tokens/contract.ts` (the `var(--…)` references recipes
+// read them through). All four import CLASS_PREFIX/VAR_PREFIX from here;
+// nothing else hardcodes "crisp-".
+export const CLASS_PREFIX = "crisp-";
+// Applied after the leading "--" a custom property always starts with, e.g.
+// `--${VAR_PREFIX}bg-surface` -> `--crisp-bg-surface`.
+export const VAR_PREFIX = "crisp-";

package/dist/esm/core/resolve.js

@@ -1,11 +1,13 @@
 import { cx } from "./cx.js";
+import { CLASS_PREFIX } from "./namespace.js";
 const falsyToString = (v) => typeof v === "boolean" ? `${v}` : v === 0 ? "0" : v;
 export function resolveRecipe(config) {
     const { name, base, variants, defaultVariants, compoundVariants } = config;
+    const prefixedName = `${CLASS_PREFIX}${name}`;
     return (props) => {
         const classes = [];
         if (base)
-            classes.push(name);
+            classes.push(prefixedName);
         if (variants) {
             for (const variant of Object.keys(variants)) {
                 const variantProp = props?.[variant];
@@ -16,7 +18,7 @@ export function resolveRecipe(config) {
                 if (key == null)
                     continue;
                 if (variants[variant]?.[key] !== undefined) {
-                    classes.push(`${name}--${variant}_${key}`);
+                    classes.push(`${prefixedName}--${variant}_${key}`);
                 }
             }
             const withoutUndefined = props
@@ -33,7 +35,7 @@ export function resolveRecipe(config) {
                         ? val.includes(merged[k])
                         : merged[k] === val);
                 if (matches)
-                    classes.push(`${name}--compound_${i}`);
+                    classes.push(`${prefixedName}--compound_${i}`);
             });
         }
         return cx(classes, props?.class, props?.className);