@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/switch.css CHANGED
@@ -1,18 +1,18 @@
1
- .switch {
1
+ .crisp-switch {
2
2
 
3
3
  display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
4
- border: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--fg-primary) 9%, transparent);
4
+ border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent);
5
5
  cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
6
- & .switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--radius-full); background: #fff; transition: transform .2s ease; }
7
- &[data-checked] { background: var(--bg-brand-solid); }
8
- &[data-checked] .switch-thumb { transform: translateX(8px); }
9
- &:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 2px; }
6
+ & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; transition: transform .2s ease; }
7
+ &[data-checked] { background: var(--crisp-bg-brand-solid); }
8
+ &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
9
+ &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
10
10
  &:disabled { opacity: 0.5; cursor: not-allowed; }
11
11
 
12
12
  }
13
13
 
14
14
  @media (prefers-reduced-motion: reduce) {
15
- .switch, .switch * {
15
+ .crisp-switch, .crisp-switch * {
16
16
  animation-duration: 0.01ms !important;
17
17
  animation-iteration-count: 1 !important;
18
18
  transition-duration: 0.01ms !important;
package/dist/switch.layered.css ADDED
@@ -0,0 +1,22 @@
1
+ @layer crisp-components {
2
+ .crisp-switch {
3
+
4
+ display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
5
+ border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent);
6
+ cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
7
+ & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; transition: transform .2s ease; }
8
+ &[data-checked] { background: var(--crisp-bg-brand-solid); }
9
+ &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
10
+ &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
11
+ &:disabled { opacity: 0.5; cursor: not-allowed; }
12
+
13
+ }
14
+
15
+ @media (prefers-reduced-motion: reduce) {
16
+ .crisp-switch, .crisp-switch * {
17
+ animation-duration: 0.01ms !important;
18
+ animation-iteration-count: 1 !important;
19
+ transition-duration: 0.01ms !important;
20
+ }
21
+ }
22
+ }
package/dist/table.css CHANGED
@@ -1,32 +1,32 @@
1
- .table {
2
- display: block; box-sizing: border-box; background: var(--bg-surface);
3
- & .table-scroll { overflow-x: auto; }
4
- & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--fg-primary); }
5
- & th, & td { position: relative; height: var(--size-tableRow); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
6
- & th { height: var(--size-tableHeader); background: var(--bg-surface); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--fg-primary) 63%, transparent); user-select: none; }
7
- & td { color: var(--fg-primary); background: var(--bg-surface); }
1
+ .crisp-table {
2
+ display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
3
+ & .crisp-table-scroll { overflow-x: auto; }
4
+ & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
5
+ & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
6
+ & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
7
+ & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
8
8
  & th:last-child, & td:last-child { border-inline-end: none; }
9
9
  & tbody tr:last-child td { border-bottom: none; }
10
- & tfoot td { border-top: 1px solid var(--border-subtle); border-bottom: none; font-weight: var(--weight-medium); color: var(--fg-muted); }
11
- & caption { padding: var(--space-2) var(--space-2); text-align: start; font-size: var(--text-sm); color: var(--fg-muted); caption-side: bottom; }
10
+ & tfoot td { border-top: 1px solid var(--crisp-border-subtle); border-bottom: none; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
11
+ & caption { padding: var(--crisp-space-2) var(--crisp-space-2); text-align: start; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); caption-side: bottom; }
12
12
  & td[data-align="right"], & th[data-align="right"] { text-align: end; }
13
13
  & td[data-align="center"], & th[data-align="center"] { text-align: center; }
14
14
  }
15
- .table--interactive_true {
16
- & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); }
15
+ .crisp-table--interactive_true {
16
+ & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
17
17
  }
