@crisp-ui-kit/crisp 0.57.1 → 0.57.3

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

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

@@ -3,14 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.textareaRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// A multiline text field: an inset 1px ring (radius 8), 14px text, and an
+// A multiline text field: a real 1px border (radius 8), 14px text, and an
 // optional character counter pinned bottom-right (12px, muted). Focus rings
 // the field brand.
 //
-// The ring is `elevation.textField` (#466), not `elevation.field` — this
-// comment already correctly described "an inset 1px ring", but the code
-// pulled in `field`'s own button-chrome shadow (a ring PLUS a glow and a
-// drop-shadow layer), which live Attio never carries on a real typed field.
+// your-moon/crisp#920: the rest-state edge used to be `elevation.textField`,
+// a `box-shadow` ring (#466's fix for a real typed field's 1px ring, not
+// `field`'s button-chrome glow/drop-shadow layers) -- now a real `border`,
+// matching Input's own #914/#910 technique and seed-design's `text-input.yaml`
+// (an actual border that THICKENS on focus/invalid via the ::after overlay
+// below, not a fixed-width ring that only recolors). `borderDefault` is
+// seed's own `stroke.neutral-weak`, already the crisp token's exact value.
 //
 // The inset is seed-design's, not Attio's -- the second deliberate divergence
 // after the focus treatment. seed's text-input sets its inline inset to
@@ -27,10 +30,10 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
-      margin: 0; padding: ${tokens_1.contract.space["2.5"]} 14px; border: none; border-radius: ${tokens_1.contract.radius.md};
-      background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.textField};
+      margin: 0; padding: ${tokens_1.contract.space["2.5"]} 14px; border-radius: ${tokens_1.contract.radius.md};
+      background: ${tokens_1.contract.bgSurface}; border: 1px solid ${tokens_1.contract.borderDefault};
       font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
-      outline: none; transition: box-shadow .15s ease;
+      outline: none;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
     & .crisp-textarea-field::placeholder { color: ${tokens_1.contract.fgMuted}; }

package/dist/cjs/core/floating-portal.js

@@ -52,10 +52,11 @@ const react_dom_1 = require("react-dom");
  * `Dialog` was rendering offset by the dialog's own box instead of anchored
  * to its trigger.
  *
- * Every caller renders this conditionally on its own `open` state, which
- * starts `false` and is driven only by client interaction — never a prop a
- * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
- * touches `document` during SSR, the same safety Tooltip already had.
+ * Every caller renders this conditionally on its own `open` state. A fixture
+ * CAN set that true at mount (crisp#964 needs exactly that, to give Menu's
+ * roving-tabindex guard something to inspect), so this checks for `window`
+ * itself rather than assuming the caller never does — the same guard
+ * `@zag-js/react`'s own `Portal` uses for the identical reason.
  *
  * `sourceRef` is the caller's own root — still in its original DOM position,
  * never portaled — used to carry a `data-theme` set on some ancestor of it
@@ -71,6 +72,8 @@ const react_dom_1 = require("react-dom");
  * element carrying that attribute.
  */
 function FloatingPortal({ children, sourceRef, }) {
+    if (typeof window === "undefined")
+        return children;
     const theme = sourceRef.current
         ?.closest("[data-theme]")
         ?.getAttribute("data-theme");

package/dist/cjs/index.js

@@ -24,6 +24,7 @@ __exportStar(require("./components/avatar"), exports);
 __exportStar(require("./components/avatargroup"), exports);
 __exportStar(require("./components/badge"), exports);
 __exportStar(require("./components/barchart"), exports);
+__exportStar(require("./components/bottomsheet"), exports);
 __exportStar(require("./components/breadcrumb"), exports);
 __exportStar(require("./components/bulkbar"), exports);
 __exportStar(require("./components/button"), exports);
@@ -31,6 +32,7 @@ __exportStar(require("./components/callout"), exports);
 __exportStar(require("./components/card"), exports);
 __exportStar(require("./components/checkbox"), exports);
 __exportStar(require("./components/chip"), exports);
+__exportStar(require("./components/chipgroup"), exports);
 __exportStar(require("./components/columncalc"), exports);
 __exportStar(require("./components/composewindow"), exports);
 __exportStar(require("./components/contextmenu"), exports);
@@ -52,6 +54,7 @@ __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);
 __exportStar(require("./components/mentionchip"), exports);
 __exportStar(require("./components/menu"), exports);
