@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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 (403) hide show
  1. package/NOTICE +88 -0
  2. package/README.md +22 -0
  3. package/dist/accordion.css +13 -13
  4. package/dist/accordion.layered.css +23 -0
  5. package/dist/appshell.css +11 -11
  6. package/dist/appshell.layered.css +25 -0
  7. package/dist/authshell.css +23 -23
  8. package/dist/authshell.layered.css +59 -0
  9. package/dist/avatar.css +23 -23
  10. package/dist/avatar.layered.css +41 -0
  11. package/dist/avatargroup.css +2 -2
  12. package/dist/avatargroup.layered.css +7 -0
  13. package/dist/badge.css +31 -31
  14. package/dist/badge.layered.css +51 -0
  15. package/dist/barchart.css +15 -15
  16. package/dist/barchart.layered.css +25 -0
  17. package/dist/base.css +4 -4
  18. package/dist/board.css +20 -20
  19. package/dist/board.layered.css +34 -0
  20. package/dist/breadcrumb.css +8 -8
  21. package/dist/breadcrumb.layered.css +13 -0
  22. package/dist/bulkbar.css +13 -13
  23. package/dist/bulkbar.layered.css +23 -0
  24. package/dist/button.css +21 -21
  25. package/dist/button.layered.css +46 -0
  26. package/dist/callout.css +15 -15
  27. package/dist/callout.layered.css +18 -0
  28. package/dist/card.css +14 -14
  29. package/dist/card.layered.css +30 -0
  30. package/dist/checkbox.css +9 -9
  31. package/dist/checkbox.layered.css +21 -0
  32. package/dist/cjs/components/accordion/accordion.js +1 -1
  33. package/dist/cjs/components/accordion/accordion.recipe.js +10 -10
  34. package/dist/cjs/components/badge/badge.js +1 -1
  35. package/dist/cjs/components/badge/badge.recipe.js +1 -1
  36. package/dist/cjs/components/barchart/barchart.js +3 -3
  37. package/dist/cjs/components/barchart/barchart.recipe.js +14 -14
  38. package/dist/cjs/components/breadcrumb/breadcrumb.js +1 -1
  39. package/dist/cjs/components/breadcrumb/breadcrumb.recipe.js +6 -6
  40. package/dist/cjs/components/bulkbar/bulkbar.js +2 -2
  41. package/dist/cjs/components/bulkbar/bulkbar.recipe.js +10 -10
  42. package/dist/cjs/components/callout/callout.js +1 -1
  43. package/dist/cjs/components/callout/callout.recipe.js +9 -9
  44. package/dist/cjs/components/card/card.js +3 -3
  45. package/dist/cjs/components/card/card.recipe.js +5 -5
  46. package/dist/cjs/components/columncalc/columncalc.js +1 -1
  47. package/dist/cjs/components/columncalc/columncalc.recipe.js +16 -9
  48. package/dist/cjs/components/contextmenu/contextmenu.js +4 -4
  49. package/dist/cjs/components/contextmenu/contextmenu.recipe.js +9 -9
  50. package/dist/cjs/components/datatable/datatable.js +21 -19
  51. package/dist/cjs/components/datatable/datatable.recipe.js +57 -57
  52. package/dist/cjs/components/datepicker/datepicker.js +12 -12
  53. package/dist/cjs/components/datepicker/datepicker.recipe.js +45 -45
  54. package/dist/cjs/components/datepickerfield/datepickerfield.js +2 -2
  55. package/dist/cjs/components/datepickerfield/datepickerfield.recipe.js +9 -9
  56. package/dist/cjs/components/dialog/dialog.js +5 -5
  57. package/dist/cjs/components/dialog/dialog.recipe.js +16 -16
  58. package/dist/cjs/components/donutchart/donutchart.js +1 -1
  59. package/dist/cjs/components/donutchart/donutchart.recipe.js +12 -12
  60. package/dist/cjs/components/drawer/drawer.js +3 -3
  61. package/dist/cjs/components/drawer/drawer.recipe.js +14 -14
  62. package/dist/cjs/components/emptystate/emptystate.js +1 -1
  63. package/dist/cjs/components/emptystate/emptystate.recipe.js +9 -9
  64. package/dist/cjs/components/fileupload/fileupload.js +3 -3
  65. package/dist/cjs/components/fileupload/fileupload.recipe.js +23 -23
  66. package/dist/cjs/components/formfield/formfield.js +1 -1
  67. package/dist/cjs/components/formfield/formfield.recipe.js +5 -5
  68. package/dist/cjs/components/input/input.js +1 -1
  69. package/dist/cjs/components/input/input.recipe.js +6 -6
  70. package/dist/cjs/components/linechart/linechart.js +4 -4
  71. package/dist/cjs/components/linechart/linechart.recipe.js +14 -14
  72. package/dist/cjs/components/menu/menu.js +6 -6
  73. package/dist/cjs/components/menu/menu.recipe.js +19 -19
  74. package/dist/cjs/components/multiselect/multiselect.js +5 -5
  75. package/dist/cjs/components/multiselect/multiselect.recipe.js +29 -29
  76. package/dist/cjs/components/popover/popover.js +1 -1
  77. package/dist/cjs/components/popover/popover.recipe.js +3 -3
  78. package/dist/cjs/components/progress/progress.js +2 -2
  79. package/dist/cjs/components/progress/progress.recipe.js +3 -3
  80. package/dist/cjs/components/quantitypicker/quantitypicker.js +2 -2
  81. package/dist/cjs/components/quantitypicker/quantitypicker.recipe.js +16 -16
  82. package/dist/cjs/components/radiogroup/radiogroup.js +1 -1
  83. package/dist/cjs/components/radiogroup/radiogroup.recipe.js +14 -14
  84. package/dist/cjs/components/resizablepanel/resizablepanel.js +3 -3
  85. package/dist/cjs/components/resizablepanel/resizablepanel.recipe.js +24 -24
  86. package/dist/cjs/components/segmented/segmented.js +4 -4
  87. package/dist/cjs/components/segmented/segmented.recipe.js +7 -7
  88. package/dist/cjs/components/select/select.js +3 -3
  89. package/dist/cjs/components/select/select.recipe.js +25 -25
  90. package/dist/cjs/components/slider/slider.js +2 -2
  91. package/dist/cjs/components/slider/slider.recipe.js +15 -15
  92. package/dist/cjs/components/stagebar/stagebar.js +1 -1
  93. package/dist/cjs/components/stagebar/stagebar.recipe.js +1 -1
  94. package/dist/cjs/components/statcard/statcard.js +1 -1
  95. package/dist/cjs/components/statcard/statcard.recipe.js +9 -9
  96. package/dist/cjs/components/switch/switch.js +1 -1
  97. package/dist/cjs/components/switch/switch.recipe.js +2 -2
  98. package/dist/cjs/components/table/table.js +1 -1
  99. package/dist/cjs/components/table/table.recipe.js +1 -1
  100. package/dist/cjs/components/tabletoolbar/tabletoolbar.chrome.js +65 -64
  101. package/dist/cjs/components/tabletoolbar/tabletoolbar.js +13 -13
  102. package/dist/cjs/components/tabs/tabs.js +4 -4
  103. package/dist/cjs/components/tabs/tabs.recipe.js +12 -12
  104. package/dist/cjs/components/textarea/textarea.js +2 -2
  105. package/dist/cjs/components/textarea/textarea.recipe.js +11 -11
  106. package/dist/cjs/components/toast/toast.js +4 -4
  107. package/dist/cjs/components/toast/toast.recipe.js +14 -14
  108. package/dist/cjs/components/wheelpicker/wheelpicker.js +2 -2
  109. package/dist/cjs/components/wheelpicker/wheelpicker.recipe.js +19 -19
  110. package/dist/cjs/core/dialog-description.js +1 -1
  111. package/dist/cjs/core/namespace.js +17 -0
  112. package/dist/cjs/core/resolve.js +5 -3
  113. package/dist/cjs/index.js +1 -1
  114. package/dist/cjs/product/appshell/appshell.js +2 -2
  115. package/dist/cjs/product/appshell/appshell.recipe.js +8 -8
  116. package/dist/cjs/product/authshell/authshell.js +1 -1
  117. package/dist/cjs/product/authshell/authshell.recipe.js +20 -20
  118. package/dist/cjs/product/board/board.js +3 -3
  119. package/dist/cjs/product/board/board.recipe.js +17 -17
  120. package/dist/cjs/product/command/command.js +3 -3
  121. package/dist/cjs/product/command/command.recipe.js +25 -25
  122. package/dist/cjs/product/entitycard/entitycard.js +1 -1
  123. package/dist/cjs/product/entitycard/entitycard.recipe.js +7 -7
  124. package/dist/cjs/product/flowcanvas/flowcanvas.js +5 -5
  125. package/dist/cjs/product/flowcanvas/flowcanvas.recipe.js +11 -11
  126. package/dist/cjs/product/inbox/inbox.js +1 -1
  127. package/dist/cjs/product/inbox/inbox.recipe.js +22 -22
  128. package/dist/cjs/product/listpage/listpage.js +3 -3
  129. package/dist/cjs/product/listpage/listpage.recipe.js +18 -18
  130. package/dist/cjs/product/navitem/navitem.js +1 -1
  131. package/dist/cjs/product/navitem/navitem.recipe.js +2 -2
  132. package/dist/cjs/product/onboarding/onboarding.js +1 -1
  133. package/dist/cjs/product/onboarding/onboarding.recipe.js +19 -19
  134. package/dist/cjs/product/recordpage/recordpage.js +24 -24
  135. package/dist/cjs/product/recordpage/recordpage.recipe.js +117 -117
  136. package/dist/cjs/product/recordpanel/recordpanel.js +4 -4
  137. package/dist/cjs/product/recordpanel/recordpanel.recipe.js +15 -15
  138. package/dist/cjs/product/recordstable/recordstable.js +48 -48
  139. package/dist/cjs/product/recordstable/recordstable.recipe.js +87 -87
  140. package/dist/cjs/product/recordstable/recordstable.tag.js +8 -8
  141. package/dist/cjs/product/richtext/richtext.js +4 -4
  142. package/dist/cjs/product/richtext/richtext.recipe.js +21 -21
  143. package/dist/cjs/product/settingssection/settingssection.js +1 -1
  144. package/dist/cjs/product/settingssection/settingssection.recipe.js +6 -6
  145. package/dist/cjs/product/settingsshell/settingsshell.js +1 -1
  146. package/dist/cjs/product/settingsshell/settingsshell.recipe.js +20 -20
  147. package/dist/cjs/product/sidebar/sidebar.js +2 -2
  148. package/dist/cjs/product/sidebar/sidebar.recipe.js +21 -21
  149. package/dist/cjs/product/tasklist/tasklist.js +2 -2
  150. package/dist/cjs/product/tasklist/tasklist.recipe.js +14 -14
  151. package/dist/cjs/product/trialbanner/trialbanner.js +1 -1
  152. package/dist/cjs/product/trialbanner/trialbanner.recipe.js +6 -6
  153. package/dist/cjs/product/viewtoggle/viewtoggle.js +1 -1
  154. package/dist/cjs/product/viewtoggle/viewtoggle.recipe.js +4 -4
  155. package/dist/cjs/tokens/contract.js +3 -2
  156. package/dist/cjs/tokens/elevation.js +4 -4
  157. package/dist/cjs/tokens/palette.js +2 -2
  158. package/dist/cjs/tokens/scale.js +6 -6
  159. package/dist/cjs/tokens/semantic.js +1 -1
  160. package/dist/columncalc.css +19 -12
  161. package/dist/columncalc.layered.css +35 -0
  162. package/dist/command.css +28 -28
  163. package/dist/command.layered.css +44 -0
  164. package/dist/contextmenu.css +12 -12
  165. package/dist/contextmenu.layered.css +22 -0
  166. package/dist/datatable.css +66 -66
  167. package/dist/datatable.layered.css +108 -0
  168. package/dist/datepicker.css +86 -86
  169. package/dist/datepicker.layered.css +179 -0
  170. package/dist/datepickerfield.css +19 -19
  171. package/dist/datepickerfield.layered.css +29 -0
  172. package/dist/dialog.css +19 -19
  173. package/dist/dialog.layered.css +29 -0
  174. package/dist/divider.css +2 -2
  175. package/dist/divider.layered.css +7 -0
  176. package/dist/donutchart.css +15 -15
  177. package/dist/donutchart.layered.css +26 -0
  178. package/dist/drawer.css +17 -17
  179. package/dist/drawer.layered.css +27 -0
  180. package/dist/emptystate.css +15 -15
  181. package/dist/emptystate.layered.css +22 -0
  182. package/dist/entitycard.css +14 -14
  183. package/dist/entitycard.layered.css +28 -0
  184. package/dist/esm/components/accordion/accordion.js +1 -1
  185. package/dist/esm/components/accordion/accordion.recipe.js +10 -10
  186. package/dist/esm/components/badge/badge.js +1 -1
  187. package/dist/esm/components/badge/badge.recipe.js +1 -1
  188. package/dist/esm/components/barchart/barchart.js +3 -3
  189. package/dist/esm/components/barchart/barchart.recipe.js +14 -14
  190. package/dist/esm/components/breadcrumb/breadcrumb.js +1 -1
  191. package/dist/esm/components/breadcrumb/breadcrumb.recipe.js +6 -6
  192. package/dist/esm/components/bulkbar/bulkbar.js +2 -2
  193. package/dist/esm/components/bulkbar/bulkbar.recipe.js +10 -10
  194. package/dist/esm/components/callout/callout.js +1 -1
  195. package/dist/esm/components/callout/callout.recipe.js +9 -9
  196. package/dist/esm/components/card/card.js +3 -3
  197. package/dist/esm/components/card/card.recipe.js +5 -5
  198. package/dist/esm/components/columncalc/columncalc.js +1 -1
  199. package/dist/esm/components/columncalc/columncalc.recipe.js +16 -9
  200. package/dist/esm/components/contextmenu/contextmenu.js +4 -4
  201. package/dist/esm/components/contextmenu/contextmenu.recipe.js +9 -9
  202. package/dist/esm/components/datatable/datatable.js +21 -19
  203. package/dist/esm/components/datatable/datatable.recipe.js +57 -57
  204. package/dist/esm/components/datepicker/datepicker.js +12 -12
  205. package/dist/esm/components/datepicker/datepicker.recipe.js +45 -45
  206. package/dist/esm/components/datepickerfield/datepickerfield.js +2 -2
  207. package/dist/esm/components/datepickerfield/datepickerfield.recipe.js +9 -9
  208. package/dist/esm/components/dialog/dialog.js +5 -5
  209. package/dist/esm/components/dialog/dialog.recipe.js +16 -16
  210. package/dist/esm/components/donutchart/donutchart.js +1 -1
  211. package/dist/esm/components/donutchart/donutchart.recipe.js +12 -12
  212. package/dist/esm/components/drawer/drawer.js +3 -3
  213. package/dist/esm/components/drawer/drawer.recipe.js +14 -14
  214. package/dist/esm/components/emptystate/emptystate.js +1 -1
  215. package/dist/esm/components/emptystate/emptystate.recipe.js +9 -9
  216. package/dist/esm/components/fileupload/fileupload.js +3 -3
  217. package/dist/esm/components/fileupload/fileupload.recipe.js +23 -23
  218. package/dist/esm/components/formfield/formfield.js +1 -1
  219. package/dist/esm/components/formfield/formfield.recipe.js +5 -5
  220. package/dist/esm/components/input/input.js +1 -1
  221. package/dist/esm/components/input/input.recipe.js +6 -6
  222. package/dist/esm/components/linechart/linechart.js +4 -4
  223. package/dist/esm/components/linechart/linechart.recipe.js +14 -14
  224. package/dist/esm/components/menu/menu.js +6 -6
  225. package/dist/esm/components/menu/menu.recipe.js +19 -19
  226. package/dist/esm/components/multiselect/multiselect.js +5 -5
  227. package/dist/esm/components/multiselect/multiselect.recipe.js +29 -29
  228. package/dist/esm/components/popover/popover.js +1 -1
  229. package/dist/esm/components/popover/popover.recipe.js +3 -3
  230. package/dist/esm/components/progress/progress.js +2 -2
  231. package/dist/esm/components/progress/progress.recipe.js +3 -3
  232. package/dist/esm/components/quantitypicker/quantitypicker.js +2 -2
  233. package/dist/esm/components/quantitypicker/quantitypicker.recipe.js +16 -16
  234. package/dist/esm/components/radiogroup/radiogroup.js +1 -1
  235. package/dist/esm/components/radiogroup/radiogroup.recipe.js +14 -14
  236. package/dist/esm/components/resizablepanel/resizablepanel.js +3 -3
  237. package/dist/esm/components/resizablepanel/resizablepanel.recipe.js +24 -24
  238. package/dist/esm/components/segmented/segmented.js +4 -4
  239. package/dist/esm/components/segmented/segmented.recipe.js +7 -7
  240. package/dist/esm/components/select/select.js +3 -3
  241. package/dist/esm/components/select/select.recipe.js +25 -25
  242. package/dist/esm/components/slider/slider.js +2 -2
  243. package/dist/esm/components/slider/slider.recipe.js +15 -15
  244. package/dist/esm/components/stagebar/stagebar.js +1 -1
  245. package/dist/esm/components/stagebar/stagebar.recipe.js +1 -1
  246. package/dist/esm/components/statcard/statcard.js +1 -1
  247. package/dist/esm/components/statcard/statcard.recipe.js +9 -9
  248. package/dist/esm/components/switch/switch.js +1 -1
  249. package/dist/esm/components/switch/switch.recipe.js +2 -2
  250. package/dist/esm/components/table/table.js +1 -1
  251. package/dist/esm/components/table/table.recipe.js +1 -1
  252. package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js +65 -64
  253. package/dist/esm/components/tabletoolbar/tabletoolbar.js +13 -13
  254. package/dist/esm/components/tabs/tabs.js +4 -4
  255. package/dist/esm/components/tabs/tabs.recipe.js +12 -12
  256. package/dist/esm/components/textarea/textarea.js +2 -2
  257. package/dist/esm/components/textarea/textarea.recipe.js +11 -11
  258. package/dist/esm/components/toast/toast.js +4 -4
  259. package/dist/esm/components/toast/toast.recipe.js +14 -14
  260. package/dist/esm/components/wheelpicker/wheelpicker.js +2 -2
  261. package/dist/esm/components/wheelpicker/wheelpicker.recipe.js +19 -19
  262. package/dist/esm/core/dialog-description.js +1 -1
  263. package/dist/esm/core/namespace.js +14 -0
  264. package/dist/esm/core/resolve.js +5 -3
  265. package/dist/esm/index.js +1 -1
  266. package/dist/esm/product/appshell/appshell.js +2 -2
  267. package/dist/esm/product/appshell/appshell.recipe.js +8 -8
  268. package/dist/esm/product/authshell/authshell.js +1 -1
  269. package/dist/esm/product/authshell/authshell.recipe.js +20 -20
  270. package/dist/esm/product/board/board.js +3 -3
  271. package/dist/esm/product/board/board.recipe.js +17 -17
  272. package/dist/esm/product/command/command.js +3 -3
  273. package/dist/esm/product/command/command.recipe.js +25 -25
  274. package/dist/esm/product/entitycard/entitycard.js +1 -1
  275. package/dist/esm/product/entitycard/entitycard.recipe.js +7 -7
  276. package/dist/esm/product/flowcanvas/flowcanvas.js +5 -5
  277. package/dist/esm/product/flowcanvas/flowcanvas.recipe.js +11 -11
  278. package/dist/esm/product/inbox/inbox.js +1 -1
  279. package/dist/esm/product/inbox/inbox.recipe.js +22 -22
  280. package/dist/esm/product/listpage/listpage.js +3 -3
  281. package/dist/esm/product/listpage/listpage.recipe.js +18 -18
  282. package/dist/esm/product/navitem/navitem.js +1 -1
  283. package/dist/esm/product/navitem/navitem.recipe.js +2 -2
  284. package/dist/esm/product/onboarding/onboarding.js +1 -1
  285. package/dist/esm/product/onboarding/onboarding.recipe.js +19 -19
  286. package/dist/esm/product/recordpage/recordpage.js +24 -24
  287. package/dist/esm/product/recordpage/recordpage.recipe.js +117 -117
  288. package/dist/esm/product/recordpanel/recordpanel.js +4 -4
  289. package/dist/esm/product/recordpanel/recordpanel.recipe.js +15 -15
  290. package/dist/esm/product/recordstable/recordstable.js +48 -48
  291. package/dist/esm/product/recordstable/recordstable.recipe.js +87 -87
  292. package/dist/esm/product/recordstable/recordstable.tag.js +8 -8
  293. package/dist/esm/product/richtext/richtext.js +4 -4
  294. package/dist/esm/product/richtext/richtext.recipe.js +21 -21
  295. package/dist/esm/product/settingssection/settingssection.js +1 -1
  296. package/dist/esm/product/settingssection/settingssection.recipe.js +6 -6
  297. package/dist/esm/product/settingsshell/settingsshell.js +1 -1
  298. package/dist/esm/product/settingsshell/settingsshell.recipe.js +20 -20
  299. package/dist/esm/product/sidebar/sidebar.js +2 -2
  300. package/dist/esm/product/sidebar/sidebar.recipe.js +21 -21
  301. package/dist/esm/product/tasklist/tasklist.js +2 -2
  302. package/dist/esm/product/tasklist/tasklist.recipe.js +14 -14
  303. package/dist/esm/product/trialbanner/trialbanner.js +1 -1
  304. package/dist/esm/product/trialbanner/trialbanner.recipe.js +6 -6
  305. package/dist/esm/product/viewtoggle/viewtoggle.js +1 -1
  306. package/dist/esm/product/viewtoggle/viewtoggle.recipe.js +4 -4
  307. package/dist/esm/tokens/contract.js +3 -2
  308. package/dist/esm/tokens/elevation.js +4 -4
  309. package/dist/esm/tokens/palette.js +2 -2
  310. package/dist/esm/tokens/scale.js +6 -6
  311. package/dist/esm/tokens/semantic.js +1 -1
  312. package/dist/fileupload.css +46 -46
  313. package/dist/fileupload.layered.css +91 -0
  314. package/dist/flowcanvas.css +13 -13
  315. package/dist/flowcanvas.layered.css +17 -0
  316. package/dist/formfield.css +7 -7
  317. package/dist/formfield.layered.css +10 -0
  318. package/dist/inbox.css +26 -26
  319. package/dist/inbox.layered.css +41 -0
  320. package/dist/input.css +17 -17
  321. package/dist/input.layered.css +45 -0
  322. package/dist/kbd.css +2 -2
  323. package/dist/kbd.layered.css +5 -0
  324. package/dist/linechart.css +14 -14
  325. package/dist/linechart.layered.css +17 -0
  326. package/dist/listpage.css +22 -22
  327. package/dist/listpage.layered.css +41 -0
  328. package/dist/menu.css +29 -29
  329. package/dist/menu.layered.css +48 -0
  330. package/dist/multiselect.css +42 -42
  331. package/dist/multiselect.layered.css +63 -0
  332. package/dist/navitem.css +14 -14
  333. package/dist/navitem.layered.css +25 -0
  334. package/dist/onboarding.css +24 -24
  335. package/dist/onboarding.layered.css +39 -0
  336. package/dist/popover.css +6 -6
  337. package/dist/popover.layered.css +16 -0
  338. package/dist/progress.css +7 -7
  339. package/dist/progress.layered.css +17 -0
  340. package/dist/quantitypicker.css +34 -34
  341. package/dist/quantitypicker.layered.css +80 -0
  342. package/dist/radiogroup.css +18 -18
  343. package/dist/radiogroup.layered.css +33 -0
  344. package/dist/recordpage.css +122 -122
  345. package/dist/recordpage.layered.css +153 -0
  346. package/dist/recordpanel.css +31 -31
  347. package/dist/recordpanel.layered.css +50 -0
  348. package/dist/recordstable.css +162 -162
  349. package/dist/recordstable.layered.css +222 -0
  350. package/dist/resizablepanel.css +26 -26
  351. package/dist/resizablepanel.layered.css +55 -0
  352. package/dist/richtext.css +24 -24
  353. package/dist/richtext.layered.css +38 -0
  354. package/dist/segmented.css +10 -10
  355. package/dist/segmented.layered.css +20 -0
  356. package/dist/select.css +43 -43
  357. package/dist/select.layered.css +72 -0
  358. package/dist/settingssection.css +8 -8
  359. package/dist/settingssection.layered.css +11 -0
  360. package/dist/settingsshell.css +23 -23
  361. package/dist/settingsshell.layered.css +44 -0
  362. package/dist/sidebar.css +27 -27
  363. package/dist/sidebar.layered.css +40 -0
  364. package/dist/skeleton.css +4 -4
  365. package/dist/skeleton.layered.css +15 -0
  366. package/dist/slider.css +23 -23
  367. package/dist/slider.layered.css +58 -0
  368. package/dist/spinner.css +3 -3
  369. package/dist/spinner.layered.css +14 -0
  370. package/dist/stagebar.css +4 -4
  371. package/dist/stagebar.layered.css +14 -0
  372. package/dist/statcard.css +14 -14
  373. package/dist/statcard.layered.css +21 -0
  374. package/dist/styles.css +1816 -1725
  375. package/dist/styles.layered.css +2932 -0
  376. package/dist/switch.css +7 -7
  377. package/dist/switch.layered.css +22 -0
  378. package/dist/table.css +16 -16
  379. package/dist/table.layered.css +36 -0
  380. package/dist/tabletoolbar.css +67 -67
  381. package/dist/tabletoolbar.layered.css +80 -0
  382. package/dist/tabs.css +15 -15
  383. package/dist/tabs.layered.css +29 -0
  384. package/dist/tasklist.css +17 -17
  385. package/dist/tasklist.layered.css +34 -0
  386. package/dist/textarea.css +18 -18
  387. package/dist/textarea.layered.css +42 -0
  388. package/dist/toast.css +17 -17
  389. package/dist/toast.layered.css +27 -0
  390. package/dist/tokens.css +199 -115
  391. package/dist/tooltip.css +3 -3
  392. package/dist/tooltip.layered.css +13 -0
  393. package/dist/trialbanner.css +13 -13
  394. package/dist/trialbanner.layered.css +28 -0
  395. package/dist/types/core/dialog-description.d.ts +1 -1
  396. package/dist/types/core/namespace.d.ts +2 -0
  397. package/dist/types/tokens/elevation.d.ts +4 -4
  398. package/dist/viewtoggle.css +10 -10
  399. package/dist/viewtoggle.layered.css +23 -0
  400. package/dist/wheelpicker.css +29 -29
  401. package/dist/wheelpicker.layered.css +70 -0
  402. package/licenses/Apache-2.0.txt +201 -0
  403. package/package.json +5 -2
