@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/table.css

@@ -11,8 +11,13 @@
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
-       ColumnCalc's own already-correct 12px trigger inset. */
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #719: overflow: clip, not hidden -- both render the ellipsis
+       identically, but hidden still honours a programmatic scrollLeft
+       assignment (a screenshot tool, a browser extension) even though it
+       already blocks user-driven wheel/scrollbar input; clip leaves no
+       scroll position for anything to move, so the truncated text can
+       never be panned out of view. */
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's `th[data-sticky]`,

package/dist/table.layered.css

@@ -12,8 +12,13 @@
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
-       ColumnCalc's own already-correct 12px trigger inset. */
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+       ColumnCalc's own already-correct 12px trigger inset. */ /* #719: overflow: clip, not hidden -- both render the ellipsis
+       identically, but hidden still honours a programmatic scrollLeft
+       assignment (a screenshot tool, a browser extension) even though it
+       already blocks user-driven wheel/scrollbar input; clip leaves no
+       scroll position for anything to move, so the truncated text can
+       never be panned out of view. */
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's `th[data-sticky]`,

package/dist/taskeditpopover.css

@@ -0,0 +1,36 @@
+.crisp-taskeditpopover { position: fixed; z-index: 70; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 0.08s ease, transform 0.08s ease; @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); } }
+.crisp-taskeditpopover {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 800px; max-width: 92vw; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-taskeditpopover-header { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 44px; box-sizing: border-box; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-taskeditpopover-heading { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-heading svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-taskeditpopover-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-close:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-body { display: flex; align-items: center; gap: var(--crisp-space-2-5); min-height: 52px; box-sizing: border-box; padding: var(--crisp-space-3); }
+    & .crisp-taskeditpopover-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; }
+    & .crisp-taskeditpopover-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
+    & .crisp-taskeditpopover-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskeditpopover-title { flex: 1; min-width: 0; border: none; border-radius: var(--crisp-radius-sm); outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-title:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; }
+    & .crisp-taskeditpopover-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 44px; box-sizing: border-box; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-3); }
+    & .crisp-taskeditpopover-chips { display: flex; align-items: center; gap: var(--crisp-space-1); min-width: 0; }
+    & .crisp-taskeditpopover-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; box-sizing: border-box; padding: 4px 8px 4px 6px; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
+    & .crisp-taskeditpopover-chip svg { flex-shrink: 0; }
+    & .crisp-taskeditpopover-chip:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-actions { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-taskeditpopover-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 6px; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-kebab:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-cancel { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-cancel:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-save { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-save:hover { background: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-taskeditpopover-key { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-taskeditpopover, .crisp-taskeditpopover * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/taskeditpopover.d.ts

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

package/dist/taskeditpopover.layered.css

@@ -0,0 +1,38 @@
+@layer crisp-components {
+.crisp-taskeditpopover { position: fixed; z-index: 70; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 0.08s ease, transform 0.08s ease; @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); } }
+.crisp-taskeditpopover {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 800px; max-width: 92vw; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-taskeditpopover-header { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 44px; box-sizing: border-box; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-taskeditpopover-heading { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-heading svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-taskeditpopover-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-close:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-body { display: flex; align-items: center; gap: var(--crisp-space-2-5); min-height: 52px; box-sizing: border-box; padding: var(--crisp-space-3); }
+    & .crisp-taskeditpopover-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; }
+    & .crisp-taskeditpopover-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
+    & .crisp-taskeditpopover-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskeditpopover-title { flex: 1; min-width: 0; border: none; border-radius: var(--crisp-radius-sm); outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskeditpopover-title:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; }
+    & .crisp-taskeditpopover-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 44px; box-sizing: border-box; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-3); }
+    & .crisp-taskeditpopover-chips { display: flex; align-items: center; gap: var(--crisp-space-1); min-width: 0; }
+    & .crisp-taskeditpopover-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; box-sizing: border-box; padding: 4px 8px 4px 6px; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
+    & .crisp-taskeditpopover-chip svg { flex-shrink: 0; }
+    & .crisp-taskeditpopover-chip:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-actions { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+    & .crisp-taskeditpopover-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 6px; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-kebab:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-cancel { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-primary); font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-cancel:hover { background: var(--crisp-bg-raised); }
+    & .crisp-taskeditpopover-save { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-save:hover { background: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-taskeditpopover-key { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-taskeditpopover, .crisp-taskeditpopover * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/tokens.css

@@ -97,6 +97,19 @@
   --crisp-stroke-select-divider: #00000010;
   --crisp-fg-select-placeholder: #b0b3ba;
   --crisp-shadow-select: #0000001f;
+  --crisp-bg-tag-swatch1: #fff3cc;
+  --crisp-bg-tag-swatch2: #f4fbcb;
+  --crisp-bg-tag-swatch3: #fdf7c4;
+  --crisp-bg-tag-swatch4: #feecf3;
+  --crisp-bg-tag-swatch5: #e0fced;
+  --crisp-bg-tag-swatch6: #ddf7ff;
+  --crisp-bg-tag-swatch7: #f6f7f7;
+  --crisp-bg-tag-swatch8: #ffebeb;
+  --crisp-bg-tag-swatch9: #feeee1;
+  --crisp-bg-tag-swatch10: #e5eeff;
+  --crisp-bg-tag-swatch11: #f5f0ff;
+  --crisp-bg-tag-swatch12: #fdedff;
+  --crisp-fg-tag-swatch: #000000;
 }
 
 [data-theme="dark"] {
@@ -170,6 +183,19 @@
   --crisp-stroke-select-divider: #ffffff17;
   --crisp-fg-select-placeholder: #868b94;
   --crisp-shadow-select: #000000cc;
+  --crisp-bg-tag-swatch1: #fff3cc;
+  --crisp-bg-tag-swatch2: #f4fbcb;
+  --crisp-bg-tag-swatch3: #fdf7c4;
+  --crisp-bg-tag-swatch4: #feecf3;
+  --crisp-bg-tag-swatch5: #e0fced;
+  --crisp-bg-tag-swatch6: #ddf7ff;
+  --crisp-bg-tag-swatch7: #f6f7f7;
+  --crisp-bg-tag-swatch8: #ffebeb;
+  --crisp-bg-tag-swatch9: #feeee1;
+  --crisp-bg-tag-swatch10: #e5eeff;
+  --crisp-bg-tag-swatch11: #f5f0ff;
+  --crisp-bg-tag-swatch12: #fdedff;
+  --crisp-fg-tag-swatch: #000000;
 }
 
 :root {

package/dist/tokens.json

@@ -70,7 +70,20 @@
       "strokeSelectInvalid": "#fa342c",
       "strokeSelectDivider": "#00000010",
       "fgSelectPlaceholder": "#b0b3ba",
-      "shadowSelect": "#0000001f"
+      "shadowSelect": "#0000001f",
+      "bgTagSwatch1": "#fff3cc",
+      "bgTagSwatch2": "#f4fbcb",
+      "bgTagSwatch3": "#fdf7c4",
+      "bgTagSwatch4": "#feecf3",
+      "bgTagSwatch5": "#e0fced",
+      "bgTagSwatch6": "#ddf7ff",
+      "bgTagSwatch7": "#f6f7f7",
+      "bgTagSwatch8": "#ffebeb",
+      "bgTagSwatch9": "#feeee1",
+      "bgTagSwatch10": "#e5eeff",
+      "bgTagSwatch11": "#f5f0ff",
+      "bgTagSwatch12": "#fdedff",
+      "fgTagSwatch": "#000000"
     },
     "dark": {
       "bgBrandSolid": "#0298d9",
@@ -142,7 +155,20 @@
       "strokeSelectInvalid": "#ff6e60",
       "strokeSelectDivider": "#ffffff17",
       "fgSelectPlaceholder": "#868b94",
-      "shadowSelect": "#000000cc"
+      "shadowSelect": "#000000cc",
+      "bgTagSwatch1": "#fff3cc",
+      "bgTagSwatch2": "#f4fbcb",
+      "bgTagSwatch3": "#fdf7c4",
+      "bgTagSwatch4": "#feecf3",
+      "bgTagSwatch5": "#e0fced",
+      "bgTagSwatch6": "#ddf7ff",
+      "bgTagSwatch7": "#f6f7f7",
+      "bgTagSwatch8": "#ffebeb",
+      "bgTagSwatch9": "#feeee1",
+      "bgTagSwatch10": "#e5eeff",
+      "bgTagSwatch11": "#f5f0ff",
+      "bgTagSwatch12": "#fdedff",
+      "fgTagSwatch": "#000000"
     }
   },
   "palette": {
@@ -212,7 +238,20 @@
       "selectInvalidStroke": "#fa342c",
       "selectDivider": "#00000010",
       "selectPlaceholder": "#b0b3ba",
-      "selectShadow": "#0000001f"
+      "selectShadow": "#0000001f",
+      "tagSwatch1": "#fff3cc",
+      "tagSwatch2": "#f4fbcb",
+      "tagSwatch3": "#fdf7c4",
+      "tagSwatch4": "#feecf3",
+      "tagSwatch5": "#e0fced",
+      "tagSwatch6": "#ddf7ff",
+      "tagSwatch7": "#f6f7f7",
+      "tagSwatch8": "#ffebeb",
+      "tagSwatch9": "#feeee1",
+      "tagSwatch10": "#e5eeff",
+      "tagSwatch11": "#f5f0ff",
+      "tagSwatch12": "#fdedff",
+      "tagSwatchInk": "#000000"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -280,7 +319,20 @@
       "selectInvalidStroke": "#ff6e60",
       "selectDivider": "#ffffff17",
       "selectPlaceholder": "#868b94",
-      "selectShadow": "#000000cc"
+      "selectShadow": "#000000cc",
+      "tagSwatch1": "#fff3cc",
+      "tagSwatch2": "#f4fbcb",
+      "tagSwatch3": "#fdf7c4",
+      "tagSwatch4": "#feecf3",
+      "tagSwatch5": "#e0fced",
+      "tagSwatch6": "#ddf7ff",
+      "tagSwatch7": "#f6f7f7",
+      "tagSwatch8": "#ffebeb",
+      "tagSwatch9": "#feeee1",
+      "tagSwatch10": "#e5eeff",
+      "tagSwatch11": "#f5f0ff",
+      "tagSwatch12": "#fdedff",
+      "tagSwatchInk": "#000000"
     }
   },
   "space": {

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

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

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

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

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

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

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

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

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

@@ -87,6 +87,14 @@ export type DataTableColumn<T> = {
     resizable?: boolean;
     /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
     tones?: Record<string, string>;
+    /**
+     * One of Attio's 12 fixed tag/option colours (your-moon/crisp#998), 1-12,
+     * per `status`/`tags` value -- renders that value's chip as a filled
+     * pill from Attio's own enumerable palette (measured: flat black text,
+     * no ring) instead of `tones`'/`toneFor`'s semantic 7-tone family. Wins
+     * over `tones` for a value present in both.
+     */
+    swatches?: Record<string, 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
     /** `type: "date"`/`"datetime"` only: render this cell in Attio's own
      * measured overdue/danger red (`fgDanger`, `#eb3b3b` — the same token
      * `TasksTable`'s own overdue due-date already uses, crisp#462) when the

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

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

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

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

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

@@ -4,8 +4,19 @@ export type MenuProps = {
     trigger: React.ReactElement;
     children: React.ReactNode;
     /** Align the menu to the trigger's inline `start` or `end` edge — the left
-     *  edge in an LTR document, the right one in RTL. */
+     *  edge in an LTR document, the right one in RTL. Ignored when
+     *  `placement="submenu"`, which decides its own side (see there). */
     align?: "start" | "end";
+    /**
+     * `"menu"` (default): a dropdown below/above the trigger, `placeFloating`'s
+     * own placement. `"submenu"` (crisp#616): a cascade BESIDE the trigger —
+     * give it a `MenuItem` (with a `trailingIcon` chevron) as `trigger`, nested
+     * inside an outer `Menu`'s children, the way Attio's own "Notifications ›"
+     * row opens "Connect Slack workspace". Reuses the same outside-click/Escape
+     * machinery below (registered as its own floating layer), so it composes
+     * with the outer Menu for free.
+     */
+    placement?: "menu" | "submenu";
     /** Controlled open state. Omit to let Menu manage it (see defaultOpen). */
     open?: boolean;
     /** Initially open, when uncontrolled. */
@@ -31,11 +42,11 @@ export type MenuProps = {
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export declare function Menu({ trigger, children, align, open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
+export declare function Menu({ trigger, children, align, placement, open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }
-export type MenuItemProps = {
+export type MenuItemProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "disabled" | "onSelect"> & {
     children: React.ReactNode;
     icon?: React.ReactNode;
     shortcut?: string;
@@ -45,16 +56,48 @@ export type MenuItemProps = {
      * `count` prop uses, not bare text.
      */
     count?: React.ReactNode;
+    /**
+     * A trailing indicator after everything else — a submenu chevron
+     * (crisp#616: give this item a nested `<Menu placement="submenu">` as its
+     * `trigger`, with a `ChevronRight` here). Plain content, not a second
+     * `icon` slot — nothing else currently needs two.
+     */
+    trailingIcon?: React.ReactNode;
     danger?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
     /** Keep the menu open after selecting (default closes). */
     closeOnSelect?: boolean;
 };
-export declare function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect, }: MenuItemProps): React.JSX.Element;
-export declare namespace MenuItem {
-    var displayName: string;
-}
+/**
+ * A row inside a `Menu`. Forwards its ref and spreads unrecognised button
+ * props (crisp#616) so it can double as another `Menu`'s own `trigger` —
+ * `Menu` clones its trigger with `ref`/`onClick`/`aria-*`, which a plain
+ * function component would silently drop.
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "disabled" | "onSelect"> & {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    /**
+     * A trailing count badge (crisp#875) — e.g. a saved-filter item showing
+     * how many rows match. Same measured neutral chip `ToolbarTool`'s own
+     * `count` prop uses, not bare text.
+     */
+    count?: React.ReactNode;
+    /**
+     * A trailing indicator after everything else — a submenu chevron
+     * (crisp#616: give this item a nested `<Menu placement="submenu">` as its
+     * `trigger`, with a `ChevronRight` here). Plain content, not a second
+     * `icon` slot — nothing else currently needs two.
+     */
+    trailingIcon?: React.ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+    /** Keep the menu open after selecting (default closes). */
+    closeOnSelect?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export type MenuCheckboxItemProps = {
     children: React.ReactNode;
     checked?: boolean;

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

@@ -4,6 +4,15 @@ export type MultiSelectOption = {
     label: string;
     /** Chip colour tone; falls back to a deterministic pastel per value. */
     tone?: string;
+    /**
+     * One of Attio's 12 fixed tag/option colours (your-moon/crisp#998), 1-12
+     * -- measured off Attio's own multi-select field option pills (flat
+     * black text, no ring, 7px radius). Wins over `tone` when both are set:
+     * `tone` is crisp's own semantic 7-tone chip family (with a ring), this
+     * is Attio's separate, workspace-admin-assigned enumerable palette,
+     * reproduced verbatim rather than mapped onto the existing tones.
+     */
+    swatch?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /**
      * Group heading, rendered above this option (#343). A header renders once
      * per run of consecutive options sharing the same `group` — like native

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

@@ -11,6 +11,16 @@ export type SelectOption = {
     keywords?: string;
     /** A status colour dot shown before the label (status/select fields). */
     color?: string;
+    /**
+     * One of Attio's 12 fixed tag/option colours (your-moon/crisp#998),
+     * 1-12 -- renders the label itself as a filled pill (measured: 22px,
+     * 7px radius, flat black text) rather than the small `color` dot beside
+     * it. The two are mutually exclusive; `swatch` wins if both are set.
+     * Distinct from `color`: that one is an arbitrary CSS value for a
+     * status-style dot, this is Attio's own enumerable, workspace-admin-
+     * assigned palette, reproduced verbatim.
+     */
+    swatch?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     disabled?: boolean;
     /**
      * Group heading, rendered above this option (#343). A header renders once

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

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

package/dist/types/core/index.d.ts

@@ -9,7 +9,7 @@ export { hasNestedFloatingLayer, hasOpenFloatingLayer, isInsideLaterFloatingLaye
 export { formValueStyle } from "./form-value";
 export { type CrispComponentDefaults, type CrispMessages, CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n";
 export { type MentionAnchor, type MentionMatch, matchMentionTrigger, } from "./mention";
-export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
+export { type FloatingAlign, type PlacedSubmenu, type PlaceFloatingOptions, type PlaceSubmenuOptions, placeFloating, placeSubmenu, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";

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

@@ -38,3 +38,40 @@ export type PlacedFloating = {
  * against would still be physical.
  */
 export declare function placeFloating({ rect, align, gap, flipBelow, anchor, }: PlaceFloatingOptions): PlacedFloating;
+export type PlaceSubmenuOptions = {
+    /** The item's own box that opens the submenu (already shifted up by the
+     *  surface's own top padding, so the FIRST row of the submenu lines up
+     *  with the item rather than the submenu's outer edge). */
+    rect: DOMRect;
+    /** The submenu surface's own rendered size (it's already in the DOM,
+     *  just not yet positioned, when `Menu` calls this — a real measurement,
+     *  not a guessed threshold). */
+    size: {
+        width: number;
+        height: number;
+    };
+    /** Gap between the item and the submenu. */
+    gap: number;
+    anchor?: Element | null;
+};
+export type PlacedSubmenu = {
+    style: React.CSSProperties;
+    /** Which side it opened on, in logical terms — for the caller's own
+     *  animation-origin hint (reuses the same vocabulary `align` does). */
+    align: FloatingAlign;
+    /** True when it flipped to a bottom anchor instead of the item's top. */
+    up: boolean;
+};
+/**
+ * Where a cascading submenu goes, BESIDE the item that opens it — not below
+ * it, the way `placeFloating`'s own dropdown does. Opens toward the inline
+ * end by default (further into the reading direction) and flips to the
+ * inline start when the surface's measured width doesn't fit there.
+ *
+ * Live-measured on Attio's own object-page "…" menu (crisp#616): the
+ * Notifications submenu sits with NO gap against the item's opposite edge
+ * (its own edge lines up exactly with the item's), so callers pass `gap: 0`
+ * for this specific cascade rather than the 4px a dropdown uses against its
+ * trigger.
+ */
+export declare function placeSubmenu({ rect, size, gap, anchor, }: PlaceSubmenuOptions): PlacedSubmenu;

package/dist/types/index.d.ts

@@ -68,6 +68,7 @@ export * from "./components/wheelpicker";
 export * from "./core";
 export * from "./product/activityfeed";
 export * from "./product/appshell";
+export * from "./product/assigneepicker";
 export * from "./product/authshell";
 export * from "./product/board";
 export * from "./product/command";
@@ -81,20 +82,27 @@ export * from "./product/inbox";
 export * from "./product/listpage";
 export * from "./product/memberssettings";
 export * from "./product/navitem";
+export * from "./product/notesgallery";
 export * from "./product/notificationssettings";
+export * from "./product/objectpagemenu";
 export * from "./product/objectsettings";
 export * from "./product/onboarding";
 export * from "./product/recordpage";
 export * from "./product/recordpanel";
+export * from "./product/recordpicker";
 export * from "./product/richtext";
 export * from "./product/savedviews";
 export * from "./product/settingssection";
 export * from "./product/settingsshell";
+export * from "./product/share";
+export * from "./product/shortcutssheet";
 export * from "./product/sidebar";
 export * from "./product/statlist";
+export * from "./product/taskeditpopover";
 export * from "./product/tasklist";
 export * from "./product/themepicker";
 export * from "./product/trialbanner";
 export * from "./product/viewtoggle";
 export * from "./product/workspacegeneralsettings";
+export * from "./product/workspaceswitchermenu";
 export * from "./tokens";