@crisp-ui-kit/crisp 0.57.1 → 0.57.3

package/dist/cjs/components/badge/badge.recipe.js

@@ -92,7 +92,11 @@ const spec = (0, core_1.defineSpec)({
                 paddingInline: tokens_1.contract.space["1"],
                 fontSize: tokens_1.contract.text.sm,
                 lineHeight: "16px",
-                borderRadius: tokens_1.contract.radius.sm,
+                // your-moon/crisp#919: seed-design's own Badge (`badge.yaml`)
+                // is a small rounded-rect at every size, never a pill -- its
+                // small/medium step is `$radius.r1` = 4px (`radius.xs`), not the 6px
+                // `radius.sm` this used to share with Chip's old rounded-rect shape.
+                borderRadius: tokens_1.contract.radius.xs,
             },
             // crisp#696: Attio's tag pill (Standard/System/Enriched) measures
             // 20px h / 4px padding / 12px text / 16px line-height / 3px gap -- was
@@ -104,14 +108,24 @@ const spec = (0, core_1.defineSpec)({
                 fontSize: tokens_1.contract.text.sm,
                 lineHeight: "16px",
                 gap: "3px",
-                borderRadius: tokens_1.contract.radius.sm,
+                // your-moon/crisp#919: same seed radius step as `small`
+                // above -- seed's Badge treats small/medium as one radius step
+                // (`$radius.r1` = 4px), unlike Button/Input's per-size table.
+                borderRadius: tokens_1.contract.radius.xs,
             },
             // crisp#805: measured live against Attio's real status/stage chip
-            // (Deals "Deal stage" column, All Deals table view) -- radius 9px, not
-            // `radius.chip`'s 7px, and asymmetric padding (room for a leading dot/
-            // icon: 1px top/bottom, 6px trailing, 4px leading), not a symmetric
-            // 9px. Height/font/tracking are unchanged (still not independently
-            // re-measured this round, per #696's own note).
+            // (Deals "Deal stage" column, All Deals table view) -- asymmetric
+            // padding (room for a leading dot/icon: 1px top/bottom, 6px trailing,
+            // 4px leading), not a symmetric 9px. Height/font/tracking are
+            // unchanged (still not independently re-measured this round, per
+            // #696's own note).
+            // your-moon/crisp#919: radius was Attio's own measured 9px
+            // (`radius.lg`, deliberately not `radius.chip`'s then-7px) -- now
+            // `radius.sm` (6px), seed-design's own Badge large step
+            // (`$radius.r1_5`). Radius specifically is one of the values this
+            // migration takes from seed over an Attio measurement (colours/radii/
+            // control-styling/elevation all do); the padding/height facts above
+            // are unaffected and still Attio's.
             large: {
                 height: tokens_1.contract.size.chip,
                 paddingBlock: tokens_1.contract.space.px,
@@ -119,7 +133,7 @@ const spec = (0, core_1.defineSpec)({
                 paddingInlineEnd: tokens_1.contract.space["1.5"],
                 fontSize: tokens_1.contract.text.lg,
                 letterSpacing: "-0.1px",
-                borderRadius: tokens_1.contract.radius.lg,
+                borderRadius: tokens_1.contract.radius.sm,
             },
         },
         variant: { soft: {}, solid: {} },

package/dist/cjs/components/bottomsheet/bottomsheet.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = BottomSheet;
+exports.BottomSheetBody = BottomSheetBody;
+exports.BottomSheetFooter = BottomSheetFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const bottomsheet_recipe_1 = require("./bottomsheet.recipe");
+let instanceCounter = 0;
+function useBottomSheetInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-bottomsheet-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A mobile bottom sheet — composes Zag's dialog machine (focus trap, scroll
+ * lock, Escape / outside-click dismissal) with a panel that slides up from
+ * the bottom edge. Compose the body with `BottomSheetBody` and actions with
+ * `BottomSheetFooter`.
+ */
+function BottomSheet({ open, onOpenChange, title, description, headerAlign = "left", showCloseButton, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
+    const id = useBottomSheetInstanceId();
+    const service = (0, react_1.useMachine)(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- same reasoning as Dialog/Drawer, same machine.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    if (!api.open)
+        return null;
+    const hasClose = showCloseButton ?? title != null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, bottomsheet_recipe_1.bottomsheetRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-bottomsheet-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-bottomsheet-positioner", children: (0, jsx_runtime_1.jsxs)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-bottomsheet-content", className), "data-header-align": headerAlign, "data-has-close": hasClose ? "" : undefined, children: [(title != null || description != null) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-bottomsheet-header", children: [title != null && ((0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "crisp-bottomsheet-title", children: title })), description != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-bottomsheet-description", children: description })), hasClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-bottomsheet-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) }))] })), children] }) })] }) }));
+}
+BottomSheet.displayName = "BottomSheet";
+function BottomSheetBody({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-bottomsheet-body", children: children });
+}
+function BottomSheetFooter({ children, }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-bottomsheet-footer", children: children });
+}

package/dist/cjs/components/bottomsheet/bottomsheet.recipe.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bottomsheetRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A mobile bottom sheet — daangn/seed-design's
+// packages/rootage/components/bottom-sheet.yaml (dev@e1c486b904297f7b6a8f17b8523f732c37015d60),
+// not Attio (no such component there; crisp#911). Composes @zag-js/dialog, the
+// same headless machine Dialog/Drawer already use, with a panel that slides
+// up from the bottom edge over a scrim -- only the TOP corners round; the
+// panel sits flush with the viewport's bottom edge, unlike Drawer's own
+// 8px-gutter floating panel. Every numeric value below cites its yaml line.
+const config = (0, core_1.defineRecipe)({
+    name: "bottomsheet",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .crisp-bottomsheet-backdrop {
+      position: fixed; inset: 0; z-index: 60;
+      background: ${tokens_1.contract.bgOverlayStrong}; /* bottom-sheet.yaml:99 backdrop.color = $color.bg.overlay -- a different, darker, theme-constant scrim than the Dialog bgScrim token, see its own comment */
+      opacity: 1; transition: opacity 300ms cubic-bezier(0,0,.15,1); /* bottom-sheet.yaml:100-102 enterDuration/enterTimingFunction */
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-bottomsheet-positioner {
+      position: fixed; inset: 0; z-index: 61;
+      display: flex; align-items: flex-end; justify-content: center;
+    }
+    & .crisp-bottomsheet-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; box-sizing: border-box; display: flex; flex-direction: column;
+      overflow: hidden; width: 100%; max-width: 480px; /* bottom-sheet.yaml:110 content.maxWidth */
+      max-height: 85vh;
+      background: ${tokens_1.contract.bgSurface}; /* bottom-sheet.yaml:109 content.color = $color.bg.layer-floating */
+      border-radius: ${tokens_1.contract.radius["4xl"]} ${tokens_1.contract.radius["4xl"]} 0 0; /* bottom-sheet.yaml:111 content.topCornerRadius = $radius.r6 (24px), bottom flush with the viewport */
+      transform: translateY(0);
+      transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* bottom-sheet.yaml:112-113 content.enterDuration/enterTimingFunction (enter-expressive) */
+      @starting-style { transform: translateY(100%); }
+    }
+    & .crisp-bottomsheet-header {
+      position: relative; display: flex; flex-direction: column;
+      gap: ${tokens_1.contract.space["2"]}; /* bottom-sheet.yaml:120 header.gap = $dimension.x2 (8px) */
+      padding-top: ${tokens_1.contract.space["6"]}; padding-bottom: ${tokens_1.contract.space["4"]}; /* bottom-sheet.yaml:121-122 header.paddingTop/paddingBottom = $dimension.x6/x4 (24px/16px) */
+      flex-shrink: 0;
+    }
+    & .crisp-bottomsheet-title {
+      color: ${tokens_1.contract.fgPrimary}; /* bottom-sheet.yaml:130 title.color = $color.fg.neutral */
+      font-size: 22px; line-height: 30px; font-weight: ${tokens_1.contract.weight.bold}; /* bottom-sheet.yaml:131-133 title.fontSize/lineHeight/fontWeight = $font-size.t8/$line-height.t8/bold */
+      padding-inline: ${tokens_1.contract.space["4"]}; /* default (headerAlignment=left, no close button): bottom-sheet.yaml:150-152 */
+    }
+    &[data-header-align="left"][data-has-close] .crisp-bottomsheet-title { padding-inline-start: ${tokens_1.contract.space["4"]}; padding-inline-end: 56px; } /* bottom-sheet.yaml:141-144 */
+    &[data-header-align="center"] .crisp-bottomsheet-title { text-align: center; }
+    &[data-header-align="center"][data-has-close] .crisp-bottomsheet-title { padding-inline: 56px; } /* bottom-sheet.yaml:154-157 */
+    & .crisp-bottomsheet-description {
+      color: ${tokens_1.contract.fgMuted}; /* bottom-sheet.yaml:138 description.color = $color.fg.neutral-muted */
+      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.regular}; /* bottom-sheet.yaml:139-141 description.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */
+      padding-inline: ${tokens_1.contract.space["4"]}; /* bottom-sheet.yaml:142 description.paddingX = global-gutter (16px) */
+    }
+    & .crisp-bottomsheet-close {
+      position: absolute; top: ${tokens_1.contract.space["6"]}; inset-inline-end: ${tokens_1.contract.space["4"]}; /* bottom-sheet.yaml:145-146 closeButton.fromTop/fromRight = $dimension.x6/x4 (24px/16px) */
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md};
+      background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer;
+    }
+    & .crisp-bottomsheet-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-bottomsheet-body {
+      flex: 1; min-height: 0; overflow-y: auto;
+      padding-inline: ${tokens_1.contract.space["4"]}; /* bottom-sheet.yaml:126 body.paddingX = global-gutter (16px) -- no vertical padding in the spec */
+    }
+    & .crisp-bottomsheet-footer {
+      display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]};
+      flex-shrink: 0;
+      padding-inline: ${tokens_1.contract.space["4"]}; padding-top: ${tokens_1.contract.space["3"]}; padding-bottom: ${tokens_1.contract.space["4"]}; /* bottom-sheet.yaml:127-129 footer.paddingX/paddingTop/paddingBottom = global-gutter/x3/x4 (16px/12px/16px) */
+    }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.bottomsheetRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/bottomsheet/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bottomsheetRecipe = exports.BottomSheetFooter = exports.BottomSheetBody = exports.BottomSheet = void 0;
+var bottomsheet_1 = require("./bottomsheet");
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return bottomsheet_1.BottomSheet; } });
+Object.defineProperty(exports, "BottomSheetBody", { enumerable: true, get: function () { return bottomsheet_1.BottomSheetBody; } });
+Object.defineProperty(exports, "BottomSheetFooter", { enumerable: true, get: function () { return bottomsheet_1.BottomSheetFooter; } });
+var bottomsheet_recipe_1 = require("./bottomsheet.recipe");
+Object.defineProperty(exports, "bottomsheetRecipe", { enumerable: true, get: function () { return bottomsheet_recipe_1.bottomsheetRecipe; } });