+__exportStar(require("./components/menusheet"), exports);
 __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
 __exportStar(require("./components/personchip"), exports);
@@ -65,6 +68,7 @@ __exportStar(require("./components/select"), exports);
 __exportStar(require("./components/skeleton"), exports);
 __exportStar(require("./components/skiplink"), exports);
 __exportStar(require("./components/slider"), exports);
+__exportStar(require("./components/snackbar"), exports);
 __exportStar(require("./components/spinner"), exports);
 __exportStar(require("./components/stagebar"), exports);
 __exportStar(require("./components/statcard"), exports);
@@ -99,7 +103,9 @@ __exportStar(require("./product/headerbar"), exports);
 __exportStar(require("./product/importdialog"), exports);
 __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
+__exportStar(require("./product/memberssettings"), exports);
 __exportStar(require("./product/navitem"), exports);
+__exportStar(require("./product/notificationssettings"), exports);
 __exportStar(require("./product/objectsettings"), exports);
 __exportStar(require("./product/onboarding"), exports);
 __exportStar(require("./product/recordpage"), exports);
@@ -114,5 +120,6 @@ __exportStar(require("./product/tasklist"), exports);
 __exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);
+__exportStar(require("./product/workspacegeneralsettings"), exports);
 // design tokens + recipe core (for building custom components)
 __exportStar(require("./tokens"), exports);

package/dist/cjs/product/authshell/authshell.recipe.js

@@ -43,7 +43,11 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
     & .crisp-authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; min-height: 24px; display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; }