18
- .table--interactive_false {
18
+ .crisp-table--interactive_false {
19
19
 
20
20
  }
21
- .table--surface_card {
22
- border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden;
21
+ .crisp-table--surface_card {
22
+ border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-xl); overflow: hidden;
23
23
  }
24
- .table--surface_bleed {
24
+ .crisp-table--surface_bleed {
25
25
  border: none; border-radius: 0;
26
26
  }
27
27
 
28
28
  @media (prefers-reduced-motion: reduce) {
29
- .table, .table * {
29
+ .crisp-table, .crisp-table * {
30
30
  animation-duration: 0.01ms !important;
31
31
  animation-iteration-count: 1 !important;
32
32
  transition-duration: 0.01ms !important;
package/dist/table.layered.css ADDED
@@ -0,0 +1,36 @@
1
+ @layer crisp-components {
2
+ .crisp-table {
3
+ display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
4
+ & .crisp-table-scroll { overflow-x: auto; }
5
+ & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
6
+ & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; }
7
+ & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
8
+ & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
9
+ & th:last-child, & td:last-child { border-inline-end: none; }
10
+ & tbody tr:last-child td { border-bottom: none; }
11
+ & tfoot td { border-top: 1px solid var(--crisp-border-subtle); border-bottom: none; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
12
+ & caption { padding: var(--crisp-space-2) var(--crisp-space-2); text-align: start; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); caption-side: bottom; }
13
+ & td[data-align="right"], & th[data-align="right"] { text-align: end; }
14
+ & td[data-align="center"], & th[data-align="center"] { text-align: center; }
15
+ }
16
+ .crisp-table--interactive_true {
17
+ & tbody tr { transition: background-color .12s; } & tbody tr:hover td { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
18
+ }
19
+ .crisp-table--interactive_false {
20
+
21
+ }
22
+ .crisp-table--surface_card {
23
+ border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-xl); overflow: hidden;
24
+ }
25
+ .crisp-table--surface_bleed {
26
+ border: none; border-radius: 0;
27
+ }
28
+
29
+ @media (prefers-reduced-motion: reduce) {
30
+ .crisp-table, .crisp-table * {
31
+ animation-duration: 0.01ms !important;
32
+ animation-iteration-count: 1 !important;
33
+ transition-duration: 0.01ms !important;
34
+ }
35
+ }
36
+ }
package/dist/tabletoolbar.css CHANGED
@@ -1,76 +1,76 @@
1
- .tabletoolbar {
1
+ .crisp-tabletoolbar {
2
2
 
3
- display: contents; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
3
+ display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
4
4
  & * { box-sizing: border-box; }
5
- & .tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-3) var(--space-2); }
6
- & .tabletoolbar-search { display: flex; align-items: center; gap: var(--space-1-5); height: var(--size-row); padding: 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--fg-muted); }
7
- & .tabletoolbar-search svg { flex-shrink: 0; }
8
- & .tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); width: 180px; }
9
- & .tabletoolbar-search input::placeholder { color: var(--fg-muted); }
10
- & .tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s; }
11
- & .tabletoolbar-tool:hover { background: var(--bg-raised); }
12
- & .tabletoolbar-tool svg { flex-shrink: 0; color: var(--fg-muted); }
13
- & .tabletoolbar-tool--active { background: var(--bg-raised); }
14
- & .tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--fg-primary) 3%, transparent); color: var(--fg-muted); }
15
- & .tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
16
- & .tabletoolbar-toolgroup { position: relative; display: inline-flex; }
17
- & .tabletoolbar-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-popover); 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); display: flex; flex-direction: column; gap: var(--space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
18
- & .tabletoolbar-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
19
- & .tabletoolbar-menu-head { padding: var(--space-1) var(--space-2) var(--space-0-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
20
- & .tabletoolbar-sortpop { min-width: 460px; overflow: visible; padding: var(--space-1-5); gap: var(--space-1); }
21
- & .tabletoolbar-sort-empty { padding: var(--space-1) var(--space-1) var(--space-2); font-size: var(--text-md); color: var(--fg-muted); }
22
- & .tabletoolbar-sort-row { display: flex; align-items: center; gap: var(--space-1-5); }
23
- & .tabletoolbar-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * var(--space-1)); padding: 0; border: none; background: none; color: var(--fg-muted); cursor: grab; }
24
- & .tabletoolbar-sort-grip:active { cursor: grabbing; }
25
- & .tabletoolbar-sort-grip:hover { color: var(--fg-primary); }
26
- & .tabletoolbar-sort-optlabel { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
27
- & .tabletoolbar-sort-optlabel svg { flex-shrink: 0; color: var(--fg-muted); }
28
- & .tabletoolbar-sort-field { flex: 1; min-width: 0; }
29
- & .tabletoolbar-sort-dir { width: 136px; flex-shrink: 0; }
30
- & .tabletoolbar-sort-field .select-trigger, & .tabletoolbar-sort-dir .select-trigger { height: 28px; padding-right: var(--space-1); }
31
- & .tabletoolbar-sort-remove { 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: none; color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
32
- & .tabletoolbar-sort-remove:hover { background: var(--bg-raised); color: var(--fg-primary); }
33
- & .tabletoolbar-sort-addrow { display: flex; padding: var(--space-0-5) 0; }
34
- & .tabletoolbar-sort-add { 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-regular); color: var(--fg-primary); cursor: pointer; transition: background-color .12s; }
35
- & .tabletoolbar-sort-add:hover { background: var(--bg-raised); }
36
- & .tabletoolbar-sort-add svg { flex-shrink: 0; color: var(--fg-muted); }
37
- & .tabletoolbar-sort-foot { display: flex; padding: var(--space-1-5) var(--space-1) var(--space-0-5); }
38
- & .tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-lg); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); text-decoration: none; }
39
- & .tabletoolbar-sort-learn svg { flex-shrink: 0; }
40
- & .tabletoolbar-sort-learn:hover { color: var(--fg-primary); }
41
- & .tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; background: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: left; cursor: pointer; }
42
- & .tabletoolbar-menu-item:hover { background: var(--bg-raised); }
43
- & .tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
44
- & .tabletoolbar-menu-item:disabled:hover { background: none; }
45
- & .tabletoolbar-menu-item svg { flex-shrink: 0; color: var(--fg-muted); }
46
- & .tabletoolbar-menu-item[data-on] svg { color: var(--bg-brand-solid); }
47
- & .tabletoolbar-menu-item .tabletoolbar-menu-check { margin-left: auto; }
48
- & .tabletoolbar-menu-input { height: var(--size-row); margin: var(--space-0-5); padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; }
49
- & .tabletoolbar-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-0-5) 0; }
50
- & .tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--space-1)); transform-origin: bottom; }
51
- & .tabletoolbar-menu--right { left: auto; right: 0; }
52
- & .tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
53
- & .tabletoolbar-menu--hdr { min-width: 200px; }
54
- & .tabletoolbar-menu-item--danger { color: var(--bg-danger); }
55
- & .tabletoolbar-menu-item--danger svg { color: var(--bg-danger); }
56
- & .tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
57
- & .tabletoolbar-menu-check { margin-left: auto; color: var(--bg-brand-solid); }
58
- & .tabletoolbar-fchip { display: inline-flex; align-items: center; height: var(--size-row); padding-right: var(--space-1); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-default); background: var(--bg-surface); font-size: var(--text-md); color: var(--fg-primary); white-space: nowrap; }
59
- & .tabletoolbar-fchip-main { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 100%; margin: 0; padding: 0 var(--space-1) 0 var(--space-2); border: none; background: none; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); cursor: pointer; }
60
- & .tabletoolbar-fchip-field { font-weight: var(--weight-medium); }
61
- & .tabletoolbar-fchip-op { color: var(--fg-muted); }
62
- & .tabletoolbar-fchip-val { font-weight: var(--weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
63
- & .tabletoolbar-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); cursor: pointer; }
64
- & .tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); color: var(--fg-primary); }
65
- & .tabletoolbar-spacer { flex: 1; }
66
- & .tabletoolbar-count { font-size: var(--text-md); color: var(--fg-muted); }
67
- & .tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); padding: 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s; }
68
- & .tabletoolbar-new:hover { background: var(--bg-brand-solid-pressed); }
5
+ & .crisp-tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
6
+ & .crisp-tabletoolbar-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
7
+ & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
8
+ & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
9
+ & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
10
+ & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
11
+ & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
12
+ & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
13
+ & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-raised); }
14
+ & .crisp-tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
15
+ & .crisp-tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
16
+ & .crisp-tabletoolbar-toolgroup { position: relative; display: inline-flex; }
17
+ & .crisp-tabletoolbar-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-popover); 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); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
18
+ & .crisp-tabletoolbar-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
19
+ & .crisp-tabletoolbar-menu-head { padding: var(--crisp-space-1) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
20
+ & .crisp-tabletoolbar-sortpop { min-width: 460px; overflow: visible; padding: var(--crisp-space-1-5); gap: var(--crisp-space-1); }
21
+ & .crisp-tabletoolbar-sort-empty { padding: var(--crisp-space-1) var(--crisp-space-1) var(--crisp-space-2); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
22
+ & .crisp-tabletoolbar-sort-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); }
23
+ & .crisp-tabletoolbar-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * var(--crisp-space-1)); padding: 0; border: none; background: none; color: var(--crisp-fg-muted); cursor: grab; }
24
+ & .crisp-tabletoolbar-sort-grip:active { cursor: grabbing; }
25
+ & .crisp-tabletoolbar-sort-grip:hover { color: var(--crisp-fg-primary); }
26
+ & .crisp-tabletoolbar-sort-optlabel { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
27
+ & .crisp-tabletoolbar-sort-optlabel svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
28
+ & .crisp-tabletoolbar-sort-field { flex: 1; min-width: 0; }
29
+ & .crisp-tabletoolbar-sort-dir { width: 136px; flex-shrink: 0; }
30
+ & .crisp-tabletoolbar-sort-field .crisp-select-trigger, & .crisp-tabletoolbar-sort-dir .crisp-select-trigger { height: 28px; padding-right: var(--crisp-space-1); }
31
+ & .crisp-tabletoolbar-sort-remove { 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: none; color: var(--crisp-fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
32
+ & .crisp-tabletoolbar-sort-remove:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
33
+ & .crisp-tabletoolbar-sort-addrow { display: flex; padding: var(--crisp-space-0-5) 0; }
34
+ & .crisp-tabletoolbar-sort-add { 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-regular); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s; }
35
+ & .crisp-tabletoolbar-sort-add:hover { background: var(--crisp-bg-raised); }
36
+ & .crisp-tabletoolbar-sort-add svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
37
+ & .crisp-tabletoolbar-sort-foot { display: flex; padding: var(--crisp-space-1-5) var(--crisp-space-1) var(--crisp-space-0-5); }
38
+ & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
39
+ & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
40
+ & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
41
+ & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
42
+ & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
43
+ & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
44
+ & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
45
+ & .crisp-tabletoolbar-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
46
+ & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
47
+ & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
48
+ & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
49
+ & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
50
+ & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
51
+ & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
52
+ & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
53
+ & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
54
+ & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
55
+ & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
56
+ & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
57
+ & .crisp-tabletoolbar-menu-check { margin-left: auto; color: var(--crisp-bg-brand-solid); }
58
+ & .crisp-tabletoolbar-fchip { display: inline-flex; align-items: center; height: var(--crisp-size-row); padding-right: var(--crisp-space-1); border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-default); background: var(--crisp-bg-surface); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
59
+ & .crisp-tabletoolbar-fchip-main { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; background: none; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); cursor: pointer; }
60
+ & .crisp-tabletoolbar-fchip-field { font-weight: var(--crisp-weight-medium); }
61
+ & .crisp-tabletoolbar-fchip-op { color: var(--crisp-fg-muted); }
62
+ & .crisp-tabletoolbar-fchip-val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
63
+ & .crisp-tabletoolbar-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
64
+ & .crisp-tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
65
+ & .crisp-tabletoolbar-spacer { flex: 1; }
66
+ & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
67
+ & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
68
+ & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
69
69
 
70
70
  }
