@crisp-ui-kit/crisp 0.31.6 → 0.32.1

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 (389) 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 +32 -22
  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/namespace.js +17 -0
  111. package/dist/cjs/core/resolve.js +5 -3
  112. package/dist/cjs/product/appshell/appshell.js +2 -2
  113. package/dist/cjs/product/appshell/appshell.recipe.js +8 -8
  114. package/dist/cjs/product/authshell/authshell.js +1 -1
  115. package/dist/cjs/product/authshell/authshell.recipe.js +20 -20
  116. package/dist/cjs/product/board/board.js +3 -3
  117. package/dist/cjs/product/board/board.recipe.js +17 -17
  118. package/dist/cjs/product/command/command.js +3 -3
  119. package/dist/cjs/product/command/command.recipe.js +25 -25
  120. package/dist/cjs/product/entitycard/entitycard.js +1 -1
  121. package/dist/cjs/product/entitycard/entitycard.recipe.js +7 -7
  122. package/dist/cjs/product/flowcanvas/flowcanvas.js +5 -5
  123. package/dist/cjs/product/flowcanvas/flowcanvas.recipe.js +11 -11
  124. package/dist/cjs/product/inbox/inbox.js +1 -1
  125. package/dist/cjs/product/inbox/inbox.recipe.js +22 -22
  126. package/dist/cjs/product/listpage/listpage.js +3 -3
  127. package/dist/cjs/product/listpage/listpage.recipe.js +18 -18
  128. package/dist/cjs/product/navitem/navitem.js +1 -1
  129. package/dist/cjs/product/navitem/navitem.recipe.js +2 -2
  130. package/dist/cjs/product/onboarding/onboarding.js +1 -1
  131. package/dist/cjs/product/onboarding/onboarding.recipe.js +19 -19
  132. package/dist/cjs/product/recordpage/recordpage.js +24 -24
  133. package/dist/cjs/product/recordpage/recordpage.recipe.js +117 -117
  134. package/dist/cjs/product/recordpanel/recordpanel.js +4 -4
  135. package/dist/cjs/product/recordpanel/recordpanel.recipe.js +15 -15
  136. package/dist/cjs/product/recordstable/recordstable.js +48 -48
  137. package/dist/cjs/product/recordstable/recordstable.recipe.js +87 -87
  138. package/dist/cjs/product/recordstable/recordstable.tag.js +8 -8
  139. package/dist/cjs/product/richtext/richtext.js +4 -4
  140. package/dist/cjs/product/richtext/richtext.recipe.js +21 -21
  141. package/dist/cjs/product/settingssection/settingssection.js +1 -1
  142. package/dist/cjs/product/settingssection/settingssection.recipe.js +6 -6
  143. package/dist/cjs/product/settingsshell/settingsshell.js +1 -1
  144. package/dist/cjs/product/settingsshell/settingsshell.recipe.js +20 -20
  145. package/dist/cjs/product/sidebar/sidebar.js +2 -2
  146. package/dist/cjs/product/sidebar/sidebar.recipe.js +21 -21
  147. package/dist/cjs/product/tasklist/tasklist.js +2 -2
  148. package/dist/cjs/product/tasklist/tasklist.recipe.js +14 -14
  149. package/dist/cjs/product/trialbanner/trialbanner.js +1 -1
  150. package/dist/cjs/product/trialbanner/trialbanner.recipe.js +6 -6
  151. package/dist/cjs/product/viewtoggle/viewtoggle.js +1 -1
  152. package/dist/cjs/product/viewtoggle/viewtoggle.recipe.js +4 -4
  153. package/dist/cjs/tokens/contract.js +3 -2
  154. package/dist/columncalc.css +19 -12
  155. package/dist/columncalc.layered.css +35 -0
  156. package/dist/command.css +28 -28
  157. package/dist/command.layered.css +44 -0
  158. package/dist/contextmenu.css +12 -12
  159. package/dist/contextmenu.layered.css +22 -0
  160. package/dist/datatable.css +66 -66
  161. package/dist/datatable.layered.css +108 -0
  162. package/dist/datepicker.css +86 -86
  163. package/dist/datepicker.layered.css +179 -0
  164. package/dist/datepickerfield.css +19 -19
  165. package/dist/datepickerfield.layered.css +29 -0
  166. package/dist/dialog.css +19 -19
  167. package/dist/dialog.layered.css +29 -0
  168. package/dist/divider.css +2 -2
  169. package/dist/divider.layered.css +7 -0
  170. package/dist/donutchart.css +15 -15
  171. package/dist/donutchart.layered.css +26 -0
  172. package/dist/drawer.css +17 -17
  173. package/dist/drawer.layered.css +27 -0
  174. package/dist/emptystate.css +15 -15
  175. package/dist/emptystate.layered.css +22 -0
  176. package/dist/entitycard.css +14 -14
  177. package/dist/entitycard.layered.css +28 -0
  178. package/dist/esm/components/accordion/accordion.js +1 -1
  179. package/dist/esm/components/accordion/accordion.recipe.js +10 -10
  180. package/dist/esm/components/badge/badge.js +1 -1
  181. package/dist/esm/components/badge/badge.recipe.js +1 -1
  182. package/dist/esm/components/barchart/barchart.js +3 -3
  183. package/dist/esm/components/barchart/barchart.recipe.js +14 -14
  184. package/dist/esm/components/breadcrumb/breadcrumb.js +1 -1
  185. package/dist/esm/components/breadcrumb/breadcrumb.recipe.js +6 -6
  186. package/dist/esm/components/bulkbar/bulkbar.js +2 -2
  187. package/dist/esm/components/bulkbar/bulkbar.recipe.js +10 -10
  188. package/dist/esm/components/callout/callout.js +1 -1
  189. package/dist/esm/components/callout/callout.recipe.js +9 -9
  190. package/dist/esm/components/card/card.js +3 -3
  191. package/dist/esm/components/card/card.recipe.js +5 -5
  192. package/dist/esm/components/columncalc/columncalc.js +1 -1
  193. package/dist/esm/components/columncalc/columncalc.recipe.js +16 -9
  194. package/dist/esm/components/contextmenu/contextmenu.js +4 -4
  195. package/dist/esm/components/contextmenu/contextmenu.recipe.js +9 -9
  196. package/dist/esm/components/datatable/datatable.js +32 -22
  197. package/dist/esm/components/datatable/datatable.recipe.js +57 -57
  198. package/dist/esm/components/datepicker/datepicker.js +12 -12
  199. package/dist/esm/components/datepicker/datepicker.recipe.js +45 -45
  200. package/dist/esm/components/datepickerfield/datepickerfield.js +2 -2
  201. package/dist/esm/components/datepickerfield/datepickerfield.recipe.js +9 -9
  202. package/dist/esm/components/dialog/dialog.js +5 -5
  203. package/dist/esm/components/dialog/dialog.recipe.js +16 -16
  204. package/dist/esm/components/donutchart/donutchart.js +1 -1
  205. package/dist/esm/components/donutchart/donutchart.recipe.js +12 -12
  206. package/dist/esm/components/drawer/drawer.js +3 -3
  207. package/dist/esm/components/drawer/drawer.recipe.js +14 -14
  208. package/dist/esm/components/emptystate/emptystate.js +1 -1
  209. package/dist/esm/components/emptystate/emptystate.recipe.js +9 -9
  210. package/dist/esm/components/fileupload/fileupload.js +3 -3
  211. package/dist/esm/components/fileupload/fileupload.recipe.js +23 -23
  212. package/dist/esm/components/formfield/formfield.js +1 -1
  213. package/dist/esm/components/formfield/formfield.recipe.js +5 -5
  214. package/dist/esm/components/input/input.js +1 -1
  215. package/dist/esm/components/input/input.recipe.js +6 -6
  216. package/dist/esm/components/linechart/linechart.js +4 -4
  217. package/dist/esm/components/linechart/linechart.recipe.js +14 -14
  218. package/dist/esm/components/menu/menu.js +6 -6
  219. package/dist/esm/components/menu/menu.recipe.js +19 -19
  220. package/dist/esm/components/multiselect/multiselect.js +5 -5
  221. package/dist/esm/components/multiselect/multiselect.recipe.js +29 -29
  222. package/dist/esm/components/popover/popover.js +1 -1
  223. package/dist/esm/components/popover/popover.recipe.js +3 -3
  224. package/dist/esm/components/progress/progress.js +2 -2
  225. package/dist/esm/components/progress/progress.recipe.js +3 -3
  226. package/dist/esm/components/quantitypicker/quantitypicker.js +2 -2
  227. package/dist/esm/components/quantitypicker/quantitypicker.recipe.js +16 -16
  228. package/dist/esm/components/radiogroup/radiogroup.js +1 -1
  229. package/dist/esm/components/radiogroup/radiogroup.recipe.js +14 -14
  230. package/dist/esm/components/resizablepanel/resizablepanel.js +3 -3
  231. package/dist/esm/components/resizablepanel/resizablepanel.recipe.js +24 -24
  232. package/dist/esm/components/segmented/segmented.js +4 -4
  233. package/dist/esm/components/segmented/segmented.recipe.js +7 -7
  234. package/dist/esm/components/select/select.js +3 -3
  235. package/dist/esm/components/select/select.recipe.js +25 -25
  236. package/dist/esm/components/slider/slider.js +2 -2
  237. package/dist/esm/components/slider/slider.recipe.js +15 -15
  238. package/dist/esm/components/stagebar/stagebar.js +1 -1
  239. package/dist/esm/components/stagebar/stagebar.recipe.js +1 -1
  240. package/dist/esm/components/statcard/statcard.js +1 -1
  241. package/dist/esm/components/statcard/statcard.recipe.js +9 -9
  242. package/dist/esm/components/switch/switch.js +1 -1
  243. package/dist/esm/components/switch/switch.recipe.js +2 -2
  244. package/dist/esm/components/table/table.js +1 -1
  245. package/dist/esm/components/table/table.recipe.js +1 -1
  246. package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js +65 -64
  247. package/dist/esm/components/tabletoolbar/tabletoolbar.js +13 -13
  248. package/dist/esm/components/tabs/tabs.js +4 -4
  249. package/dist/esm/components/tabs/tabs.recipe.js +12 -12
  250. package/dist/esm/components/textarea/textarea.js +2 -2
  251. package/dist/esm/components/textarea/textarea.recipe.js +11 -11
  252. package/dist/esm/components/toast/toast.js +4 -4
  253. package/dist/esm/components/toast/toast.recipe.js +14 -14
  254. package/dist/esm/components/wheelpicker/wheelpicker.js +2 -2
  255. package/dist/esm/components/wheelpicker/wheelpicker.recipe.js +19 -19
  256. package/dist/esm/core/namespace.js +14 -0
  257. package/dist/esm/core/resolve.js +5 -3
  258. package/dist/esm/product/appshell/appshell.js +2 -2
  259. package/dist/esm/product/appshell/appshell.recipe.js +8 -8
  260. package/dist/esm/product/authshell/authshell.js +1 -1
  261. package/dist/esm/product/authshell/authshell.recipe.js +20 -20
  262. package/dist/esm/product/board/board.js +3 -3
  263. package/dist/esm/product/board/board.recipe.js +17 -17
  264. package/dist/esm/product/command/command.js +3 -3
  265. package/dist/esm/product/command/command.recipe.js +25 -25
  266. package/dist/esm/product/entitycard/entitycard.js +1 -1
  267. package/dist/esm/product/entitycard/entitycard.recipe.js +7 -7
  268. package/dist/esm/product/flowcanvas/flowcanvas.js +5 -5
  269. package/dist/esm/product/flowcanvas/flowcanvas.recipe.js +11 -11
  270. package/dist/esm/product/inbox/inbox.js +1 -1
  271. package/dist/esm/product/inbox/inbox.recipe.js +22 -22
  272. package/dist/esm/product/listpage/listpage.js +3 -3
  273. package/dist/esm/product/listpage/listpage.recipe.js +18 -18
  274. package/dist/esm/product/navitem/navitem.js +1 -1
  275. package/dist/esm/product/navitem/navitem.recipe.js +2 -2
  276. package/dist/esm/product/onboarding/onboarding.js +1 -1
  277. package/dist/esm/product/onboarding/onboarding.recipe.js +19 -19
  278. package/dist/esm/product/recordpage/recordpage.js +24 -24
  279. package/dist/esm/product/recordpage/recordpage.recipe.js +117 -117
  280. package/dist/esm/product/recordpanel/recordpanel.js +4 -4
  281. package/dist/esm/product/recordpanel/recordpanel.recipe.js +15 -15
  282. package/dist/esm/product/recordstable/recordstable.js +48 -48
  283. package/dist/esm/product/recordstable/recordstable.recipe.js +87 -87
  284. package/dist/esm/product/recordstable/recordstable.tag.js +8 -8
  285. package/dist/esm/product/richtext/richtext.js +4 -4
  286. package/dist/esm/product/richtext/richtext.recipe.js +21 -21
  287. package/dist/esm/product/settingssection/settingssection.js +1 -1
  288. package/dist/esm/product/settingssection/settingssection.recipe.js +6 -6
  289. package/dist/esm/product/settingsshell/settingsshell.js +1 -1
  290. package/dist/esm/product/settingsshell/settingsshell.recipe.js +20 -20
  291. package/dist/esm/product/sidebar/sidebar.js +2 -2
  292. package/dist/esm/product/sidebar/sidebar.recipe.js +21 -21
  293. package/dist/esm/product/tasklist/tasklist.js +2 -2
  294. package/dist/esm/product/tasklist/tasklist.recipe.js +14 -14
  295. package/dist/esm/product/trialbanner/trialbanner.js +1 -1
  296. package/dist/esm/product/trialbanner/trialbanner.recipe.js +6 -6
  297. package/dist/esm/product/viewtoggle/viewtoggle.js +1 -1
  298. package/dist/esm/product/viewtoggle/viewtoggle.recipe.js +4 -4
  299. package/dist/esm/tokens/contract.js +3 -2
  300. package/dist/fileupload.css +46 -46
  301. package/dist/fileupload.layered.css +91 -0
  302. package/dist/flowcanvas.css +13 -13
  303. package/dist/flowcanvas.layered.css +17 -0
  304. package/dist/formfield.css +7 -7
  305. package/dist/formfield.layered.css +10 -0
  306. package/dist/inbox.css +26 -26
  307. package/dist/inbox.layered.css +41 -0
  308. package/dist/input.css +17 -17
  309. package/dist/input.layered.css +45 -0
  310. package/dist/kbd.css +2 -2
  311. package/dist/kbd.layered.css +5 -0
  312. package/dist/linechart.css +14 -14
  313. package/dist/linechart.layered.css +17 -0
  314. package/dist/listpage.css +22 -22
  315. package/dist/listpage.layered.css +41 -0
  316. package/dist/menu.css +29 -29
  317. package/dist/menu.layered.css +48 -0
  318. package/dist/multiselect.css +42 -42
  319. package/dist/multiselect.layered.css +63 -0
  320. package/dist/navitem.css +14 -14
  321. package/dist/navitem.layered.css +25 -0
  322. package/dist/onboarding.css +24 -24
  323. package/dist/onboarding.layered.css +39 -0
  324. package/dist/popover.css +6 -6
  325. package/dist/popover.layered.css +16 -0
  326. package/dist/progress.css +7 -7
  327. package/dist/progress.layered.css +17 -0
  328. package/dist/quantitypicker.css +34 -34
  329. package/dist/quantitypicker.layered.css +80 -0
  330. package/dist/radiogroup.css +18 -18
  331. package/dist/radiogroup.layered.css +33 -0
  332. package/dist/recordpage.css +122 -122
  333. package/dist/recordpage.layered.css +153 -0
  334. package/dist/recordpanel.css +31 -31
  335. package/dist/recordpanel.layered.css +50 -0
  336. package/dist/recordstable.css +162 -162
  337. package/dist/recordstable.layered.css +222 -0
  338. package/dist/resizablepanel.css +26 -26
  339. package/dist/resizablepanel.layered.css +55 -0
  340. package/dist/richtext.css +24 -24
  341. package/dist/richtext.layered.css +38 -0
  342. package/dist/segmented.css +10 -10
  343. package/dist/segmented.layered.css +20 -0
  344. package/dist/select.css +43 -43
  345. package/dist/select.layered.css +72 -0
  346. package/dist/settingssection.css +8 -8
  347. package/dist/settingssection.layered.css +11 -0
  348. package/dist/settingsshell.css +23 -23
  349. package/dist/settingsshell.layered.css +44 -0
  350. package/dist/sidebar.css +27 -27
  351. package/dist/sidebar.layered.css +40 -0
  352. package/dist/skeleton.css +4 -4
  353. package/dist/skeleton.layered.css +15 -0
  354. package/dist/slider.css +23 -23
  355. package/dist/slider.layered.css +58 -0
  356. package/dist/spinner.css +3 -3
  357. package/dist/spinner.layered.css +14 -0
  358. package/dist/stagebar.css +4 -4
  359. package/dist/stagebar.layered.css +14 -0
  360. package/dist/statcard.css +14 -14
  361. package/dist/statcard.layered.css +21 -0
  362. package/dist/styles.css +1816 -1725
  363. package/dist/styles.layered.css +2932 -0
  364. package/dist/switch.css +7 -7
  365. package/dist/switch.layered.css +22 -0
  366. package/dist/table.css +16 -16
  367. package/dist/table.layered.css +36 -0
  368. package/dist/tabletoolbar.css +67 -67
  369. package/dist/tabletoolbar.layered.css +80 -0
  370. package/dist/tabs.css +15 -15
  371. package/dist/tabs.layered.css +29 -0
  372. package/dist/tasklist.css +17 -17
  373. package/dist/tasklist.layered.css +34 -0
  374. package/dist/textarea.css +18 -18
  375. package/dist/textarea.layered.css +42 -0
  376. package/dist/toast.css +17 -17
  377. package/dist/toast.layered.css +27 -0
  378. package/dist/tokens.css +199 -115
  379. package/dist/tooltip.css +3 -3
  380. package/dist/tooltip.layered.css +13 -0
  381. package/dist/trialbanner.css +13 -13
  382. package/dist/trialbanner.layered.css +28 -0
  383. package/dist/types/core/namespace.d.ts +2 -0
  384. package/dist/viewtoggle.css +10 -10
  385. package/dist/viewtoggle.layered.css +23 -0
  386. package/dist/wheelpicker.css +29 -29
  387. package/dist/wheelpicker.layered.css +70 -0
  388. package/licenses/Apache-2.0.txt +201 -0
  389. package/package.json +5 -2
