@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/assigneepicker.css

@@ -0,0 +1,13 @@
+.crisp-assigneepicker {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: var(--crisp-font-sans);
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-3); color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; color: var(--crisp-fg-primary); }
+    & .crisp-assigneepicker-search-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+    & .crisp-assigneepicker-empty { padding: var(--crisp-space-4) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: var(--crisp-space-1); list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: var(--crisp-bg-raised); }
+}

package/dist/assigneepicker.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface AssigneepickerVariants {
+
+}
+
+export declare const assigneepickerRecipe: RecipeFn<{  }>;

package/dist/assigneepicker.layered.css

@@ -0,0 +1,15 @@
+@layer crisp-components {
+.crisp-assigneepicker {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: var(--crisp-font-sans);
+    & .crisp-assigneepicker-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-3); color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; color: var(--crisp-fg-primary); }
+    & .crisp-assigneepicker-search-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+    & .crisp-assigneepicker-empty { padding: var(--crisp-space-4) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: var(--crisp-space-1); list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: var(--crisp-bg-raised); }
+}
+}

package/dist/button.css

@@ -24,6 +24,9 @@
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
+.crisp-button--size_xs {
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); line-height: 16px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+}
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);
     &[data-icon-start] { padding-inline-start: var(--crisp-space-1-5); }

package/dist/button.d.ts

@@ -2,9 +2,9 @@ import type { RecipeFn } from "../core/types";
 
 export interface ButtonVariants {
   intent?: "primary" | "neutral" | "danger" | "ghost";
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "xs" | "md" | "lg";
   shape?: "text" | "icon";
   touchTarget?: boolean;
 }
 
-export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; md: string; lg: string }; shape: { text: string; icon: string }; touchTarget: { true: string; false: string } }>;
+export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; xs: string; md: string; lg: string }; shape: { text: string; icon: string }; touchTarget: { true: string; false: string } }>;

package/dist/button.layered.css

@@ -25,6 +25,9 @@
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
+.crisp-button--size_xs {
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); line-height: 16px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+}
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);
     &[data-icon-start] { padding-inline-start: var(--crisp-space-1-5); }

package/dist/chip.css

@@ -2,7 +2,7 @@
   display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; max-width: 100%; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
 }
 .crisp-chip--truncate_true {
-  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+  & .crisp-chip-label { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; display: block; }
 }
 .crisp-chip--truncate_false {
   

package/dist/chip.layered.css

@@ -3,7 +3,7 @@
   display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; max-width: 100%; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
 }
 .crisp-chip--truncate_true {
-  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+  & .crisp-chip-label { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; display: block; }
 }
 .crisp-chip--truncate_false {
   

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -55,7 +55,7 @@ function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className,
     return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-breadcrumb-item", href: item.href, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-breadcrumb-item", href: item.href, onClick: item.onClick, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
         }) }));
 }
 Breadcrumb.displayName = "Breadcrumb";

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

