@crisp-ui-kit/crisp 0.31.4 → 0.31.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/authshell.css +1 -1
  2. package/dist/cjs/components/accordion/accordion.recipe.js +1 -1
  3. package/dist/cjs/components/barchart/barchart.recipe.js +1 -1
  4. package/dist/cjs/components/breadcrumb/breadcrumb.recipe.js +1 -1
  5. package/dist/cjs/components/bulkbar/bulkbar.recipe.js +1 -1
  6. package/dist/cjs/components/callout/callout.recipe.js +1 -1
  7. package/dist/cjs/components/checkbox/checkbox.recipe.js +1 -1
  8. package/dist/cjs/components/columncalc/columncalc.recipe.js +2 -2
  9. package/dist/cjs/components/datatable/datatable.recipe.js +5 -5
  10. package/dist/cjs/components/datepicker/datepicker.recipe.js +3 -3
  11. package/dist/cjs/components/datepickerfield/datepickerfield.recipe.js +2 -2
  12. package/dist/cjs/components/dialog/dialog.recipe.js +1 -1
  13. package/dist/cjs/components/donutchart/donutchart.recipe.js +1 -1
  14. package/dist/cjs/components/emptystate/emptystate.recipe.js +2 -2
  15. package/dist/cjs/components/fileupload/fileupload.recipe.js +6 -6
  16. package/dist/cjs/components/formfield/formfield.recipe.js +1 -1
  17. package/dist/cjs/components/input/input.recipe.js +1 -1
  18. package/dist/cjs/components/linechart/linechart.recipe.js +1 -1
  19. package/dist/cjs/components/menu/menu.recipe.js +2 -2
  20. package/dist/cjs/components/multiselect/multiselect.recipe.js +1 -1
  21. package/dist/cjs/components/progress/progress.recipe.js +1 -1
  22. package/dist/cjs/components/quantitypicker/quantitypicker.recipe.js +2 -2
  23. package/dist/cjs/components/radiogroup/radiogroup.recipe.js +1 -1
  24. package/dist/cjs/components/resizablepanel/resizablepanel.recipe.js +2 -2
  25. package/dist/cjs/components/segmented/segmented.recipe.js +1 -1
  26. package/dist/cjs/components/select/select.recipe.js +2 -2
  27. package/dist/cjs/components/slider/slider.recipe.js +2 -2
  28. package/dist/cjs/components/stagebar/stagebar.recipe.js +1 -1
  29. package/dist/cjs/components/statcard/statcard.recipe.js +2 -2
  30. package/dist/cjs/components/switch/switch.recipe.js +1 -1
  31. package/dist/cjs/components/table/table.recipe.js +1 -1
  32. package/dist/cjs/components/tabletoolbar/tabletoolbar.chrome.js +2 -2
  33. package/dist/cjs/components/tabletoolbar/tabletoolbar.recipe.js +1 -1
  34. package/dist/cjs/components/tabs/tabs.recipe.js +1 -1
  35. package/dist/cjs/components/textarea/textarea.recipe.js +1 -1
  36. package/dist/cjs/components/tooltip/tooltip.recipe.js +1 -1
  37. package/dist/cjs/product/appshell/appshell.recipe.js +1 -1
  38. package/dist/cjs/product/authshell/authshell.recipe.js +3 -3
  39. package/dist/cjs/product/board/board.recipe.js +1 -1
  40. package/dist/cjs/product/entitycard/entitycard.recipe.js +1 -1
  41. package/dist/cjs/product/flowcanvas/flowcanvas.recipe.js +1 -1
  42. package/dist/cjs/product/inbox/inbox.recipe.js +1 -1
  43. package/dist/cjs/product/listpage/listpage.recipe.js +1 -1
  44. package/dist/cjs/product/onboarding/onboarding.recipe.js +1 -1
  45. package/dist/cjs/product/recordpage/recordpage.recipe.js +2 -2
  46. package/dist/cjs/product/recordpanel/recordpanel.recipe.js +1 -1
  47. package/dist/cjs/product/recordstable/recordstable.recipe.js +2 -2
  48. package/dist/cjs/product/recordstable/recordstable.tag.js +1 -1
  49. package/dist/cjs/product/richtext/richtext.recipe.js +1 -1
  50. package/dist/cjs/product/settingssection/settingssection.recipe.js +1 -1
  51. package/dist/cjs/product/settingsshell/settingsshell.recipe.js +2 -2
  52. package/dist/cjs/product/tasklist/tasklist.recipe.js +1 -1
  53. package/dist/cjs/product/trialbanner/trialbanner.recipe.js +2 -2
  54. package/dist/cjs/product/viewtoggle/viewtoggle.recipe.js +1 -1
  55. package/dist/columncalc.css +1 -1
  56. package/dist/datatable.css +5 -5
  57. package/dist/esm/components/accordion/accordion.recipe.js +1 -1
  58. package/dist/esm/components/barchart/barchart.recipe.js +1 -1
  59. package/dist/esm/components/breadcrumb/breadcrumb.recipe.js +1 -1
  60. package/dist/esm/components/bulkbar/bulkbar.recipe.js +1 -1
  61. package/dist/esm/components/callout/callout.recipe.js +1 -1
  62. package/dist/esm/components/checkbox/checkbox.recipe.js +1 -1
  63. package/dist/esm/components/columncalc/columncalc.recipe.js +2 -2
  64. package/dist/esm/components/datatable/datatable.recipe.js +5 -5
  65. package/dist/esm/components/datepicker/datepicker.recipe.js +3 -3
  66. package/dist/esm/components/datepickerfield/datepickerfield.recipe.js +2 -2
  67. package/dist/esm/components/dialog/dialog.recipe.js +1 -1
  68. package/dist/esm/components/donutchart/donutchart.recipe.js +1 -1
  69. package/dist/esm/components/emptystate/emptystate.recipe.js +2 -2
  70. package/dist/esm/components/fileupload/fileupload.recipe.js +6 -6
  71. package/dist/esm/components/formfield/formfield.recipe.js +1 -1
  72. package/dist/esm/components/input/input.recipe.js +1 -1
  73. package/dist/esm/components/linechart/linechart.recipe.js +1 -1
  74. package/dist/esm/components/menu/menu.recipe.js +2 -2
  75. package/dist/esm/components/multiselect/multiselect.recipe.js +1 -1
  76. package/dist/esm/components/progress/progress.recipe.js +1 -1
  77. package/dist/esm/components/quantitypicker/quantitypicker.recipe.js +2 -2
  78. package/dist/esm/components/radiogroup/radiogroup.recipe.js +1 -1
  79. package/dist/esm/components/resizablepanel/resizablepanel.recipe.js +2 -2
  80. package/dist/esm/components/segmented/segmented.recipe.js +1 -1
  81. package/dist/esm/components/select/select.recipe.js +2 -2
  82. package/dist/esm/components/slider/slider.recipe.js +2 -2
  83. package/dist/esm/components/stagebar/stagebar.recipe.js +1 -1
  84. package/dist/esm/components/statcard/statcard.recipe.js +2 -2
  85. package/dist/esm/components/switch/switch.recipe.js +1 -1
  86. package/dist/esm/components/table/table.recipe.js +1 -1
  87. package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js +2 -2
  88. package/dist/esm/components/tabletoolbar/tabletoolbar.recipe.js +1 -1
  89. package/dist/esm/components/tabs/tabs.recipe.js +1 -1
  90. package/dist/esm/components/textarea/textarea.recipe.js +1 -1
  91. package/dist/esm/components/tooltip/tooltip.recipe.js +1 -1
  92. package/dist/esm/product/appshell/appshell.recipe.js +1 -1
  93. package/dist/esm/product/authshell/authshell.recipe.js +3 -3
  94. package/dist/esm/product/board/board.recipe.js +1 -1
  95. package/dist/esm/product/entitycard/entitycard.recipe.js +1 -1
  96. package/dist/esm/product/flowcanvas/flowcanvas.recipe.js +1 -1
  97. package/dist/esm/product/inbox/inbox.recipe.js +1 -1
  98. package/dist/esm/product/listpage/listpage.recipe.js +1 -1
  99. package/dist/esm/product/onboarding/onboarding.recipe.js +1 -1
  100. package/dist/esm/product/recordpage/recordpage.recipe.js +2 -2
  101. package/dist/esm/product/recordpanel/recordpanel.recipe.js +1 -1
  102. package/dist/esm/product/recordstable/recordstable.recipe.js +2 -2
  103. package/dist/esm/product/recordstable/recordstable.tag.js +1 -1
  104. package/dist/esm/product/richtext/richtext.recipe.js +1 -1
  105. package/dist/esm/product/settingssection/settingssection.recipe.js +1 -1
  106. package/dist/esm/product/settingsshell/settingsshell.recipe.js +2 -2
  107. package/dist/esm/product/tasklist/tasklist.recipe.js +1 -1
  108. package/dist/esm/product/trialbanner/trialbanner.recipe.js +2 -2
  109. package/dist/esm/product/viewtoggle/viewtoggle.recipe.js +1 -1
  110. package/dist/fileupload.css +2 -2
  111. package/dist/recordpage.css +1 -1
  112. package/dist/recordstable.css +1 -1
  113. package/dist/settingsshell.css +1 -1
  114. package/dist/styles.css +12 -12
  115. package/dist/types/product/recordstable/recordstable.tag.d.ts +1 -1
  116. package/package.json +1 -1