package/dist/recordpage.css CHANGED
@@ -1,149 +1,149 @@
1
- .recordpage {
1
+ .crisp-recordpage {
2
2
 
3
- display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-surface);
4
- font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
- color: var(--fg-primary);
3
+ display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--crisp-bg-surface);
4
+ font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
+ color: var(--crisp-fg-primary);
6
6
  & * { box-sizing: border-box; }
7
7
 
8
- & .recordpage-topbar { display: flex; align-items: center; gap: var(--space-2); height: 44px; flex-shrink: 0; padding: 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); }
9
- & .recordpage-crumbs { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
10
- & .recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-1-5); margin: 0 calc(-1 * var(--space-1-5)) 0 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; }
11
- & .recordpage-crumb:hover { background: var(--bg-raised); color: var(--fg-primary); }
12
- & .recordpage-crumb-sep { color: var(--fg-muted); font-size: var(--text-lg); }
13
- & .recordpage-crumb-name { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
14
- & .recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-1); }
15
- & .recordpage-action { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); cursor: pointer; white-space: nowrap; }
16
- & .recordpage-action:hover { background: var(--bg-raised); }
17
- & .recordpage-action--ghost { box-shadow: none; color: var(--fg-muted); }
18
- & .recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: var(--fg-muted); }
19
- & .recordpage-action svg { flex-shrink: 0; }
8
+ & .crisp-recordpage-topbar { display: flex; align-items: center; gap: var(--crisp-space-2); height: 44px; flex-shrink: 0; padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
9
+ & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
10
+ & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0 calc(-1 * var(--crisp-space-1-5)) 0 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
11
+ & .crisp-recordpage-crumb:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
12
+ & .crisp-recordpage-crumb-sep { color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
13
+ & .crisp-recordpage-crumb-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
14
+ & .crisp-recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--crisp-space-1); }
15
+ & .crisp-recordpage-action { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; }
16
+ & .crisp-recordpage-action:hover { background: var(--crisp-bg-raised); }
17
+ & .crisp-recordpage-action--ghost { box-shadow: none; color: var(--crisp-fg-muted); }
18
+ & .crisp-recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: var(--crisp-fg-muted); }
19
+ & .crisp-recordpage-action svg { flex-shrink: 0; }
20
20
 