package/dist/onboarding.css CHANGED
@@ -1,35 +1,35 @@
1
- .onboarding {
2
- display: flex; flex-direction: column; box-sizing: border-box; width: 272px; padding: var(--space-3); gap: var(--space-2);
3
- border-radius: var(--radius-xl); background: var(--bg-surface); font-family: var(--font-sans);
1
+ .crisp-onboarding {
2
+ display: flex; flex-direction: column; box-sizing: border-box; width: 272px; padding: var(--crisp-space-3); gap: var(--crisp-space-2);
3
+ border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans);
4
4
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
5
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
6
6
 
7
- & .onboarding-head { display: flex; align-items: center; gap: var(--space-1); }
8
- & .onboarding-title { flex: 1; min-width: 0; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
9
- & .onboarding-iconbtn { 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; }
10
- & .onboarding-iconbtn:hover { background: var(--bg-raised); color: var(--fg-primary); }
7
+ & .crisp-onboarding-head { display: flex; align-items: center; gap: var(--crisp-space-1); }
8
+ & .crisp-onboarding-title { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
9
+ & .crisp-onboarding-iconbtn { 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; }
10
+ & .crisp-onboarding-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
11
11
 
12
- & .onboarding-sub { font-size: var(--text-sm); color: color-mix(in srgb, var(--fg-primary) 50%, transparent); }
13
- & .onboarding-sub b { font-weight: var(--weight-medium); color: var(--fg-primary); }
12
+ & .crisp-onboarding-sub { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
13
+ & .crisp-onboarding-sub b { font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
14
14
 
15
- & .onboarding-progress { display: flex; gap: var(--space-1); margin: var(--space-0-5) 0 var(--space-1); }
16
- & .onboarding-seg { flex: 1; height: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); transition: background-color .2s ease; }
17
- & .onboarding-seg[data-done] { background: var(--bg-brand-solid); }
15
+ & .crisp-onboarding-progress { display: flex; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5) 0 var(--crisp-space-1); }
16
+ & .crisp-onboarding-seg { flex: 1; height: 4px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); transition: background-color .2s ease; }
17
+ & .crisp-onboarding-seg[data-done] { background: var(--crisp-bg-brand-solid); }
18
18
 
19
- & .onboarding-steps { display: flex; flex-direction: column; }
20
- & .onboarding-step { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-1); margin: 0; border: none; border-radius: var(--radius-md); background: none; font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: start; cursor: pointer; transition: background-color .12s; }
21
- & .onboarding-step:hover { background: var(--bg-raised); }
22
- & .onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: var(--fg-muted); }
23
- & .onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
24
- & .onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--radius-full); color: transparent; }
25
- & .onboarding-step[data-done] { cursor: default; }
26
- & .onboarding-step[data-done] .onboarding-step-icon, & .onboarding-step[data-done] .onboarding-step-label { color: var(--fg-muted); text-decoration: line-through; }
27
- & .onboarding-step[data-done]:hover { background: none; }
28
- & .onboarding-step[data-done] .onboarding-step-check { background: var(--bg-brand-solid); color: var(--fg-on-brand); }
19
+ & .crisp-onboarding-steps { display: flex; flex-direction: column; }
20
+ & .crisp-onboarding-step { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-1); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; transition: background-color .12s; }
21
+ & .crisp-onboarding-step:hover { background: var(--crisp-bg-raised); }
22
+ & .crisp-onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: var(--crisp-fg-muted); }
23
+ & .crisp-onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
24
+ & .crisp-onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--crisp-radius-full); color: transparent; }
25
+ & .crisp-onboarding-step[data-done] { cursor: default; }
26
+ & .crisp-onboarding-step[data-done] .crisp-onboarding-step-icon, & .crisp-onboarding-step[data-done] .crisp-onboarding-step-label { color: var(--crisp-fg-muted); text-decoration: line-through; }
27
+ & .crisp-onboarding-step[data-done]:hover { background: none; }
28
+ & .crisp-onboarding-step[data-done] .crisp-onboarding-step-check { background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
29
29
  }