71
71
 
72
72
  @media (prefers-reduced-motion: reduce) {
73
- .tabletoolbar, .tabletoolbar * {
73
+ .crisp-tabletoolbar, .crisp-tabletoolbar * {
74
74
  animation-duration: 0.01ms !important;
75
75
  animation-iteration-count: 1 !important;
76
76
  transition-duration: 0.01ms !important;
package/dist/tabletoolbar.layered.css ADDED
@@ -0,0 +1,80 @@
1
+ @layer crisp-components {
2
+ .crisp-tabletoolbar {
3
+
4
+ display: contents; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
+ & * { box-sizing: border-box; }
6
+ & .crisp-tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: 0 var(--crisp-space-3) var(--crisp-space-2); }
7
+ & .crisp-tabletoolbar-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
8
+ & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
9
+ & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
10
+ & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
11
+ & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
12
+ & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
13
+ & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
14
+ & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-raised); }
15
+ & .crisp-tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); color: var(--crisp-fg-muted); }
16
+ & .crisp-tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
17
+ & .crisp-tabletoolbar-toolgroup { position: relative; display: inline-flex; }
18
+ & .crisp-tabletoolbar-menu { position: absolute; top: calc(100% + var(--crisp-space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-popover); 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); display: flex; flex-direction: column; gap: var(--crisp-space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
19
+ & .crisp-tabletoolbar-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
20
+ & .crisp-tabletoolbar-menu-head { padding: var(--crisp-space-1) var(--crisp-space-2) var(--crisp-space-0-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
21
+ & .crisp-tabletoolbar-sortpop { min-width: 460px; overflow: visible; padding: var(--crisp-space-1-5); gap: var(--crisp-space-1); }
22
+ & .crisp-tabletoolbar-sort-empty { padding: var(--crisp-space-1) var(--crisp-space-1) var(--crisp-space-2); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
23
+ & .crisp-tabletoolbar-sort-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); }
24
+ & .crisp-tabletoolbar-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * var(--crisp-space-1)); padding: 0; border: none; background: none; color: var(--crisp-fg-muted); cursor: grab; }
25
+ & .crisp-tabletoolbar-sort-grip:active { cursor: grabbing; }
26
+ & .crisp-tabletoolbar-sort-grip:hover { color: var(--crisp-fg-primary); }
27
+ & .crisp-tabletoolbar-sort-optlabel { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
28
+ & .crisp-tabletoolbar-sort-optlabel svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
29
+ & .crisp-tabletoolbar-sort-field { flex: 1; min-width: 0; }
30
+ & .crisp-tabletoolbar-sort-dir { width: 136px; flex-shrink: 0; }
31
+ & .crisp-tabletoolbar-sort-field .crisp-select-trigger, & .crisp-tabletoolbar-sort-dir .crisp-select-trigger { height: 28px; padding-right: var(--crisp-space-1); }
32
+ & .crisp-tabletoolbar-sort-remove { 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: none; color: var(--crisp-fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
33
+ & .crisp-tabletoolbar-sort-remove:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
34
+ & .crisp-tabletoolbar-sort-addrow { display: flex; padding: var(--crisp-space-0-5) 0; }
35
+ & .crisp-tabletoolbar-sort-add { 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-regular); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s; }
36
+ & .crisp-tabletoolbar-sort-add:hover { background: var(--crisp-bg-raised); }
37
+ & .crisp-tabletoolbar-sort-add svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
38
+ & .crisp-tabletoolbar-sort-foot { display: flex; padding: var(--crisp-space-1-5) var(--crisp-space-1) var(--crisp-space-0-5); }
39
+ & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
40
+ & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
41
+ & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
42
+ & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
43
+ & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
44
+ & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
45
+ & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
46
+ & .crisp-tabletoolbar-menu-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
47
+ & .crisp-tabletoolbar-menu-item[data-on] svg { color: var(--crisp-bg-brand-solid); }
48
+ & .crisp-tabletoolbar-menu-item .crisp-tabletoolbar-menu-check { margin-left: auto; }
49
+ & .crisp-tabletoolbar-menu-input { height: var(--crisp-size-row); margin: var(--crisp-space-0-5); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); background: var(--crisp-bg-surface); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; }
50
+ & .crisp-tabletoolbar-menu-sep { height: 1px; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
51
+ & .crisp-tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--crisp-space-1)); transform-origin: bottom; }
52
+ & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
53
+ & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
54
+ & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
55
+ & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
56
+ & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
57
+ & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
58
+ & .crisp-tabletoolbar-menu-check { margin-left: auto; color: var(--crisp-bg-brand-solid); }
59
+ & .crisp-tabletoolbar-fchip { display: inline-flex; align-items: center; height: var(--crisp-size-row); padding-right: var(--crisp-space-1); border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-default); background: var(--crisp-bg-surface); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
60
+ & .crisp-tabletoolbar-fchip-main { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; background: none; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); cursor: pointer; }
61
+ & .crisp-tabletoolbar-fchip-field { font-weight: var(--crisp-weight-medium); }
62
+ & .crisp-tabletoolbar-fchip-op { color: var(--crisp-fg-muted); }
63
+ & .crisp-tabletoolbar-fchip-val { font-weight: var(--crisp-weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
64
+ & .crisp-tabletoolbar-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer; }
65
+ & .crisp-tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
66
+ & .crisp-tabletoolbar-spacer { flex: 1; }
67
+ & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
68
+ & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
69
+ & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
70
+
71
+ }
72
+
73
+ @media (prefers-reduced-motion: reduce) {
74
+ .crisp-tabletoolbar, .crisp-tabletoolbar * {
75
+ animation-duration: 0.01ms !important;
76
+ animation-iteration-count: 1 !important;
77
+ transition-duration: 0.01ms !important;
78
+ }
79
+ }
80
+ }
package/dist/tabs.css CHANGED
@@ -1,25 +1,25 @@
1
- .tabs {
1
+ .crisp-tabs {
2
2
 
3
- display: flex; flex-direction: column; min-height: 0; font-family: var(--font-sans);
3
+ display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans);
4
4
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
5
 
6
- & .tabs-list { position: relative; display: flex; align-items: center; gap: var(--space-1); height: var(--size-row); flex-shrink: 0; }
7
- & .tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--space-1); }
8
- & .tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; margin: 0; padding: 0 var(--space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.14px; color: var(--fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
9
- & .tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
10
- & .tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
11
- & .tabs-tab[data-selected] { color: var(--fg-primary); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); }
12
- & .tabs-tab:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
13
- & .tabs-tab-badge { 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); }
14
- & .tabs-tab[data-selected] .tabs-tab-badge { color: var(--fg-primary); }
15
- & .tabs-indicator { position: absolute; bottom: calc(-1 * var(--space-2)); left: 0; height: 1px; background: var(--fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
16
- & .tabs-panel { flex: 1; min-height: 0; }
17
- & .tabs-panel:focus-visible { outline: none; }
6
+ & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
7
+ & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
8
+ & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
9
+ & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
10
+ & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
11
+ & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
12
+ & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
13
+ & .crisp-tabs-tab-badge { 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); }
14
+ & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
15
+ & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
16
+ & .crisp-tabs-panel { flex: 1; min-height: 0; }
17
+ & .crisp-tabs-panel:focus-visible { outline: none; }
18
18
 
19
19
  }