21
- & .recordpage-body { flex: 1; min-height: 0; display: flex; }
21
+ & .crisp-recordpage-body { flex: 1; min-height: 0; display: flex; }
22
22
 
23
- & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid var(--border-subtle); padding: var(--space-3); }
24
- & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
25
- & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
26
- & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
27
- & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--bg-brand-solid) 55%, transparent); }
28
- & .recordpage-entity { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-2); }
29
- & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--bg-raised); }
30
- & .recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.3px; color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
31
- & .recordpage-entity-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
32
- & .recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * var(--space-1)); }
33
- & .recordpage-entity-iconbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
34
- & .recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
35
- & .recordpage-quickactions { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) var(--space-3); }
36
- & .recordpage-compose { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-4) 0 var(--space-3); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
37
- & .recordpage-compose:hover { background: var(--bg-raised); }
38
- & .recordpage-compose svg { flex-shrink: 0; color: var(--fg-muted); }
39
- & .recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
40
- & .recordpage-quickbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
41
- & .recordpage-section { padding-top: var(--space-2); }
42
- & .recordpage-section-title { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); padding: var(--space-1); }
23
+ & .crisp-recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-3); }
24
+ & .crisp-recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
25
+ & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
26
+ & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
27
+ & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 55%, transparent); }
28
+ & .crisp-recordpage-entity { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-1) var(--crisp-space-1) var(--crisp-space-2); }
29
+ & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
30
+ & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
31
+ & .crisp-recordpage-entity-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
32
+ & .crisp-recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * var(--crisp-space-1)); }
33
+ & .crisp-recordpage-entity-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
34
+ & .crisp-recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
35
+ & .crisp-recordpage-quickactions { display: flex; align-items: center; gap: var(--crisp-space-2); padding: 0 var(--crisp-space-1) var(--crisp-space-3); }
36
+ & .crisp-recordpage-compose { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-4) 0 var(--crisp-space-3); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
37
+ & .crisp-recordpage-compose:hover { background: var(--crisp-bg-raised); }
38
+ & .crisp-recordpage-compose svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
39
+ & .crisp-recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); 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); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
40
+ & .crisp-recordpage-quickbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
41
+ & .crisp-recordpage-section { padding-top: var(--crisp-space-2); }
42
+ & .crisp-recordpage-section-title { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); padding: var(--crisp-space-1); }
43
43
  /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
