@crisp-ui-kit/crisp 0.57.1 → 0.57.2

package/dist/memberssettings.css

@@ -0,0 +1,67 @@
+.crisp-memberssettings {
+  & .crisp-memberssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-memberssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--crisp-space-1-5); height: 32px; padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; 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-memberssettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* your-moon/crisp#979: 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) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-brand-contrast); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 12%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 8%, transparent); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 var(--crisp-space-4); text-align: start; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); border-bottom: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 var(--crisp-space-4); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: var(--crisp-radius-full); object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: var(--crisp-space-2); min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: var(--crisp-space-8) 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
+    & .crisp-memberssettings-invitelabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-memberssettings, .crisp-memberssettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/memberssettings.d.ts

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

package/dist/memberssettings.layered.css

@@ -0,0 +1,69 @@
+@layer crisp-components {
+.crisp-memberssettings {
+  & .crisp-memberssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-memberssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--crisp-space-1-5); height: 32px; padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; 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-memberssettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* your-moon/crisp#979: 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) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-brand-contrast); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 12%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 8%, transparent); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 var(--crisp-space-4); text-align: start; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); border-bottom: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 var(--crisp-space-4); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: var(--crisp-radius-full); object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: var(--crisp-space-2); min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: var(--crisp-space-8) 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
+    & .crisp-memberssettings-invitelabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-memberssettings, .crisp-memberssettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/menu.css

@@ -8,8 +8,8 @@
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
-      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-popover);
+      box-shadow: 0 4px 16px var(--crisp-shadow-select);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     .crisp-menu-content[data-align="end"] { transform-origin: top right; }

package/dist/menu.layered.css

@@ -9,8 +9,8 @@
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
-      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-popover);
+      box-shadow: 0 4px 16px var(--crisp-shadow-select);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     .crisp-menu-content[data-align="end"] { transform-origin: top right; }

package/dist/menusheet.css

