@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

@@ -15,45 +15,45 @@ const config = (0, core_1.defineRecipe)({
     position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
-    & .select-trigger {
+    & .crisp-select-trigger {
       box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
       height: ${tokens_1.contract.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]} 0 ${tokens_1.contract.space["2"]};
       border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer;
       transition: background-color .12s ease, box-shadow .12s ease;
     }
-    & .select-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .select-trigger[data-open], & .select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.bgSurface}; }
-    & .select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
-    & .select-placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .select-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
-    & .select-trigger[data-open] .select-chevron { transform: rotate(180deg); }
+    & .crisp-select-trigger:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+    & .crisp-select-placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-select-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; transition: transform .15s ease; }
+    & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
 
-    & .select-listbox {
+    & .crisp-select-listbox {
       position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
       max-height: 280px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
       box-shadow: ${tokens_1.elevation.floating};
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
-    & .select-listbox[data-up] { transform-origin: bottom; }
-    & .select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .select-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
-    & .select-search svg { flex-shrink: 0; }
-    & .select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .select-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .select-option {
+    & .crisp-select-listbox[data-up] { transform-origin: bottom; }
+    & .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-select-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["1"]}) calc(-1 * ${tokens_1.contract.space["1"]}) ${tokens_1.contract.space["1"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-select-search svg { flex-shrink: 0; }
+    & .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-select-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-select-option {
       box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0;
       padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; background: none; border-radius: ${tokens_1.contract.radius.md};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
     }
-    & .select-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }
-    & .select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    & .select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
-    & .select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    & .select-option-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-select-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; }
+    & .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-select-option-check { flex-shrink: 0; color: ${tokens_1.contract.bgBrandSolid}; }
   `,
     variants: {
         // ghost: borderless at rest (transparent), reveals a subtle fill on hover —
@@ -61,9 +61,9 @@ const config = (0, core_1.defineRecipe)({
         variant: {
             default: "",
             ghost: `
-        & .select-trigger { background: transparent; box-shadow: none; }
-        & .select-trigger:hover { background: ${tokens_1.contract.bgRaised}; box-shadow: none; }
-        & .select-trigger[data-open], & .select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+        & .crisp-select-trigger { background: transparent; box-shadow: none; }
+        & .crisp-select-trigger:hover { background: ${tokens_1.contract.bgRaised}; box-shadow: none; }
+        & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
       `,
         },
         // full (default): fills its container, as before. auto: sizes to content.

package/dist/cjs/components/slider/slider.js

@@ -61,7 +61,7 @@ function Thumbs({ ariaLabel, labelledBy, thumbLabel, idBase, }) {
             const suffixId = `${idBase}-thumb-${i}`;
             return ((0, jsx_runtime_1.jsxs)(React.Fragment
             // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
-            , { children: [suffix && labelledBy && !ariaLabel && ((0, jsx_runtime_1.jsx)("span", { id: suffixId, className: "slider-thumblabel", children: suffix })), (0, jsx_runtime_1.jsx)(react_slider_1.SliderThumb, { thumbIndex: i, className: "slider-thumb", "aria-label": ariaLabel
+            , { children: [suffix && labelledBy && !ariaLabel && ((0, jsx_runtime_1.jsx)("span", { id: suffixId, className: "crisp-slider-thumblabel", children: suffix })), (0, jsx_runtime_1.jsx)(react_slider_1.SliderThumb, { thumbIndex: i, className: "crisp-slider-thumb", "aria-label": ariaLabel
                             ? suffix
                                 ? `${ariaLabel} ${suffix}`
                                 : ariaLabel
@@ -101,5 +101,5 @@ function Slider({ className, thumbLabel = defaultThumbLabel, ...props }) {
             label.id = `${el.id}-label`;
         setFoundLabelId(label.id);
     }, [ariaLabel, labelledByProp]);
-    return ((0, jsx_runtime_1.jsx)(react_slider_1.SliderRoot, { ref: rootRef, ...props, className: (0, slider_recipe_1.sliderRecipe)({ className }), children: (0, jsx_runtime_1.jsxs)("span", { className: "slider-control", children: [(0, jsx_runtime_1.jsx)("span", { className: "slider-track", children: (0, jsx_runtime_1.jsx)(react_slider_1.SliderRange, { className: "slider-range" }) }), (0, jsx_runtime_1.jsx)(Thumbs, { ariaLabel: ariaLabel, labelledBy: labelledByProp ?? foundLabelId, thumbLabel: thumbLabel, idBase: idBase })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_slider_1.SliderRoot, { ref: rootRef, ...props, className: (0, slider_recipe_1.sliderRecipe)({ className }), children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-slider-control", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-slider-track", children: (0, jsx_runtime_1.jsx)(react_slider_1.SliderRange, { className: "crisp-slider-range" }) }), (0, jsx_runtime_1.jsx)(Thumbs, { ariaLabel: ariaLabel, labelledBy: labelledByProp ?? foundLabelId, thumbLabel: thumbLabel, idBase: idBase })] }) }));
 }

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

@@ -29,44 +29,44 @@ const config = (0, core_1.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: ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgNeutralWeak};
       overflow: hidden;
     }
 
-    & .slider-range { position: absolute; height: 100%; background: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.space["5"]}; height: ${tokens_1.contract.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: ${tokens_1.contract.radius.full}; background: #fff; box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.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: ${tokens_1.contract.strokeFocusRing}; }
 
     &[data-disabled] { cursor: not-allowed; }
-    &[data-disabled] .slider-range { background: ${tokens_1.contract.fgDisabled}; }
-    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+    &[data-disabled] .crisp-slider-range { background: ${tokens_1.contract.fgDisabled}; }
+    &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/stagebar/stagebar.js

@@ -16,7 +16,7 @@ function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, stagebar_recipe_1.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 ((0, jsx_runtime_1.jsx)("span", { className: "stagebar-seg", style: {
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-stagebar-seg", style: {
                     background: on
                         ? color
                         : `color-mix(in srgb, ${color} 18%, transparent)`,

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

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

package/dist/cjs/components/statcard/statcard.js

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

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

@@ -10,15 +10,15 @@ const config = (0, core_1.defineRecipe)({
     name: "statcard",
     base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .statcard-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .statcard-label svg { color: ${tokens_1.contract.fgMuted}; }
-    & .statcard-value { font-size: 28px; line-height: 32px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; }
-    & .statcard-foot { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-    & .statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .statcard-delta svg { flex-shrink: 0; }
-    & .statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .statcard-delta[data-trend="down"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }`,
+    & .crisp-statcard-label { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-statcard-label svg { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-statcard-foot { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-statcard-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-statcard-delta svg { flex-shrink: 0; }
+    & .crisp-statcard-delta[data-trend="up"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-statcard-delta[data-trend="down"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.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/cjs/components/switch/switch.js

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

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

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

package/dist/cjs/components/table/table.js

@@ -48,7 +48,7 @@ exports.Table = React.forwardRef(({ interactive, surface, className, wrapperClas
         interactive,
         surface,
         className: wrapperClassName,
-    }), children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
 exports.Table.displayName = "Table";
 exports.TableHeader = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, ...props }));
 exports.TableHeader.displayName = "TableHeader";

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

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

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toolbarChromeBody = exports.toolbarChromeHead = void 0;
+const namespace_1 = require("../../core/namespace");
 const tokens_1 = require("../../tokens");
 // 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
@@ -16,69 +17,69 @@ const tokens_1 = require("../../tokens");
 // 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.
-const toolbarChromeHead = (p) => `    & .${p}-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
-    & .${p}-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-search svg { flex-shrink: 0; }
-    & .${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; width: 180px; }
-    & .${p}-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-tool:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .${p}-tool svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-tool--active { background: ${tokens_1.contract.bgRaised}; }
-    & .${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-tool--ghost:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
-    & .${p}-toolgroup { position: relative; display: inline-flex; }
-    & .${p}-menu { position: absolute; top: calc(100% + ${tokens_1.contract.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; display: flex; flex-direction: column; gap: ${tokens_1.contract.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); } }`;
+const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; width: 180px; }
+    & .${namespace_1.CLASS_PREFIX}${p}-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--active { background: ${tokens_1.contract.bgRaised}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--ghost { box-shadow: none; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-tool--ghost:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    & .${namespace_1.CLASS_PREFIX}${p}-toolgroup { position: relative; display: inline-flex; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu { position: absolute; top: calc(100% + ${tokens_1.contract.space["1"]}); left: 0; z-index: 30; min-width: 232px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu { @starting-style { opacity: 0; transform: scale(0.96); } }`;
 exports.toolbarChromeHead = toolbarChromeHead;
-const toolbarChromeBody = (p) => `    & .${p}-menu-head { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-sortpop { min-width: 460px; overflow: visible; padding: ${tokens_1.contract.space["1.5"]}; gap: ${tokens_1.contract.space["1"]}; }
-    & .${p}-sort-empty { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-sort-row { display: flex; align-items: center; gap: ${tokens_1.contract.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 * ${tokens_1.contract.space["1"]}); padding: 0; border: none; background: none; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
-    & .${p}-sort-grip:active { cursor: grabbing; }
-    & .${p}-sort-grip:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
-    & .${p}-sort-optlabel svg { flex-shrink: 0; color: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .${p}-sort-remove:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .${p}-sort-addrow { display: flex; padding: ${tokens_1.contract.space["0.5"]} 0; }
-    & .${p}-sort-add { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-sort-add:hover { background: ${tokens_1.contract.bgRaised}; }
-    & .${p}-sort-add svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-sort-foot { display: flex; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["0.5"]}; }
-    & .${p}-sort-learn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.lg}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); text-decoration: none; }
-    & .${p}-sort-learn svg { flex-shrink: 0; }
-    & .${p}-sort-learn:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
-    & .${p}-menu-item:hover { background: ${tokens_1.contract.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: ${tokens_1.contract.fgMuted}; }
-    & .${p}-menu-item[data-on] svg { color: ${tokens_1.contract.bgBrandSolid}; }
-    & .${p}-menu-item .${p}-menu-check { margin-left: auto; }
-    & .${p}-menu-input { height: ${tokens_1.contract.size.row}; margin: ${tokens_1.contract.space["0.5"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .${p}-menu-sep { height: 1px; background: ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["0.5"]} 0; }
-    & .${p}-menu--up { top: auto; bottom: calc(100% + ${tokens_1.contract.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: ${tokens_1.contract.bgDanger}; }
-    & .${p}-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
-    & .${p}-menu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
-    & .${p}-menu-check { margin-left: auto; color: ${tokens_1.contract.bgBrandSolid}; }
-    & .${p}-fchip { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.row}; padding-right: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; }
-    & .${p}-fchip-main { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; }
-    & .${p}-fchip-field { font-weight: ${tokens_1.contract.weight.medium}; }
-    & .${p}-fchip-op { color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-fchip-val { font-weight: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
-    & .${p}-fchip-x:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .${p}-spacer { flex: 1; }
-    & .${p}-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .${p}-new { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
-    & .${p}-new:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; }`;
+const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-head { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sortpop { min-width: 460px; overflow: visible; padding: ${tokens_1.contract.space["1.5"]}; gap: ${tokens_1.contract.space["1"]}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-empty { padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+    & .${namespace_1.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 * ${tokens_1.contract.space["1"]}); padding: 0; border: none; background: none; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-grip:active { cursor: grabbing; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-grip:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-optlabel { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-optlabel svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-field { flex: 1; min-width: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-dir { width: 136px; flex-shrink: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-field .crisp-select-trigger, & .${namespace_1.CLASS_PREFIX}${p}-sort-dir .crisp-select-trigger { height: 28px; padding-right: ${tokens_1.contract.space["1"]}; }
+    & .${namespace_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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-remove:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-addrow { display: flex; padding: ${tokens_1.contract.space["0.5"]} 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-add { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["1.5"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-add:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-add svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-foot { display: flex; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["0.5"]}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.lg}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); text-decoration: none; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-sort-learn:hover { color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item[data-on] svg { color: ${tokens_1.contract.bgBrandSolid}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item .${namespace_1.CLASS_PREFIX}${p}-menu-check { margin-left: auto; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-input { height: ${tokens_1.contract.size.row}; margin: ${tokens_1.contract.space["0.5"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-sep { height: 1px; background: ${tokens_1.contract.borderSubtle}; margin: ${tokens_1.contract.space["0.5"]} 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--up { top: auto; bottom: calc(100% + ${tokens_1.contract.space["1"]}); transform-origin: bottom; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-check { margin-left: auto; color: ${tokens_1.contract.bgBrandSolid}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.row}; padding-right: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; background: ${tokens_1.contract.bgSurface}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; white-space: nowrap; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-main { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-field { font-weight: ${tokens_1.contract.weight.medium}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-op { color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-val { font-weight: ${tokens_1.contract.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-fchip-x:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 10%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-spacer { flex: 1; }
+    & .${namespace_1.CLASS_PREFIX}${p}-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .${namespace_1.CLASS_PREFIX}${p}-new { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-new:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; }`;
 exports.toolbarChromeBody = toolbarChromeBody;

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

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

package/dist/cjs/components/tabs/tabs.js

@@ -83,13 +83,13 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, cla
         select,
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return ((0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
-                    }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-indicator", style: {
+                        return ((0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
+                    }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,
-                        } }))] }), children && ((0, jsx_runtime_1.jsx)("div", { className: "tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 
+                        } }))] }), children && ((0, jsx_runtime_1.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) }))] }));
 }