44
44
  are 14px; the left column's (Record Details / Lists) stay 12px. */
45
- & .recordpage-main .recordpage-section-title { font-size: var(--text-lg); }
46
- & .recordpage-detailhead { display: flex; align-items: center; gap: var(--space-0-5); margin-bottom: var(--space-3); padding-inline-end: var(--space-0-5); }
47
- & .recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--space-1); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: -0.12px; color: var(--fg-muted); cursor: pointer; text-align: start; }
48
- & .recordpage-collapse:hover { color: var(--fg-primary); }
49
- & .recordpage-collapse .recordpage-chev { flex-shrink: 0; transition: transform .15s ease; }
50
- & .recordpage-collapse[data-collapsed] .recordpage-chev { transform: rotate(-90deg); }
51
- & .recordpage-fieldsearch { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: var(--space-1); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: -0.12px; color: var(--fg-primary); }
52
- & .recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); border-radius: var(--radius-md); }
53
- & .recordpage-fieldsearch::placeholder { color: var(--fg-muted); font-weight: var(--weight-regular); }
54
- & .recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
55
- & .recordpage-detailsearch:hover, & .recordpage-detailsearch[data-active] { background: var(--bg-raised); color: var(--fg-primary); }
56
- & .recordpage-noresults { padding: var(--space-1-5) var(--space-1); font-size: var(--text-md); color: var(--fg-muted); }
57
- & .recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--text-lg); color: var(--fg-muted); cursor: pointer; }
58
- & .recordpage-morevalues:hover { color: var(--fg-primary); }
59
- & .recordpage-viewall { flex-basis: 100%; margin-top: var(--space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--fg-primary) 55%, transparent); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-regular); cursor: pointer; text-align: start; }
60
- & .recordpage-viewall:hover { color: var(--fg-primary); }
61
- & .recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
62
- & .recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: var(--space-1) var(--space-1); }
63
- & .recordpage-field { display: grid; grid-template-columns: 30% 1fr; align-items: start; column-gap: var(--space-2); min-height: 32px; padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-md); }
64
- & .recordpage-field + .recordpage-field { margin-top: var(--space-0-5); }
65
- & .recordpage-field:hover { background: color-mix(in srgb, var(--fg-primary) 3%, transparent); }
66
- & .recordpage-field-label { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; overflow: hidden; padding-top: 2px; line-height: 20px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); font-size: var(--text-sm); font-weight: var(--weight-medium); }
67
- & .recordpage-field-label svg { flex-shrink: 0; color: var(--fg-muted); }
68
- & .recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
69
- & .recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-top: 2px; line-height: 20px; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
70
- & .recordpage-empty { color: var(--fg-muted); }
71
- & .recordpage-link { color: var(--fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
72
- & .recordpage-link:hover { text-decoration: underline; }
73
- & .recordpage-emptystate { padding: var(--space-2) var(--space-1); font-size: var(--text-md); color: var(--fg-muted); }
45
+ & .crisp-recordpage-main .crisp-recordpage-section-title { font-size: var(--crisp-text-lg); }
46
+ & .crisp-recordpage-detailhead { display: flex; align-items: center; gap: var(--crisp-space-0-5); margin-bottom: var(--crisp-space-3); padding-inline-end: var(--crisp-space-0-5); }
47
+ & .crisp-recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: var(--crisp-fg-muted); cursor: pointer; text-align: start; }
48
+ & .crisp-recordpage-collapse:hover { color: var(--crisp-fg-primary); }
49
+ & .crisp-recordpage-collapse .crisp-recordpage-chev { flex-shrink: 0; transition: transform .15s ease; }
50
+ & .crisp-recordpage-collapse[data-collapsed] .crisp-recordpage-chev { transform: rotate(-90deg); }
51
+ & .crisp-recordpage-fieldsearch { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: var(--crisp-space-1); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: var(--crisp-fg-primary); }
52
+ & .crisp-recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
53
+ & .crisp-recordpage-fieldsearch::placeholder { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
54
+ & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--crisp-size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
55
+ & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
56
+ & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
57
+ & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
58
+ & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
59
+ & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: var(--crisp-space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-regular); cursor: pointer; text-align: start; }
60
+ & .crisp-recordpage-viewall:hover { color: var(--crisp-fg-primary); }
61
+ & .crisp-recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
62
+ & .crisp-recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: var(--crisp-space-1) var(--crisp-space-1); }
63
+ & .crisp-recordpage-field { display: grid; grid-template-columns: 30% 1fr; align-items: start; column-gap: var(--crisp-space-2); min-height: 32px; padding: var(--crisp-space-0-5) var(--crisp-space-1); border-radius: var(--crisp-radius-md); }
64
+ & .crisp-recordpage-field + .crisp-recordpage-field { margin-top: var(--crisp-space-0-5); }
65
+ & .crisp-recordpage-field:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); }
66
+ & .crisp-recordpage-field-label { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; overflow: hidden; padding-top: 2px; line-height: 20px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
67
+ & .crisp-recordpage-field-label svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
68
+ & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
69
+ & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
70
+ & .crisp-recordpage-empty { color: var(--crisp-fg-muted); }
71
+ & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
72
+ & .crisp-recordpage-link:hover { text-decoration: underline; }
73
+ & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
74
74
 
75
- & .recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-5); }
75
+ & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
76
76
 