@@ -0,0 +1,36 @@
+.crisp-menusheet {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-menusheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-overlay-strong); /* menu-sheet.yaml:95 backdrop.color = $color.bg.overlay */ opacity: 1; transition: opacity 100ms cubic-bezier(0,0,.15,1); /* menu-sheet.yaml:96-98 enterDuration/enterTimingFunction = $duration.d2/$timing-function.enter */ @starting-style { opacity: 0; } }
+    & .crisp-menusheet-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; }
+    & .crisp-menusheet-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; /* menu-sheet.yaml:104 content.maxWidth */ max-height: 85vh; background: var(--crisp-bg-surface); /* menu-sheet.yaml:103 content.color = $color.bg.layer-floating */ padding: var(--crisp-space-6) var(--crisp-space-4) var(--crisp-space-4); /* menu-sheet.yaml:105-107 content.paddingX/paddingTop/paddingBottom = global-gutter/x6/x4 (16px/24px/16px) */ border-radius: var(--crisp-radius-3xl) var(--crisp-radius-3xl) 0 0; /* menu-sheet.yaml:108 content.topCornerRadius = $radius.r5 (20px) */ transform: translateY(0); transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* menu-sheet.yaml:109-110 content.enterDuration/enterTimingFunction (enter-expressive) */ @starting-style { transform: translateY(100%); } }
+    & .crisp-menusheet-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); /* menu-sheet.yaml:115 header.gap = $dimension.x1 (4px) */ padding-bottom: var(--crisp-space-4); /* menu-sheet.yaml:116 header.paddingBottom = $dimension.x4 (16px) */ flex-shrink: 0; }
+    & .crisp-menusheet-title { color: var(--crisp-fg-primary); /* menu-sheet.yaml:121 title.color = $color.fg.neutral */ font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-bold); /* menu-sheet.yaml:118-120 title.fontSize/lineHeight/fontWeight = $font-size.t6/$line-height.t6/bold */ }
+    & .crisp-menusheet-description { color: var(--crisp-fg-muted); /* menu-sheet.yaml:126 description.color = $color.fg.neutral-muted */ font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); /* menu-sheet.yaml:123-125 description.fontSize/lineHeight/fontWeight = $font-size.t4/$line-height.t4/regular */ }
+    & .crisp-menusheet-list { display: flex; flex-direction: column; gap: var(--crisp-space-2-5); /* menu-sheet.yaml:129 list.gap = $dimension.x2_5 (10px) */ overflow-y: auto; min-height: 0; }
+    & .crisp-menusheet-group { display: flex; flex-direction: column; border-radius: var(--crisp-radius-2xl); overflow: hidden; /* menu-sheet.yaml:131 group.cornerRadius = $radius.r4 (16px) */ }
+    & .crisp-menusheet-group > * + * { border-top: 1px solid var(--crisp-stroke-group-divider); }
+    /* menu-sheet.yaml:132-134 divider.strokeBottomWidth/strokeColor = 1px/$color.stroke.neutral-muted */
+    & .crisp-menusheet-footer { flex-shrink: 0; padding-top: var(--crisp-space-2-5); /* menu-sheet.yaml:136 footer.paddingTop = $dimension.x2_5 (10px) */ }
+    & .crisp-menusheet-item { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 52px; /* menu-sheet-item.yaml:72 root.minHeight */ padding: var(--crisp-space-3-5) var(--crisp-space-4); gap: var(--crisp-space-3-5); /* menu-sheet-item.yaml:73-75 root.paddingX/paddingY/gap = x4/x3_5/x3_5 (16px/14px/14px) */ border: none; margin: 0; cursor: pointer; text-align: start; background: var(--crisp-bg-neutral-weak); /* menu-sheet-item.yaml:71 root.color = $color.bg.neutral-weak */ font-family: inherit; }
+    & .crisp-menusheet-item:hover, & .crisp-menusheet-item:active { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, var(--crisp-bg-neutral-weak)); }
+    /* menu-sheet-item.yaml:90-91 pressed.root.color = $color.bg.neutral-weak-pressed, approximated as a tint over the base fill */
+    & .crisp-menusheet-item:active .crisp-menusheet-item-content { transform: scale(0.98); }
+    /* menu-sheet-item.yaml:92 pressed.root.scaleScope = content */
+    & .crisp-menusheet-item-icon { flex-shrink: 0; display: inline-flex; width: 22px; height: 22px; }
+    /* menu-sheet-item.yaml:77 prefixIcon.size */
+    & .crisp-menusheet-item-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); /* menu-sheet-item.yaml:79 content.gap = $dimension.x0_5 (2px) */ transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-menusheet-item-label { font-size: var(--crisp-text-xl); line-height: 22px; font-weight: var(--crisp-weight-regular); /* menu-sheet-item.yaml:81-83 label.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */ }
+    & .crisp-menusheet-item-description { color: var(--crisp-fg-neutral-subtle); /* menu-sheet-item.yaml:88 description.color = $color.fg.neutral-subtle */ font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-medium); /* menu-sheet-item.yaml:85-87 description.fontSize/lineHeight/fontWeight = $font-size.t3/$line-height.t3/medium */ }
+    & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-label { color: var(--crisp-fg-primary); }
+    /* menu-sheet-item.yaml:93-98 tone=neutral */
+    & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-label { color: var(--crisp-fg-danger); }
+    /* menu-sheet-item.yaml:99-104 tone=critical */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-menusheet, .crisp-menusheet * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/menusheet.d.ts

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

package/dist/menusheet.layered.css

