@crisp-ui-kit/crisp 0.33.0 → 0.33.2

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 (110) hide show
  1. package/README.md +33 -1
  2. package/dist/appshell.css +1 -4
  3. package/dist/appshell.layered.css +1 -4
  4. package/dist/authshell.css +4 -19
  5. package/dist/authshell.layered.css +4 -19
  6. package/dist/avatar.css +2 -1
  7. package/dist/avatar.layered.css +2 -1
  8. package/dist/board.css +1 -4
  9. package/dist/board.layered.css +1 -4
  10. package/dist/breadcrumb.css +0 -1
  11. package/dist/breadcrumb.layered.css +0 -1
  12. package/dist/button.css +14 -6
  13. package/dist/button.layered.css +14 -6
  14. package/dist/card.css +2 -1
  15. package/dist/card.layered.css +2 -1
  16. package/dist/checkbox.css +6 -9
  17. package/dist/checkbox.layered.css +6 -9
  18. package/dist/cjs/components/avatar/avatar.recipe.js +38 -19
  19. package/dist/cjs/components/button/button.recipe.js +109 -18
  20. package/dist/cjs/components/datatable/datatable.js +14 -2
  21. package/dist/cjs/components/datatable/datatable.recipe.js +5 -0
  22. package/dist/cjs/components/switch/switch.recipe.js +48 -18
  23. package/dist/columncalc.css +2 -6
  24. package/dist/columncalc.layered.css +2 -6
  25. package/dist/command.css +9 -11
  26. package/dist/command.layered.css +9 -11
  27. package/dist/datatable.css +11 -19
  28. package/dist/datatable.layered.css +11 -19
  29. package/dist/datepicker.css +15 -80
  30. package/dist/datepicker.layered.css +15 -80
  31. package/dist/datepickerfield.css +3 -18
  32. package/dist/datepickerfield.layered.css +3 -18
  33. package/dist/donutchart.css +1 -2
  34. package/dist/donutchart.layered.css +1 -2
  35. package/dist/entitycard.css +1 -7
  36. package/dist/entitycard.layered.css +1 -7
  37. package/dist/esm/components/avatar/avatar.recipe.js +38 -19
  38. package/dist/esm/components/button/button.recipe.js +109 -18
  39. package/dist/esm/components/datatable/datatable.js +14 -2
  40. package/dist/esm/components/datatable/datatable.recipe.js +5 -0
  41. package/dist/esm/components/switch/switch.recipe.js +48 -18
  42. package/dist/fileupload.css +10 -60
  43. package/dist/fileupload.layered.css +10 -60
  44. package/dist/inbox.css +1 -7
  45. package/dist/inbox.layered.css +1 -7
  46. package/dist/input.css +9 -20
  47. package/dist/input.layered.css +9 -20
  48. package/dist/listpage.css +2 -12
  49. package/dist/listpage.layered.css +2 -12
  50. package/dist/menu.css +3 -19
  51. package/dist/menu.layered.css +3 -19
  52. package/dist/multiselect.css +4 -25
  53. package/dist/multiselect.layered.css +4 -25
  54. package/dist/navitem.css +5 -13
  55. package/dist/navitem.layered.css +5 -13
  56. package/dist/onboarding.css +1 -8
  57. package/dist/onboarding.layered.css +1 -8
  58. package/dist/quantitypicker.css +15 -50
  59. package/dist/quantitypicker.layered.css +15 -50
  60. package/dist/radiogroup.css +1 -6
  61. package/dist/radiogroup.layered.css +1 -6
  62. package/dist/recordpage.css +2 -10
  63. package/dist/recordpage.layered.css +2 -10
  64. package/dist/recordpanel.css +1 -13
  65. package/dist/recordpanel.layered.css +1 -13
  66. package/dist/recordstable.css +2 -11
  67. package/dist/recordstable.layered.css +2 -11
  68. package/dist/resizablepanel.css +4 -15
  69. package/dist/resizablepanel.layered.css +4 -15
  70. package/dist/richtext.css +1 -5
  71. package/dist/richtext.layered.css +1 -5
  72. package/dist/select.css +7 -30
  73. package/dist/select.layered.css +7 -30
  74. package/dist/settingsshell.css +2 -7
  75. package/dist/settingsshell.layered.css +2 -7
  76. package/dist/sidebar.css +23 -28
  77. package/dist/sidebar.layered.css +23 -28
  78. package/dist/slider.css +1 -8
  79. package/dist/slider.layered.css +1 -8
  80. package/dist/statcard.css +1 -2
  81. package/dist/statcard.layered.css +1 -2
  82. package/dist/styles.css +196 -652
  83. package/dist/styles.layered.css +196 -652
  84. package/dist/switch.css +1 -5
  85. package/dist/switch.layered.css +1 -5
  86. package/dist/table.css +2 -1
  87. package/dist/table.layered.css +2 -1
  88. package/dist/tabletoolbar.css +1 -3
  89. package/dist/tabletoolbar.layered.css +1 -3
  90. package/dist/tabs.css +1 -5
  91. package/dist/tabs.layered.css +1 -5
  92. package/dist/tasklist.css +1 -8
  93. package/dist/tasklist.layered.css +1 -8
  94. package/dist/textarea.css +2 -13
  95. package/dist/textarea.layered.css +2 -13
  96. package/dist/tooltip.css +2 -1
  97. package/dist/tooltip.layered.css +2 -1
  98. package/dist/trialbanner.css +2 -11
  99. package/dist/trialbanner.layered.css +2 -11
  100. package/dist/types/components/avatar/avatar.d.ts +30 -30
  101. package/dist/types/components/avatar/avatar.recipe.d.ts +136 -49
  102. package/dist/types/components/button/button.d.ts +30 -30
  103. package/dist/types/components/button/button.recipe.d.ts +193 -45
  104. package/dist/types/components/datatable/datatable.d.ts +10 -1
  105. package/dist/types/components/switch/switch.recipe.d.ts +57 -3
  106. package/dist/viewtoggle.css +3 -9
  107. package/dist/viewtoggle.layered.css +3 -9
  108. package/dist/wheelpicker.css +14 -59
  109. package/dist/wheelpicker.layered.css +14 -59
  110. package/package.json +1 -1
