@crisp-ui-kit/crisp 0.54.1 → 0.54.3

package/dist/table.layered.css

@@ -1,16 +1,25 @@
 @layer crisp-components {
 .crisp-table {
-  display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
-    & .crisp-table-scroll { overflow-x: auto; }
+  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps` (style/className on this element), and the header/footer below pin inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, `overflow: auto`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
-       (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. */
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell (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: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
+    /* #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]`, z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid var(--crisp-border-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--crisp-border-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & caption { padding: var(--crisp-space-2) var(--crisp-space-2); text-align: start; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }

package/dist/tabs.css

@@ -11,9 +11,15 @@
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }
+.crisp-tabs--fill_true {
+  height: 100%;
+}
+.crisp-tabs--fill_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-tabs, .crisp-tabs * {

package/dist/tabs.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface TabsVariants {
-
+  fill?: boolean;
 }
 
-export declare const tabsRecipe: RecipeFn<{  }>;
+export declare const tabsRecipe: RecipeFn<{ fill: { true: string; false: string } }>;

package/dist/tabs.layered.css

@@ -12,9 +12,15 @@
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }
+.crisp-tabs--fill_true {
+  height: 100%;
+}
+.crisp-tabs--fill_false {
+  
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-tabs, .crisp-tabs * {

package/dist/taskstable.css

@@ -0,0 +1,23 @@
+.crisp-taskstable {
+  display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: var(--crisp-font-sans); color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-taskstable-colhead { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-height: 49px; max-height: 49px; padding: var(--crisp-space-2-5) var(--crisp-space-3); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-taskstable-row { display: flex; align-items: center; gap: var(--crisp-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: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 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, var(--crisp-fg-primary) 30%, transparent); }
+    & .crisp-taskstable-check:checked { background: var(--crisp-bg-brand-solid) 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 var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-taskstable-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskstable-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
+    & .crisp-taskstable-due[data-overdue] { color: var(--crisp-fg-danger); }
+    & .crisp-taskstable-empty { padding: var(--crisp-space-8) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-taskstable, .crisp-taskstable * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/taskstable.d.ts

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

package/dist/taskstable.layered.css

@@ -0,0 +1,25 @@
+@layer crisp-components {
+.crisp-taskstable {
+  display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: var(--crisp-font-sans); color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-taskstable-colhead { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-height: 49px; max-height: 49px; padding: var(--crisp-space-2-5) var(--crisp-space-3); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-taskstable-row { display: flex; align-items: center; gap: var(--crisp-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: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 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, var(--crisp-fg-primary) 30%, transparent); }
+    & .crisp-taskstable-check:checked { background: var(--crisp-bg-brand-solid) 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 var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-taskstable-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskstable-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
+    & .crisp-taskstable-due[data-overdue] { color: var(--crisp-fg-danger); }
+    & .crisp-taskstable-empty { padding: var(--crisp-space-8) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-taskstable, .crisp-taskstable * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/text.css

@@ -0,0 +1,9 @@
+.crisp-text {
+  display: inline;
+}
+.crisp-text--tone_default {
+  color: var(--crisp-fg-primary);
+}
+.crisp-text--tone_muted {
+  color: var(--crisp-fg-neutral-muted);
+}

package/dist/text.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface TextVariants {
+  tone?: "default" | "muted";
+}
+
+export declare const textRecipe: RecipeFn<{ tone: { default: string; muted: string } }>;

package/dist/text.layered.css

@@ -0,0 +1,11 @@
+@layer crisp-components {
+.crisp-text {
+  display: inline;
+}
+.crisp-text--tone_default {
+  color: var(--crisp-fg-primary);
+}
+.crisp-text--tone_muted {
+  color: var(--crisp-fg-neutral-muted);
+}
+}

package/dist/themepicker.css

@@ -0,0 +1,27 @@
+.crisp-themepicker {
+  display: flex; gap: var(--crisp-space-2); font-family: var(--crisp-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: var(--crisp-space-1-5); width: 224px; padding: var(--crisp-space-1); border: 1px solid var(--crisp-border-subtle); border-radius: 16px; background: var(--crisp-bg-surface); cursor: pointer; font-family: inherit; }
+    & .crisp-themepicker-option[data-selected] { border-color: var(--crisp-bg-brand-solid); }
+    & .crisp-themepicker-preview { box-sizing: border-box; display: flex; width: 100%; height: 114px; padding: var(--crisp-space-2); gap: var(--crisp-space-1-5); border-radius: var(--crisp-radius-xl); overflow: hidden; }
+    & .crisp-themepicker-preview-side { flex-shrink: 0; width: 28%; display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-themepicker-preview-bar { height: 4px; border-radius: var(--crisp-radius-full); }
+    & .crisp-themepicker-preview-bar:nth-child(1) { width: 70%; background: var(--crisp-bg-brand-solid); }
+    & .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: var(--crisp-space-1-5); padding: var(--crisp-space-1-5); border-radius: var(--crisp-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: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-label { color: var(--crisp-fg-primary); }
+    & .crisp-themepicker-radio { flex-shrink: 0; width: 14px; height: 14px; border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-default); box-sizing: border-box; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-radio { border: 4px solid var(--crisp-bg-brand-solid); }
+}

package/dist/themepicker.d.ts

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

package/dist/themepicker.layered.css

@@ -0,0 +1,29 @@
+@layer crisp-components {
+.crisp-themepicker {
+  display: flex; gap: var(--crisp-space-2); font-family: var(--crisp-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: var(--crisp-space-1-5); width: 224px; padding: var(--crisp-space-1); border: 1px solid var(--crisp-border-subtle); border-radius: 16px; background: var(--crisp-bg-surface); cursor: pointer; font-family: inherit; }
+    & .crisp-themepicker-option[data-selected] { border-color: var(--crisp-bg-brand-solid); }
+    & .crisp-themepicker-preview { box-sizing: border-box; display: flex; width: 100%; height: 114px; padding: var(--crisp-space-2); gap: var(--crisp-space-1-5); border-radius: var(--crisp-radius-xl); overflow: hidden; }
+    & .crisp-themepicker-preview-side { flex-shrink: 0; width: 28%; display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-themepicker-preview-bar { height: 4px; border-radius: var(--crisp-radius-full); }
+    & .crisp-themepicker-preview-bar:nth-child(1) { width: 70%; background: var(--crisp-bg-brand-solid); }
+    & .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: var(--crisp-space-1-5); padding: var(--crisp-space-1-5); border-radius: var(--crisp-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: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-label { color: var(--crisp-fg-primary); }
+    & .crisp-themepicker-radio { flex-shrink: 0; width: 14px; height: 14px; border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-default); box-sizing: border-box; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-radio { border: 4px solid var(--crisp-bg-brand-solid); }
+}
+}

package/dist/tokens.css

@@ -7,6 +7,7 @@
   --crisp-bg-raised: #f4f4f5;
   --crisp-border-default: #e4e4e7;
   --crisp-border-subtle: #eeeff1;
+  --crisp-border-dropzone: #e6e7ea;
   --crisp-ring-neutral: transparent;
   --crisp-ring-field: rgba(0,0,0,0.06);
   --crisp-ring-switch: #d9dade;
@@ -25,6 +26,7 @@
   --crisp-fg-muted: #71717a;
   --crisp-bg-danger: #e5484d;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #eb3b3b;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -59,6 +61,7 @@
   --crisp-bg-raised: #101112;
   --crisp-border-default: #212224;
   --crisp-border-subtle: #1c1d1f;
+  --crisp-border-dropzone: #212224;
   --crisp-ring-neutral: #212224;
   --crisp-ring-field: #212224;
   --crisp-ring-switch: #212224;
@@ -77,6 +80,7 @@
   --crisp-fg-muted: #9a9aa2;
   --crisp-bg-danger: #ff5a5f;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #ff5a5f;
   --crisp-stroke-field-focus: #f3f4f5;
   --crisp-fg-disabled: #5b606a;
   --crisp-bg-neutral-weak: #1d2025;
@@ -97,9 +101,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
-  --crisp-bg-purple-soft: #f5f0ff;
-  --crisp-fg-purple-soft: #6238b5;
-  --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-bg-purple-soft: #2f1e5a;
+  --crisp-fg-purple-soft: #d8c4ff;
+  --crisp-ring-purple-soft: #45297d;
 }
 
 :root {

package/dist/tokens.json

@@ -9,6 +9,7 @@
       "bgRaised": "#f4f4f5",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
+      "borderDropzone": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -27,6 +28,7 @@
       "fgMuted": "#71717a",
       "bgDanger": "#e5484d",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#eb3b3b",
       "strokeFieldFocus": "#1a1c20",
       "fgDisabled": "#d1d3d8",
       "bgNeutralWeak": "#f3f4f5",
@@ -60,6 +62,7 @@
       "bgRaised": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
+      "borderDropzone": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -78,6 +81,7 @@
       "fgMuted": "#9a9aa2",
       "bgDanger": "#ff5a5f",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#ff5a5f",
       "strokeFieldFocus": "#f3f4f5",
       "fgDisabled": "#5b606a",
       "bgNeutralWeak": "#1d2025",
@@ -98,9 +102,9 @@
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
       "fgNeutralSoft": "#9a9aa2",
-      "bgPurpleSoft": "#f5f0ff",
-      "fgPurpleSoft": "#6238b5",
-      "ringPurpleSoft": "#e8ddfe"
+      "bgPurpleSoft": "#2f1e5a",
+      "fgPurpleSoft": "#d8c4ff",
+      "ringPurpleSoft": "#45297d"
     }
   },
   "palette": {
@@ -112,6 +116,7 @@
       "gray900": "#101112",
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
+      "line150": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -131,6 +136,7 @@
       "brand700": "#1f5fd6",
       "red600": "#e5484d",
       "red700": "#ba2525",
+      "red500": "#eb3b3b",
       "fieldFocus": "#1a1c20",
       "disabledFg": "#d1d3d8",
       "neutralWeak": "#f3f4f5",
@@ -162,6 +168,7 @@
       "gray900": "#f5f5f5",
       "line200": "#212224",
       "line100": "#1c1d1f",
+      "line150": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -181,6 +188,7 @@
       "brand700": "#1f5fd6",
       "red600": "#ff5a5f",
       "red700": "#ba2525",
+      "red500": "#ff5a5f",
       "fieldFocus": "#f3f4f5",
       "disabledFg": "#5b606a",
       "neutralWeak": "#1d2025",
@@ -200,9 +208,9 @@
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
       "softNeutralText": "#9a9aa2",
-      "purpleTint": "#f5f0ff",
-      "softPurpleText": "#6238b5",
-      "purpleRing": "#e8ddfe"
+      "purpleTint": "#2f1e5a",
+      "softPurpleText": "#d8c4ff",
+      "purpleRing": "#45297d"
     }
   },
   "space": {

package/dist/types/components/chip/chip.d.ts

@@ -3,6 +3,18 @@ import type { VariantProps } from "../../core";
 import { chipRecipe } from "./chip.recipe";
 export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof chipRecipe> & {
     asChild?: boolean;
+    /**
+     * Ellipsis-truncates the label when it no longer fits. Only meaningful
+     * when `children` is a plain string — anything else (an avatar, a
+     * multi-node label) is rendered as given, untruncated.
+     *
+     * Ellipsis only, no `Tooltip` on hover (dropped, #623 — a truncated
+     * value in Attio is revealed by the cell's own click-to-expand, #579,
+     * not by a chip tooltip; there was no Attio reference for one, which
+     * is exactly the "never add polish the reference lacks" case). Not
+     * Attio's "+N" overflow badge either — see `chip.recipe.ts` for why.
+     */
+    truncate?: boolean;
 };
 /**
  * A small pill — the same measured chip RecordsTable, RecordPanel and
@@ -19,6 +31,10 @@ export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<ty
  * spacing from the label.
  */
 export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    readonly truncate: {
+        readonly true: string;
+        readonly false: string;
+    };
     readonly tone: {
         readonly neutral: string;
         readonly brand: string;
@@ -31,6 +47,10 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     };
 }> & {
     config: import("../..").RecipeConfig<{
+        readonly truncate: {
+            readonly true: string;
+            readonly false: string;
+        };
         readonly tone: {
             readonly neutral: string;
             readonly brand: string;
@@ -44,4 +64,16 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     }>;
 }> & {
     asChild?: boolean;
+    /**
+     * Ellipsis-truncates the label when it no longer fits. Only meaningful
+     * when `children` is a plain string — anything else (an avatar, a
+     * multi-node label) is rendered as given, untruncated.
+     *
+     * Ellipsis only, no `Tooltip` on hover (dropped, #623 — a truncated
+     * value in Attio is revealed by the cell's own click-to-expand, #579,
+     * not by a chip tooltip; there was no Attio reference for one, which
+     * is exactly the "never add polish the reference lacks" case). Not
+     * Attio's "+N" overflow badge either — see `chip.recipe.ts` for why.
+     */
+    truncate?: boolean;
 } & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/chip/chip.recipe.d.ts

@@ -3,7 +3,9 @@ declare const spec: {
     readonly base: {
         readonly display: "inline-flex";
         readonly alignItems: "center";
+        readonly gap: "3px";
         readonly height: `var(--${string})`;
+        readonly minWidth: 0;
         readonly paddingInline: `var(--${string})`;
         readonly borderRadius: `var(--${string})`;
         readonly fontSize: `var(--${string})`;
@@ -12,6 +14,22 @@ declare const spec: {
         readonly whiteSpace: "nowrap";
     };
     readonly variants: {
+        readonly truncate: {
+            readonly true: {
+                readonly decls: {};
+                readonly parts: [{
+                    readonly selector: "& .crisp-chip-label";
+                    readonly decls: {
+                        readonly minWidth: 0;
+                        readonly overflow: "hidden";
+                        readonly textOverflow: "ellipsis";
+                        readonly whiteSpace: "nowrap";
+                        readonly display: "block";
+                    };
+                }];
+            };
+            readonly false: {};
+        };
         readonly tone: {
             readonly neutral: {
                 readonly background: string;
@@ -57,9 +75,14 @@ declare const spec: {
     };
     readonly defaultVariants: {
         readonly tone: "neutral";
+        readonly truncate: false;
     };
 };
 declare const config: import("../..").RecipeConfig<{
+    readonly truncate: {
+        readonly true: string;
+        readonly false: string;
+    };
     readonly tone: {
         readonly neutral: string;
         readonly brand: string;
@@ -72,6 +95,10 @@ declare const config: import("../..").RecipeConfig<{
     };
 }>;
 export declare const chipRecipe: import("../..").RecipeFn<{
+    readonly truncate: {
+        readonly true: string;
+        readonly false: string;
+    };
     readonly tone: {
         readonly neutral: string;
         readonly brand: string;
@@ -84,6 +111,10 @@ export declare const chipRecipe: import("../..").RecipeFn<{
     };
 }> & {
     config: import("../..").RecipeConfig<{
+        readonly truncate: {
+            readonly true: string;
+            readonly false: string;
+        };
         readonly tone: {
             readonly neutral: string;
             readonly brand: string;

package/dist/types/components/datatable/datatable.d.ts

@@ -3,6 +3,10 @@ type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;
 }>;
+export declare function isLabelTruncated(el: {
+    scrollWidth: number;
+    clientWidth: number;
+}): boolean;
 export type EntityValue = {
     name: string;
     avatar?: string;
@@ -21,9 +25,10 @@ export type DataEditableOption = {
 export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency";
 export type DataTableColumn<T> = {
     key: string;
-    /** Truncates with an ellipsis when it's wider than the
-     * column. The full text stays in the DOM, so assistive tech and copy/paste
-     * get all of it; there is deliberately no `title` tooltip — see the recipe. */
+    /** Truncates with an ellipsis when it's wider than the column (#534: a
+     * `Tooltip` with the full text appears on hover/focus once it actually
+     * overflows — see `ThLabel` below). The full text stays in the DOM
+     * regardless, so assistive tech and copy/paste get all of it either way. */
     header: React.ReactNode;
     /** Built-in rich renderer: entity (avatar+name), tags (colour pills), status
      * (dot), date, number, currency. Overridden by `render`. */
@@ -220,6 +225,17 @@ export type DataTableProps<T extends {
      * direction like `stickyFirst` does: it pins to the trailing edge, which is
      * the left edge under `dir="rtl"` (#288). */
     stickyLast?: boolean;
+    /** Props on the scroll element itself (`style`/`className`/other div
+     * attributes) -- for bounding the grid's height so its sticky header and
+     * calc footer (#554) pin the way Attio's own grid does, the same
+     * `scrollProps` shape `Table` already takes directly (its own doc comment
+     * on #554 assumes this -- `DataTable` didn't actually expose it, #569).
+     * e.g. `scrollProps={{ style: { maxHeight: "calc(100vh - 220px)" } }}`.
+     * `ref` and `onScroll` are owned internally (this component tracks its own
+     * sticky-column scroll shadows) and are dropped if passed. `className`
+     * merges with the internal `crisp-table-scroll` class the same way
+     * `Table`'s own `scrollProps` does. */
+    scrollProps?: Omit<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
     /** BCP 47 locale for the built-in `date`/`number`/`currency` renderers
      * (default "en-US"). Formats the date and groups the number the way that
      * locale's readers expect — e.g. "mn-MN" renders a date as "2026.09.12"
@@ -250,11 +266,30 @@ export type DataTableProps<T extends {
     countLabel?: (shown: number, total: number) => React.ReactNode;
     /** Extra toolbar content (e.g. buttons) on the right of the toolbar. */
     toolbar?: React.ReactNode;
+    /**
+     * Bounds the grid's body to a fixed viewport height and makes it scroll
+     * internally (the way Attio's own grid does), which is also what turns on
+     * ROW virtualization (#577) -- only rows inside that viewport (plus a
+     * small overscan) render; rows outside it collapse into two spacer `<tr>`s
+     * so the scrollbar still reflects the true row count. A number is pixels;
+     * a string is any CSS length ("100%", "60vh") -- the first paint
+     * (including SSR) windows to an assumed viewport before the real size is
+     * measured on mount, so a plain number gets a pixel-accurate first window
+     * and a string gets an approximate one that corrects itself right after
+     * hydration.
+     *
+     * Omitted (the default): the grid grows to fit every row, exactly as
+     * before -- there is no internal scroll position for row windowing to mean
+     * anything, so this is the opt-in half of virtualization. COLUMN
+     * virtualization (below) is the other half and does NOT need this prop --
+     * the grid already has a determinate horizontal scroll container.
+     */
+    height?: number | string;
     className?: string;
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/emptystate/emptystate.d.ts

@@ -1,19 +1,44 @@
 import type * as React from "react";
+/**
+ * #603: Attio's zero-*records* state (Users/Workspaces with nothing
+ * imported yet) pairs a "Learn more" label with a clickable card — an
+ * icon tile plus a title, e.g. "Learn more" / "Understanding records".
+ * Rendered as an `<a>` when `href` is given (matches Attio's own
+ * "Import CSV"/card being real links), a `<button>` otherwise.
+ */
+export type EmptyStateLearnMore = {
+    icon: React.ReactNode;
+    /** Defaults to "Learn more". */
+    label?: React.ReactNode;
+    title: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
 export type EmptyStateProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
     icon?: React.ReactNode;
     title: React.ReactNode;
     description?: React.ReactNode;
-    /** A primary action (e.g. a Button) shown below. */
+    /**
+     * A primary action (e.g. a Button) shown below. Pass more than one
+     * (a Fragment of Buttons) for a multi-CTA state (#603, measured:
+     * Attio's zero-records "Import CSV" + "Connect data source" pair,
+     * 8px gap) -- the container lays them out in a row automatically.
+     */
     action?: React.ReactNode;
+    /** A "Learn more" card below the action(s) (#603). */
+    learnMore?: EmptyStateLearnMore;
     /**
      * `illustrated` shows a large icon on a dotted-grid backdrop; `page` is
-     * the full-view empty state (ringed circle icon + 20px heading).
+     * the full-view empty state (ringed circle icon + 20px heading);
+     * `records` is the larger (138px) dotted-grid tile Attio's zero-records
+     * table state uses (#603) -- same backdrop idiom as `illustrated`, a
+     * different measured size because it's a different surface.
      */
-    variant?: "default" | "illustrated" | "page";
+    variant?: "default" | "illustrated" | "page" | "records";
     className?: string;
 };
 /** A centred empty-state panel — icon, title, description, optional action. */
-export declare function EmptyState({ icon, title, description, action, variant, className, ...rest }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ icon, title, description, action, learnMore, variant, className, ...rest }: EmptyStateProps): React.JSX.Element;
 export declare namespace EmptyState {
     var displayName: string;
 }