@crisp-ui-kit/crisp 0.56.0 → 0.57.0

package/dist/styles.css

@@ -82,6 +82,16 @@
   --crisp-bg-purple-soft: #f5f0ff;
   --crisp-fg-purple-soft: #6238b5;
   --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-ring-brand-soft: #d6e5ff;
+  --crisp-fg-select-neutral: #1a1c20;
+  --crisp-bg-select-listbox: #ffffff;
+  --crisp-stroke-select-trigger: #dcdee3;
+  --crisp-bg-select-pressed: #00000007;
+  --crisp-bg-select-disabled: #f3f4f5;
+  --crisp-stroke-select-invalid: #fa342c;
+  --crisp-stroke-select-divider: #00000010;
+  --crisp-fg-select-placeholder: #b0b3ba;
+  --crisp-shadow-select: #0000001f;
 }
 
 [data-theme="dark"] {
@@ -140,6 +150,16 @@
   --crisp-bg-purple-soft: #2f1e5a;
   --crisp-fg-purple-soft: #d8c4ff;
   --crisp-ring-purple-soft: #45297d;
+  --crisp-ring-brand-soft: #212224;
+  --crisp-fg-select-neutral: #f3f4f5;
+  --crisp-bg-select-listbox: #1d2025;
+  --crisp-stroke-select-trigger: #393d46;
+  --crisp-bg-select-pressed: #ffffff0d;
+  --crisp-bg-select-disabled: #2b2e35;
+  --crisp-stroke-select-invalid: #ff6e60;
+  --crisp-stroke-select-divider: #ffffff17;
+  --crisp-fg-select-placeholder: #868b94;
+  --crisp-shadow-select: #000000cc;
 }
 
 :root {
@@ -154,12 +174,14 @@
   --crisp-space-0-5: 2px;
   --crisp-space-1-5: 6px;
   --crisp-space-2-5: 10px;
+  --crisp-space-3-5: 14px;
   --crisp-radius-chip: 7px;
   --crisp-radius-sm: 6px;
   --crisp-radius-md: 8px;
   --crisp-radius-lg: 9px;
   --crisp-radius-xl: 12px;
   --crisp-radius-2xl: 16px;
+  --crisp-radius-3xl: 20px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -170,6 +192,9 @@
   --crisp-size-header: 48px;
   --crisp-size-calendarCell: 34px;
   --crisp-size-calendarPill: 32px;
+  --crisp-size-selectTriggerMd: 40px;
+  --crisp-size-selectTriggerLg: 52px;
+  --crisp-size-selectIconLg: 20px;
   --crisp-text-xs: 11px;
   --crisp-text-sm: 12px;
   --crisp-text-md: 13px;
@@ -436,6 +461,12 @@
     &[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
     &[data-tone="danger"] .crisp-callout-icon { color: var(--crisp-bg-danger); }
 }
+.crisp-callout--bordered_true {
+  border: 1px solid var(--crisp-ring-brand-soft); border-radius: var(--crisp-radius-xl); padding: var(--crisp-space-2) var(--crisp-space-3); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent);
+}
+.crisp-callout--bordered_false {
+  
+}
 
 .crisp-card {
   display: flex; flex-direction: column; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-family: var(--crisp-font-sans); color: var(--crisp-fg-primary);
@@ -1355,6 +1386,10 @@
     & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
     &:has(.crisp-input-value:disabled) { opacity: 1; }
 }
+.crisp-input--size_sm {
+  height: var(--crisp-size-row); border-radius: var(--crisp-radius-md);
+    & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
+}
 .crisp-input--size_medium {
   height: 32px; border-radius: var(--crisp-radius-md);
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
@@ -1435,6 +1470,14 @@
     .crisp-menu-item--danger svg { color: var(--crisp-bg-danger); }
     .crisp-menu-item--danger:hover, .crisp-menu-item--danger:focus-visible, .crisp-menu-item--danger[data-highlighted] { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
     .crisp-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    /* crisp#875: same measured neutral chip TableToolbar's own ToolbarTool
+       count prop uses (re-confirmed on two live Attio surfaces this round:
+       the Sort tool's own "+N" overflow, a Kanban board's stage-column
+       count) -- a small badge, not bare text. */
+    .crisp-menu-item-count { flex-shrink: 0; margin-inline-start: var(--crisp-space-1-5); display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
+      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft);
+      font-variant-numeric: tabular-nums; }
     .crisp-menu-item-shortcut { flex-shrink: 0; margin-inline-start: var(--crisp-space-3); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); letter-spacing: 0.02em; }
     .crisp-menu-item-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
     .crisp-menu-item-check--placeholder { width: 15px; }
