@crisp-ui-kit/crisp 0.57.2 → 0.57.3

package/dist/styles.css

@@ -467,6 +467,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: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; 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); }
@@ -575,7 +578,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 {
   
@@ -851,7 +854,13 @@
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); 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); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    & .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. */
@@ -938,7 +947,7 @@
     /* 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 { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
     & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
@@ -1014,7 +1023,7 @@
        (#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: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 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. */
@@ -1065,7 +1074,7 @@
        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: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); 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
@@ -1241,10 +1250,10 @@
 
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
@@ -1259,6 +1268,12 @@
     & .crisp-datepickerfield-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}
 
 .crisp-dialog {
   display: contents; font-family: var(--crisp-font-sans);
@@ -2304,8 +2319,13 @@
     /* #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; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #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: 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: 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]`,
@@ -3677,6 +3697,29 @@
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+    /* #622: the Activity tab's own toolbar -- "Filters" + "+ Add meeting",
+       both the same measured button chrome as the topbar's own action
+       buttons (28px, e.field shadow, 14/500 label). */
+    & .crisp-recordpage-tabtoolbar { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); }
+    /* #622: Files tab's empty state -- measured live on Attio's own record
+       page (a company with no files uploaded). The 138x138 dotted-grid
+       backdrop is the same measured tile EmptyState's records variant uses
+       (crisp/#603), duplicated here rather than composed through that
+       component because this surface's title (16/600) and body (14/500,
+       63%-mixed fgPrimary, not the flat fgMuted EmptyState uses) measure to
+       their own values, matching neither of that component's existing
+       variants. */
+    & .crisp-recordpage-panel--center { flex: 1; align-items: center; justify-content: center; }
+    & .crisp-recordpage-illustrated { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); 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-recordpage-illustrated-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    /* #988: the Calls tab's own gated state measures a larger 20/24 title
+       than Files/Deals' 16/600 -- Attio's own "empty view" pattern (the
+       same 20/600 EmptyState's page/records variants already carry, not a
+       one-off). */
+    & .crisp-recordpage-illustrated-title--lg { font-size: 20px; line-height: 24px; }
+    & .crisp-recordpage-illustrated-desc { max-width: 320px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2); }
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .crisp-recordstable-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); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }

package/dist/styles.layered.css

@@ -468,6 +468,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: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; 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); }
@@ -576,7 +579,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 {
   
@@ -852,7 +855,13 @@
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); 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); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    & .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. */
@@ -939,7 +948,7 @@
     /* 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 { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
     & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
@@ -1015,7 +1024,7 @@
        (#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: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 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. */
@@ -1066,7 +1075,7 @@
        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: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); 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
@@ -1242,10 +1251,10 @@
 
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
@@ -1260,6 +1269,12 @@
     & .crisp-datepickerfield-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}
 
 .crisp-dialog {
   display: contents; font-family: var(--crisp-font-sans);
@@ -2305,8 +2320,13 @@
     /* #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; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #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: 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: 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]`,
@@ -3678,6 +3698,29 @@
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
+    /* #622: the Activity tab's own toolbar -- "Filters" + "+ Add meeting",
+       both the same measured button chrome as the topbar's own action
+       buttons (28px, e.field shadow, 14/500 label). */
+    & .crisp-recordpage-tabtoolbar { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); }
+    /* #622: Files tab's empty state -- measured live on Attio's own record
+       page (a company with no files uploaded). The 138x138 dotted-grid
+       backdrop is the same measured tile EmptyState's records variant uses
+       (crisp/#603), duplicated here rather than composed through that
+       component because this surface's title (16/600) and body (14/500,
+       63%-mixed fgPrimary, not the flat fgMuted EmptyState uses) measure to
+       their own values, matching neither of that component's existing
+       variants. */
+    & .crisp-recordpage-panel--center { flex: 1; align-items: center; justify-content: center; }
+    & .crisp-recordpage-illustrated { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); 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-recordpage-illustrated-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    /* #988: the Calls tab's own gated state measures a larger 20/24 title
+       than Files/Deals' 16/600 -- Attio's own "empty view" pattern (the
+       same 20/600 EmptyState's page/records variants already carry, not a
+       one-off). */
+    & .crisp-recordpage-illustrated-title--lg { font-size: 20px; line-height: 24px; }
+    & .crisp-recordpage-illustrated-desc { max-width: 320px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2); }
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .crisp-recordstable-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); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }

package/dist/table.css