@@ -0,0 +1,38 @@
+@layer crisp-components {
+.crisp-menusheet {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-menusheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-overlay-strong); /* menu-sheet.yaml:95 backdrop.color = $color.bg.overlay */ opacity: 1; transition: opacity 100ms cubic-bezier(0,0,.15,1); /* menu-sheet.yaml:96-98 enterDuration/enterTimingFunction = $duration.d2/$timing-function.enter */ @starting-style { opacity: 0; } }
+    & .crisp-menusheet-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; }
+    & .crisp-menusheet-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; /* menu-sheet.yaml:104 content.maxWidth */ max-height: 85vh; background: var(--crisp-bg-surface); /* menu-sheet.yaml:103 content.color = $color.bg.layer-floating */ padding: var(--crisp-space-6) var(--crisp-space-4) var(--crisp-space-4); /* menu-sheet.yaml:105-107 content.paddingX/paddingTop/paddingBottom = global-gutter/x6/x4 (16px/24px/16px) */ border-radius: var(--crisp-radius-3xl) var(--crisp-radius-3xl) 0 0; /* menu-sheet.yaml:108 content.topCornerRadius = $radius.r5 (20px) */ transform: translateY(0); transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* menu-sheet.yaml:109-110 content.enterDuration/enterTimingFunction (enter-expressive) */ @starting-style { transform: translateY(100%); } }
+    & .crisp-menusheet-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); /* menu-sheet.yaml:115 header.gap = $dimension.x1 (4px) */ padding-bottom: var(--crisp-space-4); /* menu-sheet.yaml:116 header.paddingBottom = $dimension.x4 (16px) */ flex-shrink: 0; }
+    & .crisp-menusheet-title { color: var(--crisp-fg-primary); /* menu-sheet.yaml:121 title.color = $color.fg.neutral */ font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-bold); /* menu-sheet.yaml:118-120 title.fontSize/lineHeight/fontWeight = $font-size.t6/$line-height.t6/bold */ }
+    & .crisp-menusheet-description { color: var(--crisp-fg-muted); /* menu-sheet.yaml:126 description.color = $color.fg.neutral-muted */ font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); /* menu-sheet.yaml:123-125 description.fontSize/lineHeight/fontWeight = $font-size.t4/$line-height.t4/regular */ }
+    & .crisp-menusheet-list { display: flex; flex-direction: column; gap: var(--crisp-space-2-5); /* menu-sheet.yaml:129 list.gap = $dimension.x2_5 (10px) */ overflow-y: auto; min-height: 0; }
+    & .crisp-menusheet-group { display: flex; flex-direction: column; border-radius: var(--crisp-radius-2xl); overflow: hidden; /* menu-sheet.yaml:131 group.cornerRadius = $radius.r4 (16px) */ }
+    & .crisp-menusheet-group > * + * { border-top: 1px solid var(--crisp-stroke-group-divider); }
+    /* menu-sheet.yaml:132-134 divider.strokeBottomWidth/strokeColor = 1px/$color.stroke.neutral-muted */
+    & .crisp-menusheet-footer { flex-shrink: 0; padding-top: var(--crisp-space-2-5); /* menu-sheet.yaml:136 footer.paddingTop = $dimension.x2_5 (10px) */ }
+    & .crisp-menusheet-item { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 52px; /* menu-sheet-item.yaml:72 root.minHeight */ padding: var(--crisp-space-3-5) var(--crisp-space-4); gap: var(--crisp-space-3-5); /* menu-sheet-item.yaml:73-75 root.paddingX/paddingY/gap = x4/x3_5/x3_5 (16px/14px/14px) */ border: none; margin: 0; cursor: pointer; text-align: start; background: var(--crisp-bg-neutral-weak); /* menu-sheet-item.yaml:71 root.color = $color.bg.neutral-weak */ font-family: inherit; }
+    & .crisp-menusheet-item:hover, & .crisp-menusheet-item:active { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, var(--crisp-bg-neutral-weak)); }
+    /* menu-sheet-item.yaml:90-91 pressed.root.color = $color.bg.neutral-weak-pressed, approximated as a tint over the base fill */
+    & .crisp-menusheet-item:active .crisp-menusheet-item-content { transform: scale(0.98); }
+    /* menu-sheet-item.yaml:92 pressed.root.scaleScope = content */
+    & .crisp-menusheet-item-icon { flex-shrink: 0; display: inline-flex; width: 22px; height: 22px; }
+    /* menu-sheet-item.yaml:77 prefixIcon.size */
+    & .crisp-menusheet-item-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); /* menu-sheet-item.yaml:79 content.gap = $dimension.x0_5 (2px) */ transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-menusheet-item-label { font-size: var(--crisp-text-xl); line-height: 22px; font-weight: var(--crisp-weight-regular); /* menu-sheet-item.yaml:81-83 label.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */ }
+    & .crisp-menusheet-item-description { color: var(--crisp-fg-neutral-subtle); /* menu-sheet-item.yaml:88 description.color = $color.fg.neutral-subtle */ font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-medium); /* menu-sheet-item.yaml:85-87 description.fontSize/lineHeight/fontWeight = $font-size.t3/$line-height.t3/medium */ }
+    & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-label { color: var(--crisp-fg-primary); }
+    /* menu-sheet-item.yaml:93-98 tone=neutral */
+    & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-label { color: var(--crisp-fg-danger); }
+    /* menu-sheet-item.yaml:99-104 tone=critical */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-menusheet, .crisp-menusheet * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/multiselect.css