package/dist/cjs/components/breadcrumb/breadcrumb.js

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

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

@@ -25,6 +25,12 @@ const spec = (0, core_1.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: {
@@ -38,12 +44,13 @@ const spec = (0, core_1.defineSpec)({
                     // buttons use white).
                     background: tokens_1.contract.bgBrandContrast,
                     color: tokens_1.contract.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`
@@ -59,20 +66,29 @@ const spec = (0, core_1.defineSpec)({
             },
             neutral: {
                 decls: {
-                    background: tokens_1.contract.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: tokens_1.contract.bgNeutralWeak,
                     color: tokens_1.contract.fgPrimary,
-                    boxShadow: tokens_1.elevation.field,
+                    boxShadow: "none",
                 },
-                parts: [{ selector: "&:hover", decls: { background: tokens_1.contract.bgRaised } }],
+                parts: [
+                    // seed's neutralWeak "pressed" bg (#eeeff1) is `borderSubtle`'s
+                    // own already-exact value -- reused, not a fresh literal.
+                    { selector: "&:hover", decls: { background: tokens_1.contract.borderSubtle } },
+                ],
             },
             danger: {
                 decls: {
                     background: tokens_1.contract.bgDangerSolid,
                     color: tokens_1.contract.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)" } },
@@ -82,7 +98,12 @@ const spec = (0, core_1.defineSpec)({
             ghost: {
                 decls: {
                     background: "transparent",
-                    color: tokens_1.contract.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: tokens_1.contract.fgPrimary,
                     boxShadow: "none",
                 },
                 parts: [
@@ -103,6 +124,34 @@ const spec = (0, core_1.defineSpec)({
                 fontSize: tokens_1.contract.text.md,
                 borderRadius: tokens_1.contract.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: tokens_1.contract.space["1.5"],
+                fontSize: "10px",
+                fontWeight: tokens_1.contract.weight.regular,
+                lineHeight: "15px",
+                letterSpacing: "normal",
+                borderRadius: tokens_1.contract.radius.sm,
+                gap: tokens_1.contract.space["1"],
+            },
             md: {
                 decls: {
                     height: "28px",
@@ -132,7 +181,10 @@ const spec = (0, core_1.defineSpec)({
                 height: "40px",
                 paddingInline: "14px",
                 fontSize: tokens_1.contract.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: tokens_1.contract.radius.xl,
             },
         },
         shape: {

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

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spec = exports.checkboxRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// 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 = (0, core_1.defineSpec)({
     name: "checkbox",
@@ -17,25 +19,32 @@ const spec = (0, core_1.defineSpec)({
         margin: 0,
         width: "16px",
         height: "16px",
-        border: "none",
-        borderRadius: tokens_1.contract.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 ${tokens_1.contract.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: tokens_1.contract.radius.xs,
         background: tokens_1.contract.bgSurface,
-        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.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, ${tokens_1.contract.fgPrimary} 30%, transparent)`,
+                borderColor: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent)`,
             },
         },
         {
             selector: "&:checked, &:indeterminate",
             decls: {
                 background: `${tokens_1.contract.bgBrandSolid} center / 10px no-repeat`,
-                boxShadow: "none",
+                borderColor: "transparent",
             },
         },
         { selector: "&:checked", decls: { backgroundImage: CHECK } },
@@ -53,6 +62,49 @@ const spec = (0, core_1.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: tokens_1.contract.bgNeutralWeak,
+                borderColor: tokens_1.contract.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: `${tokens_1.contract.bgNeutralWeak} center / 10px no-repeat`,
+                borderColor: tokens_1.contract.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(${tokens_1.contract.fgOnBrand}, ${tokens_1.contract.fgOnBrand})`,
+                backgroundSize: "8px 2px",
+            },
+        },
     ],
 });
 exports.spec = spec;