@@ -124,6 +124,39 @@ const spec = (0, core_1.defineSpec)({
                 fontSize: tokens_1.contract.text.md,
                 borderRadius: tokens_1.contract.radius.md,
             },
+            // crisp#688: Attio's own 20px small button, split out of #682 rather
+            // than redefining `sm` -- 72 existing `size="sm"` call sites (sidebar,
+            // comments, recordpage, workspacegeneralsettings, personchip,
+            // datatable) already rely on sm's 24px, unverified against `xs`'s own
+            // context. Box measured live on app.attio.com Home/Tasks ("View all",
+            // "Today, <date>", the date-stepper's Previous/Next-day icon
+            // buttons): 20px height, 6px radius, 6px inline padding on text
+            // buttons (a 20x20 icon-only button centers a 16px icon the same way
+            // shape="icon" already does for every other size, so it needs no
+            // extra rule), 4px gap between multiple children.
+            //
+            // Follow-up correction (still #688): the label is 12px/500(medium)/
+            // 16px line-height/normal tracking -- NOT #682's 14px button tracking,
+            // and NOT the 10px/regular/15px this file shipped with first. That
+            // first pass read getComputedStyle on the `<button>` element itself;
+            // Attio's actual label lives in an inner `<div>` that overrides
+            // font-size/weight/line-height on top of it (confirmed by walking the
+            // full child tree, on "View all" AND "Today, <date>", both Home and
+            // the savedviews toolbar's own "Save for everyone") -- the outer
+            // button's own 10px/400/15px is real but never what's on screen.
+            // 12px is already `c.text.sm` and 500 is already the base's own
+            // default `fontWeight` (no override needed for either); only
+            // line-height and tracking still diverge from the base's 20px/
+            // -0.07px and need their own values here.
+            xs: {
+                height: "20px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: tokens_1.contract.text.sm,
+                lineHeight: "16px",
+                letterSpacing: "normal",
+                borderRadius: tokens_1.contract.radius.sm,
+                gap: tokens_1.contract.space["1"],
+            },
             md: {
                 decls: {
                     height: "28px",

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

@@ -76,7 +76,9 @@ const spec = (0, core_1.defineSpec)({
                         selector: "& .crisp-chip-label",
                         decls: {
                             minWidth: 0,
-                            overflow: "hidden",
+                            // #719: `clip`, not `hidden` -- immune to a programmatic
+                            // `scrollLeft` assignment; renders the ellipsis identically.
+                            overflow: "clip",
                             textOverflow: "ellipsis",
                             whiteSpace: "nowrap",
                             display: "block",

package/dist/cjs/components/datatable/datatable.js

@@ -428,14 +428,17 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => col.swatches?.[t] ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[t], children: t }, t)) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
             if (!s)
                 return empty;
-            // tone is looked up by the RAW status, so formatting the label (casing,
-            // translation) can never silently repaint the chip
+            // tone/swatch is looked up by the RAW status, so formatting the label
+            // (casing, translation) can never silently repaint the chip
+            if (col.swatches?.[s]) {
+                return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-swatch", "data-swatch": col.swatches[s], children: display || s }));
+            }
             return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         case "rating": {

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

@@ -116,7 +116,13 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    /* #719: overflow: clip, not hidden, on every truncation rule below --
+       hidden still honours a programmatic scrollLeft assignment (found via
+       a screenshot tool that pans anything with scrollWidth > clientWidth),
+       blanking or fragmenting the visible text even though real user
+       scrolling was already blocked. clip renders the ellipsis identically
+       and leaves no scroll position to move. */
+    & .crisp-datatable-th-label { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     /* #465: 12px per the comment above (and Attio's measured header cell
        padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
        own documented value. */
@@ -203,7 +209,7 @@ const config = (0, core_1.defineRecipe)({
     /* reference picker: a leading 16px avatar per option, plus a trailing
        "Create X" row when the consumer supplies one (#449) -- same measured
        values as RecordsTable's own .crisp-recordstable-refoption*. */
-    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
@@ -289,7 +295,7 @@ const config = (0, core_1.defineRecipe)({
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
     /* #893: shared by the button (onEntityClick, a different record) and
        the anchor (href, the row's own record) -- was button-only, which
        silently left a real <a> unstyled the day #893 added one. */
@@ -312,9 +318,24 @@ const config = (0, core_1.defineRecipe)({
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnTone}; background: ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: ${tokens_1.contract.radius.full}; }
-    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarningSolid}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; color: ${tokens_1.contract.fgOnTone}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; color: ${tokens_1.contract.fgOnTone}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
@@ -325,6 +346,24 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; white-space: nowrap; color: ${tokens_1.contract.fgTagSwatch}; }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
@@ -335,7 +374,7 @@ const config = (0, core_1.defineRecipe)({
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
-    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
     /* phone cell type/editor (#765) -- measured live: the dial-code prefix
        is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -58,7 +58,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", width = "full", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = (0, core_1.useCrispMessage)(placeholderProp, "Set date…");
     const clearLabel = (0, core_1.useCrispMessage)(clearLabelProp, "Clear date");
@@ -79,7 +79,7 @@ function DatePickerField({ value, defaultValue, onValueChange, onChange, placeho
         onValueChange?.(null);
         onChange?.(null);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ width, className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
                             // DatePickerProps is a union over selectionMode, and TypeScript
                             // cannot narrow it through a spread: it tries every branch and
                             // reports the range one as missing props. The field is always

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

@@ -13,7 +13,7 @@ const config = (0, core_1.defineRecipe)({
     display: inline-flex; font-family: ${tokens_1.contract.font.sans};
 
     & .crisp-datepickerfield-box {
-      display: inline-flex; align-items: center;
+      display: inline-flex; align-items: center; width: 100%;
       box-sizing: border-box; height: 32px; margin: 0;
       border-radius: ${tokens_1.contract.radius.md}; background: transparent;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
@@ -22,6 +22,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     & .crisp-datepickerfield-trigger {
+      flex: 1; min-width: 0;
       display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
       height: 100%; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0;
       border: none; background: none; color: inherit; font-family: inherit;
@@ -51,8 +52,20 @@ const config = (0, core_1.defineRecipe)({
     }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // crisp#980: full (default) fills its container, matching Select's own
+        // width variant/default -- so a form composing DatePickerField alongside
+        // Input/Select via FormField gets one consistent column width across
+        // every field type, not just some of them. auto sizes to content, the
+        // behaviour every consumer got unconditionally before this.
+        width: {
+            full: `width: 100%;`,
+            auto: `width: auto;`,
+        },
+    },
+    defaultVariants: {
+        width: "full",
+    },
     compoundVariants: [],
 });
 exports.datepickerfieldRecipe = Object.assign((0, core_1.resolveRecipe)(config), {

package/dist/cjs/components/menu/menu.js

@@ -33,8 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
 exports.Menu = Menu;
-exports.MenuItem = MenuItem;
 exports.MenuCheckboxItem = MenuCheckboxItem;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuLabel = MenuLabel;
@@ -52,7 +52,7 @@ const MenuContext = React.createContext(null);
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
+function Menu({ trigger, children, align = "start", placement = "menu", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
     // The surface and the button that opens it were two unconnected nodes: the
     // menu/dialog had no id, so nothing could point at it, and no accessible
     // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
@@ -68,6 +68,7 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         onOpenChange?.(next);
     }, [openProp, onOpenChange]);
     const [up, setUp] = React.useState(false);
+    const [submenuAlign, setSubmenuAlign] = React.useState("start");
     const [pos, setPos] = React.useState({});
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
@@ -79,6 +80,38 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
+        if (placement === "submenu") {
+            // The content div is already in the DOM by this point (it's part of
+            // the same render this effect runs after, just not yet painted) so its
+            // real rendered size/padding are measurable, not guessed.
+            const content = contentRef.current;
+            const size = content?.getBoundingClientRect() ?? {
+                width: 200,
+                height: 0,
+            };
+            const padTop = content
+                ? Number.parseFloat(getComputedStyle(content).paddingTop) || 0
+                : 0;
+            const { style, align: side, up: flipUp, } = (0, core_1.placeSubmenu)({
+                // Not a `{...rect}` spread: DOMRect's numeric fields are accessors
+                // on its prototype, not own enumerable properties, so a spread
+                // silently drops everything except the two overridden below.
+                rect: {
+                    left: rect.left,
+                    right: rect.right,
+                    top: rect.top - padTop,
+                    bottom: rect.bottom - padTop,
+                },
+                size,
+                // Measured flush against the item, no gap (crisp#616).
+                gap: 0,
+                anchor: triggerRef.current,
+            });
+            setSubmenuAlign(side);
+            setUp(flipUp);
+            setPos(style);
+            return;
+        }
         const { style, up: flipUp } = (0, core_1.placeFloating)({
             rect,
             align,
@@ -144,12 +177,28 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
+    const { onKeyDown: onContentKeyDown, items } = (0, menu_keyboard_1.useMenuKeyboard)({
         open,
         close,
         dismiss: () => setOpen(false),
         contentRef,
     });
+    // Roving tabindex (crisp#964): every item hardcodes tabIndex={-1} for the
+    // arrow-key model above, which means none of them is ever a real Tab stop
+    // on its own -- kept in sync with wherever focus actually lands, same as
+    // MenuSheet's identical fix (#966).
+    const onContentFocus = React.useCallback((e) => {
+        for (const el of items())
+            el.tabIndex = -1;
+        e.target.tabIndex = 0;
+    }, [items]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const [first] = items();
+        if (first)
+            first.tabIndex = 0;
+    }, [open, items]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,
@@ -165,18 +214,25 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
     });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: contentClassName
                         ? `crisp-menu-content ${contentClassName}`
-                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": placement === "submenu" ? submenuAlign : align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
-function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {
+/**
+ * A row inside a `Menu`. Forwards its ref and spreads unrecognised button
+ * props (crisp#616) so it can double as another `Menu`'s own `trigger` —
+ * `Menu` clones its trigger with `ref`/`onClick`/`aria-*`, which a plain
+ * function component would silently drop.
+ */
+exports.MenuItem = React.forwardRef(function MenuItem({ children, icon, shortcut, count, trailingIcon, danger, disabled, onSelect, closeOnSelect = true, onClick, ...rest }, ref) {
     const ctx = React.useContext(MenuContext);
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `crisp-menu-item${danger ? " crisp-menu-item--danger" : ""}`, onClick: (e) => {
+            onClick?.(e);
             onSelect?.();
             if (closeOnSelect)
                 ctx?.close();
-        }, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), count != null && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-count", children: count }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })] }));
-}
-MenuItem.displayName = "MenuItem";
+        }, ...rest, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-count", children: count })), shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-shortcut", children: shortcut })), trailingIcon] }));
+});
+exports.MenuItem.displayName = "MenuItem";
 function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
     return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "crisp-menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-menu-item-check", size: 15, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-check--placeholder" })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-menu-item-label", children: children })] }));
 }

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