@@ -11,13 +11,19 @@
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    /* LOCKED geometry (#481, guarded by build/spec-check.mjs): height 36px,
-       gap space["1.5"] (6px), no border-bottom -- an Attio measurement, not
-       part of this seed-parity pass. Only colours below follow Select. */
-    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-2)) calc(-1 * var(--crisp-space-2)) var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); color: var(--crisp-fg-neutral-muted); }
+    /* Seed geometry (build/spec-check.mjs guards these four properties
+       directly), superseding #481's old Attio lock -- see this file's
+       header comment and Select's matching .crisp-select-search comment
+       for the full citation. An ordinary flex child of the listbox, so its
+       own 8px gap provides the inset/seam on every side, same as Select. */
+    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-selectTriggerMd); flex-shrink: 0; padding: 0 var(--crisp-space-3-5); border: 1px solid var(--crisp-stroke-select-trigger); border-radius: var(--crisp-radius-md); color: var(--crisp-fg-neutral-muted); }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-select-neutral); }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* Same header/body seam as Select's own .crisp-select-divider -- see
+       that recipe's comment for the seed source (select.yaml's divider
+       slot, stroke.neutral-muted). */
+    .crisp-multiselect-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
     .crisp-multiselect-label { padding: var(--crisp-space-2) var(--crisp-space-4) 0; font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-neutral-subtle); }
     .crisp-multiselect-option {
@@ -57,7 +63,8 @@
     & .crisp-multiselect-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/openRotateDuration, same asymmetric timing as Select's own chevron (see that recipe's comment). */
+    /* closeRotateDuration/openRotateDuration, same asymmetric timing as
+       Select's own chevron (see that recipe's comment). */
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }

package/dist/multiselect.layered.css

@@ -12,13 +12,19 @@
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    /* LOCKED geometry (#481, guarded by build/spec-check.mjs): height 36px,
-       gap space["1.5"] (6px), no border-bottom -- an Attio measurement, not
-       part of this seed-parity pass. Only colours below follow Select. */
-    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-2)) calc(-1 * var(--crisp-space-2)) var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); color: var(--crisp-fg-neutral-muted); }
+    /* Seed geometry (build/spec-check.mjs guards these four properties
+       directly), superseding #481's old Attio lock -- see this file's
+       header comment and Select's matching .crisp-select-search comment
+       for the full citation. An ordinary flex child of the listbox, so its
+       own 8px gap provides the inset/seam on every side, same as Select. */
+    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-selectTriggerMd); flex-shrink: 0; padding: 0 var(--crisp-space-3-5); border: 1px solid var(--crisp-stroke-select-trigger); border-radius: var(--crisp-radius-md); color: var(--crisp-fg-neutral-muted); }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-select-neutral); }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* Same header/body seam as Select's own .crisp-select-divider -- see
+       that recipe's comment for the seed source (select.yaml's divider
+       slot, stroke.neutral-muted). */
+    .crisp-multiselect-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
     .crisp-multiselect-label { padding: var(--crisp-space-2) var(--crisp-space-4) 0; font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-neutral-subtle); }
     .crisp-multiselect-option {
@@ -58,7 +64,8 @@
     & .crisp-multiselect-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/openRotateDuration, same asymmetric timing as Select's own chevron (see that recipe's comment). */