@@ -1455,38 +1498,42 @@
 }
 
 
-    /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
-       on document.body while open (Zag re-enables it only on layers IT
-       tracks), and the portaled listbox is outside Zag's knowledge -- it
-       inherited the lock, so every option was unclickable, hit-testing
-       right through to whatever real element sat behind it. */
+    /* pointer-events: auto (#375) -- see Select's matching comment. */
     .crisp-multiselect-listbox {
       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);
-      max-height: 300px; 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);
-      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-2);
+      max-height: 480px; overflow-y: auto; padding: var(--crisp-space-2);
+      border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-select-listbox);
+      box-shadow: 0 4px 16px var(--crisp-shadow-select);
+      transform-origin: top left; opacity: 1; transform: none;
+      transition: opacity .15s cubic-bezier(0,0,.15,1), transform .15s cubic-bezier(0,0,.15,1);
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
-    .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    .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-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: var(--crisp-space-2) var(--crisp-space-3); color: var(--crisp-fg-muted); }
+    .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); }
     .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-primary); }
-    .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-muted); }
-    /* #343: same measured values as Menu's own group heading
-       (crisp-menu-label) -- reused rather than re-measured, since it's the
-       same "small muted heading above a run of rows" treatment. */
-    .crisp-multiselect-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    .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::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* 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 {
-      box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
-      padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; cursor: pointer; text-align: start;
+      box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0;
+      padding: var(--crisp-space-2-5) var(--crisp-space-4); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-xl);
+      font-family: inherit; text-align: start; cursor: pointer;
+      transition: background-color .15s cubic-bezier(.35,0,.35,1);
     }
+    /* Keyboard/hover highlight keeps crisp's own visible neutral fill, same
+       reasoning as Select's matching rule (seed's own pressed tint is too
+       faint for a keyboard-navigation indicator). */
     .crisp-multiselect-option[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-multiselect-option:active { background: var(--crisp-bg-select-pressed); }
     .crisp-multiselect-option-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; }
     .crisp-multiselect-check { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1.5px var(--crisp-border-default); color: transparent; }
     .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: var(--crisp-bg-brand-solid); box-shadow: none; color: #fff; }
-    .crisp-multiselect-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    .crisp-multiselect-empty { padding: var(--crisp-space-3) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-neutral-subtle); }
 
     .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
     .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent); }