@@ -11,8 +11,13 @@
     /* #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; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #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: 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: 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]`,

package/dist/table.layered.css

@@ -12,8 +12,13 @@
     /* #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; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #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: 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: 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]`,

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

@@ -3,7 +3,15 @@ export type BreadcrumbItem = {
     label: React.ReactNode;
     href?: string;
     icon?: React.ReactNode;
-    onClick?: () => void;
+    /** Called on a plain left click. With `href` also set, this fires on the
+     *  real `<a>` rather than replacing it with a `<button>` -- call
+     *  `event.preventDefault()` yourself for client-side routing (e.g.
+     *  react-router's `navigate()`), the same division of labour `StatList`'s
+     *  own `href`+`onClick` pair already uses. Right-click, middle-click,
+     *  ctrl/cmd-click and the status-bar hover keep working since the
+     *  element stays a real anchor. Without `href`, this renders a plain
+     *  button (unchanged). */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
 };
 export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
     items: BreadcrumbItem[];

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

@@ -15,6 +15,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
     };
     readonly size: {
         readonly sm: string;
+        readonly xs: string;
         readonly md: string;
         readonly lg: string;
     };
@@ -36,6 +37,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
         };
         readonly size: {
             readonly sm: string;
+            readonly xs: string;
             readonly md: string;
             readonly lg: string;
         };

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

@@ -99,6 +99,16 @@ declare const spec: {
                 readonly fontSize: `var(--${string})`;
                 readonly borderRadius: `var(--${string})`;
             };