+    /* closeRotateDuration/openRotateDuration, same asymmetric timing as
+       Select's own chevron (see that recipe's comment). */
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "bgBrandContrast" | "fgBrandContrast" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgWarningSolid" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft" | "ringBrandSoft" | "fgSelectNeutral" | "bgSelectListbox" | "strokeSelectTrigger" | "bgSelectPressed" | "bgSelectDisabled" | "strokeSelectInvalid" | "strokeSelectDivider" | "fgSelectPlaceholder" | "shadowSelect", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "bgBrandContrast" | "fgBrandContrast" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "bgOverlayStrong" | "strokeGroupDivider" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgWarningSolid" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft" | "ringBrandSoft" | "fgSelectNeutral" | "bgSelectListbox" | "strokeSelectTrigger" | "bgSelectPressed" | "bgSelectDisabled" | "strokeSelectInvalid" | "strokeSelectDivider" | "fgSelectPlaceholder" | "shadowSelect", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;
@@ -10,6 +10,7 @@ export declare const tokens: {
   radius: Record<string, number>;
   size: Record<string, number>;
   text: Record<string, number>;
+  tracking: Record<string, number>;
   font: Record<string, string>;
   weight: Record<string, string>;
 };

package/dist/native/tokens.js

@@ -22,7 +22,9 @@ export const tokens = {
       "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "bgOverlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -93,6 +95,8 @@ export const tokens = {
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "bgOverlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -161,7 +165,9 @@ export const tokens = {
       "ringBrandSoft": "#d6e5ff",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
-      "bgScrim": "rgba(0,0,0,0.25)",
+      "bgScrim": "rgba(0,0,0,0.45)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#00000010",
       "fgAlertDescription": "rgba(0,0,0,0.63)",
       "overlayFrost": "#ffffff",
       "shadowOverlay1": "rgba(28,40,64,0.12)",
@@ -228,6 +234,8 @@ export const tokens = {
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
+      "bgOverlayStrong": "#00000074",
+      "strokeGroupDivider": "#ffffff17",
       "fgAlertDescription": "rgba(255,255,255,0.6)",
       "overlayFrost": "#1c1d1f",
       "shadowOverlay1": "rgba(0,0,0,0.48)",
@@ -294,13 +302,14 @@ export const tokens = {
   },
   "radius": {
     "xs": 4,
-    "chip": 7,
+    "chip": 999,
     "sm": 6,
     "md": 8,
     "lg": 9,
     "xl": 12,
     "2xl": 16,
     "3xl": 20,
+    "4xl": 24,
     "full": 999
   },
   "size": {
@@ -324,6 +333,14 @@ export const tokens = {
     "lg": 14,
     "xl": 16
   },
+  "tracking": {
+    "18": -0.36,
+    "20": -0.4,
+    "24": -0.48,
+    "26": -0.52,
+    "28": -0.56,
+    "32": -0.64
+  },
   "font": {
     "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },

package/dist/notificationssettings.css

@@ -0,0 +1,22 @@
+.crisp-notificationssettings {
+  & .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-6); padding: var(--crisp-space-2) var(--crisp-space-3); border: 1px solid var(--crisp-border-subtle); border-radius: 12px; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-notificationssettings-rowtitle { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-notificationssettings-rowdesc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid var(--crisp-border-subtle); border-radius: 12px; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: var(--crisp-space-3); padding: 0 var(--crisp-space-4); height: 40px; border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: var(--crisp-space-1-5); flex: 1; min-width: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); width: 64px; flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: var(--crisp-space-3); padding: var(--crisp-space-2) var(--crisp-space-4); min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: var(--crisp-space-1); flex: 1; min-width: 0; }
+    & .crisp-notificationssettings-matrixrow-col { display: flex; align-items: center; justify-content: center; width: 64px; flex-shrink: 0; }
+}

package/dist/notificationssettings.d.ts

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

package/dist/notificationssettings.layered.css

@@ -0,0 +1,24 @@
+@layer crisp-components {
+.crisp-notificationssettings {
+  & .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-6); padding: var(--crisp-space-2) var(--crisp-space-3); border: 1px solid var(--crisp-border-subtle); border-radius: 12px; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-notificationssettings-rowtitle { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-notificationssettings-rowdesc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid var(--crisp-border-subtle); border-radius: 12px; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: var(--crisp-space-3); padding: 0 var(--crisp-space-4); height: 40px; border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: var(--crisp-space-1-5); flex: 1; min-width: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); width: 64px; flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: var(--crisp-space-3); padding: var(--crisp-space-2) var(--crisp-space-4); min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: var(--crisp-space-1); flex: 1; min-width: 0; }
+    & .crisp-notificationssettings-matrixrow-col { display: flex; align-items: center; justify-content: center; width: 64px; flex-shrink: 0; }
+}
+}

package/dist/objectsettings.css

@@ -12,22 +12,22 @@
     & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
     & .crisp-objectsettings-filterbtn:hover { background: var(--crisp-bg-raised); }
     /* Object / attribute icon tile — Attio's own squircle (measured
-       border-radius: 30%, not a scale token: it's a proportional radius tied to the tile's own size, unlike every other radius crisp uses,
+       border-radius: 30%, not a scale token: it's a proportional radius
+       tied to the tile's own size, unlike every other radius crisp uses,
        which is a fixed px). */
     & .crisp-objectsettings-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 30%; color: var(--crisp-fg-on-brand); }
     & .crisp-objectsettings-icon--lg { width: 48px; height: 48px; border-radius: 16px; }