20
20
 
21
21
  @media (prefers-reduced-motion: reduce) {
22
- .tabs, .tabs * {
22
+ .crisp-tabs, .crisp-tabs * {
23
23
  animation-duration: 0.01ms !important;
24
24
  animation-iteration-count: 1 !important;
25
25
  transition-duration: 0.01ms !important;
package/dist/tabs.layered.css ADDED
@@ -0,0 +1,29 @@
1
+ @layer crisp-components {
2
+ .crisp-tabs {
3
+
4
+ display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans);
5
+ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
6
+
7
+ & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); flex-shrink: 0; }
8
+ & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
9
+ & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
10
+ & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
11
+ & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
12
+ & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
13
+ & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
14
+ & .crisp-tabs-tab-badge { 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); }
15
+ & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
16
+ & .crisp-tabs-indicator { position: absolute; bottom: calc(-1 * var(--crisp-space-2)); left: 0; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
17
+ & .crisp-tabs-panel { flex: 1; min-height: 0; }
18
+ & .crisp-tabs-panel:focus-visible { outline: none; }
19
+
20
+ }
21
+
22
+ @media (prefers-reduced-motion: reduce) {
23
+ .crisp-tabs, .crisp-tabs * {
24
+ animation-duration: 0.01ms !important;
25
+ animation-iteration-count: 1 !important;
26
+ transition-duration: 0.01ms !important;
27
+ }
28
+ }
29
+ }
package/dist/tasklist.css CHANGED
@@ -1,30 +1,30 @@
1
- .tasklist {
2
- display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--font-sans);
1
+ .crisp-tasklist {
2
+ display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
3
3
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
4
4
 
5
- & .tasklist-group { display: flex; align-items: center; gap: var(--space-1-5); height: 36px; padding: 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); }
6
- & .tasklist-group-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); color: var(--fg-muted); }
5
+ & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
6
+ & .crisp-tasklist-group-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); color: var(--crisp-fg-muted); }
7
7
 