@@ -1499,21 +1546,41 @@
   
 .crisp-multiselect {
   position: relative; display: inline-flex; width: 100%; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-multiselect-trigger { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; min-width: 0; min-height: var(--crisp-size-menuRow); margin: 0; padding: var(--crisp-space-0-5) var(--crisp-space-1-5) var(--crisp-space-0-5) var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; text-align: start; transition: background-color .12s ease, box-shadow .12s ease; }
-    & .crisp-multiselect-trigger:hover { background: var(--crisp-bg-raised); }
-    & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
-    & .crisp-multiselect-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-multiselect-trigger { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; border: 1px solid var(--crisp-stroke-select-trigger); background: transparent; cursor: pointer; text-align: start; font-family: inherit; color: var(--crisp-fg-select-neutral); transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1); }
+    /* Same pressed/disabled/readonly/focus model as Select's trigger -- see
+       that recipe's comment for why hover and an open/focus ring are gone. */
+    & .crisp-multiselect-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: var(--crisp-bg-select-pressed); }
+    & .crisp-multiselect-trigger:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-multiselect-trigger:disabled { background: var(--crisp-bg-select-disabled); cursor: not-allowed; }
+    & .crisp-multiselect-trigger:disabled .crisp-multiselect-placeholder, & .crisp-multiselect-trigger:disabled .crisp-multiselect-chevron { color: var(--crisp-fg-disabled); }
+    & .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-muted); }
-    & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
-    & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
+    & .crisp-multiselect-placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* 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; }
+}
+.crisp-multiselect--size_medium {
+  & .crisp-multiselect-trigger { min-height: var(--crisp-size-selectTriggerMd); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-2); padding: var(--crisp-space-1) var(--crisp-space-3-5); }
+    & .crisp-multiselect-chevron { width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+}
+.crisp-multiselect--size_large {
+  & .crisp-multiselect-trigger { min-height: var(--crisp-size-selectTriggerLg); border-radius: var(--crisp-radius-xl); gap: var(--crisp-space-2-5); padding: var(--crisp-space-1-5) var(--crisp-space-4); }
+    & .crisp-multiselect-chevron { width: var(--crisp-size-selectIconLg); height: var(--crisp-size-selectIconLg); }
 }
 .crisp-multiselect--invalid_true {
-  & .crisp-multiselect-trigger, & .crisp-multiselect-trigger:hover, & .crisp-multiselect-trigger[data-open], & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+  & .crisp-multiselect-trigger { border-width: 2px; border-color: var(--crisp-stroke-select-invalid); }
 }
 .crisp-multiselect--invalid_false {
   
 }
+.crisp-multiselect--variant_default {
+  
+}
+.crisp-multiselect--variant_ghost {
+  & .crisp-multiselect-trigger { min-height: 0; height: 100%; border-color: transparent; }
+    & .crisp-multiselect-trigger:hover:not(:disabled) { background: var(--crisp-bg-select-pressed); }
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-multiselect, .crisp-multiselect * {
@@ -1696,58 +1763,69 @@
 
 
     /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
-       on document.body while open (Zag re-enables it only on layers IT
-       tracks), and the portaled listbox is outside Zag's knowledge -- it
-       inherited the lock, so every option was unclickable, hit-testing
-       right through to whatever real element sat behind it. */
+       on document.body while open, and the portaled listbox is outside its
+       knowledge -- it inherited the lock without this. */
     .crisp-select-listbox {
       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);
-      max-height: 280px; 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);
-      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-2);
+      max-height: 480px; overflow-y: auto; padding: var(--crisp-space-2);
+      border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-select-listbox);
+      box-shadow: 0 4px 16px var(--crisp-shadow-select);
+      transform-origin: top left; opacity: 1; transform: none;
+      transition: opacity .15s cubic-bezier(0,0,.15,1), transform .15s cubic-bezier(0,0,.15,1);
     }
-    .crisp-select-listbox[data-up] { transform-origin: bottom; }
-    .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-1)) calc(-1 * var(--crisp-space-1)) var(--crisp-space-1); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+    .crisp-select-listbox[data-up] { transform-origin: bottom left; }
+    .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
+    .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-2)) calc(-1 * var(--crisp-space-2)) var(--crisp-space-2); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-neutral-muted); }
     .crisp-select-search svg { flex-shrink: 0; }
-    .crisp-select-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-primary); }
-    .crisp-select-search input::placeholder { color: var(--crisp-fg-muted); }
-    .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* #343: same measured values as Menu's own group heading
-       (crisp-menu-label) -- reused rather than re-measured, since it's the
-       same "small muted heading above a run of rows" treatment. */
-    .crisp-select-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    .crisp-select-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-select-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-neutral-subtle); }
+    /* select.yaml's groupLabel -- font-size/line-height/weight are the same
+       across sizes, only paddingY differs (medium 8px, large 10px). */
+    .crisp-select-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-select-option {
-      box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); flex-shrink: 0;
-      padding: 0 var(--crisp-space-2); margin: 0; border: none; background: none; border-radius: var(--crisp-radius-md);
-      font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; white-space: nowrap;
+      box-sizing: border-box; display: flex; align-items: center; flex-shrink: 0;
+      padding: var(--crisp-space-2-5) var(--crisp-space-4); margin-inline: 0; border: none; background: none; border-radius: var(--crisp-radius-xl);
+      font-family: inherit; color: var(--crisp-fg-select-neutral); text-align: start; cursor: pointer; white-space: nowrap;
+      transition: background-color .15s cubic-bezier(.35,0,.35,1), margin-inline .15s cubic-bezier(.35,0,.35,1);
     }