-
     /* "Standard"/"Custom" type badge and the muted "No records" cell —
        plain text, not a Badge pill (measured: transparent background). */
     & .crisp-objectsettings-typebadge { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-objectsettings-muted { color: var(--crisp-fg-muted); }
-
     /* Attribute-type option row (icon + label + optional trailing badge),
        composed as a Select option's `label` ReactNode. */
     & .crisp-objectsettings-typeoption { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; min-width: 0; }
     & .crisp-objectsettings-typeoption-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-objectsettings-typeoption-badge { flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-soft); }
-    /* Create-attribute dialog's AI-autofill row and the submit button's ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
+    /* Create-attribute dialog's AI-autofill row and the submit button's
+       ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
        .crisp-dialog-submit-key, kept local rather than reaching into
        another component's scoped classes). */
     & .crisp-objectsettings-aiautofill { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }

package/dist/objectsettings.layered.css

@@ -13,22 +13,22 @@
     & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
     & .crisp-objectsettings-filterbtn:hover { background: var(--crisp-bg-raised); }
     /* Object / attribute icon tile — Attio's own squircle (measured
-       border-radius: 30%, not a scale token: it's a proportional radius tied to the tile's own size, unlike every other radius crisp uses,
+       border-radius: 30%, not a scale token: it's a proportional radius
+       tied to the tile's own size, unlike every other radius crisp uses,
        which is a fixed px). */
     & .crisp-objectsettings-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 30%; color: var(--crisp-fg-on-brand); }
     & .crisp-objectsettings-icon--lg { width: 48px; height: 48px; border-radius: 16px; }
-
     /* "Standard"/"Custom" type badge and the muted "No records" cell —
        plain text, not a Badge pill (measured: transparent background). */
     & .crisp-objectsettings-typebadge { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-objectsettings-muted { color: var(--crisp-fg-muted); }
-
     /* Attribute-type option row (icon + label + optional trailing badge),
        composed as a Select option's `label` ReactNode. */
     & .crisp-objectsettings-typeoption { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; min-width: 0; }
     & .crisp-objectsettings-typeoption-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-objectsettings-typeoption-badge { flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-soft); }
-    /* Create-attribute dialog's AI-autofill row and the submit button's ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
+    /* Create-attribute dialog's AI-autofill row and the submit button's
+       ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
        .crisp-dialog-submit-key, kept local rather than reaching into
        another component's scoped classes). */
     & .crisp-objectsettings-aiautofill { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }