@crisp-ui-kit/crisp 0.54.1 → 0.54.3

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskstableRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A grouped due-date table — Attio's Tasks page (app.attio.com/<ws>/tasks),
+// measured live and recorded on crisp#462. Composes ListPage's own toolbar
+// (`.crisp-listpage-toolbar`) and group-row (`.crisp-listpage-group`) chrome
+// by carrying BOTH this recipe's root class and `listpageRecipe`'s root class
+// on the same element (see taskstable.tsx) -- both recipes' descendant rules
+// nest under their own root class, so this is a safe, ordinary composition,
+// the same way `<ListRow>` already lets a caller compose into `ListPage`'s
+// group bodies. Real deviation: ListPage's own `columns` colhead slot is
+// pinned to `c.size.menuRow` (32px, correct for its Reports/Sequences
+// reference surfaces per #479) but Tasks/Notes independently measure a 49px
+// column-header row (#462) -- ListPage's colhead can't be asked to render at
+// a different height per consumer today, so this component renders its own
+// colhead instead of using that slot. Flagged in the PR, not fixed here (out
+// of scope: don't change ListPage for this component).
+const config = (0, core_1.defineRecipe)({
+    name: "taskstable",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-taskstable-colhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-height: 49px; max-height: 49px; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; box-shadow: inset 0 -1px 0 ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+
+    & .crisp-taskstable-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-taskstable-cell { display: flex; align-items: center; min-width: 0; }
+
+    & .crisp-taskstable-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .crisp-taskstable-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+    & .crisp-taskstable-check:checked { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskstable-check:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+
+    & .crisp-taskstable-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-taskstable-due { font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgMuted}; white-space: nowrap; }
+    & .crisp-taskstable-due[data-overdue] { color: ${tokens_1.contract.fgDanger}; }
+
+    & .crisp-taskstable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["4"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.taskstableRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./themepicker"), exports);

package/dist/cjs/product/themepicker/themepicker.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemePicker = ThemePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const radiogroup_1 = require("../../components/radiogroup");
+const core_1 = require("../../core");
+const themepicker_recipe_1 = require("./themepicker.recipe");
+const OPTIONS = ["light", "dark", "system"];
+function PreviewSwatch({ swatch }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-themepicker-preview", "data-swatch": swatch, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-themepicker-preview-side", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-themepicker-preview-main", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-themepicker-preview-bar" })] })] }));
+}
+/**
+ * A light/dark/system theme picker — three cards, each a small preview of
+ * what that option looks like, radio-selectable. See the recipe's own doc
+ * comment for the live Attio measurement (crisp#462 gap 4) and for why the
+ * preview swatch colours are literal rather than `var(--crisp-*)` tokens.
+ */
+function ThemePicker({ value, onChange, labels, className, ...rest }) {
+    const lightLabel = (0, core_1.useCrispMessage)(labels?.light, "Light");
+    const darkLabel = (0, core_1.useCrispMessage)(labels?.dark, "Dark");
+    const systemLabel = (0, core_1.useCrispMessage)(labels?.system, "System");
+    const labelFor = {
+        light: lightLabel,
+        dark: darkLabel,
+        system: systemLabel,
+    };
+    const { onKeyDown, groupRef } = (0, radiogroup_1.useRadioGroupKeyboard)({
+        select: (v) => onChange(v),
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: groupRef, className: (0, themepicker_recipe_1.themepickerRecipe)({ className }), role: "radiogroup", onKeyDown: onKeyDown, ...rest, children: OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "radio", "aria-checked": value === option, "data-value": option, className: "crisp-themepicker-option", "data-selected": value === option ? "" : undefined, onClick: () => onChange(option), children: [(0, jsx_runtime_1.jsx)(PreviewSwatch, { swatch: option }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-themepicker-label", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-themepicker-radio", "aria-hidden": "true" }), labelFor[option]] })] }, option))) }));
+}
+ThemePicker.displayName = "ThemePicker";

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themepickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A theme picker (crisp#571) — measured live at
+// app.attio.com/<ws>/settings/appearance (Settings -> Appearance -> Theme,
+// its "Light" / "Dark" / "System" tiles):
+// each option is a 224x152 card, 16px radius, on a flex row with an 8px
+// gap. Selected carries a 1px solid brand-blue border (theme-constant
+// #266df0, matches `bgBrandSolid`); unselected carries the ordinary
+// hairline (`borderSubtle`). Inside, a ~214x114 mock-UI preview card sits
+// on the same 12px radius / 1px hairline chrome the real Sidebar itself
+// uses, with a label row below (a radio dot + 14px/500 text, `fgPrimary`
+// when selected, muted when not).
+//
+// The preview card's OWN colours are deliberately literal, not `var(--crisp-*)`
+// tokens: they must show what "Light"/"Dark" look like regardless of the
+// picker's own ambient theme (a dark-mode app still needs its "Light" tile
+// to render light), and crisp's token system only has one live value per
+// custom property at a time -- there's no way to force a light subtree
+// inside a dark ancestor without one. This is also how Attio's own tiles
+// behave: their preview is a fixed illustration asset, not theme-reactive
+// markup (confirmed by reading the SVG's own baked-in fills while the app
+// itself was in light mode: the "Dark" tile's fills were already dark).
+// The literals below are simply the EXISTING dual-theme tokens' own two
+// values, spelled out per swatch rather than invented fresh: bgSidebar
+// (#fbfbfb / #0e0f10), gray00/bgSurface (#ffffff / #0a0a0a), borderSubtle
+// (#eeeff1 / #1c1d1f) -- each matches what Attio's own SVG measured
+// (#0B0C0D-#101112 range for backgrounds, #1B1C1F for dividers) closely
+// enough to treat as the same token rather than a fresh, barely-different
+// one. `bgBrandSolid` (#266df0) IS referenced live since it's already
+// theme-constant.
+//
+// "System" mirrors the OS's own effective scheme via `prefers-color-scheme`,
+// not a guessed split illustration: this session's own System tile
+// rendered with the SAME fills as the Light tile while the OS/browser
+// reported light -- reads as "follows the OS", not a fixed half-and-half
+// image there's no other evidence for.
+//
+// The mock-UI content inside each preview card (Attio's own hand-drawn
+// sidebar/content wireframe SVG) is NOT reproduced pixel-for-pixel here --
+// that illustration is decorative, not a measured design value, so this
+// recipe draws a simplified schematic (a sidebar block + a few content
+// bars) instead of a bespoke SVG asset.
+//
+// Attio's unselected label reads a black-alpha `rgba(0,0,0,0.63)`, the
+// same pattern SettingsSection's own subtitle measured (crisp#522) and
+// left unresolved for the same reason: no confirmed dark-mode value yet.
+// `fgMuted` is used here as the closest existing (and already dual-theme)
+// token rather than repeating an unmeasured-in-dark literal.
+const config = (0, core_1.defineRecipe)({
+    name: "themepicker",
+    base: `display: flex; gap: ${tokens_1.contract.space["2"]}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-themepicker-option { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 224px; padding: ${tokens_1.contract.space["1"]}; border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 16px; background: ${tokens_1.contract.bgSurface}; cursor: pointer; font-family: inherit; }
+    & .crisp-themepicker-option[data-selected] { border-color: ${tokens_1.contract.bgBrandSolid}; }
+
+    & .crisp-themepicker-preview { box-sizing: border-box; display: flex; width: 100%; height: 114px; padding: ${tokens_1.contract.space["2"]}; gap: ${tokens_1.contract.space["1.5"]}; border-radius: ${tokens_1.contract.radius.xl}; overflow: hidden; }
+    & .crisp-themepicker-preview-side { flex-shrink: 0; width: 28%; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-themepicker-preview-bar { height: 4px; border-radius: ${tokens_1.contract.radius.full}; }
+    & .crisp-themepicker-preview-bar:nth-child(1) { width: 70%; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-themepicker-preview-bar:nth-child(2) { width: 90%; }
+    & .crisp-themepicker-preview-bar:nth-child(3) { width: 60%; }
+    & .crisp-themepicker-preview-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["1.5"]}; border-radius: ${tokens_1.contract.radius.md}; }
+
+    /* Light / System (default) swatch colours. */
+    & .crisp-themepicker-preview[data-swatch="light"],
+    & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #eeeff1; background: #fbfbfb; }
+    & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)),
+    & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main,
+    & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar,
+    & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
+
+    /* Dark swatch colours -- always for "dark", and for "system" only
+       when the OS itself reports dark. */
+    & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; }
+    @media (prefers-color-scheme: dark) {
+      & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #1c1d1f; background: #0e0f10; }
+      & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
+      & [data-swatch="system"] .crisp-themepicker-preview-main { background: #0a0a0a; }
+      & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; }
+    }
+
+    & .crisp-themepicker-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-label { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-themepicker-radio { flex-shrink: 0; width: 14px; height: 14px; border-radius: ${tokens_1.contract.radius.full}; border: 1px solid ${tokens_1.contract.borderDefault}; box-sizing: border-box; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-radio { border: 4px solid ${tokens_1.contract.bgBrandSolid}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.themepickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/tokens/palette.js

@@ -12,6 +12,14 @@ exports.palette = {
     gray900: { light: "#101112", dark: "#f5f5f5" },
     line200: { light: "#e4e4e7", dark: "#212224" },
     line100: { light: "#eeeff1", dark: "#1c1d1f" },
+    // ImportDialog's dropzone border — measured live from Attio's Import CSV
+    // flow (`rgb(230,231,234)`), distinct from `line200`/`line100` (#e4e4e7 /
+    // #eeeff1 are close but not equal, and AUTHORING's dimensional-scale rule
+    // against rounding a measurement to fit an existing token applies to color
+    // too). Dark value not independently re-measured (Attio's dark theme is
+    // off-limits to toggle, same restriction as `ringField`/`ringSwitch`) —
+    // reuses `line200`'s dark line colour rather than inventing a new one.
+    line150: { light: "#e6e7ea", dark: "#212224" },
     ringNeutral: { light: "transparent", dark: "#212224" },
     // Text-entry fields (Input, Textarea) — measured live on app.attio.com's
     // Settings page, a real typed field: `inset 0 0 0 1px rgba(0,0,0,.06)`,
@@ -52,6 +60,15 @@ exports.palette = {
     // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
     // destructive control needs the same white-bearing fill in both themes.
     red700: { light: "#ba2525", dark: "#ba2525" },
+    // The #EB3B3B named in red700's own comment above (destructive menu text) —
+    // it had never actually been given a token. Independently re-measured live
+    // on `app.attio.com/.../tasks`, `rgb(235,59,59)`, as the overdue due-date
+    // text colour on the Tasks page (crisp#462) — same hex, second surface.
+    // Dark not independently re-measured (Attio's theme toggle is off-limits,
+    // same restriction noted throughout this file); reuses red600's dark value,
+    // the same "brightens for legibility on a dark surface" tone this red
+    // already sits next to, rather than inventing a third red.
+    red500: { light: "#eb3b3b", dark: "#ff5a5f" },
     // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
     // measured from @seed-design/css. A high-contrast neutral rather than a brand
     // hue: the ring reads as "this field has focus", not as a state colour.
@@ -101,17 +118,17 @@ exports.palette = {
     // Badge's soft-neutral text, so darkening it doesn't move any other surface.
     softNeutralText: { light: "#686870", dark: "#9a9aa2" },
     // Badge's purple/role-pill tone (crisp#506) -- measured live off Attio's
-    // own role pill ("Admin", app.attio.com/<ws>/settings/workspace/members):
-    // background rgb(245,240,255), text rgb(98,56,181). The ring re-uses a
-    // second, independent measurement from the same session (a company's
-    // Categories tag pill sharing the identical background, "Broadcasting",
-    // app.attio.com/<ws>/companies) at rgb(232,221,254) -- same hue family,
-    // cross-validated rather than guessed. Dark mode was NOT measured (no
-    // live Attio session was reachable when this tone was added) -- these
-    // three light values are reused as-is for dark rather than an invented
-    // "brightened" guess (Lesson: don't add unmeasured "robustness"). Needs a
-    // real dark-mode measurement before this note can be removed.
-    purpleTint: { light: "#f5f0ff", dark: "#f5f0ff" },
-    softPurpleText: { light: "#6238b5", dark: "#6238b5" },
-    purpleRing: { light: "#e8ddfe", dark: "#e8ddfe" },
+    // own role pill ("Admin", app.attio.com/<ws>/settings/members-and-teams):
+    // background rgb(245,240,255), text rgb(98,56,181), ring rgb(232,221,254)
+    // (cross-validated against a second, independent pill sharing the
+    // identical background, a company's "Broadcasting" Categories tag).
+    // Dark mode (crisp#566) measured the same way, after switching Attio's
+    // own Appearance setting to Dark, reading the pill, then switching back
+    // to Light to restore the original state: background rgb(47,30,90),
+    // text rgb(216,196,255), ring rgb(69,41,125) -- verify-the-right-element
+    // note: the pill's own wrapper span inherits an unstyled rgb(241,242,243)
+    // text colour; the real styled colour sits on its nested leaf text node.
+    purpleTint: { light: "#f5f0ff", dark: "#2f1e5a" },
+    softPurpleText: { light: "#6238b5", dark: "#d8c4ff" },
+    purpleRing: { light: "#e8ddfe", dark: "#45297d" },
 };

package/dist/cjs/tokens/semantic.js

@@ -13,6 +13,8 @@ exports.semantic = {
     bgRaised: "gray50",
     borderDefault: "line200",
     borderSubtle: "line100",
+    /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
+    borderDropzone: "line150",
     ringNeutral: "ringNeutral",
     ringField: "ringField",
     ringSwitch: "ringSwitch",
@@ -32,6 +34,10 @@ exports.semantic = {
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
     bgDangerSolid: "red700",
+    /** Solid critical/destructive TEXT (not a fill) — an overdue due-date, a
+     * destructive menu item's label. Distinct from `bgDanger` (a fill colour)
+     * and `fgDangerSoft` (a soft badge pill's text, a different measured hex). */
+    fgDanger: "red500",
     /** The 2px ring a text field shows while focused. */
     strokeFieldFocus: "fieldFocus",
     /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */

package/dist/datatable.css

@@ -46,6 +46,9 @@
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
@@ -63,23 +66,25 @@
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
-    /* The rejection's message, beside the cell's own content -- a sibling in the TableCell, never nested inside a column's own render output, so a
-       hover-only wrapper (a Tooltip, say) around a custom render can't hide it. Block-level: the row grows to fit it rather than floating over the row below, so it can never end up clipped by the scroll container's overflow the way a position:fixed escape would need
-       guarding against. */
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so
-       the cell IS the picker: same chromeless-fill treatment as
-       RecordsTable's own --picker cells (measured there already; DataTable shares RecordsTable's grid, Golden Rule 0). */
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* 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*. */
+    /* 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: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
@@ -96,12 +101,7 @@
     & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -114,11 +114,10 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

package/dist/datatable.layered.css

@@ -47,6 +47,9 @@
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
@@ -64,23 +67,25 @@
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
-    /* The rejection's message, beside the cell's own content -- a sibling in the TableCell, never nested inside a column's own render output, so a
-       hover-only wrapper (a Tooltip, say) around a custom render can't hide it. Block-level: the row grows to fit it rather than floating over the row below, so it can never end up clipped by the scroll container's overflow the way a position:fixed escape would need
-       guarding against. */
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so
-       the cell IS the picker: same chromeless-fill treatment as
-       RecordsTable's own --picker cells (measured there already; DataTable shares RecordsTable's grid, Golden Rule 0). */
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* 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*. */
+    /* 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: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
@@ -97,12 +102,7 @@
     & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -115,11 +115,10 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

package/dist/emptystate.css

@@ -3,7 +3,16 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: var(--crisp-space-2); margin-top: var(--crisp-space-6); text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3) var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: 1px solid var(--crisp-border-subtle); border-radius: 18px; background: var(--crisp-bg-surface); font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-emptystate-learnmore-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
 }
 .crisp-emptystate--variant_default {
   
@@ -18,3 +27,8 @@
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
+.crisp-emptystate--variant_records {
+  & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
+}

package/dist/emptystate.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface EmptystateVariants {
-  variant?: "default" | "illustrated" | "page";
+  variant?: "default" | "illustrated" | "page" | "records";
 }
 
-export declare const emptystateRecipe: RecipeFn<{ variant: { default: string; illustrated: string; page: string } }>;
+export declare const emptystateRecipe: RecipeFn<{ variant: { default: string; illustrated: string; page: string; records: string } }>;

package/dist/emptystate.layered.css

@@ -4,7 +4,16 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: var(--crisp-space-2); margin-top: var(--crisp-space-6); text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3) var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: 1px solid var(--crisp-border-subtle); border-radius: 18px; background: var(--crisp-bg-surface); font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-emptystate-learnmore-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
 }
 .crisp-emptystate--variant_default {
   
@@ -19,4 +28,9 @@
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
+.crisp-emptystate--variant_records {
+  & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
+}
 }

package/dist/esm/components/chip/chip.js

@@ -16,7 +16,8 @@ import { chipRecipe } from "./chip.recipe.js";
  * that surface can be measured; don't guess the icon, its hit target, or its
  * spacing from the label.
  */
-export const Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
-    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, className }), ...props, children: children }));
+export const Chip = React.forwardRef(({ tone, truncate, className, asChild, children, ...props }, ref) => {
+    const content = truncate && !asChild && typeof children === "string" ? (_jsx("span", { className: "crisp-chip-label", children: children })) : (children);
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, truncate, className }), ...props, children: content }));
 });
 Chip.displayName = "Chip";

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

@@ -17,7 +17,16 @@ const spec = defineSpec({
     base: {
         display: "inline-flex",
         alignItems: "center",
+        // Measured on Attio's own multi-child chip (Tasks page, "Assigned to"
+        // column: a 16px avatar + name in a neutral chip) -- the 3px gap between
+        // them. A single plain-text child (the only case before PersonChip) is
+        // unaffected, since `gap` does nothing with one flex child.
+        gap: "3px",
         height: c.size.chip,
+        // Lets the chip shrink below its content width inside a flex/grid cell
+        // -- `inline-flex` items don't by default -- which `truncate` below
+        // depends on and any consumer constraining a Chip's width already needs.
+        minWidth: 0,
         paddingInline: c.space["1"],
         borderRadius: c.radius.chip,
         fontSize: c.text.lg,
@@ -26,6 +35,33 @@ const spec = defineSpec({
         whiteSpace: "nowrap",
     },
     variants: {
+        truncate: {
+            // Ellipsis + `min-width: 0`, the same convention crisp's own
+            // `.crisp-datatable-entity-name`/`.crisp-datatable-th-label` already
+            // use for cramped text -- there is no single-overflowing-chip pattern
+            // to measure from Attio itself (its multi-value fields show a "+N"
+            // badge instead of truncating one chip's own text: Categories,
+            // Companies). Targets `.crisp-chip-label`, the inner span `Chip`
+            // wraps its string children in when `truncate` is set, not the root
+            // -- the root stays a flex row so a leading icon/avatar never shrinks
+            // alongside the text.
+            true: {
+                decls: {},
+                parts: [
+                    {
+                        selector: "& .crisp-chip-label",
+                        decls: {
+                            minWidth: 0,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            display: "block",
+                        },
+                    },
+                ],
+            },
+            false: {},
+        },
         tone: {
             neutral: {
                 background: soft(c.fgPrimary, 6),
@@ -69,7 +105,7 @@ const spec = defineSpec({
             },
         },
     },
-    defaultVariants: { tone: "neutral" },
+    defaultVariants: { tone: "neutral", truncate: false },
 });
 const config = specToRecipe(spec);
 export const chipRecipe = Object.assign(resolveRecipe(config), { config });