@crisp-ui-kit/crisp 0.57.1 → 0.57.2

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

@@ -16,10 +16,14 @@ const tokens_1 = require("../../tokens");
 // styling (shared with RecordsTable/DataTable elsewhere), the checkbox-style
 // selected indicator, and the toggle-without-closing interaction.
 //
-// The search row's geometry (36px height, 6px gap, no divider) is an
-// Attio measurement (#481) `build/spec-check.mjs` guards directly -- it is
-// NOT part of the seed-parity change and must not move. Only its text/icon
-// colours follow the rest of this file onto the shared tokens.
+// The search row now follows seed too (owner decision, 2026-09-26: Select
+// AND MultiSelect both follow seed-design, superseding #481's old Attio
+// lock on this row's geometry -- crisp/#904's MultiSelect follow-up). It
+// reads the exact same composed @seed-design/rootage `text-input.yaml`
+// (variant=outline,size=medium) values #913 resolved for Select's own
+// search row -- see that recipe's matching comment for the full citation.
+// `build/spec-check.mjs`'s guard was rewritten to assert these seed values
+// instead of the old 36px Attio measurement.
 //
 // The listbox portals to `document.body` (#339), so its rules live in
 // `globalCss`, not nested under `&` -- see Select's own recipe for the full
@@ -64,13 +68,19 @@ const config = (0, core_1.defineRecipe)({
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    /* LOCKED geometry (#481, guarded by build/spec-check.mjs): height 36px,
-       gap space["1.5"] (6px), no border-bottom -- an Attio measurement, not
-       part of this seed-parity pass. Only colours below follow Select. */
-    .crisp-multiselect-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 36px; flex-shrink: 0; margin: calc(-1 * ${tokens_1.contract.space["2"]}) calc(-1 * ${tokens_1.contract.space["2"]}) ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgNeutralMuted}; }
+    /* Seed geometry (build/spec-check.mjs guards these four properties
+       directly), superseding #481's old Attio lock -- see this file's
+       header comment and Select's matching .crisp-select-search comment
+       for the full citation. An ordinary flex child of the listbox, so its
+       own 8px gap provides the inset/seam on every side, same as Select. */
+    .crisp-multiselect-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.selectTriggerMd}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3.5"]}; border: 1px solid ${tokens_1.contract.strokeSelectTrigger}; border-radius: ${tokens_1.contract.radius.md}; color: ${tokens_1.contract.fgNeutralMuted}; }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgSelectNeutral}; }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 19px; color: ${tokens_1.contract.fgSelectNeutral}; }
     .crisp-multiselect-search input::placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
