@crisp-ui-kit/crisp 0.57.1 → 0.57.3

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

@@ -1,5 +1,5 @@
 import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
-import { contract as c, elevation as e } from "../../tokens/index.js";
+import { contract as c } from "../../tokens/index.js";
 const spec = defineSpec({
     name: "button",
     base: {
@@ -22,6 +22,12 @@ const spec = defineSpec({
     },
     parts: [
         { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+        // your-moon/crisp#910: seed-design's every Button variant
+        // gives press feedback as a `scaleScope: self` micro-interaction, not a
+        // shadow/fill change alone (`action-button.yaml`, read in the seed raw
+        // dump) -- on top of, not instead of, each intent's own colour-on-press
+        // below. Root-level so it applies uniformly across all four intents.
+        { selector: "&:active", decls: { transform: "scale(0.98)" } },
     ],
     variants: {
         intent: {
@@ -35,12 +41,13 @@ const spec = defineSpec({
                     // buttons use white).
                     background: c.bgBrandContrast,
                     color: c.fgOnBrand,
-                    // crisp#494: the inset ring is a black tint, not white -- live-
-                    // measured on Attio's own "New Company" button as
-                    // rgba(0,0,0,0.06), not the rgba(255,255,255,0.07) both solid
-                    // intents shared. The other two shadow layers already matched
-                    // exactly.
-                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
+                    // your-moon/crisp#910: seed's brandSolid carries no
+                    // shadow/ring at all (`action-button.yaml`: `border: none`, no
+                    // shadow key) -- dropped the coloured ambient drop-shadow and the
+                    // black-tint inset ring (crisp#494) that were tuned for Attio's
+                    // own look, per the owner's directive that elevation/control
+                    // styling now follows seed, not Attio.
+                    boxShadow: "none",
                 },
                 // your-moon/crisp#897: a brightness filter, not a second background
                 // swap — matches `danger`'s own pattern below. `bgBrandSolidPressed`
@@ -56,20 +63,29 @@ const spec = defineSpec({
             },
             neutral: {
                 decls: {
-                    background: c.bgSurface,
+                    // your-moon/crisp#910: seed's `neutralWeak` fill is
+                    // `bg.neutral-weak` (#f3f4f5) at rest, not an opaque white --
+                    // `bgNeutralWeak` is already this exact hex (no new measurement).
+                    // No border/shadow in seed's spec either; dropped `e.field`'s
+                    // 3-layer button-chrome glow for the same reason primary/danger
+                    // lost theirs.
+                    background: c.bgNeutralWeak,
                     color: c.fgPrimary,
-                    boxShadow: e.field,
+                    boxShadow: "none",
                 },
-                parts: [{ selector: "&:hover", decls: { background: c.bgRaised } }],
+                parts: [
+                    // seed's neutralWeak "pressed" bg (#eeeff1) is `borderSubtle`'s
+                    // own already-exact value -- reused, not a fresh literal.
+                    { selector: "&:hover", decls: { background: c.borderSubtle } },
+                ],
             },
             danger: {
                 decls: {
                     background: c.bgDangerSolid,
                     color: c.fgOnBrand,
-                    // Same corrected inset ring as primary (crisp#494) -- shared
-                    // literal, same solid-fill button family; the coloured layers
-                    // themselves weren't independently re-measured this round.
-                    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
+                    // your-moon/crisp#910: same "no shadow at all" call as
+                    // primary above -- seed's criticalSolid carries no ring either.
+                    boxShadow: "none",
                 },
                 parts: [
                     { selector: "&:hover", decls: { filter: "brightness(0.96)" } },
@@ -79,7 +95,12 @@ const spec = defineSpec({
             ghost: {
                 decls: {
                     background: "transparent",
-                    color: c.fgMuted,
+                    // your-moon/crisp#910: seed's `ghost` enabled label/icon
+                    // colour is `fg.neutral` (full ink), not a de-emphasised muted
+                    // grey that only darkens on hover -- `action-button.yaml`'s own
+                    // enabled-state colour table has no separate "muted" step for
+                    // ghost. Real behaviour change, flagged in HANDOFF/CHANGELOG.
+                    color: c.fgPrimary,
                     boxShadow: "none",
                 },
                 parts: [
@@ -100,6 +121,34 @@ 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.
+            //
+            // The label itself is NOT 14px/#682's tracking -- getComputedStyle on
+            // the live button (fonts loaded, DPR 2, zero zoom/transform anywhere
+            // in the ancestor chain) reads 10px/regular/15px line-height/normal
+            // tracking, independently matching `recordpanel.recipe.ts`'s own
+            // "View all" measurement (10px/400) elsewhere in this codebase. 10px
+            // sits below the text scale's 11px floor, so it's a literal here, the
+            // same as recordpanel's.
+            xs: {
+                height: "20px",
+                paddingInline: c.space["1.5"],
+                fontSize: "10px",
+                fontWeight: c.weight.regular,
+                lineHeight: "15px",
+                letterSpacing: "normal",
+                borderRadius: c.radius.sm,
+                gap: c.space["1"],
+            },
             md: {
                 decls: {
                     height: "28px",
@@ -129,7 +178,10 @@ const spec = defineSpec({
                 height: "40px",
                 paddingInline: "14px",
                 fontSize: c.text.lg,
-                borderRadius: "10px",
+                // your-moon/crisp#910: was a stray literal `10px`, matching neither
+                // the token scale nor seed's own large-size radius (`$radius.r3` =
+                // 12px, `action-button.yaml`) -- now the actual `xl` token.
+                borderRadius: c.radius.xl,
             },
         },
         shape: {

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

@@ -1,8 +1,10 @@
 import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
-// A 16px square checkbox measured from a record grid: r6, a subtle 1px
-// inset ring when empty, brand fill + white check when on. The check is a
-// data-URI SVG background so it renders reliably (input pseudo-content doesn't).
+// A 16px square checkbox measured from a record grid: brand fill + white
+// check when on. The check is a data-URI SVG background so it renders
+// reliably (input pseudo-content doesn't). Radius (r4) and the real 1px
+// border when empty are seed-design's own (your-moon/crisp#926),
+// not the original 6px/box-shadow-ring measurement.
 const CHECK = "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\")";
 const spec = defineSpec({
     name: "checkbox",
@@ -14,25 +16,32 @@ const spec = defineSpec({
         margin: 0,
         width: "16px",
         height: "16px",
-        border: "none",
-        borderRadius: c.radius.sm,
+        // your-moon/crisp#926: was `border: none` + a box-shadow
+        // inset ring -- seed-design's own checkmark (`checkmark.yaml`) is a real
+        // 1px border (`stroke.neutral-weak`, `borderDefault`'s exact value),
+        // removed entirely (not hidden via boxShadow:none) when selected, same
+        // technique change already made for Input (your-moon/crisp#910).
+        border: `1px solid ${c.borderDefault}`,
+        // your-moon/crisp#926: seed's checkmark box corner is
+        // `$radius.r1` (4px, `radius.xs`), not the 6px `radius.sm` this shared
+        // with Chip's old rounded-rect shape.
+        borderRadius: c.radius.xs,
         background: c.bgSurface,
-        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent)`,
         cursor: "pointer",
-        transition: "background-color .12s, box-shadow .12s",
+        transition: "background-color .12s, border-color .12s",
     },
     parts: [
         {
             selector: "&:hover",
             decls: {
-                boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent)`,
+                borderColor: `color-mix(in srgb, ${c.fgPrimary} 30%, transparent)`,
             },
         },
         {
             selector: "&:checked, &:indeterminate",
             decls: {
                 background: `${c.bgBrandSolid} center / 10px no-repeat`,
-                boxShadow: "none",
+                borderColor: "transparent",
             },
         },
         { selector: "&:checked", decls: { backgroundImage: CHECK } },
@@ -50,6 +59,49 @@ const spec = defineSpec({
                 outlineOffset: "1px",
             },
         },
+        // your-moon/crisp#963: was no `:disabled` styling at all
+        // -- seed-design's own checkmark spec (`checkmark.yaml`) treats disabled
+        // as its own recolor, not a blanket opacity dim: fill `bg.disabled`
+        // (crisp's already-exact `bgNeutralWeak`, #f3f4f5), border
+        // `stroke.neutral-muted` (crisp's already-exact `borderSubtle`, applied
+        // here as the disabled border colour rather than its usual ring role).
+        // "disabled (any state)" per seed -- checked/indeterminate get the same
+        // muted fill/border, not the brand fill, hence the compound selectors
+        // below outranking the plain `:checked`/`:indeterminate` rule above.
+        {
+            selector: "&:disabled",
+            decls: {
+                background: c.bgNeutralWeak,
+                borderColor: c.borderSubtle,
+                cursor: "not-allowed",
+            },
+        },
+        {
+            // Higher specificity than the plain `&:checked, &:indeterminate` rule
+            // above (two pseudo-classes vs one), so this wins regardless of
+            // declaration order. Deliberately keeps the existing white check icon
+            // rather than recolouring it to seed's `fg.disabled` -- that glyph is
+            // baked into a static SVG data-URI with no theme-aware way to retint
+            // it without switching techniques entirely (mask + a separate colour
+            // layer), and white still reads clearly against the muted grey fill.
+            selector: "&:checked:disabled, &:indeterminate:disabled",
+            decls: {
+                background: `${c.bgNeutralWeak} center / 10px no-repeat`,
+                borderColor: c.borderSubtle,
+            },
+        },
+        { selector: "&:checked:disabled", decls: { backgroundImage: CHECK } },
+        {
+            // The `background` shorthand just above resets `background-image` to
+            // `none` on every property it doesn't restate -- without this, a
+            // disabled indeterminate checkbox would show the muted fill but lose
+            // its dash entirely.
+            selector: "&:indeterminate:disabled",
+            decls: {
+                backgroundImage: `linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand})`,
+                backgroundSize: "8px 2px",
+            },
+        },
     ],
 });
 const config = specToRecipe(spec);

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

@@ -15,9 +15,21 @@ import { chipRecipe } from "./chip.recipe.js";
  * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
  * that surface can be measured; don't guess the icon, its hit target, or its
  * spacing from the label.
+ *
+ * `appearance` (`"filled"` default | `"outline"`) and `selected` separate
+ * three visual roles crisp/#907's study found conflated: a filled chip reads
+ * as a status/value (not clickable), an outline chip reads as actionable (a
+ * tag or filter you can tap), and `selected` overrides either to a dark fill
+ * once tapped — see `chip.recipe.ts` for the structural reference.
  */
-export const Chip = React.forwardRef(({ tone, truncate, className, asChild, children, ...props }, ref) => {
+export const Chip = React.forwardRef(({ tone, truncate, appearance, selected, className, asChild, children, ...props }, ref) => {
     const content = truncate && !asChild && typeof children === "string" ? (_jsx("span", { className: "crisp-chip-label", children: children })) : (children);
-    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, truncate, className }), ...props, children: content }));
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({
+            tone,
+            truncate,
+            appearance,
+            selected,
+            className,
+        }), ...props, children: content }));
 });
 Chip.displayName = "Chip";

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

@@ -9,6 +9,15 @@ import { contract as c } from "../../tokens/index.js";
 // can't be reused verbatim here — Chip's root IS the styled element, not a
 // wrapper around one. The values below are transcribed from recordTagCss,
 // not re-measured; keep the two in sync by hand if either changes.
+//
+// your-moon/crisp#919: `radius.chip` itself (tokens/scale.ts) moved
+// from Attio's measured 7px to a pill (999px), matching seed-design's own
+// `chip.yaml` (always a pill, no size-based radius step at all). Every
+// consumer sharing this one token — DataTable/RecordPage/RecordsTable/
+// MultiSelect's tag & mention chips, TableToolbar/DatePickerField's date
+// presets — goes pill-shaped together from this single token change, not a
+// per-file edit; that's the whole reason those rules keep re-declaring
+// `border-radius: ${c.radius.chip}` instead of a literal.
 const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
 const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
 const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${c.fgPrimary})`;
@@ -64,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",
@@ -116,8 +127,67 @@ const spec = defineSpec({
                 boxShadow: ring(c.bgOrange, 30),
             },
         },
+        // your-moon/crisp#907: a three-state read (actionable / informational /
+        // selected), the same shape as seed-design's own `chip.yaml` (`variant:
+        // solid|outlineStrong|outlineWeak`, each with a `selected` state) --
+        // structural reference only, not Naver/Kakao's colours (the study only
+        // supplied the pattern: outline reads as tappable, filled reads as
+        // status, dark fill reads as selected). `outline` only clears
+        // `background`, keeping the `tone`'s own `color`/`boxShadow` ring --
+        // SEED's own spec keeps `label.color` identical between `solid` and
+        // `outlineWeak`/`outlineStrong`, so the ring is the only thing that
+        // changes. Declared after `tone` so its rule wins the cascade at equal
+        // specificity (`core/resolve.ts` emits variant blocks in declaration
+        // order; see `build/generate-recipes.mjs`).
+        appearance: {
+            filled: {},
+            outline: { background: "transparent" },
+        },
+        // Overrides `tone`+`appearance` entirely to crisp's own dark-inverted
+        // pair (`bgNeutralInverted`/`fgOnNeutralInverted`, already shipped for
+        // `Snackbar` #911) -- SEED's `solid`/`outlineStrong` selected state, not
+        // Daum's `rgb(44,46,51)` (crisp's own token is `#2a3038`, close but
+        // deliberately not copied). Declared last so it always wins regardless
+        // of `tone`/`appearance`. Simplified from SEED, which gives
+        // `outlineWeak` a DIFFERENT, lighter selected treatment (a stronger
+        // stroke + weak fill, not a full inversion) -- one consistent dark-fill
+        // "selected" reads clearer across every tone than three different
+        // selected looks, and matches what #907 actually asked for.
+        selected: {
+            true: {
+                background: c.bgNeutralInverted,
+                color: c.fgOnNeutralInverted,
+                boxShadow: "none",
+            },
+            false: {},
+        },
+    },
+    // Team-lead review of #955's screenshot: the neutral tone's outline ring
+    // reuses `borderSubtle` (`#eeeff1`, meant for hairline dividers under a
+    // fill, not a standalone edge) -- on outline's transparent background
+    // it's nearly invisible, defeating the "outline reads as tappable" point
+    // of the appearance itself. Every other tone's ring is already a 30%
+    // tint of a saturated colour, visible enough on white; only neutral needs
+    // the fix. Matches `Input`'s own border token, per the reviewer's note.
+    // `selected: false` keeps this from re-drawing a border under `selected`'s
+    // dark fill -- compound rules emit after every plain variant rule
+    // (including `selected`'s own), so without this an outline+selected+
+    // neutral chip would get its border back on top of `selected`'s
+    // `boxShadow: "none"`.
+    compoundVariants: [
+        {
+            tone: "neutral",
+            appearance: "outline",
+            selected: false,
+            decls: { boxShadow: `inset 0 0 0 1px ${c.borderDefault}` },
+        },
+    ],
+    defaultVariants: {
+        tone: "neutral",
+        truncate: false,
+        appearance: "filled",
+        selected: false,
     },
-    defaultVariants: { tone: "neutral", truncate: false },
 });
 const config = specToRecipe(spec);
 export const chipRecipe = Object.assign(resolveRecipe(config), { config });

package/dist/esm/components/chipgroup/chipgroup.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { chipgroupRecipe } from "./chipgroup.recipe.js";
+/**
+ * A single-line, horizontally-scrolling row of `Chip`s (or anything else),
+ * with scroll-snap — for a filter/status row that would otherwise wrap onto
+ * a second line once it runs out of width (crisp#908). Every child snaps to
+ * the row's start edge and never shrinks, so scrolling always lands a chip
+ * flush against the left edge rather than mid-chip.
+ */
+export const ChipGroup = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return (_jsx(Primitive.div, { ref: ref, asChild: asChild, role: "group", className: chipgroupRecipe({ className }), ...props }));
+});
+ChipGroup.displayName = "ChipGroup";

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

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// your-moon/crisp#908: a horizontally-scrolling, single-line row for a set of
+// `Chip`s -- Naver/Kakao both solve "many filter/status chips" this way
+// (docs/study/korean/: Naver home `comp_snap_list`, `scroll-snap-type: x
+// mandatory`; Daum `UL.grid_xscroll`, native overflow with no snap). crisp
+// had no equivalent: a consumer's own flex row wraps chips onto a second
+// line once they run out of horizontal space, which breaks the one-line
+// table-header density Attio parity is built on (GRC's own toolbar filter
+// row and record tabs, per the issue). No new visual values -- the gap
+// between chips reuses `Chip`'s own measured 3px inter-child gap
+// (chip.recipe.ts's `gap: "3px"` comment), and the scrollbar is hidden the
+// same way `WheelPicker`'s already-shipped scroll column does
+// (`scrollbar-width: none` + the `-webkit-scrollbar` pseudo), not a new
+// pattern invented for this component.
+const config = defineRecipe({
+    name: "chipgroup",
+    base: `
+    display: flex; flex-wrap: nowrap; align-items: center; gap: ${c.space["1.5"]};
+    overflow-x: auto; overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; -ms-overflow-style: none;
+    &::-webkit-scrollbar { display: none; }
+    & > * { flex-shrink: 0; scroll-snap-align: start; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const chipgroupRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export default config;

package/dist/esm/components/chipgroup/index.js

@@ -0,0 +1,2 @@
+export { ChipGroup } from "./chipgroup.js";
+export { chipgroupRecipe } from "./chipgroup.recipe.js";

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

@@ -369,7 +369,11 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return (_jsxs("span", { className: "crisp-datatable-entity", children: [_jsx("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.onEntityClick ? (_jsx("button", { type: "button", className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
+            return (_jsxs("span", { className: "crisp-datatable-entity", children: [_jsx("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, "data-shape": col.avatarShape === "circle" ? "circle" : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), col.href ? (_jsx("a", { href: col.href(row), className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
+                            // same reasoning as onEntityClick's stopPropagation below --
+                            // this must not also trigger the row's own onRowClick.
+                            ev.stopPropagation();
+                        }, children: e.name })) : col.onEntityClick ? (_jsx("button", { type: "button", className: "crisp-datatable-entity-name crisp-datatable-entity-name--link", onClick: (ev) => {
                             // the cell's own click already just selects (see the
                             // TableCell onClick above) -- this must additionally stop
                             // the row's onRowClick from firing, since this name points

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,8 +292,11 @@ 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); }
-    & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    & .crisp-datatable-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. */
+    & .crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
        column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --
@@ -301,7 +310,13 @@ const config = defineRecipe({
     & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
     & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
     & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
-    & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; 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}; }
+    /* #892: the default shape's radius was a stray literal (radius.sm, 6px)
+       -- Attio's own real company/object avatar measures 30%, which is
+       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[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}; }
     & .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; }
@@ -323,7 +338,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), {

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

@@ -1,10 +1,18 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c, elevation as e } from "../../tokens/index.js";
-// A modal dialog surface — measured from a create-record modal: a radius-16
-// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
-// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
-// 2-layer black shadow) with a bordered header (title + close), a scrollable
-// body, and a bordered footer for the primary action.
+import { contract as c } from "../../tokens/index.js";
+// your-moon/crisp#934: was a radius-16 frosted-glass card (a
+// 60%-tinted, 15px-backdrop-blurred outer shell wrapping a solid radius-12
+// inner card) -- owner-directed: Dialog's identity now follows seed-design
+// (daangn), whose own Dialog spec has no shadow/blur/tint property at all;
+// elevation there is conveyed purely by a darker backdrop scrim plus the
+// existing scale+fade entrance animation (which crisp already had). Flat
+// single surface now: `.crisp-dialog-content` is a bare, invisible sizing
+// wrapper (no background/radius/shadow of its own); `.crisp-dialog-card` is
+// the one real surface, radius bumped from `xl` (12px) to `3xl` (20px,
+// seed's own shared floating-surface radius, `$radius.r5`), no shadow.
+// `bgScrim` itself also moved toward seed's own darker backdrop value
+// (`tokens/palette.ts`). The alert variant no longer needs its own override
+// of either rule -- both variants now render the identical flat surface.
 //
 // #414: the footer's submit-key caps (⌘/Enter) used to be one span drawing a
 // visible pill (18px, 22%-white background). Attio's own are two separate
@@ -18,10 +26,8 @@ const config = defineRecipe({
     & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: ${c.bgScrim}; }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
     & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: ${c.space["4"]}; }
-    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
-    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
-    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius["3xl"]}; background: ${c.bgSurface}; overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; margin: 0; }
@@ -43,7 +49,12 @@ const config = defineRecipe({
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
     & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
-    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). Scoped to this one fill only -- Dialog's own frosted-
+       surface identity (#934) is untouched here. */
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandContrast}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
     & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: ${c.space["1"]}; }
     & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: ${c.fgOnBrand}; font-family: inherit; font-style: normal; font-size: 10px; }`,
     variants: {},