8
- & .tasklist-row { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; padding: 0 var(--space-2); border-top: 1px solid var(--border-subtle); }
9
- & .tasklist-row:first-child { border-top: none; }
8
+ & .crisp-tasklist-row { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; padding: 0 var(--crisp-space-2); border-top: 1px solid var(--crisp-border-subtle); }
9
+ & .crisp-tasklist-row:first-child { border-top: none; }
10
10
 
11
- & .tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
12
- & .tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 30%, transparent); }
13
- & .tasklist-check:checked { background: var(--bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
14
- & .tasklist-check:focus-visible { outline: 2px solid var(--bg-brand-solid); outline-offset: 1px; }
11
+ & .crisp-tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
12
+ & .crisp-tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
13
+ & .crisp-tasklist-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
14
+ & .crisp-tasklist-check:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
15
15
 
16
- & .tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); }
17
- & .tasklist-row[data-done] .tasklist-title { color: var(--fg-muted); text-decoration: line-through; }
16
+ & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
17
+ & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: var(--crisp-fg-muted); text-decoration: line-through; }
18
18
 
19
- & .tasklist-meta { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
20
- & .tasklist-due { font-size: var(--text-lg); color: var(--fg-muted); white-space: nowrap; }
21
- & .tasklist-due[data-overdue] { color: var(--bg-danger); }
19
+ & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: var(--crisp-space-3); flex-shrink: 0; }
20
+ & .crisp-tasklist-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
21
+ & .crisp-tasklist-due[data-overdue] { color: var(--crisp-bg-danger); }
22
22
 