+    /* Same header/body seam as Select's own .crisp-select-divider -- see
+       that recipe's comment for the seed source (select.yaml's divider
+       slot, stroke.neutral-muted). */
+    .crisp-multiselect-divider { flex-shrink: 0; height: 1px; margin-inline: ${tokens_1.contract.space["4"]}; background: ${tokens_1.contract.strokeSelectDivider}; }
     /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
     .crisp-multiselect-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]} 0; font-size: ${tokens_1.contract.text.md}; line-height: 18px; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgNeutralSubtle}; }
     .crisp-multiselect-option {
@@ -106,6 +116,20 @@ const config = (0, core_1.defineRecipe)({
         // default: `c.size.menuRow` (32px) and the original, pre-#882
         // Attio-measured asymmetric padding for a chip-wrapping trigger.
         // `medium`/`large` (seed's own 40/52px) stay, opt-in.
+        //
+        // crisp/#904 (MultiSelect follow-up, briefly moved then reverted, same
+        // ruling as Select's own): `small`'s `gap` moved from `space["1"]`
+        // (4px) to `space["2"]` (8px), matching `medium`/`large`'s seed gap --
+        // team-lead's review ruling on Select's matching change reversed it:
+        // padding AND gap are SPACING, and the owner's direction is "sizes/
+        // spacing from Attio, look from seed", not seed's literal gap number.
+        // Back to `space["1"]` (4px), the original pre-#882 Attio-measured
+        // value. `padding` was never touched either way: the pre-#882,
+        // Attio-measured asymmetric padding a chip-wrapping trigger needs
+        // (chips sit close to the start edge, the chevron gets more room at
+        // the end) -- seed has no multi-value combobox of its own to source a
+        // replacement number from (see this file's header comment) even if
+        // the ruling had gone the other way.
         size: {
             small: `
         & .crisp-multiselect-trigger { min-height: ${tokens_1.contract.size.menuRow}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["0.5"]} ${tokens_1.contract.space["2"]}; }

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

@@ -221,7 +221,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);
-                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                                    }, onKeyDown: onNavKeys })] })), searchable && (0, jsx_runtime_1.jsx)("div", { className: "crisp-select-divider" }), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
                             // #343: a header renders once per run of same-`group`
                             // options, so consecutive rows sharing a group render one

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

@@ -29,11 +29,11 @@ const tokens_1 = require("../../tokens");
 //   pattern with no precedent anywhere else in the repo, for one component.
 //   The enter animation (scale 0.95→1, opacity 0→1, seed's own curve) IS
 //   reproduced below.
-// - A visible `divider` slot: `select.yaml` defines one, but nothing in
-//   crisp or GRC groups options with an explicit separator today, and
-//   AUTHORING's rule against building what nothing consumes applies to CSS
-//   too. The resolved value is in `~/grc-parity/seed-select-spec.md` for
-//   whoever adds it.
+// - A general-purpose `divider` slot between arbitrary option groups:
+//   nothing in crisp or GRC groups options with an explicit separator
+//   today, and AUTHORING's rule against building what nothing consumes
+//   applies to CSS too. (`select.yaml`'s resolved value IS used below, just
+//   for one specific seam — see `.crisp-select-divider`'s own comment.)
 const config = (0, core_1.defineRecipe)({
     name: "select",
     base: `
@@ -102,6 +102,20 @@ const config = (0, core_1.defineRecipe)({
     .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}; line-height: 19px; color: ${tokens_1.contract.fgSelectNeutral}; }
     .crisp-select-search input::placeholder { color: ${tokens_1.contract.fgSelectPlaceholder}; }
+    /* select.yaml's own divider slot (marginX x4, height 1px, colour
+       stroke.neutral-muted -- described upstream as "the line marking a
+       boundary between semantic units: between sections, between content
+       and an action area, between a header and a body" -- exactly the
+       search-field/option-list boundary crisp#904's review flagged as
+       reading too tight). Not the general-purpose separator #867 declined
+       to build (nothing groups options with one) -- scoped to this one
+       specific header/body seam, which now exists because searchable
+       does. Sits as an ordinary flex child, so the listbox's own 8px gap
+       still applies on both sides of it -- total visual seam is
+       gap+1px+gap (17px), deliberately more than the 8px between two
+       plain option rows, so it reads as a section break, not a wider list
+       gap. */
+    .crisp-select-divider { flex-shrink: 0; height: 1px; margin-inline: ${tokens_1.contract.space["4"]}; background: ${tokens_1.contract.strokeSelectDivider}; }
     .crisp-select-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgNeutralSubtle}; }
     /* select.yaml's groupLabel -- font-size/line-height/weight are the same
        across sizes, only paddingY differs (medium 8px, large 10px). */
@@ -136,13 +150,25 @@ const config = (0, core_1.defineRecipe)({
         },
         // Owner's follow-up after #867/#879 (crisp/#889): the LOOK stays seed's
         // (border, listbox, radius, shadow, items, states, all unchanged below),
-        // but the SIZE is Attio's again -- a 40px trigger next to a 32px `Input`
-        // in the same form visibly mismatched (measured live in GRC's own "New
-        // employee" dialog). `small` is the new default: Attio's original
-        // 32px `c.size.menuRow`, `Input`'s own radius/padding/line-height so the
-        // two line up exactly, not just approximately. `medium`/`large` (seed's
-        // own 40/52px) stay, opt-in. Item rows are IDENTICAL across all three --
-        // only the trigger differs; only it was ever the mismatch.
+        // but the HEIGHT is Attio's again -- a 40px trigger next to a 32px
+        // `Input` in the same form visibly mismatched (measured live in GRC's
+        // own "New employee" dialog). `small` is the new default: Attio's
+        // original 32px `c.size.menuRow`. `medium`/`large` (seed's own 40/52px)
+        // stay, opt-in. Item rows are IDENTICAL across all three -- only the
+        // trigger differs; only it was ever the mismatch.
+        //
+        // crisp/#904 (follow-up, then reverted): `small`'s gap/padding-inline
+        // briefly moved to seed's literal `select-trigger.yaml` `size=medium`
+        // values (8px/14px), on the theory that even the 32px trigger should
+        // read seed's numbers verbatim. Team-lead ruling on that PR's review:
+        // padding and gap are SPACING, and the owner's actual direction is
+        // "sizes/spacing from Attio, look from seed" -- Select and Input sit
+        // side by side in every form, so spacing follows Input's measured
+        // values here, same as `medium`/`large` below follow seed's. Reverted
+        // to `space["1.5"]`/`space["2.5"]` (6px/10px, `Input`'s own gap/padding
+        // at this row height) -- everything else `small` already got from seed
+        // (fill/stroke/border/radius/chevron/colours/states, see this file's
+        // other comments) is unaffected and stays seed's.
         size: {
             small: `
         & .crisp-select-trigger { height: ${tokens_1.contract.size.menuRow}; border-radius: ${tokens_1.contract.radius.md}; gap: ${tokens_1.contract.space["1.5"]}; padding-inline: ${tokens_1.contract.space["2.5"]}; }

package/dist/cjs/components/snackbar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snackbarRecipe = exports.useSnackbar = exports.SnackbarProvider = void 0;
+var snackbar_1 = require("./snackbar");
+Object.defineProperty(exports, "SnackbarProvider", { enumerable: true, get: function () { return snackbar_1.SnackbarProvider; } });
+Object.defineProperty(exports, "useSnackbar", { enumerable: true, get: function () { return snackbar_1.useSnackbar; } });
+var snackbar_recipe_1 = require("./snackbar.recipe");
+Object.defineProperty(exports, "snackbarRecipe", { enumerable: true, get: function () { return snackbar_recipe_1.snackbarRecipe; } });

package/dist/cjs/components/snackbar/snackbar.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarProvider = SnackbarProvider;
+exports.useSnackbar = useSnackbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const snackbar_recipe_1 = require("./snackbar.recipe");
+const SnackbarContext = React.createContext(null);
+const ICONS = {
+    positive: lucide_react_1.CircleCheck,
+    critical: lucide_react_1.CircleAlert,
+};
+function SnackbarPill({ item, onClose, }) {
+    const Icon = ICONS[item.variant ?? "default"];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-snackbar", "data-variant": item.variant ?? "default", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-snackbar-content", children: [Icon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-snackbar-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, strokeWidth: 1.75, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-snackbar-message", children: item.message })] }), item.action && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-snackbar-action", onClick: () => {
+                    item.action?.onClick();
+                    onClose();
+                }, children: item.action.label }))] }));
+}
+/**
+ * Wrap your app in a `SnackbarProvider`, then call `useSnackbar().show({...})`
+ * from anywhere to queue a bottom-anchored snackbar. Only one shows at a time
+ * (seed-design's mobile pattern, crisp#911) -- a second call queues behind the
+ * first and shows once it dismisses. Auto-dismisses after `duration` (default
+ * 4s; 0 keeps it until `dismiss()` or its action fires -- there is no close
+ * button, matching seed's own anatomy, which has none).
+ */
+function SnackbarProvider({ children, duration = 4000, regionLabel: regionLabelProp, }) {
+    const regionLabel = (0, core_1.useCrispMessage)(regionLabelProp, "Notifications");
+    const [queue, setQueue] = React.useState([]);
+    const idRef = React.useRef(0);
+    const timer = React.useRef(null);
+    const regionRef = React.useRef(null);
+    const cameFrom = React.useRef(null);
+    const focusAfterDismiss = (0, core_1.useFocusAfterRemoval)(regionRef, ".crisp-snackbar-action", cameFrom);
+    React.useEffect(() => {
+        const onFocusIn = (e) => {
+            const target = e.target;
+            if (!target || regionRef.current?.contains(target))
+                return;
+            cameFrom.current = target;
+        };
+        document.addEventListener("focusin", onFocusIn);
+        return () => document.removeEventListener("focusin", onFocusIn);
+    }, []);
+    const dismiss = React.useCallback((id) => {
+        setQueue((list) => list.filter((s) => s.id !== id));
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    }, []);
+    const show = React.useCallback((o) => {
+        idRef.current += 1;
+        const id = idRef.current;
+        setQueue((list) => [...list, { ...o, id }]);
+        return id;
+    }, []);
+    // Only the FRONT of the queue is ever mounted, so its own auto-dismiss
+    // timer starts when it becomes visible, not when `show` was called.
+    const current = queue[0];
+    React.useEffect(() => {
+        if (!current)
+            return;
+        const d = current.duration ?? duration;
+        if (d <= 0)
+            return;
+        timer.current = setTimeout(() => dismiss(current.id), d);
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [current, duration, dismiss]);
+    const api = React.useMemo(() => ({ show, dismiss }), [show, dismiss]);
+    return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, { value: api, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, snackbar_recipe_1.snackbarRecipe)(), children: (0, jsx_runtime_1.jsx)("div", { ref: regionRef, className: "crisp-snackbar-region", role: "region", "aria-label": regionLabel, "aria-live": "polite", "aria-atomic": "false", children: current && ((0, jsx_runtime_1.jsx)(SnackbarPill, { item: current, onClose: () => {
+                            focusAfterDismiss(0);
+                            dismiss(current.id);
+                        } }, current.id)) }) })] }));
+}
+SnackbarProvider.displayName = "SnackbarProvider";
+function useSnackbar() {
+    const ctx = React.useContext(SnackbarContext);
+    if (!ctx)
+        throw new Error("useSnackbar must be used within a SnackbarProvider");
+    return ctx;
+}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snackbarRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A mobile-pattern snackbar — daangn/seed-design's
+// packages/rootage/components/snackbar.yaml (dev@e1c486b904297f7b6a8f17b8523f732c37015d60),
+// not Attio (no such component lives there; crisp#911). A single dark
+// `bgNeutralInverted` pill, bottom-anchored, holding an optional tone-coloured
+// prefix icon, a message, and an optional bold action. Every numeric value
+// below cites its yaml line; sizes/radii already equal existing crisp tokens
+// (crisp's space/radius scale was itself derived 2px-granular, same as
+// seed's `dimension`/`radius` scales, so no new tokens were needed).
+//
+// Deviation from the spec's literal `actionButton.color: $color.fg.brand`
+// (snackbar.yaml:128, seed's carrot-600 `#ff6600`): crisp's OWN brand token
+// is TechPartners' verified blue (`bgBrandSolid`, `#0298d9`), not seed's
+// orange (the identity migration takes seed's STRUCTURE, crisp's own colour
+// -- `~/grc-parity/seed-identity-spec.md`). Computed contrast of
+// `bgBrandSolid` on `bgNeutralInverted` (light theme: `#0298d9` on `#2a3038`)
+// is 4.11:1 -- below AA's 4.5:1 for 14px text (bold 14px does not clear the
+// large-text 3:1 threshold, which needs 18.66px). crisp has no brand step
+// bright enough on this dark surface yet, so the action reads in
+// `fgOnNeutralInverted` (the same token the message already uses) at bold
+// weight instead -- distinguished by weight, not colour, until a dedicated
+// token is measured.
+const config = (0, core_1.defineRecipe)({
+    name: "snackbar",
+    base: `
+    & .crisp-snackbar-region {
+      position: fixed; z-index: 80; inset-inline: 0; bottom: 0;
+      display: flex; justify-content: center;
+      padding: ${tokens_1.contract.space["2"]}; /* snackbar.yaml:95-96 region.paddingX/paddingY = $dimension.x2 (8px) */
+      pointer-events: none;
+    }
+    & .crisp-snackbar {
+      pointer-events: auto; box-sizing: border-box;
+      display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; /* snackbar.yaml:116 content.gap = $dimension.x2_5 (10px), reused as the icon+message-to-action gap */
+      min-height: 44px; max-width: 464px; /* snackbar.yaml:102-103 */
+      width: max-content;
+      padding: ${tokens_1.contract.space["2.5"]}; /* snackbar.yaml:104-105 root.paddingX/paddingY = $dimension.x2_5 (10px) */
+      border-radius: ${tokens_1.contract.radius.md}; /* snackbar.yaml:101 root.cornerRadius = $radius.r2 (8px) */
+      background: ${tokens_1.contract.bgNeutralInverted}; /* snackbar.yaml:100 root.color = $color.bg.neutral-inverted */
+      font-family: ${tokens_1.contract.font.sans};
+      opacity: 1; transform: scale(1);
+      transition: opacity 150ms cubic-bezier(0,0,.15,1), transform 150ms cubic-bezier(0,0,.15,1); /* snackbar.yaml:108-109 enterDuration/enterTimingFunction = $duration.d3 (150ms) / $timing-function.enter */
+      @starting-style { opacity: 0; transform: scale(0.8); } /* snackbar.yaml:106-107 enterOpacity/enterScale */
+    }
+    & .crisp-snackbar-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; } /* snackbar.yaml:124 prefixIcon.paddingRight = $dimension.x0_5 (2px), used as the icon-to-message gap */
+    & .crisp-snackbar-icon { flex-shrink: 0; display: inline-flex; }
+    & .crisp-snackbar[data-variant="positive"] .crisp-snackbar-icon { color: ${tokens_1.contract.bgSuccess}; } /* snackbar.yaml:138-139 variant=positive prefixIcon.color = $color.fg.positive */
+    & .crisp-snackbar[data-variant="critical"] .crisp-snackbar-icon { color: ${tokens_1.contract.bgDanger}; } /* snackbar.yaml:142-143 variant=critical prefixIcon.color = $color.fg.critical */
+    & .crisp-snackbar-message { flex: 1 1 auto; min-width: 0; color: ${tokens_1.contract.fgOnNeutralInverted}; font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.regular}; } /* snackbar.yaml:117-121: message.color = $color.fg.neutral-inverted, fontSize/lineHeight = $font-size.t4/$line-height.t4 (14px/19px), fontWeight = regular */
+    & .crisp-snackbar-action {
+      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
+      min-height: 44px; padding: 0 ${tokens_1.contract.space["2"]}; margin: -12px calc(-1 * ${tokens_1.contract.space["2"]}); /* snackbar.yaml:126-127 targetPaddingX/targetMinHeight = $dimension.x2 (8px, doubled here as horizontal padding)/44px -- a larger invisible tap target than the pill's own 44px content row, via negative margin so it doesn't grow the pill visually */
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: none;
+      color: ${tokens_1.contract.fgOnNeutralInverted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.bold}; /* fontSize/lineHeight = t4/line-height.t4; fontWeight = bold (snackbar.yaml:129-131); colour deviation documented above */
+      cursor: pointer;
+      transition: transform 150ms cubic-bezier(0,0,.15,1);
+    }
+    & .crisp-snackbar-action:active { transform: scale(0.98); } /* snackbar.yaml:133-134 pressed.actionButton.scaleScope = self */
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.snackbarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

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

@@ -179,6 +179,11 @@ const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-he
     & .${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}; }`;
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker sibling
+       clears 4.5:1+, same fix already applied to Button/Badge/Avatar (#897).
+       Hover is a brightness filter on the new fill, not bgBrandSolidPressed
+       (that token stays tuned for the lighter accent's own consumers). */
+    & .${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.bgBrandContrast}; 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: filter .12s; }
+    & .${namespace_1.CLASS_PREFIX}${p}-new:hover { filter: brightness(0.96); }`;
 exports.toolbarChromeBody = toolbarChromeBody;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarTool = void 0;
+exports.ToolbarTool = exports.toolbarOperatorLabels = void 0;
 exports.applyFilters = applyFilters;
 exports.applySorts = applySorts;
 exports.TableToolbar = TableToolbar;
@@ -83,7 +83,7 @@ function ViewBarSlot({ target, children, }) {
 // file, not per call site, and three independently attributed tags for
 // the same name over-counts against that (it expects one per name).
 const RtlChevronRight = ({ size, className, }) => ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { "data-rtl-flip": "", size: size, strokeWidth: 1.75, className: className }));
-const OP_LABELS = {
+exports.toolbarOperatorLabels = {
     contains: "contains",
     doesnotcontain: "does not contain",
     startswith: "starts with",
@@ -104,6 +104,33 @@ const OP_LABELS = {
     before: "before",
     after: "after",
 };
+/**
+ * crisp/#962: resolves each operator word through four layers, explicit
+ * prop winning, same "prop beats provider beats built-in" order as every
+ * other label in this file — `operatorLabels` prop, then a
+ * `CrispMessagesProvider`'s `componentDefaults.tableToolbar` (the new,
+ * discoverable, typed override), then the OLD whole-`CrispMessages`-
+ * dictionary-keyed-by-English-string lookup this file already had (kept
+ * so a consumer who already added entries there keeps working, unchanged),
+ * then the hardcoded English word. Not `useCrispMessage` in a loop over 13
+ * keys — that breaks the rules of hooks the same reason `useCrispMessages`
+ * itself exists (see that hook's own doc comment).
+ */
+function useToolbarOperatorLabels(operatorLabels, crispMessages) {
+    const providerLabels = (0, core_1.useCrispComponentDefaults)("tableToolbar");
+    return React.useMemo(() => {
+        const resolved = {};
+        for (const op of Object.keys(exports.toolbarOperatorLabels)) {
+            const builtIn = exports.toolbarOperatorLabels[op];
+            resolved[op] =
+                operatorLabels?.[op] ??
+                    providerLabels?.[op] ??
+                    crispMessages[builtIn] ??
+                    builtIn;
+        }
+        return resolved;
+    }, [operatorLabels, providerLabels, crispMessages]);
+}
 // #619: order and label set match Attio's own text-filter operator picker
 // verbatim (measured live, per RecordsTable's own #578 port of the same
 // set: contains · does not contain · starts with · ends with · is · is not ·
@@ -368,7 +395,7 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
+function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, operatorLabels, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -401,12 +428,12 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     const exportExcelLabel = (0, core_1.useCrispMessage)(exportExcelLabelProp, "Export view as Excel");
     const learnImportExportLabel = (0, core_1.useCrispMessage)(learnImportExportLabelProp, "Learn about imports and exports");
     const backLabel = (0, core_1.useCrispMessage)(backLabelProp, "Back");
-    // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
-    // their own — a whole lookup table, not one string — so they translate
-    // straight from the provider's dictionary at the two spots they render
-    // (#628, #673 below), same fallback order as every resolved constant
-    // above.
     const crispMessages = (0, core_1.useCrispMessages)();
+    // crisp/#962: `operatorLabels` prop + `componentDefaults.tableToolbar`,
+    // layered over the old whole-dictionary lookup — see
+    // `useToolbarOperatorLabels`'s own doc comment for the full resolution
+    // order.
+    const opLabels = useToolbarOperatorLabels(operatorLabels, crispMessages);
     // Each side falls back to the shared `columns` independently — a caller
     // that only overrides one (Filter's own Record/Created by, say) still
     // gets `columns` on the other, unchanged from before either prop existed.
@@ -842,9 +869,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                     return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fcond", "data-complete": complete ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--field", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": fieldOpen, onClick: () => {
                                             setFieldPickerPath([]);
                                             setOpenMenu(fieldOpen ? null : `ffield:${cond.id}`);
-                                        }, children: [col?.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 14, strokeWidth: 1.75 }) : null, colPath.length > 1 ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path", children: colPath.map((c, i) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [i > 0 && ((0, jsx_runtime_1.jsx)(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : (col?.label)] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op
-                                            ? (crispMessages[OP_LABELS[cond.op]] ?? OP_LABELS[cond.op])
-                                            : selectConditionLabel }), showValueSeg && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--val", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": valOpen, onClick: () => setOpenMenu(valOpen ? null : `fval:${cond.id}`), children: cond.op === "isanyof"
+                                        }, children: [col?.icon ? (0, jsx_runtime_1.jsx)(col.icon, { size: 14, strokeWidth: 1.75 }) : null, colPath.length > 1 ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path", children: colPath.map((c, i) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [i > 0 && ((0, jsx_runtime_1.jsx)(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : (col?.label)] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op ? opLabels[cond.op] : selectConditionLabel }), showValueSeg && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--val", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": valOpen, onClick: () => setOpenMenu(valOpen ? null : `fval:${cond.id}`), children: cond.op === "isanyof"
                                             ? cond.values?.length
                                                 ? isAnyOfSummary(cond.values)
                                                 : filterValuePlaceholder
@@ -852,7 +877,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 ? col?.type === "date"
                                                     ? formatFilterDate(cond.value)
                                                     : cond.value
-                                                : filterValuePlaceholder })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, (key) => changeFilterField(cond.id, key), filterFieldPlaceholder, filterFieldLabel) })), opOpen && ((0, jsx_runtime_1.jsx)("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? 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))) })), valOpen && showValueSeg && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                                : filterValuePlaceholder })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.jsx)("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: nestedFieldPicker(filterColumns, (key) => changeFilterField(cond.id, key), filterFieldPlaceholder, filterFieldLabel) })), opOpen && ((0, jsx_runtime_1.jsx)("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [opLabels[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))) })), valOpen && showValueSeg && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                             // biome-ignore lint/a11y/noAutofocus: focus the search field
                                             autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
                                             .filter((v) => v

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

@@ -46,7 +46,7 @@ const tabs_keyboard_1 = require("./tabs-keyboard");
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, moreLabel = (n) => `+${n} more`, moreMenuLabel = "More tabs", className, fill, "aria-label": ariaLabel, ...rest }) {
+function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, moreLabel = (n) => `+${n} more`, moreMenuLabel = "More tabs", overflow = "collapse", className, fill, "aria-label": ariaLabel, ...rest }) {
     // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
     // so two tab bars sharing a value mint the same id twice and every
     // aria-labelledby resolves to the first one (#227).
@@ -93,6 +93,12 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, mor
     const [hiddenFrom, setHiddenFrom] = React.useState(null);
     const moreRef = React.useRef(null);
     React.useLayoutEffect(() => {
+        // crisp#908: "scroll" never collapses anything -- the row scrolls
+        // instead, so there is nothing to measure or hide.
+        if (overflow !== "collapse") {
+            setHiddenFrom(null);
+            return;
+        }
         const list = listRef.current;
         if (!list || tabs.length === 0)
             return;
@@ -133,7 +139,7 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, mor
         const ro = new ResizeObserver(recompute);
         ro.observe(list);
         return () => ro.disconnect();
-    }, [tabs, active]);
+    }, [tabs, active, overflow]);
     const hiddenTabs = hiddenFrom == null ? [] : tabs.slice(hiddenFrom);
     const { onKeyDown, tabIndexFor } = (0, tabs_keyboard_1.useTablistKeyboard)({
         tabs,
@@ -141,11 +147,11 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, mor
         select,
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ fill, 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, i) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ fill, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "crisp-tabs-list", "data-overflow": overflow, role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t, i) => {
                         const selected = t.value === active;
                         const overflowHidden = hiddenFrom != null && i >= hiddenFrom;
                         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: overflowHidden ? -1 : tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, "data-tabs-overflow-hidden": overflowHidden ? "" : 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));
-                    }), (0, jsx_runtime_1.jsx)("span", { ref: moreRef, className: "crisp-tabs-more", "data-tabs-overflow-hidden": hiddenTabs.length === 0 ? "" : undefined, children: (0, jsx_runtime_1.jsx)(menu_1.Menu, { "aria-label": moreMenuLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabs-tab", children: [(0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: moreLabel(hiddenTabs.length) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), children: hiddenTabs.map((t) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { icon: t.icon, onSelect: () => select(t.value), 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: {
+                    }), overflow === "collapse" && ((0, jsx_runtime_1.jsx)("span", { ref: moreRef, className: "crisp-tabs-more", "data-tabs-overflow-hidden": hiddenTabs.length === 0 ? "" : undefined, children: (0, jsx_runtime_1.jsx)(menu_1.Menu, { "aria-label": moreMenuLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabs-tab", children: [(0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: moreLabel(hiddenTabs.length) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), children: hiddenTabs.map((t) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { icon: t.icon, onSelect: () => select(t.value), 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: "crisp-tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 

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

@@ -8,10 +8,20 @@ const tokens_1 = require("../../tokens");
 // baseline needs, reserved as bottom padding so it's real box height and not
 // paint that trailing content can sit on top of. The bar carries 12px inline
 // padding too, and draws its own full-width `::after` baseline in
-// borderSubtle at its bottom edge, spanning that padding. The active tab is
-// a light pill — bg #fbfbfb + inset ring borderSubtle, r8 — with a 1px ink
-// underline that sits on the baseline (painted above it) and slides along it;
-// inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
+// borderSubtle at its bottom edge, spanning that padding.
+//
+// your-moon/crisp#934: the selected tab used to be a light
+// filled pill (bg #fbfbfb + inset ring borderSubtle, r8) with a 1px ink
+// underline on top of it. Owner-directed: underline tabs, no fill pill --
+// seed-design's own `tab.yaml` has no `root.color` property at all, at any
+// state (selected/hover/pressed); selection is carried purely by the label
+// darkening (muted -> ink, unchanged, already matched seed) plus the
+// existing underline (already `fgPrimary`, "same colour as selected text,
+// not brand" -- also already matched seed). Only the selected pill's own
+// fill/ring is removed here; unselected tabs keep their existing subtle
+// hover tint (a desktop hover affordance seed's spec doesn't need to
+// consider one way or the other, and the owner didn't ask to remove).
+// Inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
 // gap, 14/500 labels. The count badge (crisp#697, re-measured against a
@@ -48,11 +58,18 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; box-sizing: content-box; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
     & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: ${tokens_1.contract.borderSubtle}; }
+    /* crisp#908: an alternative to the "+N more" collapse above (crisp#863) --
+       a consumer opts into a single scrolling row instead (Naver/Kakao's own
+       pattern, docs/study/korean/), never both at once. No new visual value:
+       reuses the same list gap/tab geometry, only adds overflow-x + snap. */
+    & .crisp-tabs-list[data-overflow="scroll"] { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; }
+    & .crisp-tabs-list[data-overflow="scroll"]::-webkit-scrollbar { display: none; }
+    & .crisp-tabs-list[data-overflow="scroll"] .crisp-tabs-tab { flex-shrink: 0; scroll-snap-align: start; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: ${tokens_1.contract.space["1"]}; }
-    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 28px; 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}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .crisp-tabs-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 4px; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-size: 10px; line-height: 14px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgNeutralSoft}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }