@crisp-ui-kit/crisp 0.57.0 → 0.57.2

package/dist/cjs/tokens/palette.js

@@ -8,9 +8,14 @@ exports.palette = {
     // on a bright tone fill. Same value as gray900's light side (the measured
     // near-black), named separately because its job is not "primary foreground".
     ink: { light: "#101112", dark: "#101112" },
-    gray50: { light: "#f4f4f5", dark: "#101112" },
+    // seed-identity migration (your-moon/crisp#890): seed's bg.layer-default-
+    // pressed / gray-100. Light side only — dark is untouched, unmeasured
+    // Attio territory this migration doesn't scope into.
+    gray50: { light: "#f7f8f9", dark: "#101112" },
     gray900: { light: "#101112", dark: "#f5f5f5" },
-    line200: { light: "#e4e4e7", dark: "#212224" },
+    // seed-identity migration (your-moon/crisp#890): seed's stroke.neutral-
+    // weak / gray-400. Light side only, same scoping as `gray50` above.
+    line200: { light: "#dcdee3", dark: "#212224" },
     line100: { light: "#eeeff1", dark: "#1c1d1f" },
     // ImportDialog's dropzone border — measured live from Attio's Import CSV
     // flow (`rgb(230,231,234)`), distinct from `line200`/`line100` (#e4e4e7 /
@@ -22,8 +27,11 @@ exports.palette = {
     line150: { light: "#e6e7ea", dark: "#212224" },
     // The filter chip's field/value segments while the condition is
     // incomplete (no value typed yet) — measured live on Attio's own filter
-    // chip (`rgb(246,247,247)`), lighter than `gray50` (#f4f4f5, close but not
-    // equal). The chip's operator/kebab segments stay `gray00` in the same
+    // chip (`rgb(246,247,247)`), close to but not equal to `gray50`
+    // (`#f7f8f9` since the seed-identity migration, your-moon/crisp#890 — the
+    // two used to differ the other direction, gray25 lighter; the relative
+    // order isn't the point, staying off `gray50` while remaining a
+    // near-neighbour is). The chip's operator/kebab segments stay `gray00` in the same
     // state; only the two text-content segments carry this muted fill. Dark
     // value not independently re-measured (Attio's dark theme is off-limits to
     // toggle) — reuses `gray50`'s dark value, the nearest existing "muted
@@ -58,14 +66,34 @@ exports.palette = {
     ringBrandSoft: { light: "#d6e5ff", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
-    // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
-    // Create-attribute FormDialog, both themes: `rgba(0,0,0,.25)` light,
-    // `rgba(0,0,0,.55)` dark. `Dialog`'s own backdrop had shipped fully
-    // `transparent` (AUTHORING's Lesson 14 measured the command palette has
-    // NO dark backdrop and that got generalized to every `Dialog`, which this
-    // corrects — the palette is a different surface from a plain content
-    // dialog and really does dim the page).
-    bgScrim: { light: "rgba(0,0,0,0.25)", dark: "rgba(0,0,0,0.55)" },
+    // Dialog's page-dimming backdrop (crisp#677, Attio's own measured value:
+    // `rgba(0,0,0,.25)` light, `rgba(0,0,0,.55)` dark — `Dialog`'s own backdrop
+    // had shipped fully `transparent`, AUTHORING's Lesson 14 measured the
+    // command palette has NO dark backdrop and that got generalized to every
+    // `Dialog`, which this corrected).
+    //
+    // your-moon/crisp#934: light theme moved to seed-design's own scrim
+    // (`#00000074` ≈ 45% black, `bg.overlay`) — the owner's flat-dialog
+    // directive names "seed's own scrim" specifically, now that elevation is
+    // conveyed by the scrim alone (no more frosted-glass shadow/blur). Dark
+    // theme's `.55` is UNCHANGED: seed's own token system has no separate
+    // dark-theme scrim value to adopt, and `.55` wasn't found wrong -- only
+    // light had a sourced replacement value to move to.
+    bgScrim: { light: "rgba(0,0,0,0.45)", dark: "rgba(0,0,0,0.55)" },
+    // seed-design's `$color.bg.overlay` (BottomSheet/MenuSheet's own backdrop,
+    // crisp#911) — kept as its OWN token rather than folded into `bgScrim`
+    // above, even though #934 (landed after this one was added) moved
+    // `bgScrim`'s LIGHT value to the same `#00000074`: `bgOverlayStrong` is
+    // seed's literally theme-CONSTANT value (`color.yaml` gives the same hex
+    // for both `theme-light` and `theme-dark`), while `bgScrim` still differs
+    // by theme (`.45`/`.55`) -- the two tokens express different design
+    // decisions that currently coincide in one theme only.
+    bgOverlayStrong: { light: "#00000074", dark: "#00000074" },
+    // seed-design's `$color.stroke.neutral-muted` (MenuSheet group divider,
+    // crisp#911) -- a faint alpha hairline between grouped rows, theme-flipping
+    // (`color.yaml`: `static-black-alpha-300` light / `static-white-alpha-100`
+    // dark).
+    strokeGroupDivider: { light: "#00000010", dark: "#ffffff17" },
     // The discard-confirm's description line (crisp#677, `Dialog`'s new
     // `variant="alert"`) — measured live, both themes, over `popoverBg`: a
     // theme-relative alpha rather than a flat gray, so it stays legible if
@@ -84,25 +112,54 @@ exports.palette = {
     shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
     shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
     gray400: { light: "#71717a", dark: "#9a9aa2" },
-    brand600: { light: "#266df0", dark: "#266df0" },
-    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
-    red600: { light: "#e5484d", dark: "#ff5a5f" },
-    // A red dark enough to carry white text. red600 cannot: white on it is
-    // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
-    // (filter: brightness), so dark ink fails there instead (4.49 at hover).
-    // Measured from the reference stylesheet, which ships this red alongside the
-    // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
-    // destructive control needs the same white-bearing fill in both themes.
-    red700: { light: "#ba2525", dark: "#ba2525" },
-    // The #EB3B3B named in red700's own comment above (destructive menu text) —
-    // it had never actually been given a token. Independently re-measured live
-    // on `app.attio.com/.../tasks`, `rgb(235,59,59)`, as the overdue due-date
-    // text colour on the Tasks page (crisp#462) — same hex, second surface.
-    // Dark not independently re-measured (Attio's theme toggle is off-limits,
-    // same restriction noted throughout this file); reuses red600's dark value,
-    // the same "brightens for legibility on a dark surface" tone this red
-    // already sits next to, rather than inventing a third red.
-    red500: { light: "#eb3b3b", dark: "#ff5a5f" },
+    // seed-identity migration (your-moon/crisp#890, "Attio structure, seed
+    // look"): the owner's TechPartners primary (#0298D9, sourced from the
+    // official logo SVG + the live site's own compiled CSS — see
+    // ~/grc-parity/seed-identity-spec.md §1) replaces the old measured-from-
+    // Attio brand blue, built as seed's own carrot-scale RELATIVE lightness
+    // shape around that exact hex at step 600 ("Method A" in the spec — the
+    // verified logo hex stays literally in the scale, at the step that's
+    // actually rendered, rather than a mathematically tidier neighbour).
+    // Does not flip with theme, matching this token's own prior precedent.
+    brand600: { light: "#0298d9", dark: "#0298d9" },
+    // Method A's raw carrot-shape output (L 37.1%) — the hover/pressed-darken
+    // step of the ACCENT colour above, same role brand700 has always had.
+    // Not tuned for any particular contrast target; see `brandContrast` below
+    // for the token that carries that job.
+    brand700: { light: "#0283bb", dark: "#0283bb" },
+    // your-moon/crisp#897: #0298d9 (the verified brand hex, kept exactly as
+    // the ACCENT everywhere else — focus rings, selected states, icons,
+    // tints) only clears 3.23:1 against white, short of the 4.5:1 a SOLID
+    // fill carrying white text needs (Button primary, Badge solid+brand,
+    // Avatar's brand tone), or brand-coloured TEXT sitting directly on a white
+    // page (TextLink/Text's brand tone). This is that darker, AA-safe step —
+    // same hue (198°), L dropped to 34% — clearing 4.88:1 with white. An
+    // earlier round of this fix used dark ink text instead of finding this
+    // value; that read off-brand (seed's own solid buttons use white) and got
+    // reverted in favour of this.
+    brandContrast: { light: "#0278ac", dark: "#0278ac" },
+    // seed's red-700 (fg.critical) — the accent used for plain danger TEXT
+    // (an overdue due-date, a destructive menu label) and for tinting
+    // (Chip/Badge's soft-danger `color-mix()` inputs). NOT used for a solid
+    // fill paired with white text — see `red700` below for why that split
+    // matters here specifically.
+    red600: { light: "#fa342c", dark: "#ff5a5f" },
+    // seed's red-800 (bg.critical-solid-**pressed**), not red-700
+    // (bg.critical-solid-enabled, `red600` above) — deliberately the darker
+    // of the two. `red700` is crisp's SOLID destructive fill (Button danger,
+    // Badge solid+danger), which pairs with white text and, on Button,
+    // DARKENS further on hover/active via a brightness filter (not a second
+    // token, per this token's own original comment below this migration note
+    // — that invariant is why a dark-enough red matters at all). Seed's own
+    // red-700 only clears 3.76:1 with white (measured) — short of AA even
+    // before any hover darkening — so reusing crisp's existing "needs to
+    // survive getting darker" role means red-800 (5.68:1 at rest, improving
+    // through hover/active) is the correct step, not seed's literal
+    // "enabled" one. `red500` below is pure text again (no fill/contrast
+    // constraint), so it stays on the
+    // lighter red-700, matching seed exactly.
+    red700: { light: "#ca1d13", dark: "#ba2525" },
+    red500: { light: "#fa342c", dark: "#ff5a5f" },
     // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
     // measured from @seed-design/css. A high-contrast neutral rather than a brand
     // hue: the ring reads as "this field has focus", not as a state colour.
@@ -122,8 +179,25 @@ exports.palette = {
     neutralSubtle: { light: "#868b94", dark: "#b0b3ba" },
     neutralMuted: { light: "#555d6d", dark: "#dcdee3" },
     focusRing: { light: "#1e82eb", dark: "#5e98fe" },
-    green600: { light: "#1f9d57", dark: "#2ea968" },
-    amber600: { light: "#b5730f", dark: "#e0982a" },
+    // seed's fg.positive / bg.positive-solid (green-700).
+    green600: { light: "#079171", dark: "#2ea968" },
+    // seed's fg.warning / stroke.warning-solid (yellow-700) — the ACCENT used
+    // for tinting (Badge/Chip's `soft()`/`ring()` colour-mix formulas), not
+    // seed's actual solid-fill colour, which is a much paler yellow at a
+    // different scale step — see `amberSolid` below for why the two need to
+    // stay separate tokens.
+    amber600: { light: "#9b7821", dark: "#e0982a" },
+    // seed's bg.warning-solid (yellow-300) — genuinely NOT amber600 tinted
+    // lighter: seed's warning-solid is its own pale scale step, distinct from
+    // the darker accent every other tone's solid fill derives from (see the
+    // spec's Badge section). Badge's `variant="solid" tone="warning"` uses
+    // this directly, unmixed, the same way `red700`'s solid destructive fill
+    // is used directly rather than computed from a tint. Dark side is NOT
+    // independently sourced (this is a new token; no prior Attio measurement
+    // exists to preserve) — reuses amber600's own dark value as the nearest
+    // existing "warning, dark theme" tone, same convention this file uses
+    // throughout for an unmeasured dark side (ringSwitch, line150, gray25).
+    amberSolid: { light: "#fbdc65", dark: "#e0982a" },
     orange600: { light: "#f97514", dark: "#f97514" },
     cyan600: { light: "#00b9eb", dark: "#00b9eb" },
     purple600: { light: "#9b69ff", dark: "#9b69ff" },

package/dist/cjs/tokens/scale.js

@@ -9,7 +9,7 @@
 // Recipes MUST reference these through the contract (`c.space[...]`), never a
 // literal px — this file is the only exception.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.weight = exports.text = exports.font = exports.size = exports.radius = exports.space = void 0;
+exports.tracking = exports.weight = exports.text = exports.font = exports.size = exports.radius = exports.space = void 0;
 // Spacing: gaps, padding, margins. Keys follow the Tailwind step convention
 // (0.5 = half a 4px step = 2px) so the numbers stay legible to consumers.
 exports.space = {
@@ -29,13 +29,23 @@ exports.space = {
 // Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 exports.radius = {
-    chip: "7px", // tag / chip corner — the single most used radius
+    xs: "4px", // seed-design's $radius.r1 — small badge / checkbox box corner
+    // your-moon/crisp#919: was `7px` (Attio's own most-measured
+    // radius, 70 occurrences) -- now a pill, matching seed-design's own
+    // `chip.yaml` (`$radius.full` at every size, no size-based radius step at
+    // all, unlike Button/Badge). Same numeric value as `full` below, kept as
+    // its own named token because every one of this token's ~9 consumers
+    // (Chip, DataTable/RecordPage/RecordsTable/MultiSelect's own tag/mention
+    // rules, TableToolbar/DatePickerField's date-preset chips) reasons about
+    // "the chip corner" as its own concept, not literally "a generic pill".
+    chip: "999px",
     sm: "6px", // chips, badges
     md: "8px", // inputs, search box
     lg: "9px", // rows, tiles, list items
     xl: "12px", // overlay items (command rows)
     "2xl": "16px", // overlay panels (command surface)
     "3xl": "20px", // seed-design's $radius.r5 — Select's listbox corner (crisp/#867)
+    "4xl": "24px", // seed-design's $radius.r6 — BottomSheet's top corner radius (crisp/#911)
     full: "999px", // pills
 };
 // Component sizing — recurring measured dimensions that are neither spacing nor
@@ -87,3 +97,36 @@ exports.weight = {
     semibold: "600",
     bold: "700", // seed-design's font-weight-bold, for the seed-styled calendar
 };
+// Size-based letter-spacing ramp for DISPLAY/HEADING type (18px and up —
+// `text.*` above tops out at 16px and stays untracked). crisp's five
+// already-shipped headings tighten as they grow — authshell 20px/-0.4px (2%
+// of size), objectsettings 24px/-0.48px (2%), richtext 32px/-0.6px (1.875%)
+// — all Attio-measured (Inter) and left exactly as they are; this token
+// never touches them, or the button (-0.07px) / table-cell (-0.14px)
+// tracking, which are body sizes, not display type. (statcard's 28px/-0.4px,
+// 1.43%, is a looser outlier — it sets tabular numerals, not prose — and is
+// also left alone.)
+//
+// crisp#909: the study at docs/study/korean/ observed that Naver and Kakao
+// both tighten tracking as type gets bigger, and crisp's OWN large type
+// (EmptyState's 20px title, Dialog's 18px alert title, and any future
+// heading) had no tracking at all — it read as default, not set. The study
+// supplied the PATTERN only, never a number: Naver/Kakao's own values are
+// Korean-specific and were not copied. The numbers below come from rendering
+// real Mongolian Cyrillic ("Эрсдэлийн бүртгэл", "Хяналтын самбар") in VK Sans
+// Display — crisp's own font override, see `font.sans` above — at every
+// display size crisp uses today (18/20/24/26/28/32px), screenshotting six
+// candidates per size (0%, 1%, 1.5%, 2%, 2.5%, 3% of the font-size) and
+// checking for glyph collision. None collided even at 3%, so the pre-existing
+// 2%-of-size rule the five Attio headings already happen to follow was kept
+// as the ramp, rounded to the nearest 0.01px — it reads as deliberately set
+// with headroom to spare, and keeps new display type visually consistent
+// with the Attio-measured headings already shipped.
+exports.tracking = {
+    "18": "-0.36px",
+    "20": "-0.4px",
+    "24": "-0.48px",
+    "26": "-0.52px",
+    "28": "-0.56px",
+    "32": "-0.64px",
+};

package/dist/cjs/tokens/semantic.js

@@ -4,6 +4,17 @@ exports.semantic = void 0;
 exports.semantic = {
     bgBrandSolid: "brand600",
     bgBrandSolidPressed: "brand700",
+    /** your-moon/crisp#897: the AA-safe darker sibling of `bgBrandSolid` — a
+     * SOLID fill carrying white text (Button primary, Badge solid+brand,
+     * Avatar's brand tone). `bgBrandSolid` itself stays the exact brand
+     * accent (focus rings, selected states, icons, tints), unpaired with
+     * white text anywhere that matters for contrast. */
+    bgBrandContrast: "brandContrast",
+    /** your-moon/crisp#897: brand-coloured TEXT sitting on a white page
+     * (TextLink/Text's `brand` tone) — same value as `bgBrandContrast`,
+     * named separately because one's a background and one's a foreground,
+     * matching every other fg/bg pair in this file. */
+    fgBrandContrast: "brandContrast",
     fgOnBrand: "white",
     // text on a solid success/warning/danger fill. Those tone tokens BRIGHTEN in
     // dark (they are tuned for tinted backgrounds and coloured text), so white on
@@ -30,6 +41,8 @@ exports.semantic = {
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
     bgScrim: "bgScrim",
+    bgOverlayStrong: "bgOverlayStrong",
+    strokeGroupDivider: "strokeGroupDivider",
     fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",
@@ -41,6 +54,15 @@ exports.semantic = {
     shadowPopover2: "shadowPopover2",
     shadowPopover3: "shadowPopover3",
     fgPrimary: "gray900",
+    // seed-identity migration (your-moon/crisp#890): NOT touched here, on
+    // purpose. seed's closest analog (fg.neutral-subtle, #868b94) is lighter
+    // than crisp's current #71717a, and Badge's neutral-SOLID variant reuses
+    // this exact token as a BACKGROUND paired with white text
+    // (`badge.recipe.ts`'s compound variant) — #868b94 drops that pairing to
+    // 3.42:1, below AA. Retargeting `fgMuted` and fixing that one background
+    // choice belong together in Badge's own upcoming look PR, not split
+    // across two PRs where the token change alone would ship a known
+    // contrast regression.
     fgMuted: "gray400",
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
@@ -66,6 +88,10 @@ exports.semantic = {
     strokeFocusRing: "focusRing",
     bgSuccess: "green600",
     bgWarning: "amber600",
+    /** A SOLID warning fill (Badge's `variant="solid" tone="warning"`) — seed's
+     * own warning-solid is a distinct, paler yellow, not `bgWarning` tinted
+     * lighter. See `amberSolid` in palette.ts. */
+    bgWarningSolid: "amberSolid",
     bgOrange: "orange600",
     bgCyan: "cyan600",
     bgPurple: "purple600",

package/dist/columncalc.css

@@ -1,30 +1,38 @@
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
-       until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x36 with
+       until #282, so the spec check now guards it. */ /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu.
        No `min-height` (crisp#834, found reproducing the footer-row-38px-
-       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN `height: tableRow` (36px,
        border-box) leaves 34px of content box once its 2px of top+bottom
        border are counted, and `min-height: tableRow` here demanded 36px
        of CONTENT height regardless -- overflowing the cell by 2px, which
        auto-height table layout resolves by growing the whole row to fit,
        landing at exactly the reported 38. `height: 100%` alone already
-       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
     & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, `c.text.md`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
        `fgMuted` token (a close but not measured match). */
     & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/columncalc.layered.css

@@ -1,31 +1,39 @@
 @layer crisp-components {
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
-       until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x36 with
+       until #282, so the spec check now guards it. */ /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu.
        No `min-height` (crisp#834, found reproducing the footer-row-38px-
-       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN `height: tableRow` (36px,
        border-box) leaves 34px of content box once its 2px of top+bottom
        border are counted, and `min-height: tableRow` here demanded 36px
        of CONTENT height regardless -- overflowing the cell by 2px, which
        auto-height table layout resolves by growing the whole row to fit,
        landing at exactly the reported 38. `height: 100%` alone already
-       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
     & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, `c.text.md`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
        `fgMuted` token (a close but not measured match). */
     & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/command.css

@@ -7,28 +7,32 @@
     & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
     & .crisp-command-control svg { flex-shrink: 0; }
-    /* The palette's label element. It exists for the assistive tree only: zag's combobox names the input through it and points the listbox's
+    /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
-  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
-  & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
-  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
-  & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
-  & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
-  & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
-  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
-  & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); 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: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
-  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
-  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+    & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+    & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
+    & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
+    & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+    & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
+    & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* 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). */
+    & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+    & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/command.layered.css

@@ -8,28 +8,32 @@
     & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
     & .crisp-command-control svg { flex-shrink: 0; }
-    /* The palette's label element. It exists for the assistive tree only: zag's combobox names the input through it and points the listbox's
+    /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
-  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
-  & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
-  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
-  & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
-  & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
-  & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
-  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
-  & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); 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: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
-  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
-  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+    & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+    & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
+    & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
+    & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+    & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
+    & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* 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). */
+    & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+    & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
 }
 
 @media (prefers-reduced-motion: reduce) {