77
- & .recordpage-panel { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
78
- & .recordpage-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--bg-surface); overflow: hidden; }
79
- & .recordpage-card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.14px; color: var(--fg-primary); padding: var(--space-3) var(--space-3) var(--space-2); }
80
- & .recordpage-hl-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; }
77
+ & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
78
+ & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
79
+ & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
80
+ & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
81
81
  /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
82
82
  column count, so the grid stays responsive (auto-fit) without per-cell
83
83
  nth-child border hacks that break when the column count changes. */
84
- & .recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border-subtle); }
85
- & .recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--space-2-5) var(--space-3); background: var(--bg-surface); }
86
- & .recordpage-hl-icon { position: absolute; top: var(--space-2-5); inset-inline-end: var(--space-3); color: var(--fg-muted); }
87
- & .recordpage-hl-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); margin-bottom: var(--space-2-5); padding-inline-end: var(--space-4); }
88
- & .recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
89
- & .recordpage-hl-value--empty { color: var(--fg-muted); font-weight: var(--weight-regular); }
84
+ & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
85
+ & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
86
+ & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
87
+ & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
88
+ & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
89
+ & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
90
90
 
91
- & .recordpage-feed { display: flex; flex-direction: column; }
92
- & .recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-2) 0; }
93
- & .recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--bg-raised); color: var(--fg-muted); }
94
- & .recordpage-feed-body { flex: 1; min-width: 0; font-size: var(--text-md); color: var(--fg-primary); }
95
- & .recordpage-feed-body b { font-weight: var(--weight-medium); }
96
- & .recordpage-feed-time { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }
97
- & .recordpage-feed-more { align-self: flex-start; margin-top: var(--space-1); border: none; background: none; padding: var(--space-1) 0; color: var(--bg-brand-solid); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
98
- & .recordpage-feed-more:hover { text-decoration: underline; }
91
+ & .crisp-recordpage-feed { display: flex; flex-direction: column; }
92
+ & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
93
+ & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
94
+ & .crisp-recordpage-feed-body { flex: 1; min-width: 0; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
95
+ & .crisp-recordpage-feed-body b { font-weight: var(--crisp-weight-medium); }
96
+ & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
97
+ & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
98
+ & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
99
99
 
100
- & .recordpage-section-head { display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1); }
101
- & .recordpage-section-head .recordpage-section-title { padding: 0; }
102
- & .recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fg-primary) 6%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
103
- & .recordpage-section-spacer { flex: 1; }
104
- & .recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
105
- & .recordpage-addbtn:hover { background: var(--bg-raised); }
106
- & .recordpage-addbtn svg { flex-shrink: 0; }
100
+ & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
101
+ & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
102
+ & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
103
+ & .crisp-recordpage-section-spacer { flex: 1; }
104
+ & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
105
+ & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
106
+ & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
107
107
 