package/dist/sidebar.css CHANGED
@@ -1,32 +1,27 @@
1
1
  .crisp-sidebar {
2
- box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar)
3
- ; border-inline-end: 1px solid var(--crisp-border-subtle)
4
- ; padding: var(--crisp-space-2)
5
- ; font-family: var(--crisp-font-sans)
6
- ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
7
- & .crisp-sidebar-section[data-collapsed] { display: none; }
8
- & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
9
- & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
10
- & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
11
- & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
12
- & .crisp-sidebar-ws { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-space-2); border-radius: var(--crisp-radius-lg); cursor: pointer; transition: background-color 0.16s; }
13
- & .crisp-sidebar-ws:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
14
- & .crisp-sidebar-ws-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
15
- & .crisp-sidebar-ws-collapse { margin-inline-start: auto; }
16
- & .crisp-sidebar-searchrow { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-2); }
17
- & .crisp-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
18
- & .crisp-sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) var(--crisp-space-2); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
19
- & .crisp-sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; cursor: pointer; transition: background-color 0.14s; }
20
- & .crisp-sidebar-search:hover { background: var(--crisp-bg-raised); }
21
- & .crisp-sidebar-search-label { flex: 1; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
22
- & .crisp-sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); font-size: var(--crisp-text-xs); }
23
- & .crisp-sidebar-pill { border-radius: var(--crisp-radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--crisp-space-4); }
24
- & .crisp-sidebar-divider { height: 0; border: none; border-top: 1px solid var(--crisp-border-subtle); margin: var(--crisp-space-2) calc(-1 * var(--crisp-space-2)) 0; }
25
- & .crisp-sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--crisp-size-row); border-radius: var(--crisp-radius-md); border: 1px dashed var(--crisp-border-default); background: transparent; color: var(--crisp-fg-muted); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
26
- & .crisp-sidebar-newlist:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
27
-
28
- [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
29
-
2
+ box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
3
+ & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
4
+ & .crisp-sidebar-section[data-collapsed] { display: none; }
5
+ & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
6
+ & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
7
+ & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
8
+ & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
9
+ & .crisp-sidebar-ws { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-space-2); border-radius: var(--crisp-radius-lg); cursor: pointer; transition: background-color 0.16s; }
10
+ & .crisp-sidebar-ws:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
11
+ & .crisp-sidebar-ws-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
12
+ & .crisp-sidebar-ws-collapse { margin-inline-start: auto; }
13
+ & .crisp-sidebar-searchrow { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-2); }
14
+ & .crisp-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
15
+ & .crisp-sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) var(--crisp-space-2); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
16
+ & .crisp-sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; cursor: pointer; transition: background-color 0.14s; }
17
+ & .crisp-sidebar-search:hover { background: var(--crisp-bg-raised); }
18
+ & .crisp-sidebar-search-label { flex: 1; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
19
+ & .crisp-sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); font-size: var(--crisp-text-xs); }
20
+ & .crisp-sidebar-pill { border-radius: var(--crisp-radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--crisp-space-4); }
21
+ & .crisp-sidebar-divider { height: 0; border: none; border-top: 1px solid var(--crisp-border-subtle); margin: var(--crisp-space-2) calc(-1 * var(--crisp-space-2)) 0; }
22
+ & .crisp-sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--crisp-size-row); border-radius: var(--crisp-radius-md); border: 1px dashed var(--crisp-border-default); background: transparent; color: var(--crisp-fg-muted); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
23
+ & .crisp-sidebar-newlist:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
24
+ [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
30
25
  }