+    /* Keyboard/hover highlight keeps crisp's own visible neutral fill --
+       seed's spec has no "highlighted" state at all (only pressed/selected/
+       disabled), and its actual pressed tint (below) is a ~3% black hint,
+       too faint to serve as a keyboard-navigation indicator. */
     .crisp-select-option[data-highlighted] { background: var(--crisp-bg-raised); }
-    .crisp-select-option[data-disabled] { opacity: 0.5; cursor: not-allowed; }
-    .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
+    .crisp-select-option:active:not([data-disabled]) { background: var(--crisp-bg-select-pressed); margin-inline: var(--crisp-space-2); }
+    .crisp-select-option[data-disabled] { cursor: not-allowed; }
+    .crisp-select-option[data-disabled] .crisp-select-option-label,
+    .crisp-select-option[data-disabled] .crisp-select-option-description,
+    .crisp-select-option[data-disabled] .crisp-select-option-check { color: var(--crisp-fg-disabled); }
+    .crisp-select-option-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); margin-inline-end: var(--crisp-space-2); }
+    .crisp-select-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
     .crisp-select-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    .crisp-select-option-check { flex-shrink: 0; color: var(--crisp-bg-brand-solid); }
+    .crisp-select-option-description { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--crisp-fg-neutral-subtle); }
+    .crisp-select-option-check { flex-shrink: 0; color: var(--crisp-fg-select-neutral); margin-inline-start: var(--crisp-space-2); }
   
 .crisp-select {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    & .crisp-select-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
-    & .crisp-select-trigger:hover { background: var(--crisp-bg-raised); }
-    & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
-    & .crisp-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
-    & .crisp-select-placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
-    & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
-}
-.crisp-select--variant_default {
-  
-}
-.crisp-select--variant_ghost {
-  & .crisp-select-trigger { background: transparent; box-shadow: none; }
-    & .crisp-select-trigger:hover { background: var(--crisp-bg-raised); box-shadow: none; }
-    & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-select-trigger { box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; margin: 0; border: 1px solid var(--crisp-stroke-select-trigger); background: transparent; cursor: pointer; font-family: inherit; color: var(--crisp-fg-select-neutral); transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1); }
+    /* seed defines no hover state for this trigger -- only pressed, invalid, disabled and readonly. The scale-down is scoped to the CONTENT (seed's scaleScope: content), not the button itself, so the border
+       never moves. */
+    /* Only the value scales, not the chevron: the chevron's own transform is its open/close rotation, and a scale would fight it for one shared CSS property when both are true at once (pressing while open). */
+    & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: var(--crisp-bg-select-pressed); }
+    & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) .crisp-select-value { transform: scale(0.98); }
+    & .crisp-select-trigger:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
+    & .crisp-select-trigger:disabled { background: var(--crisp-bg-select-disabled); cursor: not-allowed; }
+    & .crisp-select-trigger:disabled .crisp-select-value, & .crisp-select-trigger:disabled .crisp-select-placeholder, & .crisp-select-trigger:disabled .crisp-select-chevron { color: var(--crisp-fg-disabled); }
+    /* readonly: same fill as disabled, but the value/placeholder text stays normal ink -- it reads as "answered and locked", not "answered and
+       greyed out" (select-trigger.yaml's readonly state only overrides
+       root.color; value/placeholder keep their enabled colours). */
+    & .crisp-select-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
+    & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; transition: transform .15s cubic-bezier(0,0,.15,1); }
+    & .crisp-select-placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing" curve. Overridden to 150ms on open (openRotateDuration) below -- same curve both ways, only the duration differs. */
+    & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
+    & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }
 .crisp-select--width_full {
   width: 100%;
@@ -1755,12 +1833,39 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--size_medium {
+  & .crisp-select-trigger { height: var(--crisp-size-selectTriggerMd); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-2); padding-inline: var(--crisp-space-3-5); }
+    & .crisp-select-value, & .crisp-select-placeholder { font-size: var(--crisp-text-lg); line-height: 19px; }
+    & .crisp-select-chevron { width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    .crisp-select-option { gap: var(--crisp-space-2); }
+    .crisp-select-option-label { font-size: var(--crisp-text-lg); line-height: 19px; }
+    .crisp-select-option-description { font-size: var(--crisp-text-sm); line-height: 16px; }
+    .crisp-select-option-check { width: var(--crisp-space-3); height: var(--crisp-space-3); }
+    .crisp-select-label { padding-top: var(--crisp-space-2); }
+}
+.crisp-select--size_large {
+  & .crisp-select-trigger { height: var(--crisp-size-selectTriggerLg); border-radius: var(--crisp-radius-xl); gap: var(--crisp-space-2-5); padding-inline: var(--crisp-space-4); }
+    & .crisp-select-value, & .crisp-select-placeholder { font-size: var(--crisp-text-xl); line-height: 22px; }
+    & .crisp-select-chevron { width: var(--crisp-size-selectIconLg); height: var(--crisp-size-selectIconLg); }
+    .crisp-select-option { gap: var(--crisp-space-3); }
+    .crisp-select-option-label { font-size: var(--crisp-text-xl); line-height: 22px; }
+    .crisp-select-option-description { font-size: var(--crisp-text-md); line-height: 18px; }
+    .crisp-select-option-check { width: var(--crisp-space-3-5); height: var(--crisp-space-3-5); }
+    .crisp-select-label { padding-top: var(--crisp-space-2-5); }
+}
 .crisp-select--invalid_true {
-  & .crisp-select-trigger, & .crisp-select-trigger:hover, & .crisp-select-trigger[data-open], & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px var(--crisp-bg-danger); }
+  & .crisp-select-trigger { border-width: 2px; border-color: var(--crisp-stroke-select-invalid); }
 }
 .crisp-select--invalid_false {
   
 }