108
- & .recordpage-composer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--bg-surface); margin-bottom: var(--space-2); }
109
- & .recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); }
110
- & .recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); border-radius: var(--radius-md); }
111
- & .recordpage-composer textarea::placeholder { color: var(--fg-muted); }
112
- & .recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-1-5); }
113
- & .recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); background: var(--bg-surface); color: var(--fg-primary); }
114
- & .recordpage-btn:hover { background: var(--bg-raised); }
115
- & .recordpage-btn--primary { box-shadow: none; background: var(--bg-brand-solid); color: var(--fg-on-brand); }
116
- & .recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
108
+ & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
109
+ & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
110
+ & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
111
+ & .crisp-recordpage-composer textarea::placeholder { color: var(--crisp-fg-muted); }
112
+ & .crisp-recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--crisp-space-1-5); }
113
+ & .crisp-recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; 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); background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
114
+ & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
115
+ & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
116
+ & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
117
117
 
118
- & .recordpage-note { display: flex; gap: var(--space-2-5); padding: var(--space-2-5) 0; border-top: 1px solid var(--border-subtle); }
119
- & .recordpage-note-body { flex: 1; min-width: 0; }
120
- & .recordpage-note-head { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-0-5); }
121
- & .recordpage-note-author { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary); }
122
- & .recordpage-note-time { font-size: var(--text-sm); color: var(--fg-muted); }
123
- & .recordpage-note-text { font-size: var(--text-lg); color: var(--fg-primary); white-space: pre-wrap; word-break: break-word; }
118
+ & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
119
+ & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
120
+ & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
121
+ & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
122
+ & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
123
+ & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
124
124
 
125
- & .recordpage-task { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1-5) 0; border-top: 1px solid var(--border-subtle); }
126
- & .recordpage-task-text { flex: 1; min-width: 0; font-size: var(--text-lg); color: var(--fg-primary); padding-top: 1px; }
127
- & .recordpage-task[data-done] .recordpage-task-text { text-decoration: line-through; color: var(--fg-muted); }
125
+ & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
126
+ & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
127
+ & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
128
128
 
129
- & .recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); padding: var(--space-6) var(--space-3); border: 1px dashed var(--border-default); border-radius: var(--radius-xl); color: var(--fg-muted); font-size: var(--text-md); text-align: center; }
130
- & .recordpage-emptycard svg { color: var(--fg-muted); opacity: 0.7; }
129
+ & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
130
+ & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
131
131
 
