@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/datatable.css

@@ -98,7 +98,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. */
@@ -185,7 +191,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); }
@@ -261,7 +267,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. */
@@ -284,14 +290,29 @@
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-tone); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: var(--crisp-radius-full); }
-    & .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); }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); color: var(--crisp-fg-on-tone); }
     & .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); }
@@ -302,6 +323,24 @@
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .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)); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; color: var(--crisp-fg-tag-swatch); }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
@@ -312,7 +351,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

package/dist/datatable.layered.css

@@ -99,7 +99,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. */
@@ -186,7 +192,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); }
@@ -262,7 +268,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. */
@@ -285,14 +291,29 @@
        Avatar's own already-shipped shape="rounded" value, not a new number.
        shape="circle" reuses Avatar's own shape="circle" value (radius.full)
        the same way, measured live on a real Attio person avatar. */
-    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-tone); background: var(--crisp-bg-brand-solid); }
     & .crisp-datatable-avatar[data-shape="circle"] { border-radius: var(--crisp-radius-full); }
-    & .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); }
+    /* your-moon/crisp#891: every data-tone override painted ONLY a
+       background, inheriting the base rule's white fgOnBrand -- white
+       clears AA against none of these seven fills (brand 3.23:1, success
+       3.96, warning 4.12, danger 3.76, purple 3.58, cyan 2.30, orange
+       2.77). fgOnTone (ink, #101112 -- semantic.ts's own comment: "dark ink
+       clears AA on every tone in both themes") clears 4.5:1+ on every fill
+       here with a comfortable margin (brand 5.85, success 4.77/6.29,
+       danger 5.03/6.19, purple 5.27, cyan 8.23, orange 6.83, light/dark),
+       so the base rule's colour moves there and every override keeps it --
+       EXCEPT warning, whose raw fill (bgWarning) only clears 4.59:1 in
+       light, too thin a margin to rely on: it takes bgWarningSolid instead,
+       the same solid-warning-plus-ink pair Badge's own solid variant
+       already established (13.98/7.83), for the same reason (see
+       tokens/palette.ts's amberSolid comment). No background changes
+       otherwise -- the fills themselves are unaffected, only the text. */
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); color: var(--crisp-fg-on-tone); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); color: var(--crisp-fg-on-tone); }
     & .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); }
@@ -303,6 +324,24 @@
     & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
     & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
     & .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)); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured
+       live, see tokens/palette.ts's tagSwatch1 comment) -- flat black
+       text, no ring, unlike the tone family above. 7px radius/10px text
+       are measured literals (no matching step in the shared scale, same
+       as Select's own .crisp-select-swatch). */
+    & .crisp-datatable-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; color: var(--crisp-fg-tag-swatch); }
+    & .crisp-datatable-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    & .crisp-datatable-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    & .crisp-datatable-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    & .crisp-datatable-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    & .crisp-datatable-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    & .crisp-datatable-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    & .crisp-datatable-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    & .crisp-datatable-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    & .crisp-datatable-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    & .crisp-datatable-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    & .crisp-datatable-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    & .crisp-datatable-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
@@ -313,7 +352,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

package/dist/datepickerfield.css

@@ -1,9 +1,9 @@
 .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
@@ -18,3 +18,9 @@
     & .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;
+}

package/dist/datepickerfield.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface DatepickerfieldVariants {
-
+  width?: "full" | "auto";
 }
 
-export declare const datepickerfieldRecipe: RecipeFn<{  }>;
+export declare const datepickerfieldRecipe: RecipeFn<{ width: { full: string; auto: string } }>;

package/dist/datepickerfield.layered.css

@@ -1,10 +1,10 @@
 @layer crisp-components {
 .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
@@ -19,4 +19,10 @@
     & .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;
+}
 }

package/dist/esm/components/breadcrumb/breadcrumb.js

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

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

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

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

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

package/dist/esm/components/datatable/datatable.js

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

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

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

package/dist/esm/components/datepickerfield/datepickerfield.js

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

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

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