package/dist/cjs/components/chip/chip.js

@@ -51,9 +51,21 @@ const chip_recipe_1 = require("./chip.recipe");
  * 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.
  */
-exports.Chip = React.forwardRef(({ tone, truncate, className, asChild, children, ...props }, ref) => {
+exports.Chip = React.forwardRef(({ tone, truncate, appearance, selected, className, asChild, children, ...props }, ref) => {
     const content = truncate && !asChild && typeof children === "string" ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-chip-label", children: children })) : (children);
-    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, chip_recipe_1.chipRecipe)({ tone, truncate, className }), ...props, children: content }));
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, chip_recipe_1.chipRecipe)({
+            tone,
+            truncate,
+            appearance,
+            selected,
+            className,
+        }), ...props, children: content }));
 });
 exports.Chip.displayName = "Chip";

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

@@ -12,6 +12,15 @@ const tokens_1 = require("../../tokens");
 // 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}%, ${tokens_1.contract.fgPrimary})`;
@@ -67,7 +76,9 @@ const spec = (0, core_1.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",
@@ -119,8 +130,67 @@ const spec = (0, core_1.defineSpec)({
                 boxShadow: ring(tokens_1.contract.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: tokens_1.contract.bgNeutralInverted,
+                color: tokens_1.contract.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 ${tokens_1.contract.borderDefault}` },
+        },
+    ],
+    defaultVariants: {
+        tone: "neutral",
+        truncate: false,
+        appearance: "filled",
+        selected: false,
     },
-    defaultVariants: { tone: "neutral", truncate: false },
 });
 exports.spec = spec;
 const config = (0, core_1.specToRecipe)(spec);