@crisp-ui-kit/crisp 0.56.0 → 0.57.0

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

@@ -1,24 +1,36 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
-// A select / dropdown, measured from settings: a 32px combobox trigger
-// (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
-// layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
-// check on the selected one and highlight on hover / keyboard. The listbox is
-// portaled to document.body (#339) so no ancestor's transform/backdrop-filter
-// (Dialog's own measured surface sets both) can capture its position: fixed
-// box; z-index 70 keeps it above Dialog/Drawer's z-index 60/61 layers, since
-// it's no longer nested inside whichever one opened it.
-// The listbox and everything inside it live in `globalCss` below, not
-// nested under `&` (#357): nesting compiles to a real descendant combinator
-// scoped to the recipe's root class, which needs actual DOM containment —
-// exactly what the portal to `document.body` breaks. Nested, these rules
-// matched nothing once the listbox moved and it rendered completely
-// unstyled. The trigger and its own parts stay nested under `&` — the
-// trigger is NOT portaled, it stays where it was authored. `font-family`/
-// smoothing are restated on the listbox's own rule (its children pick font
-// up via their own `font-family: inherit`, which still works — that
-// inheritance is intact WITHIN the portaled subtree, only the link back to
-// the trigger-holding root broke).
+// seed-design's Select, resolved value-for-value from
+// `@seed-design/rootage`'s select.yaml / select-trigger.yaml / select-item.yaml
+// (crisp/#867) — a deliberate, owner-requested exception to "measure Attio
+// first": this ONE component follows seed-design, not Attio, the same way
+// DatePicker already follows seed's calendar structure. Every px/colour below
+// traces to a resolved seed token (see the new entries in tokens/scale.ts,
+// tokens/palette.ts, tokens/semantic.ts and tokens/elevation.ts, each
+// commented with the seed token it came from) — nothing here is measured
+// live, because there is no live Attio reference for this shape any more.
+//
+// crisp keeps its own `searchable` filter field and `triggerLabel` (#846):
+// seed has no search of its own, and the owner asked to keep both. The
+// listbox stays portaled to `document.body` for the same reason #339
+// established (no ancestor's transform/backdrop-filter can capture its
+// position) — see the sibling comment on `globalCss` below for why its rules
+// live there rather than nested under `&`.
+//
+// Two things seed has that this recipe deliberately does NOT reproduce:
+// - A JS-driven exit animation (seed's `exitDuration`/`exitScale`/
+//   `exitOpacity`, played before unmount). Every other crisp overlay
+//   (Dialog, Menu, ContextMenu, Popover) unmounts synchronously on close and
+//   only animates the ENTER transition via `@starting-style` — adding a
+//   delayed-unmount mechanism just for Select would be a new architectural
+//   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.
 const config = defineRecipe({
     name: "select",
     base: `
@@ -26,87 +38,147 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .crisp-select-trigger {
-      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
-      height: ${c.size.menuRow}; width: 100%; min-width: 0; margin: 0; padding: 0 ${c.space["1.5"]} 0 ${c.space["2"]};
-      border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer;
-      transition: background-color .12s ease, box-shadow .12s ease;
+      box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; margin: 0;
+      border: 1px solid ${c.strokeSelectTrigger}; background: transparent; cursor: pointer;
+      font-family: inherit; color: ${c.fgSelectNeutral};
+      transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1);
     }
-    & .crisp-select-trigger:hover { background: ${c.bgRaised}; }
-    & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; background: ${c.bgSurface}; }
-    & .crisp-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
-    & .crisp-select-placeholder { color: ${c.fgMuted}; }
-    & .crisp-select-chevron { flex-shrink: 0; color: ${c.fgMuted}; transition: transform .15s ease; }
-    & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
+    /* seed defines no hover state for this trigger -- only pressed, invalid,
+       disabled and readonly. The scale-down is scoped to the CONTENT
+       (seed's scaleScope: content), not the button itself, so the border
+       never moves. */
+    /* Only the value scales, not the chevron: the chevron's own transform is
+       its open/close rotation, and a scale would fight it for one shared
+       CSS property when both are true at once (pressing while open). */
+    & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: ${c.bgSelectPressed}; }
+    & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) .crisp-select-value { transform: scale(0.98); }
+    & .crisp-select-trigger:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px; }
+    & .crisp-select-trigger:disabled { background: ${c.bgSelectDisabled}; cursor: not-allowed; }
+    & .crisp-select-trigger:disabled .crisp-select-value,
+    & .crisp-select-trigger:disabled .crisp-select-placeholder,
+    & .crisp-select-trigger:disabled .crisp-select-chevron { color: ${c.fgDisabled}; }
+    /* readonly: same fill as disabled, but the value/placeholder text stays
+       normal ink -- it reads as "answered and locked", not "answered and
+       greyed out" (select-trigger.yaml's readonly state only overrides
+       root.color; value/placeholder keep their enabled colours). */
+    & .crisp-select-trigger[aria-readonly="true"] { background: ${c.bgSelectDisabled}; cursor: default; }
+    & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; transition: transform .15s cubic-bezier(0,0,.15,1); }
+    & .crisp-select-placeholder { color: ${c.fgSelectPlaceholder}; }
+    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing"
+       curve. Overridden to 150ms on open (openRotateDuration) below --
+       same curve both ways, only the duration differs. */
+    & .crisp-select-chevron { flex-shrink: 0; color: ${c.fgNeutralMuted}; transition: transform .1s cubic-bezier(.35,0,.35,1); }
+    & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); transition-duration: .15s; }
   `,
     globalCss: `
     /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
-       on document.body while open (Zag re-enables it only on layers IT
-       tracks), and the portaled listbox is outside Zag's knowledge -- it
-       inherited the lock, so every option was unclickable, hit-testing
-       right through to whatever real element sat behind it. */
+       on document.body while open, and the portaled listbox is outside its
+       knowledge -- it inherited the lock without this. */
     .crisp-select-listbox {
       font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
-      max-height: 280px; overflow-y: auto; padding: ${c.space["1"]};
-      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
-      box-shadow: ${e.floating};
-      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space["2"]};
+      max-height: 480px; overflow-y: auto; padding: ${c.space["2"]};
+      border-radius: ${c.radius["3xl"]}; background: ${c.bgSelectListbox};
+      box-shadow: ${e.selectFloating};
+      transform-origin: top left; opacity: 1; transform: none;
+      transition: opacity .15s cubic-bezier(0,0,.15,1), transform .15s cubic-bezier(0,0,.15,1);
     }
-    .crisp-select-listbox[data-up] { transform-origin: bottom; }
-    .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    .crisp-select-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["1"]}) calc(-1 * ${c.space["1"]}) ${c.space["1"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgMuted}; }
+    .crisp-select-listbox[data-up] { transform-origin: bottom left; }
+    .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
+    .crisp-select-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 34px; flex-shrink: 0; margin: calc(-1 * ${c.space["2"]}) calc(-1 * ${c.space["2"]}) ${c.space["2"]}; padding: 0 ${c.space["2.5"]}; border-bottom: 1px solid ${c.borderSubtle}; color: ${c.fgNeutralMuted}; }
     .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: ${c.text.lg}; color: ${c.fgPrimary}; }
-    .crisp-select-search input::placeholder { color: ${c.fgMuted}; }
-    .crisp-select-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    /* #343: same measured values as Menu's own group heading
-       (crisp-menu-label) -- reused rather than re-measured, since it's the
-       same "small muted heading above a run of rows" treatment. */
-    .crisp-select-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgSelectNeutral}; }
+    .crisp-select-search input::placeholder { color: ${c.fgSelectPlaceholder}; }
+    .crisp-select-empty { padding: ${c.space["3"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgNeutralSubtle}; }
+    /* select.yaml's groupLabel -- font-size/line-height/weight are the same
+       across sizes, only paddingY differs (medium 8px, large 10px). */
+    .crisp-select-label { padding: ${c.space["2"]} ${c.space["4"]} 0; font-size: ${c.text.md}; line-height: 18px; font-weight: ${c.weight.regular}; color: ${c.fgNeutralSubtle}; }
     .crisp-select-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; flex-shrink: 0;
-      padding: 0 ${c.space["2"]}; margin: 0; border: none; background: none; border-radius: ${c.radius.md};
-      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
+      box-sizing: border-box; display: flex; align-items: center; flex-shrink: 0;
+      padding: ${c.space["2.5"]} ${c.space["4"]}; margin-inline: 0; border: none; background: none; border-radius: ${c.radius.xl};
+      font-family: inherit; color: ${c.fgSelectNeutral}; text-align: start; cursor: pointer; white-space: nowrap;
+      transition: background-color .15s cubic-bezier(.35,0,.35,1), margin-inline .15s cubic-bezier(.35,0,.35,1);
     }
+    /* Keyboard/hover highlight keeps crisp's own visible neutral fill --
+       seed's spec has no "highlighted" state at all (only pressed/selected/
+       disabled), and its actual pressed tint (below) is a ~3% black hint,
+       too faint to serve as a keyboard-navigation indicator. */
     .crisp-select-option[data-highlighted] { background: ${c.bgRaised}; }
-    .crisp-select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; }
+    .crisp-select-option:active:not([data-disabled]) { background: ${c.bgSelectPressed}; margin-inline: ${c.space["2"]}; }
+    .crisp-select-option[data-disabled] { cursor: not-allowed; }
+    .crisp-select-option[data-disabled] .crisp-select-option-label,
+    .crisp-select-option[data-disabled] .crisp-select-option-description,
+    .crisp-select-option[data-disabled] .crisp-select-option-check { color: ${c.fgDisabled}; }
+    .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${c.radius.full}; margin-inline-end: ${c.space["2"]}; }
+    .crisp-select-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
     .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    .crisp-select-option-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    .crisp-select-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: ${c.fgNeutralSubtle}; }
+    .crisp-select-option-check { flex-shrink: 0; color: ${c.fgSelectNeutral}; margin-inline-start: ${c.space["2"]}; }
   `,
     variants: {
-        // ghost: borderless at rest (transparent), reveals a subtle fill on hover —
-        // inline selects (e.g. the sort configurator).
-        variant: {
-            default: "",
-            ghost: `
-        & .crisp-select-trigger { background: transparent; box-shadow: none; }
-        & .crisp-select-trigger:hover { background: ${c.bgRaised}; box-shadow: none; }
-        & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
-      `,
-        },
-        // full (default): fills its container, as before. auto: sizes to content.
+        // full (default): fills its container. auto: sizes to content.
         width: {
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
-        // Same ring Input's `invalid` draws, adapted to Select's box-shadow-ring
-        // trigger (a real <button>, so it needs no ::after overlay the way
-        // Input/Textarea do). Outranks hover/open/focus, same reasoning as
-        // Input: a field being corrected stays visibly wrong while it is.
-        invalid: {
-            true: `
-        & .crisp-select-trigger,
-        & .crisp-select-trigger:hover,
-        & .crisp-select-trigger[data-open],
-        & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }
+        // seed's two trigger/item sizes (select-trigger.yaml / select-item.yaml).
+        // medium is the default -- closest to crisp's previous single size.
+        size: {
+            medium: `
+        & .crisp-select-trigger { height: ${c.size.selectTriggerMd}; border-radius: ${c.radius.md}; gap: ${c.space["2"]}; padding-inline: ${c.space["3.5"]}; }
+        & .crisp-select-value, & .crisp-select-placeholder { font-size: ${c.text.lg}; line-height: 19px; }
+        & .crisp-select-chevron { width: ${c.size.icon}; height: ${c.size.icon}; }
+        .crisp-select-option { gap: ${c.space["2"]}; }
+        .crisp-select-option-label { font-size: ${c.text.lg}; line-height: 19px; }
+        .crisp-select-option-description { font-size: ${c.text.sm}; line-height: 16px; }
+        .crisp-select-option-check { width: ${c.space["3"]}; height: ${c.space["3"]}; }
+        .crisp-select-label { padding-top: ${c.space["2"]}; }
       `,
+            large: `
+        & .crisp-select-trigger { height: ${c.size.selectTriggerLg}; border-radius: ${c.radius.xl}; gap: ${c.space["2.5"]}; padding-inline: ${c.space["4"]}; }
+        & .crisp-select-value, & .crisp-select-placeholder { font-size: ${c.text.xl}; line-height: 22px; }
+        & .crisp-select-chevron { width: ${c.size.selectIconLg}; height: ${c.size.selectIconLg}; }
+        .crisp-select-option { gap: ${c.space["3"]}; }
+        .crisp-select-option-label { font-size: ${c.text.xl}; line-height: 22px; }
+        .crisp-select-option-description { font-size: ${c.text.md}; line-height: 18px; }
+        .crisp-select-option-check { width: ${c.space["3.5"]}; height: ${c.space["3.5"]}; }
+        .crisp-select-label { padding-top: ${c.space["2.5"]}; }
+      `,
+        },
+        // Real border width+colour change (seed: strokeWidth 1px→2px,
+        // strokeColor neutral-weak→critical-solid), not a box-shadow ring --
+        // crisp's own field/switch invalid rings don't apply here since this
+        // component's whole border model changed to match seed's real stroke.
+        invalid: {
+            true: `& .crisp-select-trigger { border-width: 2px; border-color: ${c.strokeSelectInvalid}; }`,
             false: ``,
         },
+        // ghost: borderless at rest, a subtle fill on hover -- inline selects
+        // (e.g. the sort configurator, and datatable's own cell editors, which
+        // embed at whatever height their row already is, not seed's fixed
+        // trigger height). Not a seed state; kept from crisp's existing API
+        // surface, layered on top of the seed base.
+        //
+        // Declared LAST on purpose: `resolveRecipe` emits one CSS rule per
+        // variant, in the order this object lists them, and same-specificity
+        // rules resolve by source order -- ghost's `height: 100%` below must
+        // come after `size`'s fixed height to win the cascade. Move `variant`
+        // earlier and every ghost consumer's trigger silently grows to 40/52px
+        // inside its 36px row again.
+        variant: {
+            default: "",
+            ghost: `
+        & .crisp-select-trigger { height: 100%; border-color: transparent; }
+        & .crisp-select-trigger:hover:not(:disabled) { background: ${c.bgSelectPressed}; }
+      `,
+        },
+    },
+    defaultVariants: {
+        width: "full",
+        size: "medium",
+        invalid: false,
+        variant: "default",
     },
-    defaultVariants: { variant: "default", width: "full", invalid: false },
     compoundVariants: [],
 });
 export const selectRecipe = Object.assign(resolveRecipe(config), { config });

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

@@ -733,7 +733,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         : sorts.length
             ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortField}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
-    return (_jsx("div", { ref: rootRef, className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", _jsx("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && (_jsxs("span", { className: "crisp-tabletoolbar-sorted-count", children: [" ", "+", sorts.length - 1] }))] }))] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { ref: rootRef, className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", _jsx("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && (_jsxs("span", { className: "crisp-tabletoolbar-sorted-count", children: ["+", sorts.length - 1] }))] }))] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -928,12 +928,12 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
  * contents` so it contributes no box of its own — the same technique
  * `TableToolbar`'s own root already uses to disappear from layout.
  */
-export const ToolbarTool = React.forwardRef(({ active, ghost, className, ...rest }, ref) => (_jsx("span", { className: tabletoolbarRecipe(), children: _jsx("button", { ref: ref, type: "button", className: [
+export const ToolbarTool = React.forwardRef(({ active, ghost, count, className, children, ...rest }, ref) => (_jsx("span", { className: tabletoolbarRecipe(), children: _jsxs("button", { ref: ref, type: "button", className: [
             "crisp-tabletoolbar-tool",
             active && "crisp-tabletoolbar-tool--active",
             ghost && "crisp-tabletoolbar-tool--ghost",
             className,
         ]
             .filter(Boolean)
-            .join(" "), ...rest }) })));
+            .join(" "), ...rest, children: [children, count != null && (_jsx("span", { className: "crisp-tabletoolbar-tool-count", children: count }))] }) })));
 ToolbarTool.displayName = "ToolbarTool";

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

@@ -104,9 +104,33 @@ const importExportChrome = `
 // vs 14px) and its own mid-grey, distinct from the "Sorted by" muted tone.
 // TableToolbar-only, same reasoning as `filterChipChrome` above (RecordsTable
 // keeps its own older Sort label markup, not touched here).
+// crisp#876: re-measured live -- the "+N" isn't just smaller/greyer text,
+// it's a real chip: `background: rgba(0,0,0,.04)`, `box-shadow: inset 0 0 0
+// 1px rgb(238,239,241)` (borderSubtle), `border-radius: 6px`, `padding: 0
+// 4px`, 16px tall, colour `rgb(80,81,85)` -- bit-for-bit crisp's own Badge
+// `tone="neutral" size="small"` shape, so this reuses those exact tokens
+// (`fgNeutralSoft`, `borderSubtle`, `radius.sm`, `space["1"]`) rather than
+// re-deriving new ones or leaving the old 73%-mix colour approximation.
 const sortedLabelChrome = `
     & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
-    & .crisp-tabletoolbar-sorted-count { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 73%, transparent); }`;
+    & .crisp-tabletoolbar-sorted-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent);
+      box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }`;
+// crisp#875: a general count-badge slot for `ToolbarTool` (a screen's own
+// quick filter, e.g. "My tasks •5") -- the SAME measured shape as
+// `sorted-count` above, independently re-confirmed on a second live Attio
+// surface this round (a Kanban board's own stage-column count, "Idea 0":
+// identical `data-variant="tertiary" data-size="16"` chip, same bg/ring/
+// radius/padding/colour, plus `font-variant-numeric: tabular-nums` for
+// digit alignment past a single character). Same reasoning as
+// search/menu-input's own duplicated ring formula elsewhere in this file:
+// a distinct class, not a shared one, so `sorted-count`'s own meaning
+// doesn't get diluted by an unrelated consumer.
+const toolCountChrome = `
+    & .crisp-tabletoolbar-tool-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent);
+      box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft};
+      font-variant-numeric: tabular-nums; }`;
 // The table toolbar, measured: 28px controls, the Sort/Filter buttons and
 // the menus they open, sort-condition rows, and the filter chips. The chrome
 // itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
@@ -126,6 +150,7 @@ ${toolbarChromeBody("tabletoolbar")}
 ${filterChipChrome}
 ${importExportChrome}
 ${sortedLabelChrome}
+${toolCountChrome}
     ${rtlFlipCss}
   `,
 });

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import * as React from "react";
+import { Menu, MenuItem } from "../menu/index.js";
 import { tabsRecipe } from "./tabs.recipe.js";
 import { useTablistKeyboard } from "./tabs-keyboard.js";
 /**
@@ -8,7 +10,7 @@ import { useTablistKeyboard } from "./tabs-keyboard.js";
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, fill, "aria-label": ariaLabel, ...rest }) {
+export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, moreLabel = (n) => `+${n} more`, moreMenuLabel = "More tabs", 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).
@@ -41,16 +43,73 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
         ro.observe(list);
         return () => ro.disconnect();
     }, [active, tabs]);
+    // crisp#863 -- responsive "+N more" overflow, measured live: Attio
+    // collapses the TRAILING tabs into a single trigger once the strip runs
+    // out of room, rather than letting the row wrap or overrun. Every tab
+    // (and the "+N more" trigger itself) stays permanently mounted -- an
+    // overflowed one gets `data-tabs-overflow-hidden` (position: absolute;
+    // visibility: hidden in the recipe), which removes it from the flex row
+    // WITHOUT ever making its `offsetWidth` unmeasurable the way `display:
+    // none` would. That's what lets this recompute purely from cached
+    // per-tab widths on every resize, with no flash: a naive
+    // measure-everything-visible-first pass would show the full unclipped
+    // row for one frame before collapsing it.
+    const [hiddenFrom, setHiddenFrom] = React.useState(null);
+    const moreRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list || tabs.length === 0)
+            return;
+        const recompute = () => {
+            const containerWidth = list.clientWidth;
+            // Not yet laid out (e.g. this render, or the test environment, which
+            // never computes real box metrics) -- never collapse everything on a
+            // 0-width read, that's a false "nothing fits" rather than "not
+            // measurable yet".
+            if (containerWidth <= 0)
+                return;
+            const els = tabs.map((t) => list.querySelector(`[data-value="${CSS.escape(t.value)}"]`));
+            if (els.some((el) => !el))
+                return;
+            const gap = 4; // ${c.space["1"]}, the list's own gap (recipe.ts)
+            const moreWidth = moreRef.current?.offsetWidth ?? 0;
+            let used = 0;
+            let cutoff = tabs.length;
+            for (let i = 0; i < els.length; i++) {
+                const w = (els[i]?.offsetWidth ?? 0) + (i > 0 ? gap : 0);
+                const reserve = i < tabs.length - 1 ? moreWidth + gap : 0;
+                if (used + w + reserve > containerWidth) {
+                    cutoff = i;
+                    break;
+                }
+                used += w;
+            }
+            // The active tab is never allowed to fall into the overflow menu --
+            // not itself measured live (Attio's own fixture never exercised
+            // navigating INTO an overflowed tab first), but "the tab you're on
+            // stays visible" is the safe, unsurprising default for any tab UI.
+            const activeIndex = tabs.findIndex((t) => t.value === active);
+            if (activeIndex >= 0 && activeIndex >= cutoff)
+                cutoff = activeIndex + 1;
+            setHiddenFrom(cutoff >= tabs.length ? null : cutoff);
+        };
+        recompute();
+        const ro = new ResizeObserver(recompute);
+        ro.observe(list);
+        return () => ro.disconnect();
+    }, [tabs, active]);
+    const hiddenTabs = hiddenFrom == null ? [] : tabs.slice(hiddenFrom);
     const { onKeyDown, tabIndexFor } = useTablistKeyboard({
         tabs,
         active,
         select,
         listRef,
     });
-    return (_jsxs("div", { className: tabsRecipe({ fill, className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
+    return (_jsxs("div", { className: tabsRecipe({ fill, className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t, i) => {
                         const selected = t.value === active;
-                        return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "crisp-tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
-                    }), indicator && (_jsx("span", { className: "crisp-tabs-indicator", style: {
+                        const overflowHidden = hiddenFrom != null && i >= hiddenFrom;
+                        return (_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, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
+                    }), _jsx("span", { ref: moreRef, className: "crisp-tabs-more", "data-tabs-overflow-hidden": hiddenTabs.length === 0 ? "" : undefined, children: _jsx(Menu, { "aria-label": moreMenuLabel, trigger: _jsxs("button", { type: "button", className: "crisp-tabs-tab", children: [_jsx("span", { className: "tabs-tab-label", children: moreLabel(hiddenTabs.length) }), _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), children: hiddenTabs.map((t) => (_jsxs(MenuItem, { icon: t.icon, onSelect: () => select(t.value), children: [t.label, t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value))) }) }), indicator && (_jsx("span", { className: "crisp-tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,
                         } }))] }), children && (_jsx("div", { className: "crisp-tabs-panel", role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), 

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

@@ -54,6 +54,19 @@ const config = defineRecipe({
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 ${c.space["1"]}; border-radius: 4px; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: 10px; line-height: 14px; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    /* crisp#863: the "+N more" overflow trigger, measured live -- its
+       computed style is identical to a plain .crisp-tabs-tab (same pill,
+       same 6px icon/label gap the tab class already gives via
+       space["1.5"]), and the dropdown it opens is crisp's own Menu/
+       MenuItem chrome (already matches Attio's popover, nothing new to
+       style there). Only the wrapper needs a rule: an overflowed tab (or
+       the trigger itself, when nothing is hidden) is taken out of the
+       flex row and out of the a11y tree without ever making its own
+       offsetWidth unmeasurable the way display:none would -- that's what
+       lets the tabs.tsx effect recompute the cutoff from cached widths on
+       every resize with no flash of an unclipped row. */
+    & .crisp-tabs-more { display: inline-flex; }
+    & [data-tabs-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${c.space["8"]}; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,

package/dist/esm/components/textlink/textlink.js

@@ -7,7 +7,7 @@ import { textlinkRecipe } from "./textlink.recipe.js";
  * `event.preventDefault()` pairs it with client-side routing (e.g.
  * react-router's own `Link`).
  */
-export function TextLink({ tone = "muted", className, ...rest }) {
-    return _jsx("a", { className: textlinkRecipe({ tone, className }), ...rest });
+export function TextLink({ tone = "muted", size, className, ...rest }) {
+    return _jsx("a", { className: textlinkRecipe({ tone, size, className }), ...rest });
 }
 TextLink.displayName = "TextLink";

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

@@ -24,6 +24,24 @@ const config = defineRecipe({
             // that only goes brand on hover.
             muted: `font-size: ${c.text.md}; font-weight: ${c.weight.regular}; color: ${c.fgMuted}; &:hover { color: ${c.bgBrandSolid}; }`,
         },
+        // crisp#874: an explicit, OPTIONAL size override -- no `defaultVariants`
+        // entry below, so omitting `size` emits no `--size_*` class at all and
+        // each tone's own hard-coded font-size (above) stands completely
+        // unchanged. Only when a caller passes `size` explicitly does this
+        // override it: `size`'s CSS block is emitted AFTER `tone`'s in the
+        // generated stylesheet (`generate-recipes.mjs` walks `variants` in
+        // object-key order), so at equal specificity it wins the cascade.
+        // Measured live (a running GRC server, `getComputedStyle`):
+        // internal/grc's two primary-column record links
+        // (routes/lists/Lists.tsx:51, routes/registers/Registers.tsx:63) are
+        // 14px/500 ambient, inherited from DataTable's own
+        // `.crisp-datatable-entity-name` -- `size="lg"` matches that context
+        // without changing `brand`'s weight/colour.
+        size: {
+            sm: `font-size: ${c.text.sm};`,
+            md: `font-size: ${c.text.md};`,
+            lg: `font-size: ${c.text.lg};`,
+        },
     },
     defaultVariants: { tone: "muted" },
     compoundVariants: [],

package/dist/esm/product/recordpage/recordpage.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Share2, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
@@ -38,8 +38,12 @@ export const recordPageLabels = {
     copyRecordLink: "Copy record link",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
-    logANote: "Log a note",
-    createATask: "Create a task",
+    // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
+    // task" — the field names stay, only the visible text changes to match
+    // Attio's own React-tooltip strings on these two icon buttons exactly).
+    logANote: "New note",
+    createATask: "New task",
+    runWorkflow: "Run workflow",
     fullScreen: "Full screen",
     exitFullScreen: "Exit full screen",
     resizeDetails: "Resize details column",
@@ -419,7 +423,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }) {
+export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
@@ -528,6 +532,15 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         },
     ];
     const highlights = highlightsProp === undefined ? defaultHighlights : highlightsProp;
+    // #865: the built-in CRM icon set for the quick-action row, used when the
+    // caller omits `quickActions` -- same "caller's own list, not a merge"
+    // choice `tabs` (#379) and `highlights` (#528) already make.
+    const defaultQuickActions = [
+        { label: t.logANote, icon: FileText },
+        { label: t.runWorkflow, icon: Workflow },
+        { label: t.createATask, icon: SquareCheck },
+    ];
+    const quickActions = quickActionsProp ?? defaultQuickActions;
     const ti = { size: 15, strokeWidth: 1.75 };
     const builtinTabs = [
         { value: "overview", label: t.tabs.overview, icon: _jsx(LayoutGrid, { ...ti }) },
@@ -636,7 +649,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.

package/dist/esm/tokens/elevation.js

@@ -56,4 +56,11 @@ export const elevation = {
      * nobody measured for them.
      */
     fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
+    /**
+     * Select's own listbox shadow (crisp/#867) — seed-design's `$shadow.s3`, a
+     * single layer, NOT `floating` above. This component follows seed, not
+     * Attio, for the same reason `DatePicker` follows seed's calendar
+     * structure: an explicit owner request to match seed-design exactly.
+     */
+    selectFloating: `0 4px 16px ${c.shadowSelect}`,
 };