30
30
 
31
31
  @media (prefers-reduced-motion: reduce) {
32
- .onboarding, .onboarding * {
32
+ .crisp-onboarding, .crisp-onboarding * {
33
33
  animation-duration: 0.01ms !important;
34
34
  animation-iteration-count: 1 !important;
35
35
  transition-duration: 0.01ms !important;
package/dist/onboarding.layered.css ADDED
@@ -0,0 +1,39 @@
1
+ @layer crisp-components {
2
+ .crisp-onboarding {
3
+ display: flex; flex-direction: column; box-sizing: border-box; width: 272px; padding: var(--crisp-space-3); gap: var(--crisp-space-2);
4
+ border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans);
5
+ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
6
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
7
+
8
+ & .crisp-onboarding-head { display: flex; align-items: center; gap: var(--crisp-space-1); }
9
+ & .crisp-onboarding-title { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
10
+ & .crisp-onboarding-iconbtn { 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; }
11
+ & .crisp-onboarding-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
12
+
13
+ & .crisp-onboarding-sub { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
14
+ & .crisp-onboarding-sub b { font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
15
+
16
+ & .crisp-onboarding-progress { display: flex; gap: var(--crisp-space-1); margin: var(--crisp-space-0-5) 0 var(--crisp-space-1); }
17
+ & .crisp-onboarding-seg { flex: 1; height: 4px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); transition: background-color .2s ease; }
18
+ & .crisp-onboarding-seg[data-done] { background: var(--crisp-bg-brand-solid); }
19
+
20
+ & .crisp-onboarding-steps { display: flex; flex-direction: column; }
21
+ & .crisp-onboarding-step { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-1); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; transition: background-color .12s; }
22
+ & .crisp-onboarding-step:hover { background: var(--crisp-bg-raised); }
23
+ & .crisp-onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: var(--crisp-fg-muted); }
24
+ & .crisp-onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
25
+ & .crisp-onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--crisp-radius-full); color: transparent; }
26
+ & .crisp-onboarding-step[data-done] { cursor: default; }
27
+ & .crisp-onboarding-step[data-done] .crisp-onboarding-step-icon, & .crisp-onboarding-step[data-done] .crisp-onboarding-step-label { color: var(--crisp-fg-muted); text-decoration: line-through; }
28
+ & .crisp-onboarding-step[data-done]:hover { background: none; }
29
+ & .crisp-onboarding-step[data-done] .crisp-onboarding-step-check { background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
30
+ }
31
+
32
+ @media (prefers-reduced-motion: reduce) {
33
+ .crisp-onboarding, .crisp-onboarding * {
34
+ animation-duration: 0.01ms !important;
35
+ animation-iteration-count: 1 !important;
36
+ transition-duration: 0.01ms !important;
37
+ }
38
+ }
39
+ }
package/dist/popover.css CHANGED
@@ -1,12 +1,12 @@
1
- .popover {
2
- display: contents; font-family: var(--font-sans);
3
- & .popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-popover); color: var(--fg-primary); 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); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
4
- & .popover-content[data-align="end"] { transform-origin: top right; }
5
- & .popover-content[data-up] { transform-origin: bottom left; }
1
+ .crisp-popover {
2
+ display: contents; font-family: var(--crisp-font-sans);
3
+ & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
4
+ & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
5
+ & .crisp-popover-content[data-up] { transform-origin: bottom left; }
6
6
  }
