@crisp-ui-kit/crisp 0.57.1 → 0.57.2

package/dist/table.css

@@ -1,38 +1,56 @@
 .crisp-table {
-  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps` (style/className on this element), and the header/footer below pin inside it exactly the way Attio's own grid does ("Both the header and
+  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
        the summary row are sticky, on the scroll container rather than the
        cells" -- docs/study/attio-table.md). Unbounded, `overflow: auto`
        shows no vertical scrollbar and nothing sticks, so this is a no-op
        for every existing consumer that never set a height. */
     & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    /* #465: 12px, not crisp's old 8px -- measured on a live header cell (padding: 0 12px) and independently on a body cell's text inset
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
+       (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
-       and below a sticky-column corner cell (DataTable's `th[data-sticky]`, z-index 3), so the corner always wins. `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
+       and below a sticky-column corner cell (DataTable's `th[data-sticky]`,
+       z-index 3), so the corner always wins.
+       `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
        column renders its BODY cell as a real `<th scope="row">` (#779, for
        a11y), and a bare `th` here matched that one too -- every property in
        this rule leaked onto it: `height: tableHeader` (40px) stretched the
        whole body row to 40px instead of 36 (#833, confirmed live on the
        showcase, every td in the row equalized to the one th); `color:
-       color-mix(...63%...)` muted the primary column's own text below every sibling `<td>`'s full-opacity color (#835, re-measured live against
-       Attio's own header labels -- including a genuinely computed one, "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no muting at all, so this drops the color-mix entirely rather than narrowing it); `position:sticky; top:0` tried to stick a BODY row to the scroll container's top; the extra `border-top` doubled that
-       row's own grid line. `thead th` simply never matches `tbody th[scope=row]` at all, so none of this reaches it; the base `& th, & td` rule above (36px, one border-bottom, full opacity via `& table`'s own color) applies to it like every other cell. */
+       color-mix(...63%...)` muted the primary column's own text below every
+       sibling `<td>`'s full-opacity color (#835, re-measured live against
+       Attio's own header labels -- including a genuinely computed one,
+       "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no
+       muting at all, so this drops the color-mix entirely rather than
+       narrowing it); `position:sticky; top:0` tried to stick a BODY row
+       to the scroll container's top; the extra `border-top` doubled that
+       row's own grid line. `thead th` simply never matches
+       `tbody th[scope=row]` at all, so none of this reaches it; the base
+       `& th, & td` rule above (36px, one border-bottom, full opacity via
+       `& table`'s own color) applies to it like every other cell. */
     & thead th { position: sticky; top: 0; z-index: 2; height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-primary); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
-    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the header rule above to `thead th` correctly stopped it leaking onto the primary column's body cell (a real `<th scope="row">` since
-       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)` was the ONLY thing overriding the browser's own UA stylesheet default
+    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the
+       header rule above to `thead th` correctly stopped it leaking onto
+       the primary column's body cell (a real `<th scope="row">` since
+       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)`
+       was the ONLY thing overriding the browser's own UA stylesheet default
        for `<th>` (`font-weight: bold; text-align: center`) on that cell --
        once the leak stopped, a plain-text primary column fell through to
        bold+centred instead of matching its sibling `<td>`s (`400`/start,
-       Attio's own plain-text primary cell). `text-align` was already safe (the base `& th, & td` rule's own `text-align: start` above is
+       Attio's own plain-text primary cell). `text-align` was already safe
+       (the base `& th, & td` rule's own `text-align: start` above is
        author-origin and always beats the UA stylesheet regardless of
        specificity) but is restated here explicitly, defensively -- cheap,
        and removes any doubt. `type: "entity"` primary columns are a
-       separate case (Attio's own entity/record names are 500, not 400) -- see `.crisp-datatable-entity-name`'s own new explicit weight in
+       separate case (Attio's own entity/record names are 500, not 400) --
+       see `.crisp-datatable-entity-name`'s own new explicit weight in
        datatable.recipe.ts, which wins here by class specificity. */
     & tbody th { font-weight: var(--crisp-weight-regular); text-align: start; }
     & th:last-child, & td:last-child { border-inline-end: none; }

package/dist/table.layered.css

@@ -1,39 +1,57 @@
 @layer crisp-components {
 .crisp-table {
-  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps` (style/className on this element), and the header/footer below pin inside it exactly the way Attio's own grid does ("Both the header and
+  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
        the summary row are sticky, on the scroll container rather than the
        cells" -- docs/study/attio-table.md). Unbounded, `overflow: auto`
        shows no vertical scrollbar and nothing sticks, so this is a no-op
        for every existing consumer that never set a height. */
     & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    /* #465: 12px, not crisp's old 8px -- measured on a live header cell (padding: 0 12px) and independently on a body cell's text inset
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
+       (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
-       and below a sticky-column corner cell (DataTable's `th[data-sticky]`, z-index 3), so the corner always wins. `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
+       and below a sticky-column corner cell (DataTable's `th[data-sticky]`,
+       z-index 3), so the corner always wins.
+       `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
        column renders its BODY cell as a real `<th scope="row">` (#779, for
        a11y), and a bare `th` here matched that one too -- every property in
        this rule leaked onto it: `height: tableHeader` (40px) stretched the
        whole body row to 40px instead of 36 (#833, confirmed live on the
        showcase, every td in the row equalized to the one th); `color:
-       color-mix(...63%...)` muted the primary column's own text below every sibling `<td>`'s full-opacity color (#835, re-measured live against
-       Attio's own header labels -- including a genuinely computed one, "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no muting at all, so this drops the color-mix entirely rather than narrowing it); `position:sticky; top:0` tried to stick a BODY row to the scroll container's top; the extra `border-top` doubled that
-       row's own grid line. `thead th` simply never matches `tbody th[scope=row]` at all, so none of this reaches it; the base `& th, & td` rule above (36px, one border-bottom, full opacity via `& table`'s own color) applies to it like every other cell. */
+       color-mix(...63%...)` muted the primary column's own text below every
+       sibling `<td>`'s full-opacity color (#835, re-measured live against
+       Attio's own header labels -- including a genuinely computed one,
+       "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no
+       muting at all, so this drops the color-mix entirely rather than
+       narrowing it); `position:sticky; top:0` tried to stick a BODY row
+       to the scroll container's top; the extra `border-top` doubled that
+       row's own grid line. `thead th` simply never matches
+       `tbody th[scope=row]` at all, so none of this reaches it; the base
+       `& th, & td` rule above (36px, one border-bottom, full opacity via
+       `& table`'s own color) applies to it like every other cell. */
     & thead th { position: sticky; top: 0; z-index: 2; height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-primary); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
-    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the header rule above to `thead th` correctly stopped it leaking onto the primary column's body cell (a real `<th scope="row">` since
-       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)` was the ONLY thing overriding the browser's own UA stylesheet default
+    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the
+       header rule above to `thead th` correctly stopped it leaking onto
+       the primary column's body cell (a real `<th scope="row">` since
+       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)`
+       was the ONLY thing overriding the browser's own UA stylesheet default
        for `<th>` (`font-weight: bold; text-align: center`) on that cell --
        once the leak stopped, a plain-text primary column fell through to
        bold+centred instead of matching its sibling `<td>`s (`400`/start,
-       Attio's own plain-text primary cell). `text-align` was already safe (the base `& th, & td` rule's own `text-align: start` above is
+       Attio's own plain-text primary cell). `text-align` was already safe
+       (the base `& th, & td` rule's own `text-align: start` above is
        author-origin and always beats the UA stylesheet regardless of
        specificity) but is restated here explicitly, defensively -- cheap,
        and removes any doubt. `type: "entity"` primary columns are a
-       separate case (Attio's own entity/record names are 500, not 400) -- see `.crisp-datatable-entity-name`'s own new explicit weight in
+       separate case (Attio's own entity/record names are 500, not 400) --
+       see `.crisp-datatable-entity-name`'s own new explicit weight in
        datatable.recipe.ts, which wins here by class specificity. */
     & tbody th { font-weight: var(--crisp-weight-regular); text-align: start; }
     & th:last-child, & td:last-child { border-inline-end: none; }

package/dist/tabletoolbar.css

@@ -7,12 +7,18 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    /* crisp/#830: every trigger label here (Sort, Filter, View settings, Import/Export -- all compose this one shared .tool rule) read the "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
-       (the button root itself inherits Attio's own 10px rem base and is a red herring, the same trap the original "10px font" layout-audit finding fell into): every label leaf is 14px/500/lh20, the "lg" text size. */
+    /* crisp/#830: every trigger label here (Sort, Filter, View settings,
+       Import/Export -- all compose this one shared .tool rule) read the
+       "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
+       (the button root itself inherits Attio's own 10px rem base and is a
+       red herring, the same trap the original "10px font" layout-audit
+       finding fell into): every label leaf is 14px/500/lh20, the "lg" text
+       size. */
     & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
+    /* crisp/#772: re-measured live on Sort with an actual sort applied --
+       an active trigger's own fill is white (bgSurface), the same as the
        base .tool rule above now already sets; this override existed to
        distinguish active from a base state that used to be transparent.
        Kept explicit (not just deleted) so a future change to the base
@@ -23,13 +29,23 @@
     /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
        trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
        a dashed ::before (1px dashed, border-radius: inherit, absolutely
-       positioned inset: 0) over a barely-there fill, confirmed on Attio's own empty Filter chip (its ::before border computes to exactly "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger drops the dashed pseudo and picks up the base tool's own solid ring
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's
+       own empty Filter chip (its ::before border computes to exactly
+       "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger
+       drops the dashed pseudo and picks up the base tool's own solid ring
        instead (the --active modifier, unchanged) -- confirmed on Sort with
        an actual sort applied. color-mix (not the raw rgba Attio computes
        to) so both the border and the fill flip correctly in dark mode, the
        same reasoning --ghost above already uses. Only wired into
-       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's own Sort/Filter triggers share this same chrome function but are deprecated, not touched here. crisp/#844, correcting #831: the label colour was added here later, muting only the FILTER trigger (via a "--filter" modifier), on the assumption that was a Filter-specific tone distinct from Sort's.
-       Re-measured live and that premise was wrong -- Sort's own resting label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5) as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
+       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's
+       own Sort/Filter triggers share this same chrome function but are
+       deprecated, not touched here.
+       crisp/#844, correcting #831: the label colour was added here later,
+       muting only the FILTER trigger (via a "--filter" modifier), on the
+       assumption that was a Filter-specific tone distinct from Sort's.
+       Re-measured live and that premise was wrong -- Sort's own resting
+       label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5)
+       as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
        "Sort's colour" in an earlier pass is a different thing entirely: the
        "Sorted by" PREFIX word inside an ACTIVE sort chip, #788 -- a
        compound-label treatment that only exists once a sort is applied, not
@@ -116,17 +132,21 @@
     & .crisp-tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-tabletoolbar-spacer { flex: 1; }
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 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; transition: background-color .12s; }
-    & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
-
+    /* 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).
+       Hover is a brightness filter on the new fill, not bgBrandSolidPressed
+       (that token stays tuned for the lighter accent's own consumers). */
+    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 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; transition: filter .12s; }
+    & .crisp-tabletoolbar-new:hover { filter: brightness(0.96); }
     & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
     & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field, & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
-    /* #592: a nested pick's field segment ("Team › Twitter follower count") — measured live: BOTH path segments the same colour (chip
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip
        context only; the picker's own menu rows keep the parent muted, see
        tabletoolbar.chrome.ts), each independently truncated. Attio's own
        layout gives the leaf segment priority (it stays fully readable
@@ -152,8 +172,7 @@
     & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
     & .crisp-tabletoolbar-sort-field-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-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
-    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
-    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"], & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
     & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
@@ -161,18 +180,10 @@
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
-
     & .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 { 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; }
+    & .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); }
 }
 

package/dist/tabletoolbar.layered.css

@@ -8,12 +8,18 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    /* crisp/#830: every trigger label here (Sort, Filter, View settings, Import/Export -- all compose this one shared .tool rule) read the "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
-       (the button root itself inherits Attio's own 10px rem base and is a red herring, the same trap the original "10px font" layout-audit finding fell into): every label leaf is 14px/500/lh20, the "lg" text size. */
+    /* crisp/#830: every trigger label here (Sort, Filter, View settings,
+       Import/Export -- all compose this one shared .tool rule) read the
+       "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
+       (the button root itself inherits Attio's own 10px rem base and is a
+       red herring, the same trap the original "10px font" layout-audit
+       finding fell into): every label leaf is 14px/500/lh20, the "lg" text
+       size. */
     & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
+    /* crisp/#772: re-measured live on Sort with an actual sort applied --
+       an active trigger's own fill is white (bgSurface), the same as the
        base .tool rule above now already sets; this override existed to
        distinguish active from a base state that used to be transparent.
        Kept explicit (not just deleted) so a future change to the base
@@ -24,13 +30,23 @@
     /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
        trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
        a dashed ::before (1px dashed, border-radius: inherit, absolutely
-       positioned inset: 0) over a barely-there fill, confirmed on Attio's own empty Filter chip (its ::before border computes to exactly "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger drops the dashed pseudo and picks up the base tool's own solid ring
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's
+       own empty Filter chip (its ::before border computes to exactly
+       "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger
+       drops the dashed pseudo and picks up the base tool's own solid ring
        instead (the --active modifier, unchanged) -- confirmed on Sort with
        an actual sort applied. color-mix (not the raw rgba Attio computes
        to) so both the border and the fill flip correctly in dark mode, the
        same reasoning --ghost above already uses. Only wired into
-       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's own Sort/Filter triggers share this same chrome function but are deprecated, not touched here. crisp/#844, correcting #831: the label colour was added here later, muting only the FILTER trigger (via a "--filter" modifier), on the assumption that was a Filter-specific tone distinct from Sort's.
-       Re-measured live and that premise was wrong -- Sort's own resting label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5) as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
+       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's
+       own Sort/Filter triggers share this same chrome function but are
+       deprecated, not touched here.
+       crisp/#844, correcting #831: the label colour was added here later,
+       muting only the FILTER trigger (via a "--filter" modifier), on the
+       assumption that was a Filter-specific tone distinct from Sort's.
+       Re-measured live and that premise was wrong -- Sort's own resting
+       label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5)
+       as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
        "Sort's colour" in an earlier pass is a different thing entirely: the
        "Sorted by" PREFIX word inside an ACTIVE sort chip, #788 -- a
        compound-label treatment that only exists once a sort is applied, not
@@ -117,17 +133,21 @@
     & .crisp-tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-tabletoolbar-spacer { flex: 1; }
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 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; transition: background-color .12s; }
-    & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
-
+    /* 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).
+       Hover is a brightness filter on the new fill, not bgBrandSolidPressed
+       (that token stays tuned for the lighter accent's own consumers). */
+    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 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; transition: filter .12s; }
+    & .crisp-tabletoolbar-new:hover { filter: brightness(0.96); }
     & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
     & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field, & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
-    /* #592: a nested pick's field segment ("Team › Twitter follower count") — measured live: BOTH path segments the same colour (chip
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip
        context only; the picker's own menu rows keep the parent muted, see
        tabletoolbar.chrome.ts), each independently truncated. Attio's own
        layout gives the leaf segment priority (it stays fully readable
@@ -153,8 +173,7 @@
     & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
     & .crisp-tabletoolbar-sort-field-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-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
-    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
-    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"], & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
     & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
@@ -162,18 +181,10 @@
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
-
     & .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 { 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; }
+    & .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); }
 }
 

package/dist/tabs.css

@@ -2,17 +2,31 @@
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
     & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
+    /* crisp#908: an alternative to the "+N more" collapse above (crisp#863) --
+       a consumer opts into a single scrolling row instead (Naver/Kakao's own
+       pattern, docs/study/korean/), never both at once. No new visual value:
+       reuses the same list gap/tab geometry, only adds overflow-x + snap. */
+    & .crisp-tabs-list[data-overflow="scroll"] { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; }
+    & .crisp-tabs-list[data-overflow="scroll"]::-webkit-scrollbar { display: none; }
+    & .crisp-tabs-list[data-overflow="scroll"] .crisp-tabs-tab { flex-shrink: 0; scroll-snap-align: start; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
-    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
-    & .crisp-tabs-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-tabs-tab[data-selected] { color: var(--crisp-fg-primary); }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .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
+    /* 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; }

package/dist/tabs.layered.css

@@ -3,17 +3,31 @@
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
     & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
+    /* crisp#908: an alternative to the "+N more" collapse above (crisp#863) --
+       a consumer opts into a single scrolling row instead (Naver/Kakao's own
+       pattern, docs/study/korean/), never both at once. No new visual value:
+       reuses the same list gap/tab geometry, only adds overflow-x + snap. */
+    & .crisp-tabs-list[data-overflow="scroll"] { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; }
+    & .crisp-tabs-list[data-overflow="scroll"]::-webkit-scrollbar { display: none; }
+    & .crisp-tabs-list[data-overflow="scroll"] .crisp-tabs-tab { flex-shrink: 0; scroll-snap-align: start; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
-    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
-    & .crisp-tabs-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-tabs-tab[data-selected] { color: var(--crisp-fg-primary); }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .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
+    /* 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; }

package/dist/textarea.css

@@ -1,17 +1,13 @@
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
     & .crisp-textarea-wrap { position: relative; display: block; }
-    & .crisp-textarea-wrap::after {
-      content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md);
-      border: 2px solid transparent; transition: border-color .1s ease;
-      pointer-events: none;
-    }
+    & .crisp-textarea-wrap::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md); border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     & .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }

package/dist/textarea.layered.css

@@ -1,18 +1,14 @@
 @layer crisp-components {
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
     & .crisp-textarea-wrap { position: relative; display: block; }
-    & .crisp-textarea-wrap::after {
-      content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md);
-      border: 2px solid transparent; transition: border-color .1s ease;
-      pointer-events: none;
-    }
+    & .crisp-textarea-wrap::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md); border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     & .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }

package/dist/themepicker.css

@@ -14,7 +14,8 @@
     & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)), & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
     & [data-swatch="light"] .crisp-themepicker-preview-main, & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
     & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar, & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
-    /* Dark swatch colours -- always for "dark", and for "system" only when the OS itself reports dark. */
+    /* Dark swatch colours -- always for "dark", and for "system" only
+       when the OS itself reports dark. */
     & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
     & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
     & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }

package/dist/themepicker.layered.css

@@ -15,7 +15,8 @@
     & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)), & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
     & [data-swatch="light"] .crisp-themepicker-preview-main, & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
     & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar, & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
-    /* Dark swatch colours -- always for "dark", and for "system" only when the OS itself reports dark. */
+    /* Dark swatch colours -- always for "dark", and for "system" only
+       when the OS itself reports dark. */
     & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
     & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
     & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }

package/dist/tokens.css

@@ -45,7 +45,9 @@
   --crisp-ring-switch: #d9dade;
   --crisp-bg-tile-active: #ffffff;
   --crisp-shadow-tile-active: rgba(0,0,0,0.04);
-  --crisp-bg-scrim: rgba(0,0,0,0.25);
+  --crisp-bg-scrim: rgba(0,0,0,0.45);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #00000010;
   --crisp-fg-alert-description: rgba(0,0,0,0.63);
   --crisp-bg-overlay-frost: #ffffff;
   --crisp-shadow-overlay1: rgba(28,40,64,0.12);
@@ -117,6 +119,8 @@
   --crisp-bg-tile-active: #101112;
   --crisp-shadow-tile-active: rgba(0,0,0,0);
   --crisp-bg-scrim: rgba(0,0,0,0.55);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #ffffff17;
   --crisp-fg-alert-description: rgba(255,255,255,0.6);
   --crisp-bg-overlay-frost: #1c1d1f;
   --crisp-shadow-overlay1: rgba(0,0,0,0.48);
@@ -182,13 +186,14 @@
   --crisp-space-2-5: 10px;
   --crisp-space-3-5: 14px;
   --crisp-radius-xs: 4px;
-  --crisp-radius-chip: 7px;
+  --crisp-radius-chip: 999px;
   --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-4xl: 24px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -212,4 +217,10 @@
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
   --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-tracking-18: -0.36px;
+  --crisp-tracking-20: -0.4px;
+  --crisp-tracking-24: -0.48px;
+  --crisp-tracking-26: -0.52px;
+  --crisp-tracking-28: -0.56px;
+  --crisp-tracking-32: -0.64px;
 }