@@ -38,7 +38,7 @@
38
38
  & .authshell-body .button { height: 36px; padding-inline: var(--space-3); border-radius: 10px; }
39
39
  & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
40
40
 
41
- /* Attio drops the preview pane in JS on narrow viewports (measured: two
41
+ /* The preview pane drops out in JS on narrow viewports (measured: two
42
42
  panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
43
43
  that bracket, not a measured value. A CONTAINER query, not a media
44
44
  query: the shell is embedded in the docs inside an ~800px column, where
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.accordionRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A stack of collapsible sections — Attio's sidebar sections / "view all".
6
+ // A stack of collapsible sections — sidebar sections / "view all".
7
7
  // The panel animates height via the grid-template-rows 0fr->1fr technique.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "accordion",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.barchartRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A responsive bar chart — measured from Attio's Reports dashboard: brand bars
6
+ // A responsive bar chart — measured from a Reports dashboard: brand bars
7
7
  // with rounded tops over dashed horizontal gridlines, a value axis on the left,
8
8
  // and category labels below. Pure CSS (no SVG), so it scales with its container.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.breadcrumbRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A breadcrumb trail — Attio's record-page nav ("Companies / Google").
6
+ // A breadcrumb trail — record-page nav ("Companies / Google").
7
7
  const config = (0, core_1.defineRecipe)({
8
8
  name: "breadcrumb",
9
9
  base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg};
@@ -5,7 +5,7 @@ const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // A floating bulk-action bar — the pill that rises from the bottom of a
7
7
  // selection surface (a table, a gallery) when one or more rows are selected.
8
- // Measured from Attio's records-table bulk bar. The root is an absolutely-
8
+ // Measured from a records-table bulk bar. The root is an absolutely-
9
9
  // positioned anchor that centres the bar with flex (NOT a transform): a resting
10
10
  // transform on the bar would reparent any `position: fixed` menu inside it (the
11
11
  // "More" overflow), detaching it — the enter slide lives in @starting-style only.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.calloutRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A callout / banner — Attio's inline info notices (e.g. "Changes apply to all
6
+ // A callout / banner — inline info notices (e.g. "Changes apply to all
7
7
  // workspaces", the trial banner). Tone tints the background + icon.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "callout",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.checkboxRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A 16px square checkbox measured from Attio's record grid: r6, a subtle 1px
6
+ // A 16px square checkbox measured from a record grid: r6, a subtle 1px
7
7
  // inset ring when empty, brand fill + white check when on. The check is a
8
8
  // data-URI SVG background so it renders reliably (input pseudo-content doesn't).
9
9
  const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.columncalcRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Attio's column footer calculation. The summary row is 36px and sticky at the
6
+ // The column footer calculation. The summary row is 36px and sticky at the
7
7
  // grid's bottom edge; each cell holds a quiet trigger that reads "Add
8
8
  // calculation" until an aggregation is chosen, then shows the value with its
9
9
  // operation name beside it.
@@ -14,7 +14,7 @@ const config = (0, core_1.defineRecipe)({
14
14
  shrink the button back to its text. Make the wrapper fill too, so the
15
15
  whole cell stays clickable. */