7
7
 
8
8
  @media (prefers-reduced-motion: reduce) {
9
- .popover, .popover * {
9
+ .crisp-popover, .crisp-popover * {
10
10
  animation-duration: 0.01ms !important;
11
11
  animation-iteration-count: 1 !important;
12
12
  transition-duration: 0.01ms !important;
package/dist/popover.layered.css ADDED
@@ -0,0 +1,16 @@
1
+ @layer crisp-components {
2
+ .crisp-popover {
3
+ display: contents; font-family: var(--crisp-font-sans);
4
+ & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); color: var(--crisp-fg-primary); 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); opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
5
+ & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
6
+ & .crisp-popover-content[data-up] { transform-origin: bottom left; }
7
+ }
8
+
9
+ @media (prefers-reduced-motion: reduce) {
10
+ .crisp-popover, .crisp-popover * {
11
+ animation-duration: 0.01ms !important;
12
+ animation-iteration-count: 1 !important;
13
+ transition-duration: 0.01ms !important;
14
+ }
15
+ }
16
+ }
package/dist/progress.css CHANGED
@@ -1,13 +1,13 @@
1
- .progress {
2
- display: block; box-sizing: border-box; height: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden;
3
- & .progress-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--bg-brand-solid); transition: width 0.25s ease; }
4
- &[data-segmented] { display: flex; gap: var(--space-1); background: transparent; overflow: visible; }
5
- &[data-segmented] .progress-seg { flex: 1; height: 100%; border-radius: var(--radius-full); background: color-mix(in srgb, var(--fg-primary) 8%, transparent); transition: background 0.2s; }
6
- &[data-segmented] .progress-seg[data-filled] { background: var(--bg-brand-solid); }
1
+ .crisp-progress {
2
+ display: block; box-sizing: border-box; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden;
3
+ & .crisp-progress-fill { display: block; height: 100%; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); transition: width 0.25s ease; }
4
+ &[data-segmented] { display: flex; gap: var(--crisp-space-1); background: transparent; overflow: visible; }
5
+ &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); transition: background 0.2s; }
6
+ &[data-segmented] .crisp-progress-seg[data-filled] { background: var(--crisp-bg-brand-solid); }
7
7
  }
