@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

@@ -26,44 +26,44 @@ const config = defineRecipe({
 
     /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
        thumb's name — read, never drawn */
-    & .slider-thumblabel {
+    & .crisp-slider-thumblabel {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
-    & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
+    & .crisp-slider-control { position: relative; height: 26px; display: flex; align-items: center; }
 
-    & .slider-track {
+    & .crisp-slider-track {
       position: relative; flex-grow: 1; height: ${c.space["1"]};
       border-radius: ${c.radius.full}; background: ${c.bgNeutralWeak};
       overflow: hidden;
     }
 
-    & .slider-range { position: absolute; height: 100%; background: ${c.bgBrandSolid}; }
-    & .slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
-    & .slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
+    & .crisp-slider-range { position: absolute; height: 100%; background: ${c.bgBrandSolid}; }
+    & .crisp-slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
+    & .crisp-slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
 
-    & .slider-thumb {
+    & .crisp-slider-thumb {
       position: absolute; top: 50%;
       width: ${c.space["5"]}; height: ${c.space["5"]};
       transform: translate(-50%, -50%);
       border: none; background: none; padding: 0;
     }
-    & .slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
-    & .slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
-    & .slider-thumb::after {
+    & .crisp-slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .crisp-slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .crisp-slider-thumb::after {
       content: ""; position: absolute; inset: 0;
       border-radius: ${c.radius.full}; background: #fff; box-shadow: ${e.field};
       outline: 2px solid transparent; outline-offset: 2px;
       transition: transform .2s ease, outline-color .2s ease;
       cursor: grab;
     }
-    & .slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
-    & .slider-thumb:focus { outline: none; }
-    & .slider-thumb:focus-visible::after { outline-color: ${c.strokeFocusRing}; }
+    & .crisp-slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
+    & .crisp-slider-thumb:focus { outline: none; }
+    & .crisp-slider-thumb:focus-visible::after { outline-color: ${c.strokeFocusRing}; }
 
     &[data-disabled] { cursor: not-allowed; }
-    &[data-disabled] .slider-range { background: ${c.fgDisabled}; }
-    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+    &[data-disabled] .crisp-slider-range { background: ${c.fgDisabled}; }
+    &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/stagebar/stagebar.js

@@ -13,7 +13,7 @@ export function StageBar({ stages, current, "aria-label": ariaLabel, className,
     return (_jsx("div", { className: stagebarRecipe({ className }), ...rest, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": stages.length, "aria-valuenow": currentIndex + 1, "aria-valuetext": currentStage?.label, "aria-label": ariaLabel, children: stages.map((stage, i) => {
             const color = stage.color ?? DEFAULT;
             const on = i === currentIndex;
-            return (_jsx("span", { className: "stagebar-seg", style: {
+            return (_jsx("span", { className: "crisp-stagebar-seg", style: {
                     background: on
                         ? color
                         : `color-mix(in srgb, ${color} 18%, transparent)`,

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

@@ -5,7 +5,7 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "stagebar",
     base: `display: flex; align-items: center; gap: ${c.space["0.5"]}; width: 100%; height: 6px; font-family: ${c.font.sans};
-    & .stagebar-seg { flex: 1; height: 100%; border-radius: ${c.radius.full}; transition: background 0.2s ease; }`,
+    & .crisp-stagebar-seg { flex: 1; height: 100%; border-radius: ${c.radius.full}; transition: background 0.2s ease; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/statcard/statcard.js

@@ -7,6 +7,6 @@ import { statcardRecipe } from "./statcard.recipe.js";
  */
 export function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {
     const trend = delta == null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
-    return (_jsxs("div", { className: statcardRecipe({ card, className }), ...rest, children: [_jsxs("span", { className: "statcard-label", children: [icon, label] }), _jsx("span", { className: "statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "statcard-foot", children: [trend != null && (_jsxs("span", { className: "statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
+    return (_jsxs("div", { className: statcardRecipe({ card, className }), ...rest, children: [_jsxs("span", { className: "crisp-statcard-label", children: [icon, label] }), _jsx("span", { className: "crisp-statcard-value", children: value }), (trend != null || caption != null) && (_jsxs("span", { className: "crisp-statcard-foot", children: [trend != null && (_jsxs("span", { className: "crisp-statcard-delta", "data-trend": trend, children: [trend === "up" && _jsx(ArrowUp, { size: 12, strokeWidth: 2.5 }), trend === "down" && _jsx(ArrowDown, { size: 12, strokeWidth: 2.5 }), Math.abs(delta), deltaSuffix] })), caption] }))] }));
 }
 StatCard.displayName = "StatCard";

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

@@ -7,15 +7,15 @@ const config = defineRecipe({
     name: "statcard",
     base: `display: flex; flex-direction: column; gap: ${c.space["1.5"]}; box-sizing: border-box; font-family: ${c.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .statcard-label { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
-    & .statcard-label svg { color: ${c.fgMuted}; }
-    & .statcard-value { font-size: 28px; line-height: 32px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; }
-    & .statcard-foot { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; }
-    & .statcard-delta svg { flex-shrink: 0; }
-    & .statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 80%, ${c.fgPrimary}); }
-    & .statcard-delta[data-trend="down"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgMuted}; }`,
+    & .crisp-statcard-label { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-statcard-label svg { color: ${c.fgMuted}; }
+    & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; }
+    & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; }
+    & .crisp-statcard-delta svg { flex-shrink: 0; }
+    & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 80%, ${c.fgPrimary}); }
+    & .crisp-statcard-delta[data-trend="down"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
+    & .crisp-statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgMuted}; }`,
     variants: {
         // Opt-in chrome for consumers who want the tile self-contained instead of
         // hand-wrapping it in <Card><CardBody>. Not measured as part of the

package/dist/esm/components/switch/switch.js

@@ -27,6 +27,6 @@ export const Switch = React.forwardRef(({ checked, defaultChecked = false, onChe
                     if (checked === undefined)
                         setInternal((v) => !v);
                     onCheckedChange?.(!on);
-                }, ...props, children: _jsx("span", { className: "switch-thumb" }) }), name && (on || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, type: "checkbox", name: name, value: value, checked: on, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }));
+                }, ...props, children: _jsx("span", { className: "crisp-switch-thumb" }) }), name && (on || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, type: "checkbox", name: name, value: value, checked: on, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }));
 });
 Switch.displayName = "Switch";

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

@@ -9,9 +9,9 @@ const config = defineRecipe({
     display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
     border: none; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 9%, transparent);
     cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
-    & .switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: ${c.radius.full}; background: #fff; transition: transform .2s ease; }
+    & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: ${c.radius.full}; background: #fff; transition: transform .2s ease; }
     &[data-checked] { background: ${c.bgBrandSolid}; }
-    &[data-checked] .switch-thumb { transform: translateX(8px); }
+    &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
     &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }
     &:disabled { opacity: 0.5; cursor: not-allowed; }
   `,

package/dist/esm/components/table/table.js

@@ -12,7 +12,7 @@ export const Table = React.forwardRef(({ interactive, surface, className, wrappe
         interactive,
         surface,
         className: wrapperClassName,
-    }), children: _jsx("div", { ...scrollProps, className: `table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
 Table.displayName = "Table";
 export const TableHeader = React.forwardRef((props, ref) => _jsx("thead", { ref: ref, ...props }));
 TableHeader.displayName = "TableHeader";

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

@@ -8,7 +8,7 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "table",
     base: `display: block; box-sizing: border-box; background: ${c.bgSurface};
-    & .table-scroll { overflow-x: auto; }
+    & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
     & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }

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))) }) })] }));