16
16
  & .menu { width: 100%; height: 100%; }
17
- /* Attio's hit target is the WHOLE summary cell -- measured 246x37 with
17
+ /* The hit target is the WHOLE summary cell -- measured 246x37 with
18
18
  padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
19
19
  opens the aggregation menu. */
20
20
  & .columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
@@ -17,7 +17,7 @@ const config = (0, core_1.defineRecipe)({
17
17
  & .datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
18
18
  & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
19
19
  & .datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
20
- /* Attio's header cell has no padding of its own -- the button owns the
20
+ /* The header cell has no padding of its own -- the button owns the
21
21
  full cell so the whole header is clickable (its own inset is 12px).
22
22
  Mirrors the summary-row fix. */
23
23
  & th { padding: 0; }
@@ -31,11 +31,11 @@ const config = (0, core_1.defineRecipe)({
31
31
  & th .menu { width: 100%; height: 100%; }
32
32
  & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
33
33
  & .datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
34
- /* Attio's summary cell has NO padding of its own -- the calculation trigger
34
+ /* The summary cell has NO padding of its own -- the calculation trigger
35
35
  owns the whole 246x37 area so a click anywhere in the cell opens the
36
36
  menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
37
37
  & tfoot td { padding: 0; }
38
- /* Group heading row -- Attio groups a view under a subtle label with the
38
+ /* Group heading row -- a view is grouped under a subtle label with the
39
39
  bucket's count beside it. */
40
40
  & .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
41
41
  & .datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
@@ -93,13 +93,13 @@ const config = (0, core_1.defineRecipe)({
93
93
  & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
94
94
  & .datatable-num { font-variant-numeric: tabular-nums; }
95
95
  & .datatable-muted { color: ${tokens_1.contract.fgMuted}; }
96
- /* row drag-to-reorder -- Attio's Settings > Objects > Attributes measures
96
+ /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
97
97
  a leading 20px grip column, a 16px grip icon, and the row's own
98
98
  hairline doubling as the drop indicator (it tints toward the brand
99
99
  colour as the active drop target). The affordance + geometry are
100
100
  measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
101
101
  draggable + dataTransfer, the same one column reorder already uses
102
- (RecordsTable's reorderColumn) -- not Attio's own proprietary
102
+ (RecordsTable's reorderColumn) -- not a proprietary
103
103
  pointer-events implementation. */
104
104
  & .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
105
105
  & .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.datepickerRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // seed-design's calendar structure on Attio's measured scale. The behaviour,
7
- // markup and range model are seed's; every visual value is measured from Attio's
8
- // own date picker (app.attio.com, task due-date field): a 32px day on a 34px
6
+ // seed-design's calendar structure on the measured scale. The behaviour,
7
+ // markup and range model are seed's; every visual value is measured from a
8
+ // live date picker (task due-date field): a 32px day on a 34px
9
9
  // pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
10
10
  // the brand blue for the selection.
11
11
  //
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.datepickerfieldRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // The trigger crisp's DatePicker used to own, measured from Attio: a 32px
6
+ // The trigger crisp's DatePicker used to own, measured live: a 32px
7
7
  // outlined chip showing the value, opening a calendar in a popover. Split out
8
- // when DatePicker became seed-design's bare calendar, so this Attio-measured
8
+ // when DatePicker became seed-design's bare calendar, so this measured
9
9
  // field survives unchanged for the consumers already using it.
10
10
  const config = (0, core_1.defineRecipe)({
11
11
  name: "datepickerfield",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.dialogRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A modal dialog surface — measured from Attio's create-record modal: a radius-16
6
+ // A modal dialog surface — measured from a create-record modal: a radius-16
7
7
  // frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
8
8
  // per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
9
9
  // 2-layer black shadow) with a bordered header (title + close), a scrollable
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.donutchartRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A donut / ring chart — measured from Attio's Reports breakdown reports: a
6
+ // A donut / ring chart — measured from Reports breakdown reports: a
7
7
  // segmented ring with a centred total, plus a legend of coloured swatches with
8
8
  // labels and values. Pure SVG ring; HTML legend.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -15,9 +15,9 @@ const config = (0, core_1.defineRecipe)({
15
15
  variant: {
16
16
  // compact icon tile (default)
17
17
  default: ``,
18
- // a large icon on a dotted-grid backdrop — Attio's Developers/Reports empty state
18
+ // a large icon on a dotted-grid backdrop — a Developers/Reports empty state
19
19
  illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
20
- // Attio's full-view empty state (measured from a filtered-to-zero records table):
20
+ // A full-view empty state (measured from a filtered-to-zero records table):
21
21
  // a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
22
22
  // then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
23
23
  page: `gap: ${tokens_1.contract.space["2"]};
@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.fileuploadRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // seed-design's file-upload behaviour on Attio's measured scale.
6
+ // seed-design's file-upload behaviour on the measured scale.
7
7
  //
8
- // Measured from Attio's record Files pane (Deal record → Files, empty state):
8
+ // Measured from a record Files pane (Deal record → Files, empty state):
9
9
  // the title is 16/20 at weight 600 in `rgb(16,17,18)` (= gray900 = fgPrimary),
10
10
  // the hint 14/20 at weight 500 in `rgba(0,0,0,0.63)`, and the action button is
11
11
  // 28px tall with an 8px corner.
12
12
  //
13
- // Attio draws NO boundary around that pane -- the whole surface is the drop
13
+ // That pane draws NO boundary around itself -- the whole surface is the drop
14
14
  // target -- but a reusable dropzone needs an edge, so the dashed affordance is
15
15
  // crisp's own measured one from `sidebar-newlist` (1px dashed borderDefault,
16
- // r8, bgRaised on hover) rather than a new invention. Attio's drag-OVER
16
+ // r8, bgRaised on hover) rather than a new invention. The drag-OVER
17
17
  // treatment could not be measured: synthetic DragEvents do not trigger its
18
18
  // handlers. The active state therefore reuses the brand emphasis crisp already
19
19
  // uses for a live drag affordance (`appshell-resize[data-dragging]`).
@@ -43,12 +43,12 @@ const config = (0, core_1.defineRecipe)({
43
43
  & .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
44
44
  & .fileupload-zone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
45
45
 
46
- /* Attio: "No files" 16/20 weight 600 */
46
+ /* "No files" 16/20 weight 600 */
47
47
  & .fileupload-title {
48
48
  color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 20px;
49
49
  font-weight: ${tokens_1.contract.weight.semibold};
50
50
  }
51
- /* Attio: the hint line, 14/20 weight 500 at 63% of the foreground */
51
+ /* The hint line, 14/20 weight 500 at 63% of the foreground */
52
52
  & .fileupload-hint {
53
53
  color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
54
54
  font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.formfieldRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A labelled form field — measured from Attio's Settings forms: a 12px/500 muted
6
+ // A labelled form field — measured from Settings forms: a 12px/500 muted
7
7
  // label above the control, with an optional description or danger error line
8
8
  // below. Wraps any control (Input, Select, Textarea…).
9
9
  const config = (0, core_1.defineRecipe)({
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.inputRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Geometry is Attio's, measured: 32/36px tall, r8/r10, 10/12px side padding.
6
+ // Geometry is measured: 32/36px tall, r8/r10, 10/12px side padding.
7
7
  // The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
8
8
  // ring on an ::after overlay that is present-but-transparent at rest, so
9
9
  // focusing cannot shift layout the way a width change would, and animates
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.linechartRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A responsive line chart — measured from Attio's Reports historical charts: a
6
+ // A responsive line chart — measured from Reports historical charts: a
7
7
  // brand line with a soft area fill over dashed horizontal gridlines, a value
8
8
  // axis on the left, and category labels below. The plot is an SVG stretched to
9
9
  // its box (non-scaling stroke keeps the line crisp); axes are HTML.
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.menuRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A dropdown menu — same popover surface Attio uses for its ⋯ / sort / filter
7
- // menus (measured from the app's listboxes): radius 12, 4px padding, a layered
6
+ // A dropdown menu — same popover surface used for ⋯ / sort / filter
7
+ // menus (measured from listboxes): radius 12, 4px padding, a layered
8
8
  // soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
9
9
  // check). The content is rendered inside this relative root so it keeps these
10
10
  // nested styles while escaping the trigger's own box.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.multiselectRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A multi-select / tag editor — measured from Attio's cell tag picker: an
6
+ // A multi-select / tag editor — measured from a cell tag picker: an
7
7
  // outlined trigger showing the selected values as coloured chips, opening a
8
8
  // popover with a search field over rows of "[coloured chip] … [checkbox]" that
9
9
  // toggle on click. The popover keeps these nested styles by rendering inside
@@ -4,7 +4,7 @@ exports.progressRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // A progress indicator — a continuous brand-filled track, or a segmented row of
7
- // pills (Attio's "Getting started 3/6" bar).
7
+ // pills (a "Getting started 3/6" bar).
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "progress",
10
10
  base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden;
@@ -5,8 +5,8 @@ const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // seed-design's quantity-picker, shape for shape, in crisp's colours.
7
7
  //
8
- // Attio has no stepper — its quantity-ish fields are plain number inputs — so
9
- // as with Slider there is nothing of Attio's to measure and the GEOMETRY is
8
+ // No stepper exists — quantity-ish fields are plain number inputs — so
9
+ // as with Slider there is nothing measured to draw from and the GEOMETRY is
10
10
  // seed's own, read from `@seed-design/css/recipes/quantity-picker.css`:
11
11
  //
12
12
  // size root height / button square radius icon text
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.radiogroupRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A radio group with two shapes, measured from Attio's settings: the default is
6
+ // A radio group with two shapes, measured from settings: the default is
7
7
  // a column of rows (a 16px ring that fills brand when selected + a label); the
8
8
  // `card` variant is a row of bordered preview cards (radius 16) whose border
9
9
  // turns brand (#266df0) when selected — the Appearance "Theme" picker.
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.resizablepanelRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Attio's adjustable-panel primitive (measured live — see
7
- // docs/study/attio-panels.md §1-2). Two elements carry the layout: an
6
+ // The adjustable-panel primitive (measured live). Two elements carry the
7
+ // layout: an
8
8
  // invisible SPACER that reserves flow width (it alone animates `width`, a
9
9
  // cheap reflow of a leaf node) and the PANEL, taken out of flow with
10
10
  // `position: absolute` and drawn on top of the spacer. That split is what
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.segmentedRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A segmented control — Attio's view switcher: a subtle track holding options,
6
+ // A segmented control — a view switcher: a subtle track holding options,
7
7
  // the selected one raised on a white pill.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "segmented",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.selectRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A select / dropdown, measured from Attio's settings: a 32px combobox trigger
6
+ // A select / dropdown, measured from settings: a 32px combobox trigger
7
7
  // (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
8
8
  // layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
9
9
  // check on the selected one and highlight on hover / keyboard. The listbox is
@@ -57,7 +57,7 @@ const config = (0, core_1.defineRecipe)({
57
57
  `,
58
58
  variants: {
59
59
  // ghost: borderless at rest (transparent), reveals a subtle fill on hover —
60
- // Attio's inline selects (e.g. the sort configurator).
60
+ // inline selects (e.g. the sort configurator).
61
61
  variant: {
62
62
  default: "",
63
63
  ghost: `
@@ -5,9 +5,9 @@ const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // seed-design's slider, shape for shape, in crisp's colours.
7
7
  //
8
- // Attio ships no slider anywhere — Records, Reports, Settings and the record
8
+ // No slider ships anywhere — Records, Reports, Settings and the record
9
9
  // pages contain no `input[type=range]` or `[role=slider]` — so there is nothing
10
- // of Attio's to measure. The GEOMETRY is therefore seed's own, read from
10
+ // measured to draw from. The GEOMETRY is therefore seed's own, read from
11
11
  // `@seed-design/css/recipes/slider.css`: a 26px control row, a 4px track on
12
12
  // `radius.full`, a 20px thumb whose visible disc is an `::after` that scales to
13
13
  // 1.2 while dragging, and a 2px focus ring offset 2px.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.stagebarRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A pipeline stage indicator — Attio's Deal-stage Highlight bar: one segment per
6
+ // A pipeline stage indicator — a Deal-stage Highlight bar: one segment per
7
7
  // stage, each tinted with its stage colour, the current stage at full strength.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "stagebar",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.statcardRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A single-metric KPI tile — measured from Attio's Reports "Insight" number
6
+ // A single-metric KPI tile — measured from a Reports "Insight" number
7
7
  // report: a small muted label, a large semibold value, and an optional delta
8
8
  // pill (green up / red down) with a caption. Fills its container.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -21,7 +21,7 @@ const config = (0, core_1.defineRecipe)({
21
21
  & .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }`,
22
22
  variants: {
23
23
  // Opt-in chrome for consumers who want the tile self-contained instead of
24
- // hand-wrapping it in <Card><CardBody>. Not measured as part of the Attio
24
+ // hand-wrapping it in <Card><CardBody>. Not measured as part of the
25
25
  // report tile itself (the tile sits bare inside the report's own Card —
26
26
  // see the docs page) — reuses Card's exact border/radius/bg rather than
27
27
  // inventing a new value, since it is only ever an explicit opt-in.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.switchRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Attio's settings toggle, measured from the live app: a 24×16 pill track that
6
+ // A settings toggle, measured from the live app: a 24×16 pill track that
7
7
  // flips from a muted grey to brand blue (#266df0), with a 12px white thumb
8
8
  // (2px inset) that slides 8px across. background + transform both animate .2s.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -5,7 +5,7 @@ const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // A general-purpose, composable data table — the lightweight primitive for
7
7
  // arbitrary tabular data (as opposed to `product/recordstable`, which is a
8
- // faithful rebuild of Attio's heavy records grid). It carries the SAME measured
8
+ // faithful rebuild of a heavy records grid). It carries the SAME measured
9
9
  // grid styling as RecordsTable — 36px rows, a 40px header, hairline vertical +
10
10
  // horizontal grid lines — so `DataTable` (built on this) matches that polish.
11
11
  const config = (0, core_1.defineRecipe)({
@@ -2,14 +2,14 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.toolbarChromeBody = exports.toolbarChromeHead = void 0;
4
4
  const tokens_1 = require("../../tokens");
5
- // The measured chrome of Attio's table toolbar: the Sort/Filter controls, the
5
+ // The measured chrome of the table toolbar: the Sort/Filter controls, the
6
6
  // menu/popover surface they open into, the sort-condition rows, and the filter
7
7
  // chips. It lives here, parameterised by class prefix, because TWO surfaces
8
8
  // render it — the standalone `TableToolbar` primitive and `RecordsTable`, whose
9
9
  // markup predates it and must keep its own `recordstable-` class names.
10
10
  //
11
11
  // These strings were MOVED out of `recordstable.recipe.ts` verbatim, not
12
- // retyped: every value is still the one measured from Attio. Do not "tidy" them.
12
+ // retyped: every value is still the one originally measured. Do not "tidy" them.
13
13
  //
14
14
  // It comes in two halves because RecordsTable interleaves three rules of its own
15
15
  // (the context-menu z-index and the column drop-target) into the middle of the
@@ -4,7 +4,7 @@ exports.tabletoolbarRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  const tabletoolbar_chrome_1 = require("./tabletoolbar.chrome");
7
- // Attio's table toolbar, measured: 28px controls, the Sort/Filter buttons and
7
+ // The table toolbar, measured: 28px controls, the Sort/Filter buttons and
8
8
  // the menus they open, sort-condition rows, and the filter chips. The chrome
9
9
  // itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
10
10
  // same measured surface under its own class prefix — one source, two prefixes,
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.tabsRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Attio's record-view tabs: a row of segmented tab buttons over a 1px baseline.
6
+ // Record-view tabs: a row of segmented tab buttons over a 1px baseline.
7
7
  // The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
8
8
  // with a 2px ink underline that slides along the baseline; inactive tabs are
9
9
  // muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.textareaRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A multiline text field, measured from Attio's settings "Personal context": an
6
+ // A multiline text field, measured from a settings "Personal context" field: an
7
7
  // inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
8
8
  // counter pinned bottom-right (12px, muted). Focus rings the field brand.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.tooltipRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // The floating bubble for a Tooltip — Attio's dark hint chip. Applied to the
6
+ // The floating bubble for a Tooltip — a dark hint chip. Applied to the
7
7
  // portaled bubble itself (not a wrapper), so its styles survive the portal.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "tooltip",
@@ -4,7 +4,7 @@ exports.appshellRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
6
  // App-shell layout: a collapsible + resizable sidebar pane next to a main pane,
7
- // mirroring how Attio's window works. The sidebar pane clips (never squishes)
7
+ // mirroring a familiar app-window layout. The sidebar pane clips (never squishes)
8
8
  // when collapsing, and a drag handle on its edge resizes it.
9
9
  const config = (0, core_1.defineRecipe)({
10
10
  name: "appshell",
@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.authshellRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // Attio's welcome/auth surface (app.attio.com/welcome/*) — measured live,
6
+ // A welcome/auth surface — measured live,
7
7
  // 2026-09-15. A centered page frame holding a two-pane card: the form on the
8
8
  // left, an optional product preview on the right, with an optional top
9
9
  // progress bar and a footer under the card. Every value below is measured
10
10
  // from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
11
- // at the container query below) — Attio drops the pane in JS somewhere between a
11
+ // at the container query below) — the pane drops out in JS somewhere between a
12
12
  // measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
13
13
  const config = (0, core_1.defineRecipe)({
14
14
  name: "authshell",
@@ -51,7 +51,7 @@ const config = (0, core_1.defineRecipe)({
51
51
  & .authshell-body .button { height: 36px; padding-inline: ${tokens_1.contract.space["3"]}; border-radius: 10px; }
52
52
  & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
53
53
 
54
- /* Attio drops the preview pane in JS on narrow viewports (measured: two
54
+ /* The preview pane drops out in JS on narrow viewports (measured: two
55
55
  panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
56
56
  that bracket, not a measured value. A CONTAINER query, not a media
57
57
  query: the shell is embedded in the docs inside an ~800px column, where
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.boardRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A kanban board — measured from Attio's Deals pipeline: horizontally scrolling
6
+ // A kanban board — measured from a Deals pipeline: horizontally scrolling
7
7
  // columns (dot + title + count header, a "New" button, a stack of draggable
8
8
  // cards), with the hovered drop column highlighted.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.entitycardRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A note / entity card — measured from Attio's Notes grid: a bordered white card
6
+ // A note / entity card — measured from a Notes grid: a bordered white card
7
7
  // with an author row (avatar + name) at the top, a title, a clamped excerpt,
8
8
  // and a footer row (avatar + name … date). The whole card is clickable.
9
9
  const config = (0, core_1.defineRecipe)({
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.flowcanvasRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A pannable, zoomable node canvas — measured from Attio's Workflows editor:
6
+ // A pannable, zoomable node canvas — measured from a Workflows editor:
7
7
  // a dotted-grid background, draggable node cards, and connecting edges with dots.
8
8
  const config = (0, core_1.defineRecipe)({
9
9
  name: "flowcanvas",
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.inboxRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // A notifications inbox panel — measured from Attio's notification flyout: a
6
+ // A notifications inbox panel — measured from a notification flyout: a
7
7
  // ~380px rounded panel with a title, "Notifications / Requests" tabs (with
8
8
  // counts), then notification rows (avatar + message + time + unread dot) or a
9
9
  // centred empty state. Drop it in a Popover for the flyout, or use standalone.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.listpageRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // The entity-list page shell — measured from Attio's Reports / Sequences / Tasks
6
+ // The entity-list page shell — measured from Reports / Sequences / Tasks
7
7
  // / Notes list views: a view-bar toolbar (leading Sort/Filter, trailing view
8
8
  // toggle / settings / New, and a record count), an optional dashed "Favorites"
9
9
  // region, then a list with column headers and time-grouped 52px rows.
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.onboardingRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // An onboarding checklist card — measured from Attio's floating "Getting started"
6
+ // An onboarding checklist card — measured from a floating "Getting started"
7
7
  // widget: a title + menu/minimize header, a "N/total steps" subtitle, a
8
8
  // segmented progress bar (filled pills brand, rest 4% ink), then step rows with
9
9
  // an icon + label; completed rows strike through and show a brand check.