132
- & .recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
132
+ & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
133
133
 
134
- & .recordstable-tag { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--space-1); border-radius: var(--radius-chip); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); }
135
- & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--bg-brand-solid) 82%, var(--fg-primary)); }
136
- & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 78%, var(--fg-primary)); }
137
- & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--bg-warning) 18%, transparent); color: color-mix(in srgb, var(--bg-warning) 82%, var(--fg-primary)); }
138
- & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); }
139
- & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--bg-purple) 16%, transparent); color: color-mix(in srgb, var(--bg-purple) 80%, var(--fg-primary)); }
140
- & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--bg-cyan) 82%, var(--fg-primary)); }
141
- & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); }
134
+ & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
135
+ & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
136
+ & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }
137
+ & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); }
138
+ & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
139
+ & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
140
+ & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
141
+ & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
142
142
 
143
143
  }
144
144
 
145
145
  @media (prefers-reduced-motion: reduce) {
146
- .recordpage, .recordpage * {
146
+ .crisp-recordpage, .crisp-recordpage * {
147
147
  animation-duration: 0.01ms !important;
148
148
  animation-iteration-count: 1 !important;
149
149
  transition-duration: 0.01ms !important;
package/dist/recordpage.layered.css ADDED
@@ -0,0 +1,153 @@
1
+ @layer crisp-components {
2
+ .crisp-recordpage {
3
+
4
+ display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--crisp-bg-surface);
5
+ font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
6
+ color: var(--crisp-fg-primary);
7
+ & * { box-sizing: border-box; }
8
+
9
+ & .crisp-recordpage-topbar { display: flex; align-items: center; gap: var(--crisp-space-2); height: 44px; flex-shrink: 0; padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
10
+ & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
11
+ & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0 calc(-1 * var(--crisp-space-1-5)) 0 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
12
+ & .crisp-recordpage-crumb:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
13
+ & .crisp-recordpage-crumb-sep { color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
14
+ & .crisp-recordpage-crumb-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
15
+ & .crisp-recordpage-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--crisp-space-1); }
16
+ & .crisp-recordpage-action { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; }
17
+ & .crisp-recordpage-action:hover { background: var(--crisp-bg-raised); }
18
+ & .crisp-recordpage-action--ghost { box-shadow: none; color: var(--crisp-fg-muted); }
19
+ & .crisp-recordpage-action--icon { width: 28px; padding: 0; justify-content: center; box-shadow: none; color: var(--crisp-fg-muted); }
20
+ & .crisp-recordpage-action svg { flex-shrink: 0; }
21
+
22
+ & .crisp-recordpage-body { flex: 1; min-height: 0; display: flex; }
23
+
24
+ & .crisp-recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid var(--crisp-border-subtle); padding: var(--crisp-space-3); }
25
+ & .crisp-recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
26
+ & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
27
+ & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
28
+ & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 55%, transparent); }
29
+ & .crisp-recordpage-entity { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-1) var(--crisp-space-1) var(--crisp-space-2); }
30
+ & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
31
+ & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
32
+ & .crisp-recordpage-entity-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
33
+ & .crisp-recordpage-entity-iconbtn:first-of-type { margin-inline-start: calc(-1 * var(--crisp-space-1)); }
34
+ & .crisp-recordpage-entity-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
35
+ & .crisp-recordpage-entity-iconbtn[data-active] svg { color: #f5b83d; fill: #f5b83d; }
36
+ & .crisp-recordpage-quickactions { display: flex; align-items: center; gap: var(--crisp-space-2); padding: 0 var(--crisp-space-1) var(--crisp-space-3); }
37
+ & .crisp-recordpage-compose { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-4) 0 var(--crisp-space-3); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
38
+ & .crisp-recordpage-compose:hover { background: var(--crisp-bg-raised); }
39
+ & .crisp-recordpage-compose svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
40
+ & .crisp-recordpage-quickbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-md); 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); color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
41
+ & .crisp-recordpage-quickbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
42
+ & .crisp-recordpage-section { padding-top: var(--crisp-space-2); }
43
+ & .crisp-recordpage-section-title { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); padding: var(--crisp-space-1); }
44
+ /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
45
+ are 14px; the left column's (Record Details / Lists) stay 12px. */
46
+ & .crisp-recordpage-main .crisp-recordpage-section-title { font-size: var(--crisp-text-lg); }
47
+ & .crisp-recordpage-detailhead { display: flex; align-items: center; gap: var(--crisp-space-0-5); margin-bottom: var(--crisp-space-3); padding-inline-end: var(--crisp-space-0-5); }
48
+ & .crisp-recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: var(--crisp-fg-muted); cursor: pointer; text-align: start; }
49
+ & .crisp-recordpage-collapse:hover { color: var(--crisp-fg-primary); }
50
+ & .crisp-recordpage-collapse .crisp-recordpage-chev { flex-shrink: 0; transition: transform .15s ease; }
51
+ & .crisp-recordpage-collapse[data-collapsed] .crisp-recordpage-chev { transform: rotate(-90deg); }
52
+ & .crisp-recordpage-fieldsearch { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: var(--crisp-space-1); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: var(--crisp-fg-primary); }
53
+ & .crisp-recordpage-fieldsearch:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
54
+ & .crisp-recordpage-fieldsearch::placeholder { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
55
+ & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--crisp-size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
56
+ & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
57
+ & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
58
+ & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
59
+ & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
60
+ & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: var(--crisp-space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-regular); cursor: pointer; text-align: start; }
61
+ & .crisp-recordpage-viewall:hover { color: var(--crisp-fg-primary); }
62
+ & .crisp-recordpage-viewall--inline { flex-basis: auto; margin-top: 0; }
63
+ & .crisp-recordpage-viewall--section { display: block; flex-basis: auto; margin-top: 0; padding: var(--crisp-space-1) var(--crisp-space-1); }
64
+ & .crisp-recordpage-field { display: grid; grid-template-columns: 30% 1fr; align-items: start; column-gap: var(--crisp-space-2); min-height: 32px; padding: var(--crisp-space-0-5) var(--crisp-space-1); border-radius: var(--crisp-radius-md); }
65
+ & .crisp-recordpage-field + .crisp-recordpage-field { margin-top: var(--crisp-space-0-5); }
66
+ & .crisp-recordpage-field:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); }
67
+ & .crisp-recordpage-field-label { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; overflow: hidden; padding-top: 2px; line-height: 20px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); }
68
+ & .crisp-recordpage-field-label svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
69
+ & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
70
+ & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
71
+ & .crisp-recordpage-empty { color: var(--crisp-fg-muted); }
72
+ & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
73
+ & .crisp-recordpage-link:hover { text-decoration: underline; }
74
+ & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
75
+
76
+ & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
77
+
78
+ & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
79
+ & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
80
+ & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
81
+ & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
82
+ /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
83
+ column count, so the grid stays responsive (auto-fit) without per-cell
84
+ nth-child border hacks that break when the column count changes. */
85
+ & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
86
+ & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
87
+ & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
88
+ & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
89
+ & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
90
+ & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
91
+
92
+ & .crisp-recordpage-feed { display: flex; flex-direction: column; }
93
+ & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
94
+ & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
95
+ & .crisp-recordpage-feed-body { flex: 1; min-width: 0; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
96
+ & .crisp-recordpage-feed-body b { font-weight: var(--crisp-weight-medium); }
97
+ & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
98
+ & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
99
+ & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
100
+
101
+ & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
102
+ & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
103
+ & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
104
+ & .crisp-recordpage-section-spacer { flex: 1; }
105
+ & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); 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); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
106
+ & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
107
+ & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
108
+
109
+ & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
110
+ & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
111
+ & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
112
+ & .crisp-recordpage-composer textarea::placeholder { color: var(--crisp-fg-muted); }
113
+ & .crisp-recordpage-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--crisp-space-1-5); }
114
+ & .crisp-recordpage-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; 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); background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
115
+ & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
116
+ & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
117
+ & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
118
+
119
+ & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
120
+ & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
121
+ & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
122
+ & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
123
+ & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
124
+ & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
125
+
126
+ & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
127
+ & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
128
+ & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
129
+
130
+ & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
131
+ & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
132
+
133
+ & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
134
+
135
+ & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
136
+ & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
137
+ & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }
138
+ & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); }
139
+ & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); }
140
+ & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); }
141
+ & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); }
142
+ & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
143
+
144
+ }
145
+
146
+ @media (prefers-reduced-motion: reduce) {
147
+ .crisp-recordpage, .crisp-recordpage * {
148
+ animation-duration: 0.01ms !important;
149
+ animation-iteration-count: 1 !important;
150
+ transition-duration: 0.01ms !important;
151
+ }
152
+ }
153
+ }
package/dist/recordpanel.css CHANGED
@@ -1,46 +1,46 @@
1
- .recordpanel {
1
+ .crisp-recordpanel {
2
2
 
3
- position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); bottom: var(--space-2);
3
+ position: absolute; top: var(--crisp-space-2); inset-inline-end: var(--crisp-space-2); bottom: var(--crisp-space-2);
4
4
  z-index: 20; display: flex; flex-direction: column; overflow: hidden;
5
- width: 420px; max-width: calc(92% - var(--space-2));
6
- background: var(--bg-surface); border-radius: var(--radius-xl);
7
- box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3);
8
- font-family: var(--font-sans);
5
+ width: 420px; max-width: calc(92% - var(--crisp-space-2));
6
+ background: var(--crisp-bg-surface); border-radius: var(--crisp-radius-xl);
7
+ box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
8
+ font-family: var(--crisp-font-sans);
9
9
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
10
10
  transform: translateX(0); transition: transform .2s ease;