-    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: #fff; display: flex; align-items: center; justify-content: center; }
+    /* 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). */
+    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandContrast}; color: #fff; display: flex; align-items: center; justify-content: center; }
     & .crisp-authshell-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
     & .crisp-authshell-logo-title { font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.bold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-authshell-logo-subtitle { font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }

package/dist/cjs/product/command/command.recipe.js

@@ -32,7 +32,10 @@ const config = (0, core_1.defineRecipe)({
   & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: ${tokens_1.contract.space["1"]}; }
   & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
   & .crisp-command-footer-nav { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${tokens_1.contract.space["1"]} 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; }
+  /* 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). */
+  & .crisp-command-footer-action { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${tokens_1.contract.space["1"]} 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; }
   & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
   & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${tokens_1.contract.text.xs}; }

package/dist/cjs/product/comments/comments.js

@@ -315,8 +315,13 @@ function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel,
  * nothing on its own beyond that data. See `CommentCountBadge` for the
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
+ *
+ * `variant="drawer"` (default) is today's measured 320px + left-border
+ * look; `variant="pane"` (crisp#960) fills its container's width instead,
+ * for a consumer embedding this in a full-width tab pane rather than a
+ * true slide-over/drawer.
  */
-function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }) {
+function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, variant, className, ...rest }) {
     const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const backLabel = (0, core_1.useCrispMessage)(backLabelProp, "Back");
     const title = (0, core_1.useCrispMessage)(titleProp, "All comments");
@@ -369,7 +374,7 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ variant, className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
                                 ? activeThread.resolvedBy?.id === currentUserId ||
                                     !activeThread.resolvedBy
                                     ? resolvedByYouLabel

package/dist/cjs/product/comments/comments.recipe.js

@@ -18,8 +18,8 @@ const tokens_1 = require("../../tokens");
 // width and still gets an odd number).
 const config = (0, core_1.defineRecipe)({
     name: "comments",
-    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%;
-    background: ${tokens_1.contract.bgSurface}; border-inline-start: 1px solid ${tokens_1.contract.borderSubtle};
+    base: `display: flex; flex-direction: column; box-sizing: border-box; height: 100%;
+    background: ${tokens_1.contract.bgSurface};
     font-family: ${tokens_1.contract.font.sans};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -99,9 +99,13 @@ const config = (0, core_1.defineRecipe)({
        box-shadow, so this reuses that literal rather than re-deriving it.
        32px/radius.lg/6px-10px padding has no matching Button \`size\` yet
        (24/28/40 are the three that exist), so this stays hand-rolled instead
-       of stretching one of those. */
-    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgBrandSolid}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
-    & .crisp-comments-post:hover:not(:disabled) { background: ${tokens_1.contract.bgBrandSolidPressed}; }
+       of stretching one of those. your-moon/crisp#953:
+       bgBrandContrast, not bgBrandSolid -- the accent (#0298d9) only clears
+       3.23:1 with white; same fix already applied to Button/Badge/Avatar
+       (#897). Hover is a brightness filter on the new fill, matching that
+       PR's own Button primary treatment, not bgBrandSolidPressed. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, filter .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { filter: brightness(0.96); }
     & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
 
     /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding,
@@ -113,8 +117,22 @@ const config = (0, core_1.defineRecipe)({
        rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 12%, transparent); color: ${tokens_1.contract.bgBrandSolid}; font-weight: ${tokens_1.contract.weight.medium}; user-select: none; }
     ${core_1.rtlFlipCss}`,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // your-moon/crisp#960: the 320px width + left-border hairline is a
+        // drawer-consumer look (RecordPage's own comments drawer, #864), not
+        // an intrinsic property of the panel itself. A consumer embedding this
+        // in a full-width tab pane (internal/grc's own record-page Comments
+        // tab, sibling to Related/Activity/Notes/Tasks/Lists, all of which
+        // fill the pane) needs `width: 100%` and no border -- a tab pane
+        // doesn't need a seam separating it from itself. `drawer` (default)
+        // is today's exact, already-measured look; nothing changes for an
+        // existing consumer that doesn't pass `variant`.
+        variant: {
+            drawer: `width: 320px; border-inline-start: 1px solid ${tokens_1.contract.borderSubtle};`,
+            pane: `width: 100%;`,
+        },
+    },
+    defaultVariants: { variant: "drawer" },
     compoundVariants: [],
     // Two pieces below intentionally live OUTSIDE the nested \`base\` above,
     // the same reason Menu's own \`.crisp-menu-content\` does (menu.recipe.ts's

package/dist/cjs/product/inbox/inbox.js

@@ -54,10 +54,18 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
     // own `empty`.
     const crispMessages = (0, core_1.useCrispMessages)();
     const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
-    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
-    const emptySubtitle = emptySubtitleProp ??
+    // A tab's own empty copy wins over the instance-level prop, which wins
+    // over the built-in default — same precedence as `title`/`emptyAction`.
+    const activeTabDef = tabs?.find((t) => t.id === activeTab);
+    const emptyTitle = activeTabDef?.emptyTitle ??
+        emptyTitleProp ??
+        crispMessages["No notifications"] ??
+        "No notifications";
+    const emptySubtitle = activeTabDef?.emptySubtitle ??
+        emptySubtitleProp ??
         crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
         "Notifications such as mentions and important updates will be displayed here.";
+    const resolvedEmptyAction = activeTabDef?.emptyAction ?? emptyAction;
     const tabsLabel = (0, core_1.useCrispMessage)(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
@@ -68,6 +76,6 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), resolvedEmptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: resolvedEmptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

package/dist/cjs/product/memberssettings/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MembersSettings = exports.InviteMembersDialog = void 0;
+var memberssettings_1 = require("./memberssettings");
+Object.defineProperty(exports, "InviteMembersDialog", { enumerable: true, get: function () { return memberssettings_1.InviteMembersDialog; } });
+Object.defineProperty(exports, "MembersSettings", { enumerable: true, get: function () { return memberssettings_1.MembersSettings; } });