+.crisp-select--variant_default {
+  
+}
+.crisp-select--variant_ghost {
+  & .crisp-select-trigger { height: 100%; border-color: transparent; }
+    & .crisp-select-trigger:hover:not(:disabled) { background: var(--crisp-bg-select-pressed); }
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-select, .crisp-select * {
@@ -2150,7 +2255,14 @@
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
 
     & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-    & .crisp-tabletoolbar-sorted-count { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 73%, transparent); }
+    & .crisp-tabletoolbar-sorted-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
+      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
+
+    & .crisp-tabletoolbar-tool-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
+      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
+      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft);
+      font-variant-numeric: tabular-nums; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
@@ -2175,6 +2287,12 @@
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 var(--crisp-space-1); border-radius: 4px; background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: 10px; line-height: 14px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
+    /* crisp#863: the "+N more" overflow trigger, measured live -- its computed style is identical to a plain .crisp-tabs-tab (same pill, same 6px icon/label gap the tab class already gives via space["1.5"]), and the dropdown it opens is crisp's own Menu/
+       MenuItem chrome (already matches Attio's popover, nothing new to style there). Only the wrapper needs a rule: an overflowed tab (or the trigger itself, when nothing is hidden) is taken out of the flex row and out of the a11y tree without ever making its own offsetWidth unmeasurable the way display:none would -- that's what
+       lets the tabs.tsx effect recompute the cutoff from cached widths on
+       every resize with no flash of an unclipped row. */
+    & .crisp-tabs-more { display: inline-flex; }
+    & [data-tabs-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: var(--crisp-space-8); }
     & .crisp-tabs-panel:focus-visible { outline: none; }
 }
@@ -2250,6 +2368,15 @@
   font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
     &:hover { color: var(--crisp-bg-brand-solid); }
 }
+.crisp-textlink--size_sm {
+  font-size: var(--crisp-text-sm);
+}
+.crisp-textlink--size_md {
+  font-size: var(--crisp-text-md);
+}
+.crisp-textlink--size_lg {
+  font-size: var(--crisp-text-lg);
+}
 
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);