8
8
 
9
9
  @media (prefers-reduced-motion: reduce) {
10
- .progress, .progress * {
10
+ .crisp-progress, .crisp-progress * {
11
11
  animation-duration: 0.01ms !important;
12
12
  animation-iteration-count: 1 !important;
13
13
  transition-duration: 0.01ms !important;
package/dist/progress.layered.css ADDED
@@ -0,0 +1,17 @@
1
+ @layer crisp-components {
2
+ .crisp-progress {
3
+ display: block; box-sizing: border-box; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden;
4
+ & .crisp-progress-fill { display: block; height: 100%; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); transition: width 0.25s ease; }
5
+ &[data-segmented] { display: flex; gap: var(--crisp-space-1); background: transparent; overflow: visible; }
6
+ &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); transition: background 0.2s; }
7
+ &[data-segmented] .crisp-progress-seg[data-filled] { background: var(--crisp-bg-brand-solid); }
8
+ }
9
+
10
+ @media (prefers-reduced-motion: reduce) {
11
+ .crisp-progress, .crisp-progress * {
12
+ animation-duration: 0.01ms !important;
13
+ animation-iteration-count: 1 !important;
14
+ transition-duration: 0.01ms !important;
15
+ }
16
+ }
17
+ }
package/dist/quantitypicker.css CHANGED
@@ -1,76 +1,76 @@
1
- .quantitypicker {
1
+ .crisp-quantitypicker {
2
2
 
3
3
  display: inline-flex; box-sizing: border-box; width: fit-content;
4
- align-items: center; font-family: var(--font-sans);
5
- background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default);
4
+ align-items: center; font-family: var(--crisp-font-sans);
5
+ background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
6
6
 
7
- &[data-invalid] { box-shadow: inset 0 0 0 2px var(--bg-danger); }
7
+ &[data-invalid] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger); }
8
8
 