31
26
 
32
27
  @media (prefers-reduced-motion: reduce) {
@@ -1,33 +1,28 @@
1
1
  @layer crisp-components {
2
2
  .crisp-sidebar {
3
- box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar)
4
- ; border-inline-end: 1px solid var(--crisp-border-subtle)
5
- ; padding: var(--crisp-space-2)
6
- ; font-family: var(--crisp-font-sans)
7
- ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
8
- & .crisp-sidebar-section[data-collapsed] { display: none; }
9
- & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
10
- & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
11
- & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
12
- & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
13
- & .crisp-sidebar-ws { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-space-2); border-radius: var(--crisp-radius-lg); cursor: pointer; transition: background-color 0.16s; }
14
- & .crisp-sidebar-ws:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
15
- & .crisp-sidebar-ws-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
16
- & .crisp-sidebar-ws-collapse { margin-inline-start: auto; }
17
- & .crisp-sidebar-searchrow { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-2); }
18
- & .crisp-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
19
- & .crisp-sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) var(--crisp-space-2); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
20
- & .crisp-sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; cursor: pointer; transition: background-color 0.14s; }
21
- & .crisp-sidebar-search:hover { background: var(--crisp-bg-raised); }
22
- & .crisp-sidebar-search-label { flex: 1; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
23
- & .crisp-sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); font-size: var(--crisp-text-xs); }
24
- & .crisp-sidebar-pill { border-radius: var(--crisp-radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--crisp-space-4); }
25
- & .crisp-sidebar-divider { height: 0; border: none; border-top: 1px solid var(--crisp-border-subtle); margin: var(--crisp-space-2) calc(-1 * var(--crisp-space-2)) 0; }
26
- & .crisp-sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--crisp-size-row); border-radius: var(--crisp-radius-md); border: 1px dashed var(--crisp-border-default); background: transparent; color: var(--crisp-fg-muted); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
27
- & .crisp-sidebar-newlist:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
28
-
29
- [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
30
-
3
+ box-sizing: border-box; display: flex; flex-direction: column; width: 275px; height: 100%; background: var(--crisp-bg-sidebar) ; border-inline-end: 1px solid var(--crisp-border-subtle) ; padding: var(--crisp-space-2) ; font-family: var(--crisp-font-sans) ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto;
4
+ & .crisp-sidebar-section { display: flex; flex-direction: column; gap: var(--crisp-space-px); margin-top: var(--crisp-space-2); }
5
+ & .crisp-sidebar-section[data-collapsed] { display: none; }
6
+ & .crisp-sidebar-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); }
7
+ & .crisp-sidebar-section-header { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; margin: 0; border: none; background: none; padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
8
+ & .crisp-sidebar-section-header svg { flex-shrink: 0; transition: transform .15s ease; }
9
+ & .crisp-sidebar-section-header[data-collapsed] svg { transform: rotate(-90deg); }
10
+ & .crisp-sidebar-ws { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); padding: 0 var(--crisp-space-2); border-radius: var(--crisp-radius-lg); cursor: pointer; transition: background-color 0.16s; }
11
+ & .crisp-sidebar-ws:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); }
12
+ & .crisp-sidebar-ws-name { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
13
+ & .crisp-sidebar-ws-collapse { margin-inline-start: auto; }
14
+ & .crisp-sidebar-searchrow { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-2); }
15
+ & .crisp-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
16
+ & .crisp-sidebar-trial { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) var(--crisp-space-2); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
17
+ & .crisp-sidebar-search { box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); text-align: start; cursor: pointer; transition: background-color 0.14s; }
18
+ & .crisp-sidebar-search:hover { background: var(--crisp-bg-raised); }
19
+ & .crisp-sidebar-search-label { flex: 1; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
20
+ & .crisp-sidebar-search-kbd { margin-inline-start: auto; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); font-size: var(--crisp-text-xs); }
21
+ & .crisp-sidebar-pill { border-radius: var(--crisp-radius-full); align-self: center; width: auto; height: 32px; padding-inline: var(--crisp-space-4); }
22
+ & .crisp-sidebar-divider { height: 0; border: none; border-top: 1px solid var(--crisp-border-subtle); margin: var(--crisp-space-2) calc(-1 * var(--crisp-space-2)) 0; }
23
+ & .crisp-sidebar-newlist { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--crisp-size-row); border-radius: var(--crisp-radius-md); border: 1px dashed var(--crisp-border-default); background: transparent; color: var(--crisp-fg-muted); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
24
+ & .crisp-sidebar-newlist:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
25
+ [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
31
26
  }
