@crisp-ui-kit/crisp 0.55.4 → 0.55.6

package/dist/cjs/components/datatable/datatable.js

@@ -459,11 +459,20 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                         return ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-datatable-phone-link", href: `tel:+${country?.dialCode ?? ""}${p.digits}`, onClick: (ev) => ev.stopPropagation(), children: ["+", country?.dialCode ?? "?", p.digits] }, `${p.iso2}|${p.digits}`));
                     }) }));
             }
+            // crisp/#854, confirmed live -- Attio's real read-only phone cell has
+            // no flag anywhere (the same gap #842 already fixed in the editor's
+            // popover/trigger, left over here since #842 never touched this
+            // rendering path). The dial-code-as-its-own-muted-span shape below
+            // and the plain (non-link) wrapper are UNCHANGED by this fix -- #854
+            // measured Attio's real cell as a genuine `tel:` link with a
+            // continuous, non-split string plus a copy button, which is a larger
+            // rebuild of this whole cell's shape, left as a follow-up rather than
+            // folded into this "drop the flag" pass.
             const parsed = parsePhoneValue(value);
             if (!parsed?.digits)
                 return empty;
             const country = (0, countries_1.countryByIso2)(parsed.iso2);
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone", children: [country && (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: (0, countries_1.flagEmoji)(country.iso2) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
         }
         case "url":
         case "email": {

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -282,7 +282,14 @@ const config = (0, core_1.defineRecipe)({
        is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
        colour. The previous :hover-gated, full-contrast rule here was itself
        unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
+    /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400
+       (table.recipe.ts's own \`tbody th\` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
        column, revealed on ROW hover (the issue's own title says "row

package/dist/cjs/components/table/table.recipe.js

@@ -48,6 +48,23 @@ const config = (0, core_1.defineRecipe)({
        \`& table\`'s own color) applies to it like every other cell. */
     & thead th { position: sticky; top: 0; z-index: 2; height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; user-select: none; }
     & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
+    /* 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: ${tokens_1.contract.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
+       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
+       datatable.recipe.ts, which wins here by class specificity. */
+    & tbody th { font-weight: ${tokens_1.contract.weight.regular}; text-align: start; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */

package/dist/datatable.css

@@ -192,8 +192,13 @@
     & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; width: 100%; }
     /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text, plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
-       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400 (table.recipe.ts's own `tbody th` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --

package/dist/datatable.layered.css

@@ -193,8 +193,13 @@
     & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; width: 100%; }
     /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text, plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
-       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400 (table.recipe.ts's own `tbody th` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --

package/dist/esm/components/datatable/datatable.js

@@ -23,7 +23,7 @@ import { Switch } from "../switch/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
 import { TimePicker } from "../timepicker/index.js";
 import { Tooltip } from "../tooltip/index.js";
-import { COUNTRIES, countryByIso2, flagEmoji } from "./countries.js";
+import { COUNTRIES, countryByIso2 } from "./countries.js";
 import { datatableRecipe } from "./datatable.recipe.js";
 // #534: whether an element's own content is being cut off by its own box --
 // the same fact `.crisp-datatable-th-label`'s CSS ellipsis is silently
@@ -421,11 +421,20 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                         return (_jsxs("a", { className: "crisp-datatable-phone-link", href: `tel:+${country?.dialCode ?? ""}${p.digits}`, onClick: (ev) => ev.stopPropagation(), children: ["+", country?.dialCode ?? "?", p.digits] }, `${p.iso2}|${p.digits}`));
                     }) }));
             }
+            // crisp/#854, confirmed live -- Attio's real read-only phone cell has
+            // no flag anywhere (the same gap #842 already fixed in the editor's
+            // popover/trigger, left over here since #842 never touched this
+            // rendering path). The dial-code-as-its-own-muted-span shape below
+            // and the plain (non-link) wrapper are UNCHANGED by this fix -- #854
+            // measured Attio's real cell as a genuine `tel:` link with a
+            // continuous, non-split string plus a copy button, which is a larger
+            // rebuild of this whole cell's shape, left as a follow-up rather than
+            // folded into this "drop the flag" pass.
             const parsed = parsePhoneValue(value);
             if (!parsed?.digits)
                 return empty;
             const country = countryByIso2(parsed.iso2);
-            return (_jsxs("span", { className: "crisp-datatable-phone", children: [country && _jsx("span", { "aria-hidden": "true", children: flagEmoji(country.iso2) }), _jsxs("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
+            return (_jsxs("span", { className: "crisp-datatable-phone", children: [_jsxs("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
         }
         case "url":
         case "email": {

package/dist/esm/components/datatable/datatable.recipe.js

@@ -279,7 +279,14 @@ const config = defineRecipe({
        is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
        colour. The previous :hover-gated, full-contrast rule here was itself
        unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.fgPrimary} 9%, transparent); }
+    /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400
+       (table.recipe.ts's own \`tbody th\` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${c.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.fgPrimary} 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
        column, revealed on ROW hover (the issue's own title says "row

package/dist/esm/components/table/table.recipe.js

@@ -45,6 +45,23 @@ const config = defineRecipe({
        \`& table\`'s own color) applies to it like every other cell. */
     & thead th { position: sticky; top: 0; z-index: 2; height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: ${c.fgPrimary}; user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
+    /* 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: ${c.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
+       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
+       datatable.recipe.ts, which wins here by class specificity. */
+    & tbody th { font-weight: ${c.weight.regular}; text-align: start; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */

package/dist/styles.css

@@ -801,8 +801,13 @@
     & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; width: 100%; }
     /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text, plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
-       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400 (table.recipe.ts's own `tbody th` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --
@@ -1902,6 +1907,18 @@
        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
+       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
+       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
+       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; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */

package/dist/styles.layered.css

@@ -802,8 +802,13 @@
     & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; width: 100%; }
     /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text, plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
-       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400 (table.recipe.ts's own `tbody th` default). This was never its own
+       explicit style -- it silently rode on a since-fixed header-rule leak
+       (#833/#835/#848) that happened to apply the same 500 to every
+       primary-column body cell regardless of type. Made explicit here so
+       fixing that leak doesn't also (wrongly) drop entity names to 400. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --
@@ -1903,6 +1908,18 @@
        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
+       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
+       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
+       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; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */

package/dist/table.css

@@ -23,6 +23,18 @@
        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
+       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
+       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
+       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; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */

package/dist/table.layered.css

@@ -24,6 +24,18 @@
        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
+       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
+       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
+       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; }
     & tbody tr:last-child td { border-bottom: none; }
     /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.55.4",
+  "version": "0.55.6",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",