11
- @starting-style { transform: translateX(calc(100% + var(--space-2))); }
11
+ @starting-style { transform: translateX(calc(100% + var(--crisp-space-2))); }
12
12
  & * { box-sizing: border-box; }
13
13
 
14
- & .recordpanel-header { display: flex; align-items: center; gap: var(--space-2); height: 52px; flex-shrink: 0; padding: 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); }
15
- & .recordpanel-fav { width: 22px; height: var(--size-chip); border-radius: var(--radius-sm); flex-shrink: 0; object-fit: cover; background: var(--bg-raised); }
16
- & .recordpanel-title { flex: 1; min-width: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.2px; color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
17
- & .recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
18
- & .recordpanel-iconbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
14
+ & .crisp-recordpanel-header { display: flex; align-items: center; gap: var(--crisp-space-2); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
15
+ & .crisp-recordpanel-fav { width: 22px; height: var(--crisp-size-chip); border-radius: var(--crisp-radius-sm); flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
16
+ & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
17
+ & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
18
+ & .crisp-recordpanel-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
19
19
 
20
- & .recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2) var(--space-3); }
21
- & .recordpanel-sectionlabel { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); padding: var(--space-2) var(--space-1) var(--space-1); }
22
- & .recordpanel-field { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 32px; padding: var(--space-1) var(--space-1); border-radius: var(--radius-md); }
23
- & .recordpanel-field:hover { background: color-mix(in srgb, var(--fg-primary) 3%, transparent); }
24
- & .recordpanel-field-label { display: flex; align-items: center; gap: var(--space-1-5); width: 132px; flex-shrink: 0; padding-top: 3px; color: var(--fg-muted); font-size: var(--text-md); }
25
- & .recordpanel-field-label svg { flex-shrink: 0; }
26
- & .recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-top: 3px; font-size: var(--text-lg); color: var(--fg-primary); }
27
- & .recordpanel-empty { color: var(--fg-muted); }
20
+ & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-2) var(--crisp-space-3); }
21
+ & .crisp-recordpanel-sectionlabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-2) var(--crisp-space-1) var(--crisp-space-1); }
22
+ & .crisp-recordpanel-field { display: flex; align-items: flex-start; gap: var(--crisp-space-2); min-height: 32px; padding: var(--crisp-space-1) var(--crisp-space-1); border-radius: var(--crisp-radius-md); }
23
+ & .crisp-recordpanel-field:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); }
24
+ & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 132px; flex-shrink: 0; padding-top: 3px; color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); }
25
+ & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
26
+ & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 3px; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
27
+ & .crisp-recordpanel-empty { color: var(--crisp-fg-muted); }
28
28
 
29
- & .recordstable-tag { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--space-1); border-radius: var(--radius-chip); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--border-subtle); }
30
- & .recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--bg-brand-solid) 82%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-brand-solid) 30%, transparent); }
31
- & .recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 78%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-success) 30%, transparent); }
32
- & .recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--bg-warning) 18%, transparent); color: color-mix(in srgb, var(--bg-warning) 82%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-warning) 30%, transparent); }
33
- & .recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--bg-danger) 15%, transparent); color: color-mix(in srgb, var(--bg-danger) 80%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-danger) 30%, transparent); }
34
- & .recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--bg-purple) 16%, transparent); color: color-mix(in srgb, var(--bg-purple) 80%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-purple) 30%, transparent); }
35
- & .recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--bg-cyan) 82%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-cyan) 30%, transparent); }
36
- & .recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-orange) 30%, transparent); }
37
- & .recordpanel-link { color: var(--bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
38
- & .recordpanel-link:hover { text-decoration: underline; }
29
+ & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
30
+ & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent); }
31
+ & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent); }
32
+ & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent); }
33
+ & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent); }
34
+ & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent); }
35
+ & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent); }
36
+ & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
37
+ & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
38
+ & .crisp-recordpanel-link:hover { text-decoration: underline; }
39
39
 
40
40
  }
41
41
 
42
42
  @media (prefers-reduced-motion: reduce) {
43
- .recordpanel, .recordpanel * {
43
+ .crisp-recordpanel, .crisp-recordpanel * {
44
44
  animation-duration: 0.01ms !important;
45
45
  animation-iteration-count: 1 !important;
46
46
  transition-duration: 0.01ms !important;