9
- & .quantitypicker-button {
9
+ & .crisp-quantitypicker-button {
10
10
  display: inline-flex; flex-shrink: 0; box-sizing: border-box;
11
11
  align-items: center; justify-content: center;
12
12
  border: none; padding: 0; cursor: pointer;
13
- background: transparent; color: var(--fg-primary);
13
+ background: transparent; color: var(--crisp-fg-primary);
14
14
  transition: background-color .15s ease, outline-color .15s ease;
15
15
  outline: 2px solid transparent; outline-offset: 2px;
16
16
  }
17
- & .quantitypicker-button:focus-visible { outline-color: var(--stroke-focus-ring); }
18
- & .quantitypicker-button:not([data-disabled]):hover { background: var(--bg-raised); }
19
- & .quantitypicker-button[data-loading] { background: var(--bg-raised); }
20
- & .quantitypicker-button[data-disabled] { cursor: not-allowed; color: var(--fg-disabled); }
17
+ & .crisp-quantitypicker-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
18
+ & .crisp-quantitypicker-button:not([data-disabled]):hover { background: var(--crisp-bg-raised); }
19
+ & .crisp-quantitypicker-button[data-loading] { background: var(--crisp-bg-raised); }
20
+ & .crisp-quantitypicker-button[data-disabled] { cursor: not-allowed; color: var(--crisp-fg-disabled); }
21
21
 
22
- & .quantitypicker-value {
22
+ & .crisp-quantitypicker-value {
23
23
  display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
24
24
  align-items: center; justify-content: center;
25
- padding-inline: var(--space-2);
26
- font-weight: var(--weight-medium); color: var(--fg-primary);
25
+ padding-inline: var(--crisp-space-2);
26
+ font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
27
27
  }
28
- & .quantitypicker-value[data-disabled] { color: var(--fg-disabled); }
29
- & .quantitypicker-placeholder {
28
+ & .crisp-quantitypicker-value[data-disabled] { color: var(--crisp-fg-disabled); }
29
+ & .crisp-quantitypicker-placeholder {
30
30
  grid-column: 1; grid-row: 1; visibility: hidden;
31
31
  font-variant-numeric: tabular-nums;
32
32
  }
33
- & .quantitypicker-text {
33
+ & .crisp-quantitypicker-text {
34
34
  grid-column: 1; grid-row: 1; text-align: center;
35
35
  font-variant-numeric: tabular-nums;
36
36
  }
37
37
 
38
- & .quantitypicker-divider {
39
- flex-shrink: 0; width: 1px; height: var(--space-4);
40
- background: var(--border-subtle);
38
+ & .crisp-quantitypicker-divider {
39
+ flex-shrink: 0; width: 1px; height: var(--crisp-space-4);
40
+ background: var(--crisp-border-subtle);
41
41
  }
42
42
 
43
43
  }
44
- .quantitypicker--size_small {
44
+ .crisp-quantitypicker--size_small {
45
45
 
46
- height: 36px; border-radius: var(--radius-md);
47
- & .quantitypicker-button { width: 36px; height: 36px; border-radius: var(--radius-md); }
48
- & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
46
+ height: 36px; border-radius: var(--crisp-radius-md);
47
+ & .crisp-quantitypicker-button { width: 36px; height: 36px; border-radius: var(--crisp-radius-md); }
48
+ & .crisp-quantitypicker-value { font-size: var(--crisp-text-xl); line-height: 22px; }
49
49
 
50
50
  }
51
- .quantitypicker--size_medium {
51
+ .crisp-quantitypicker--size_medium {
52
52
 
53
- height: 40px; border-radius: var(--radius-md);
54
- & .quantitypicker-button { width: 40px; height: 40px; border-radius: var(--radius-md); }
55
- & .quantitypicker-value { font-size: var(--text-xl); line-height: 22px; }
53
+ height: 40px; border-radius: var(--crisp-radius-md);
54
+ & .crisp-quantitypicker-button { width: 40px; height: 40px; border-radius: var(--crisp-radius-md); }
55
+ & .crisp-quantitypicker-value { font-size: var(--crisp-text-xl); line-height: 22px; }
56
56
 
57
57
  }
58
- .quantitypicker--size_large {
58
+ .crisp-quantitypicker--size_large {
59
59
 
60
- height: 52px; border-radius: var(--radius-xl);
61
- & .quantitypicker-button { width: 52px; height: 52px; border-radius: var(--radius-xl); }
62
- & .quantitypicker-value { font-size: 18px; line-height: 24px; }
60
+ height: 52px; border-radius: var(--crisp-radius-xl);
61
+ & .crisp-quantitypicker-button { width: 52px; height: 52px; border-radius: var(--crisp-radius-xl); }
62
+ & .crisp-quantitypicker-value { font-size: 18px; line-height: 24px; }
63
63
 
64
64
  }
65
- .quantitypicker--fill_true {
65
+ .crisp-quantitypicker--fill_true {
66
66
  width: auto; flex-grow: 1;
67
67
  }
68
- .quantitypicker--fill_false {
68
+ .crisp-quantitypicker--fill_false {
69
69
 
70
70
  }
71
71
 
72
72
  @media (prefers-reduced-motion: reduce) {
73
- .quantitypicker, .quantitypicker * {
73
+ .crisp-quantitypicker, .crisp-quantitypicker * {
74
74
  animation-duration: 0.01ms !important;
75
75
  animation-iteration-count: 1 !important;
76
76
  transition-duration: 0.01ms !important;
package/dist/quantitypicker.layered.css ADDED
@@ -0,0 +1,80 @@
1
+ @layer crisp-components {
2
+ .crisp-quantitypicker {
3
+
4
+ display: inline-flex; box-sizing: border-box; width: fit-content;
5
+ align-items: center; font-family: var(--crisp-font-sans);
6
+ background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
7
+
8
+ &[data-invalid] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger); }
9
+
10
+ & .crisp-quantitypicker-button {
11
+ display: inline-flex; flex-shrink: 0; box-sizing: border-box;
12
+ align-items: center; justify-content: center;
13
+ border: none; padding: 0; cursor: pointer;
14
+ background: transparent; color: var(--crisp-fg-primary);
15
+ transition: background-color .15s ease, outline-color .15s ease;
16
+ outline: 2px solid transparent; outline-offset: 2px;
17
+ }
18
+ & .crisp-quantitypicker-button:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
19
+ & .crisp-quantitypicker-button:not([data-disabled]):hover { background: var(--crisp-bg-raised); }
20
+ & .crisp-quantitypicker-button[data-loading] { background: var(--crisp-bg-raised); }
21
+ & .crisp-quantitypicker-button[data-disabled] { cursor: not-allowed; color: var(--crisp-fg-disabled); }
22
+
23
+ & .crisp-quantitypicker-value {
24
+ display: grid; flex-grow: 1; flex-shrink: 0; box-sizing: border-box;
25
+ align-items: center; justify-content: center;
26
+ padding-inline: var(--crisp-space-2);
27
+ font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
28
+ }
29
+ & .crisp-quantitypicker-value[data-disabled] { color: var(--crisp-fg-disabled); }
30
+ & .crisp-quantitypicker-placeholder {
31
+ grid-column: 1; grid-row: 1; visibility: hidden;
32
+ font-variant-numeric: tabular-nums;
33
+ }
34
+ & .crisp-quantitypicker-text {
35
+ grid-column: 1; grid-row: 1; text-align: center;
36
+ font-variant-numeric: tabular-nums;
37
+ }
38
+
39
+ & .crisp-quantitypicker-divider {
40
+ flex-shrink: 0; width: 1px; height: var(--crisp-space-4);
41
+ background: var(--crisp-border-subtle);
42
+ }
43
+
44
+ }
45
+ .crisp-quantitypicker--size_small {
46
+
47
+ height: 36px; border-radius: var(--crisp-radius-md);
48
+ & .crisp-quantitypicker-button { width: 36px; height: 36px; border-radius: var(--crisp-radius-md); }
49
+ & .crisp-quantitypicker-value { font-size: var(--crisp-text-xl); line-height: 22px; }
50
+
51
+ }
52
+ .crisp-quantitypicker--size_medium {
53
+
54
+ height: 40px; border-radius: var(--crisp-radius-md);
55
+ & .crisp-quantitypicker-button { width: 40px; height: 40px; border-radius: var(--crisp-radius-md); }
56
+ & .crisp-quantitypicker-value { font-size: var(--crisp-text-xl); line-height: 22px; }
57
+
58
+ }
59
+ .crisp-quantitypicker--size_large {
60
+
61
+ height: 52px; border-radius: var(--crisp-radius-xl);
62
+ & .crisp-quantitypicker-button { width: 52px; height: 52px; border-radius: var(--crisp-radius-xl); }
63
+ & .crisp-quantitypicker-value { font-size: 18px; line-height: 24px; }
64
+
65
+ }
66
+ .crisp-quantitypicker--fill_true {
67
+ width: auto; flex-grow: 1;
68
+ }
69
+ .crisp-quantitypicker--fill_false {
70
+
71
+ }
72
+
73
+ @media (prefers-reduced-motion: reduce) {
74
+ .crisp-quantitypicker, .crisp-quantitypicker * {
75
+ animation-duration: 0.01ms !important;
76
+ animation-iteration-count: 1 !important;
77
+ transition-duration: 0.01ms !important;
78
+ }
79
+ }
80
+ }
package/dist/radiogroup.css CHANGED
@@ -1,29 +1,29 @@
1
- .radiogroup {
1
+ .crisp-radiogroup {
2
2
 
3
- display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans);
3
+ display: flex; flex-direction: column; gap: var(--crisp-space-1); font-family: var(--crisp-font-sans);
4
4
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
5
 
6
- & .radio { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-1); border: none; background: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: start; cursor: pointer; }
7
- & .radio:disabled { opacity: 0.5; cursor: not-allowed; }
8
- & .radio:focus-visible { outline: none; }
9
- & .radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--border-default); transition: box-shadow .12s ease; }
10
- & .radio:hover .radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg-primary) 40%, transparent); }
11
- & .radio[data-checked] .radio-dot { box-shadow: inset 0 0 0 1.5px var(--bg-brand-solid); }
12
- & .radio[data-checked] .radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--bg-brand-solid); }
13
- & .radio:focus-visible .radio-dot { outline: 2px solid var(--bg-brand-solid); outline-offset: 2px; }
14
- & .radio-label { min-width: 0; }
6
+ & .crisp-radio { display: flex; align-items: center; gap: var(--crisp-space-2); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; }
7
+ & .crisp-radio:disabled { opacity: 0.5; cursor: not-allowed; }
8
+ & .crisp-radio:focus-visible { outline: none; }
9
+ & .crisp-radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--crisp-radius-full); box-shadow: inset 0 0 0 1.5px var(--crisp-border-default); transition: box-shadow .12s ease; }
10
+ & .crisp-radio:hover .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
11
+ & .crisp-radio[data-checked] .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px var(--crisp-bg-brand-solid); }
12
+ & .crisp-radio[data-checked] .crisp-radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); }
13
+ & .crisp-radio:focus-visible .crisp-radio-dot { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
14
+ & .crisp-radio-label { min-width: 0; }
15
15
 
16
- &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
17
- &[data-variant="card"] .radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: var(--radius-2xl); box-shadow: inset 0 0 0 1px var(--border-default); overflow: hidden; transition: box-shadow .12s ease; }
18
- &[data-variant="card"] .radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 22%, transparent); }
19
- &[data-variant="card"] .radio[data-checked] { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
20
- &[data-variant="card"] .radio-preview { flex: 1; min-height: 0; background: var(--bg-raised); }
21
- &[data-variant="card"] .radio-cardfoot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-md); font-weight: var(--weight-medium); }
16
+ &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: var(--crisp-space-3); }
17
+ &[data-variant="card"] .crisp-radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: var(--crisp-radius-2xl); box-shadow: inset 0 0 0 1px var(--crisp-border-default); overflow: hidden; transition: box-shadow .12s ease; }
18
+ &[data-variant="card"] .crisp-radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); }
19
+ &[data-variant="card"] .crisp-radio[data-checked] { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
20
+ &[data-variant="card"] .crisp-radio-preview { flex: 1; min-height: 0; background: var(--crisp-bg-raised); }
21
+ &[data-variant="card"] .crisp-radio-cardfoot { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); }
22
22
 