+            readonly xs: {
+                readonly height: "20px";
+                readonly paddingInline: `var(--${string})`;
+                readonly fontSize: "10px";
+                readonly fontWeight: `var(--${string})`;
+                readonly lineHeight: "15px";
+                readonly letterSpacing: "normal";
+                readonly borderRadius: `var(--${string})`;
+                readonly gap: `var(--${string})`;
+            };
             readonly md: {
                 readonly decls: {
                     readonly height: "28px";
@@ -172,6 +182,7 @@ declare const config: import("../..").RecipeConfig<{
     };
     readonly size: {
         readonly sm: string;
+        readonly xs: string;
         readonly md: string;
         readonly lg: string;
     };
@@ -193,6 +204,7 @@ export declare const buttonRecipe: import("../..").RecipeFn<{
     };
     readonly size: {
         readonly sm: string;
+        readonly xs: string;
         readonly md: string;
         readonly lg: string;
     };
@@ -214,6 +226,7 @@ export declare const buttonRecipe: import("../..").RecipeFn<{
         };
         readonly size: {
             readonly sm: string;
+            readonly xs: string;
             readonly md: string;
             readonly lg: string;
         };

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

@@ -22,7 +22,7 @@ declare const spec: {
                     readonly selector: "& .crisp-chip-label";
                     readonly decls: {
                         readonly minWidth: 0;
-                        readonly overflow: "hidden";
+                        readonly overflow: "clip";
                         readonly textOverflow: "ellipsis";
                         readonly whiteSpace: "nowrap";
                         readonly display: "block";

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

@@ -29,6 +29,9 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
     placeholder?: string;
     /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
     variant?: "default" | "ghost";
+    /** `full` (default) fills its container, like `Select`'s own default.
+     *  `auto` sizes to content, the field's only behaviour before crisp#980. */
+    width?: "full" | "auto";
     /** Formats the trigger label (default: e.g. "Jun 3, 2026"). */
     format?: (date: Date) => string;
     /**
@@ -51,7 +54,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant, format, clearable, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant, width, format, clearable, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

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

@@ -1,5 +1,20 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const datepickerfieldRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const config: import("../..").RecipeConfig<{
+    width: {
+        full: string;
+        auto: string;
+    };
+}>;
+export declare const datepickerfieldRecipe: import("../..").RecipeFn<{
+    width: {
+        full: string;
+        auto: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        width: {
+            full: string;
+            auto: string;
+        };
+    }>;
 };
 export default config;

package/dist/types/core/floating-portal.d.ts

@@ -15,10 +15,11 @@ import * as React from "react";
  * `Dialog` was rendering offset by the dialog's own box instead of anchored
  * to its trigger.
  *
- * Every caller renders this conditionally on its own `open` state, which
- * starts `false` and is driven only by client interaction — never a prop a
- * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
- * touches `document` during SSR, the same safety Tooltip already had.
+ * Every caller renders this conditionally on its own `open` state. A fixture
+ * CAN set that true at mount (crisp#964 needs exactly that, to give Menu's
+ * roving-tabindex guard something to inspect), so this checks for `window`
+ * itself rather than assuming the caller never does — the same guard
+ * `@zag-js/react`'s own `Portal` uses for the identical reason.
  *
  * `sourceRef` is the caller's own root — still in its original DOM position,
  * never portaled — used to carry a `data-theme` set on some ancestor of it
@@ -36,4 +37,4 @@ import * as React from "react";
 export declare function FloatingPortal({ children, sourceRef, }: {
     children: React.ReactElement;
     sourceRef: React.RefObject<HTMLElement | null>;
-}): React.ReactPortal;
+}): React.ReactElement;

package/dist/types/product/inbox/inbox.d.ts

@@ -15,6 +15,14 @@ export type InboxTab = {
     label: React.ReactNode;
     count?: number;
     disabled?: boolean;
+    /**
+     * Empty-state copy for this tab only, e.g. Notifications vs. Requests
+     * ("Requests from other users will be displayed here."). Falls back to
+     * the instance-level `emptyTitle`/`emptySubtitle`/`emptyAction` when unset.
+     */
+    emptyTitle?: React.ReactNode;
+    emptySubtitle?: React.ReactNode;
+    emptyAction?: React.ReactNode;
 };
 export type InboxProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title"> & {
     notifications?: InboxNotification[];
@@ -23,7 +31,11 @@ export type InboxProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
     tabs?: InboxTab[];
     activeTab?: string;
     onTabChange?: (id: string) => void;
-    /** Empty-state text (shown when there are no notifications). */
+    /**
+     * Empty-state text (shown when there are no notifications). A tab in
+     * `tabs` that sets its own `emptyTitle`/`emptySubtitle` overrides this
+     * for that tab only.
+     */
     emptyTitle?: React.ReactNode;
     emptySubtitle?: React.ReactNode;
     /** Optional action under the empty state (e.g. a Settings button). */

package/dist/types/product/recordpage/index.d.ts

@@ -1,4 +1,4 @@
 export { type Column, type ColumnType, type EntityValue, type ReferenceOption, type Row, type StatusOption, tagTone, } from "./column";
 export { type EditableOption, editableInputType, useEditableField, } from "./editable-field";
-export { RecordDetails, type RecordDetailsProps, RecordPage, type RecordPageHighlight, type RecordPageLabels, type RecordPageLabelsInput, type RecordPageNote, type RecordPageProps, type RecordPageSection, type RecordPageTab, type RecordPageTask, recordPageLabels, } from "./recordpage";
+export { RecordDetails, type RecordDetailsProps, RecordPage, type RecordPageHighlight, type RecordPageLabels, type RecordPageLabelsInput, RecordPageMain, type RecordPageMainProps, type RecordPageNote, type RecordPageProps, type RecordPageSection, type RecordPageTab, type RecordPageTask, recordPageLabels, } from "./recordpage";
 export { recordpageRecipe } from "./recordpage.recipe";

package/dist/types/product/recordpage/recordpage.d.ts

@@ -239,6 +239,29 @@ export type RecordPageLabels = {
     comments: string;
     /** Empty state under the Lists panel. */
     noLists: string;
+    /** Activity tab toolbar (#622). */
+    filters: string;
+    addMeeting: string;
+    /** Files tab empty state (#622): title, hint body, and its two actions. */
+    noFiles: string;
+    filesHint: string;
+    newFolder: string;
+    uploadFile: string;
+    /** aria-label on the Files tab empty state's "⋮" overflow button (#622). */
+    fileMoreActions: string;
+    /** Associated deals tab empty state (#622). */
+    noDealsFound: string;
+    noDealsHint: string;
+    newDeal: string;
+    /** Emails tab empty state (#987): the dedicated tab's own illustrated
+     *  state, distinct from `noEmailsWith` (Overview's condensed embed). */
+    noEmails: string;
+    noEmailsHint: string;
+    configureMailbox: string;
+    /** Calls tab empty state (#988): chrome only, no real gating. */
+    upgradeToViewCalls: string;
+    callsUpgradeHint: string;
+    upgrade: string;
     highlights: string;
     recordDetails: string;
     searchFields: string;
@@ -347,6 +370,29 @@ export declare function RecordDetails({ record, columns, sections, onEdit, label
 export declare namespace RecordDetails {
     var displayName: string;
 }
+export type RecordPageMainProps = React.ComponentPropsWithoutRef<"main">;
+/**
+ * The main/tab-content column's own box, on its own (#750) — the same
+ * "standalone piece" `RecordDetails` already is for the Details column,
+ * mirrored to the other side of the layout. `RecordPage` composes this
+ * internally for its own tabbed body (below) — this exact box, not a second
+ * copy — so a consumer building a custom record page (its own tab set, its
+ * own menu, `RecordDetails` for the left column, but not the full
+ * `RecordPage`, which hardcodes the CRM tab set) gets the same
+ * Attio-measured inset: `flex: 1; min-width: 0; display: flex;
+ * flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px
+ * 20px` (`recordpage.recipe.ts`'s own `.crisp-recordpage-main`) — without
+ * reaching for that internal class name directly, the only option before
+ * this existed.
+ *
+ * Needs the same single `.crisp-recordpage`-scoped ancestor `RecordDetails`
+ * already documents — wrap both in `recordpageRecipe()`, the way
+ * `RecordPage`'s own root does.
+ */
+export declare function RecordPageMain({ className, children, ...rest }: RecordPageMainProps): React.JSX.Element;
+export declare namespace RecordPageMain {
+    var displayName: string;
+}
 /**
  * The full-page company record view — the page that opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.57.2",
+  "version": "0.57.3",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",