32
27
 
33
28
  @media (prefers-reduced-motion: reduce) {
package/dist/slider.css CHANGED
@@ -1,11 +1,5 @@
1
1
  .crisp-slider {
2
-
3
- display: flex; flex-direction: column; align-items: stretch;
4
- width: 100%; min-width: 0; gap: var(--crisp-space-0-5);
5
- font-family: var(--crisp-font-sans); user-select: none; touch-action: none;
6
-
7
- /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
8
- thumb's name — read, never drawn */
2
+ display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
9
3
  & .crisp-slider-thumblabel {
10
4
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
11
5
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
@@ -44,7 +38,6 @@
44
38
  &[data-disabled] { cursor: not-allowed; }
45
39
  &[data-disabled] .crisp-slider-range { background: var(--crisp-fg-disabled); }
46
40
  &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }
47
-
48
41
  }
49
42
 
50
43
  @media (prefers-reduced-motion: reduce) {
@@ -1,12 +1,6 @@
1
1
  @layer crisp-components {
2
2
  .crisp-slider {
3
-
4
- display: flex; flex-direction: column; align-items: stretch;
5
- width: 100%; min-width: 0; gap: var(--crisp-space-0-5);
6
- font-family: var(--crisp-font-sans); user-select: none; touch-action: none;
7
-
8
- /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
9
- thumb's name — read, never drawn */
3
+ display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
10
4
  & .crisp-slider-thumblabel {
11
5
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
12
6
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
@@ -45,7 +39,6 @@
45
39
  &[data-disabled] { cursor: not-allowed; }
46
40
  &[data-disabled] .crisp-slider-range { background: var(--crisp-fg-disabled); }
47
41
  &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }
48
-
49
42
  }
50
43
 
51
44
  @media (prefers-reduced-motion: reduce) {
package/dist/statcard.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .crisp-statcard {
2
- display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
3
- -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
2
+ display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
4
3
  & .crisp-statcard-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
5
4
  & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
6
5
  & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }
@@ -1,7 +1,6 @@
1
1
  @layer crisp-components {
2
2
  .crisp-statcard {
3
- display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
4
- -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
3
+ display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
5
4
  & .crisp-statcard-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
6
5
  & .crisp-statcard-label svg { color: var(--crisp-fg-muted); }
7
6
  & .crisp-statcard-value { font-size: 28px; line-height: 32px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); }