23
23
  }
24
24
 
25
25
  @media (prefers-reduced-motion: reduce) {
26
- .radiogroup, .radiogroup * {
26
+ .crisp-radiogroup, .crisp-radiogroup * {
27
27
  animation-duration: 0.01ms !important;
28
28
  animation-iteration-count: 1 !important;
29
29
  transition-duration: 0.01ms !important;
package/dist/radiogroup.layered.css ADDED
@@ -0,0 +1,33 @@
1
+ @layer crisp-components {
2
+ .crisp-radiogroup {
3
+
4
+ display: flex; flex-direction: column; gap: var(--crisp-space-1); font-family: var(--crisp-font-sans);
5
+ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
6
+
7
+ & .crisp-radio { display: flex; align-items: center; gap: var(--crisp-space-2); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: start; cursor: pointer; }
8
+ & .crisp-radio:disabled { opacity: 0.5; cursor: not-allowed; }
9
+ & .crisp-radio:focus-visible { outline: none; }
10
+ & .crisp-radio-dot { position: relative; flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--crisp-radius-full); box-shadow: inset 0 0 0 1.5px var(--crisp-border-default); transition: box-shadow .12s ease; }
11
+ & .crisp-radio:hover .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
12
+ & .crisp-radio[data-checked] .crisp-radio-dot { box-shadow: inset 0 0 0 1.5px var(--crisp-bg-brand-solid); }
13
+ & .crisp-radio[data-checked] .crisp-radio-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-brand-solid); }
14
+ & .crisp-radio:focus-visible .crisp-radio-dot { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
15
+ & .crisp-radio-label { min-width: 0; }
16
+
17
+ &[data-variant="card"] { flex-direction: row; flex-wrap: wrap; gap: var(--crisp-space-3); }
18
+ &[data-variant="card"] .crisp-radio { flex: 1 1 150px; min-width: 150px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: var(--crisp-radius-2xl); box-shadow: inset 0 0 0 1px var(--crisp-border-default); overflow: hidden; transition: box-shadow .12s ease; }
19
+ &[data-variant="card"] .crisp-radio:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); }
20
+ &[data-variant="card"] .crisp-radio[data-checked] { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
21
+ &[data-variant="card"] .crisp-radio-preview { flex: 1; min-height: 0; background: var(--crisp-bg-raised); }
22
+ &[data-variant="card"] .crisp-radio-cardfoot { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); }
23
+
24
+ }
25
+
26
+ @media (prefers-reduced-motion: reduce) {
27
+ .crisp-radiogroup, .crisp-radiogroup * {
28
+ animation-duration: 0.01ms !important;
29
+ animation-iteration-count: 1 !important;
30
+ transition-duration: 0.01ms !important;
31
+ }
32
+ }
33
+ }