@@ -57,6 +57,9 @@ function toneFor(t) {
     return TONES[h % TONES.length];
 }
 function Chip({ opt }) {
+    if (opt.swatch) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-multiselect-swatch", "data-swatch": opt.swatch, children: opt.label }));
+    }
     return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
 }
 /**

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

@@ -107,6 +107,24 @@ const config = (0, core_1.defineRecipe)({
     .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgPurple} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgCyan} 30%, transparent); }
     .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgOrange} 30%, transparent); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- flat black text, no
+       ring/border, unlike the tone family above. 7px radius/10px text are
+       measured literals, no matching step in the shared scale (same as
+       Select's own .crisp-select-swatch). */
+    .crisp-multiselect-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: ${tokens_1.contract.fgTagSwatch}; }
+    .crisp-multiselect-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    .crisp-multiselect-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    .crisp-multiselect-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    .crisp-multiselect-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    .crisp-multiselect-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    .crisp-multiselect-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    .crisp-multiselect-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    .crisp-multiselect-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    .crisp-multiselect-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    .crisp-multiselect-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    .crisp-multiselect-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    .crisp-multiselect-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
   `,
     variants: {
         // Owner's follow-up after #867/#879/#882 (crisp/#889): SIZE is Attio's

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

@@ -217,7 +217,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, size, invalid, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, "aria-readonly": readOnly ? "true" : undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-value", children: selectedOption ? (selectedOption.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": selectedOption.swatch, children: selectedOption.triggerLabel ?? selectedOption.label })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.triggerLabel ?? selectedOption.label] }))) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
                                         onSearchChange?.(e.target.value);
@@ -228,7 +228,7 @@ function Select({ options, value, defaultValue, onValueChange, name, required, p
                             // heading, not one each.
                             const showGroupLabel = opt.group !== undefined &&
                                 opt.group !== filtered[i - 1]?.group;
-                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-select-option-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-description", children: opt.description })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.label })), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
+                            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroupLabel && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-select-label", children: opt.group })), (0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [!opt.swatch && opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), opt.description !== undefined ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-select-option-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-description", children: opt.description })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-option-label", children: opt.swatch ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-select-swatch", "data-swatch": opt.swatch, children: opt.label })) : (opt.label) })), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] })] }, opt.value));
                         }))] }) }))] }));
 }
 Select.displayName = "Select";

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

@@ -137,6 +137,25 @@ const config = (0, core_1.defineRecipe)({
     .crisp-select-option[data-disabled] .crisp-select-option-description,
     .crisp-select-option[data-disabled] .crisp-select-option-check { color: ${tokens_1.contract.fgDisabled}; }
     .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: ${tokens_1.contract.radius.full}; margin-inline-end: ${tokens_1.contract.space["2"]}; }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- the label itself as a
+       filled pill, not a dot beside it. 7px radius/10px text have no
+       matching step in the shared scale (radius.xs is 4px, .sm is 6px;
+       text.xs is 11px), so both are the measured literals, same as
+       DataTable's own avatar font-size (#891). */
+    .crisp-select-swatch { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: 7px; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgTagSwatch}; }
+    .crisp-select-swatch[data-swatch="1"] { background: ${tokens_1.contract.bgTagSwatch1}; }
+    .crisp-select-swatch[data-swatch="2"] { background: ${tokens_1.contract.bgTagSwatch2}; }
+    .crisp-select-swatch[data-swatch="3"] { background: ${tokens_1.contract.bgTagSwatch3}; }
+    .crisp-select-swatch[data-swatch="4"] { background: ${tokens_1.contract.bgTagSwatch4}; }
+    .crisp-select-swatch[data-swatch="5"] { background: ${tokens_1.contract.bgTagSwatch5}; }
+    .crisp-select-swatch[data-swatch="6"] { background: ${tokens_1.contract.bgTagSwatch6}; }
+    .crisp-select-swatch[data-swatch="7"] { background: ${tokens_1.contract.bgTagSwatch7}; }
+    .crisp-select-swatch[data-swatch="8"] { background: ${tokens_1.contract.bgTagSwatch8}; }
+    .crisp-select-swatch[data-swatch="9"] { background: ${tokens_1.contract.bgTagSwatch9}; }
+    .crisp-select-swatch[data-swatch="10"] { background: ${tokens_1.contract.bgTagSwatch10}; }
+    .crisp-select-swatch[data-swatch="11"] { background: ${tokens_1.contract.bgTagSwatch11}; }
+    .crisp-select-swatch[data-swatch="12"] { background: ${tokens_1.contract.bgTagSwatch12}; }
     .crisp-select-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
     .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     .crisp-select-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: ${tokens_1.contract.fgNeutralSubtle}; }

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

@@ -24,7 +24,13 @@ const config = (0, core_1.defineRecipe)({
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
-    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    /* #719: overflow: clip, not hidden -- both render the ellipsis
+       identically, but hidden still honours a programmatic scrollLeft
+       assignment (a screenshot tool, a browser extension) even though it
+       already blocks user-driven wheel/scrollbar input; clip leaves no
+       scroll position for anything to move, so the truncated text can
+       never be panned out of view. */
+    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,