23
- & .tasklist-empty { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
23
+ & .crisp-tasklist-empty { padding: var(--crisp-space-4) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
24
24
  }
25
25
 
26
26
  @media (prefers-reduced-motion: reduce) {
27
- .tasklist, .tasklist * {
27
+ .crisp-tasklist, .crisp-tasklist * {
28
28
  animation-duration: 0.01ms !important;
29
29
  animation-iteration-count: 1 !important;
30
30
  transition-duration: 0.01ms !important;
package/dist/tasklist.layered.css ADDED
@@ -0,0 +1,34 @@
1
+ @layer crisp-components {
2
+ .crisp-tasklist {
3
+ display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
4
+ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
+
6
+ & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
7
+ & .crisp-tasklist-group-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); color: var(--crisp-fg-muted); }
8
+
9
+ & .crisp-tasklist-row { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; padding: 0 var(--crisp-space-2); border-top: 1px solid var(--crisp-border-subtle); }
10
+ & .crisp-tasklist-row:first-child { border-top: none; }
11
+
12
+ & .crisp-tasklist-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
13
+ & .crisp-tasklist-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
14
+ & .crisp-tasklist-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
15
+ & .crisp-tasklist-check:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
16
+
17
+ & .crisp-tasklist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
18
+ & .crisp-tasklist-row[data-done] .crisp-tasklist-title { color: var(--crisp-fg-muted); text-decoration: line-through; }
19
+
20
+ & .crisp-tasklist-meta { display: inline-flex; align-items: center; gap: var(--crisp-space-3); flex-shrink: 0; }
21
+ & .crisp-tasklist-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
22
+ & .crisp-tasklist-due[data-overdue] { color: var(--crisp-bg-danger); }
23
+
24
+ & .crisp-tasklist-empty { padding: var(--crisp-space-4) var(--crisp-space-2); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
25
+ }
26
+
27
+ @media (prefers-reduced-motion: reduce) {
28
+ .crisp-tasklist, .crisp-tasklist * {
29
+ animation-duration: 0.01ms !important;
30
+ animation-iteration-count: 1 !important;
31
+ transition-duration: 0.01ms !important;
32
+ }
33
+ }
34
+ }