ropav 0.0.10 → 0.0.11

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 (227) hide show
  1. package/README.md +6 -0
  2. package/dist/accordion.css +115 -111
  3. package/dist/accordion.js +60 -16
  4. package/dist/alert.css +110 -108
  5. package/dist/alert.js +48 -26
  6. package/dist/aspect-ratio.css +17 -15
  7. package/dist/aspect-ratio.js +20 -6
  8. package/dist/avatar.css +98 -96
  9. package/dist/avatar.js +27 -16
  10. package/dist/badge.css +95 -93
  11. package/dist/badge.js +29 -16
  12. package/dist/base.css +672 -671
  13. package/dist/button-group.css +39 -37
  14. package/dist/button-group.js +23 -12
  15. package/dist/button-link.css +160 -158
  16. package/dist/button-link.js +43 -24
  17. package/dist/button.css +160 -158
  18. package/dist/button.js +37 -19
  19. package/dist/card.css +109 -107
  20. package/dist/card.js +42 -17
  21. package/dist/checkbox.css +139 -137
  22. package/dist/checkbox.js +79 -28
  23. package/dist/collapse.css +29 -27
  24. package/dist/collapse.js +44 -10
  25. package/dist/color-input.css +137 -107
  26. package/dist/color-input.js +86 -17
  27. package/dist/color-picker.css +309 -303
  28. package/dist/color-picker.js +147 -54
  29. package/dist/color-picker2.js +9 -1
  30. package/dist/color-swatch.css +48 -46
  31. package/dist/color-swatch.js +15 -11
  32. package/dist/color-swatch2.js +4 -0
  33. package/dist/components/accordion/accordion-item.d.ts +13 -1
  34. package/dist/components/accordion/index.d.ts +2 -1
  35. package/dist/components/accordion/index.js +2 -2
  36. package/dist/components/accordion/types.d.ts +9 -4
  37. package/dist/components/alert/alert.d.ts +2 -2
  38. package/dist/components/alert/index.d.ts +2 -2
  39. package/dist/components/alert/index.js +2 -2
  40. package/dist/components/alert/types.d.ts +4 -1
  41. package/dist/components/aspect-ratio/index.d.ts +2 -1
  42. package/dist/components/aspect-ratio/index.js +2 -2
  43. package/dist/components/aspect-ratio/types.d.ts +4 -1
  44. package/dist/components/avatar/index.d.ts +2 -2
  45. package/dist/components/avatar/index.js +2 -2
  46. package/dist/components/avatar/types.d.ts +4 -1
  47. package/dist/components/badge/index.d.ts +2 -2
  48. package/dist/components/badge/index.js +2 -2
  49. package/dist/components/badge/types.d.ts +4 -1
  50. package/dist/components/button/index.d.ts +2 -1
  51. package/dist/components/button/index.js +2 -2
  52. package/dist/components/button/types.d.ts +4 -1
  53. package/dist/components/button-group/index.d.ts +2 -1
  54. package/dist/components/button-group/index.js +2 -2
  55. package/dist/components/button-group/types.d.ts +4 -1
  56. package/dist/components/button-link/index.d.ts +2 -1
  57. package/dist/components/button-link/index.js +2 -2
  58. package/dist/components/button-link/types.d.ts +4 -1
  59. package/dist/components/card/index.d.ts +2 -1
  60. package/dist/components/card/index.js +2 -2
  61. package/dist/components/card/types.d.ts +5 -1
  62. package/dist/components/checkbox/checkbox.d.ts +4 -1
  63. package/dist/components/checkbox/index.d.ts +2 -1
  64. package/dist/components/checkbox/index.js +2 -2
  65. package/dist/components/checkbox/types.d.ts +6 -1
  66. package/dist/components/checkbox/useCheckbox.d.ts +2 -0
  67. package/dist/components/collapse/collapse.d.ts +2 -2
  68. package/dist/components/collapse/index.d.ts +2 -1
  69. package/dist/components/collapse/index.js +2 -2
  70. package/dist/components/collapse/types.d.ts +9 -2
  71. package/dist/components/color-input/index.d.ts +2 -1
  72. package/dist/components/color-input/index.js +2 -2
  73. package/dist/components/color-input/types.d.ts +4 -1
  74. package/dist/components/color-picker/index.d.ts +2 -2
  75. package/dist/components/color-picker/index.js +2 -2
  76. package/dist/components/color-picker/types.d.ts +13 -1
  77. package/dist/components/color-swatch/index.d.ts +2 -1
  78. package/dist/components/color-swatch/index.js +2 -1
  79. package/dist/components/color-swatch/types.d.ts +4 -1
  80. package/dist/components/dropdown-menu/dropdown-menu-primitives.d.ts +724 -0
  81. package/dist/components/dropdown-menu/dropdown-menu.d.ts +3 -3
  82. package/dist/components/dropdown-menu/index.d.ts +53 -1
  83. package/dist/components/dropdown-menu/index.js +2 -2
  84. package/dist/components/dropdown-menu/types.d.ts +142 -6
  85. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +11 -3
  86. package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +5 -3
  87. package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +2 -1
  88. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +4 -4
  89. package/dist/components/dropdown-menu/useDropdownMenuPortalPosition.d.ts +19 -0
  90. package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +14 -2
  91. package/dist/components/field/index.d.ts +2 -1
  92. package/dist/components/field/index.js +2 -2
  93. package/dist/components/field/types.d.ts +4 -1
  94. package/dist/components/floating/index.d.ts +1 -0
  95. package/dist/components/floating/index.js +0 -0
  96. package/dist/components/floating/types.d.ts +31 -0
  97. package/dist/components/floating/useFloatingPosition.d.ts +38 -0
  98. package/dist/components/focus-trap/focus-trap.d.ts +31 -0
  99. package/dist/components/focus-trap/index.d.ts +4 -0
  100. package/dist/components/focus-trap/index.js +3 -0
  101. package/dist/components/focus-trap/types.d.ts +41 -0
  102. package/dist/components/focus-trap/useFocusTrap.d.ts +2 -0
  103. package/dist/components/icon-button/index.d.ts +2 -1
  104. package/dist/components/icon-button/index.js +2 -1
  105. package/dist/components/icon-button/types.d.ts +4 -1
  106. package/dist/components/input/index.d.ts +2 -1
  107. package/dist/components/input/index.js +2 -1
  108. package/dist/components/input/types.d.ts +4 -1
  109. package/dist/components/modal/index.d.ts +2 -1
  110. package/dist/components/modal/index.js +2 -2
  111. package/dist/components/modal/types.d.ts +8 -1
  112. package/dist/components/number-input/index.d.ts +2 -1
  113. package/dist/components/number-input/index.js +2 -2
  114. package/dist/components/number-input/types.d.ts +4 -1
  115. package/dist/components/overlay/index.d.ts +2 -1
  116. package/dist/components/overlay/index.js +2 -1
  117. package/dist/components/overlay/types.d.ts +4 -1
  118. package/dist/components/popover/index.d.ts +2 -2
  119. package/dist/components/popover/index.js +2 -2
  120. package/dist/components/popover/popover.d.ts +2 -2
  121. package/dist/components/popover/types.d.ts +20 -11
  122. package/dist/components/popover/usePopover.d.ts +9 -1
  123. package/dist/components/progress/index.d.ts +2 -2
  124. package/dist/components/progress/index.js +2 -2
  125. package/dist/components/progress/types.d.ts +4 -1
  126. package/dist/components/radio/index.d.ts +2 -1
  127. package/dist/components/radio/index.js +2 -2
  128. package/dist/components/radio/radio.d.ts +8 -3
  129. package/dist/components/radio/types.d.ts +20 -3
  130. package/dist/components/radio/useRadio.d.ts +9 -4
  131. package/dist/components/select/index.d.ts +2 -1
  132. package/dist/components/select/index.js +2 -2
  133. package/dist/components/select/types.d.ts +4 -1
  134. package/dist/components/select/useSelect.d.ts +2 -1
  135. package/dist/components/slider/index.d.ts +2 -2
  136. package/dist/components/slider/index.js +2 -2
  137. package/dist/components/slider/range-slider-tooltip.d.ts +3 -0
  138. package/dist/components/slider/range-slider.d.ts +4 -1
  139. package/dist/components/slider/slider.d.ts +4 -1
  140. package/dist/components/slider/sliderCore.d.ts +4 -4
  141. package/dist/components/slider/types.d.ts +12 -2
  142. package/dist/components/slider/useRangeSlider.d.ts +1 -1
  143. package/dist/components/slider/useSlider.d.ts +1 -1
  144. package/dist/components/switch/index.d.ts +2 -1
  145. package/dist/components/switch/index.js +2 -2
  146. package/dist/components/switch/switch.d.ts +4 -1
  147. package/dist/components/switch/types.d.ts +6 -1
  148. package/dist/components/switch/useSwitch.d.ts +2 -0
  149. package/dist/components/tabs/index.d.ts +2 -1
  150. package/dist/components/tabs/index.js +2 -2
  151. package/dist/components/tabs/types.d.ts +13 -4
  152. package/dist/components/teleport-provider/index.d.ts +2 -0
  153. package/dist/components/teleport-provider/index.js +2 -0
  154. package/dist/components/teleport-provider/teleport-provider.d.ts +21 -0
  155. package/dist/components/teleport-provider/types.d.ts +4 -0
  156. package/dist/components/teleport-provider/useTeleportTarget.d.ts +5 -0
  157. package/dist/components/textarea/index.d.ts +2 -1
  158. package/dist/components/textarea/index.js +2 -2
  159. package/dist/components/textarea/textarea.d.ts +4 -1
  160. package/dist/components/textarea/types.d.ts +6 -1
  161. package/dist/components/textarea/useTextarea.d.ts +1 -0
  162. package/dist/components/toast/index.d.ts +2 -2
  163. package/dist/components/toast/index.js +2 -2
  164. package/dist/components/toast/toast.d.ts +2 -2
  165. package/dist/components/toast/types.d.ts +10 -6
  166. package/dist/components/tooltip/index.d.ts +2 -1
  167. package/dist/components/tooltip/index.js +2 -1
  168. package/dist/components/tooltip/tooltip.d.ts +2 -2
  169. package/dist/components/tooltip/types.d.ts +13 -12
  170. package/dist/components/tooltip/useTooltip.d.ts +13 -3
  171. package/dist/dropdown-menu.css +191 -107
  172. package/dist/dropdown-menu.js +1582 -81
  173. package/dist/field.css +41 -39
  174. package/dist/field.js +40 -16
  175. package/dist/focus-trap.js +80 -0
  176. package/dist/icon-button.css +193 -189
  177. package/dist/icon-button.js +23 -18
  178. package/dist/icon-button2.js +8 -0
  179. package/dist/index.d.ts +4 -0
  180. package/dist/index.js +36 -32
  181. package/dist/input.css +122 -120
  182. package/dist/input.js +47 -34
  183. package/dist/input2.js +9 -0
  184. package/dist/legacy-unlayered.css +5461 -0
  185. package/dist/modal.css +129 -127
  186. package/dist/modal.js +160 -200
  187. package/dist/number-input.css +87 -85
  188. package/dist/number-input.js +61 -17
  189. package/dist/overlay.css +26 -24
  190. package/dist/overlay.js +17 -9
  191. package/dist/overlay2.js +4 -0
  192. package/dist/popover.css +140 -107
  193. package/dist/popover.js +288 -193
  194. package/dist/popover2.js +6 -1
  195. package/dist/progress.css +101 -99
  196. package/dist/progress.js +50 -28
  197. package/dist/radio.css +114 -105
  198. package/dist/radio.js +154 -56
  199. package/dist/select.css +244 -242
  200. package/dist/select.js +92 -47
  201. package/dist/slider.css +1109 -1031
  202. package/dist/slider.js +330 -163
  203. package/dist/styles-api.d.ts +22 -0
  204. package/dist/styles-api.js +49 -0
  205. package/dist/switch.css +120 -108
  206. package/dist/switch.js +89 -33
  207. package/dist/tabs.css +286 -278
  208. package/dist/tabs.js +60 -21
  209. package/dist/teleport-provider.js +15 -0
  210. package/dist/textarea.css +132 -130
  211. package/dist/textarea.js +69 -27
  212. package/dist/toast.css +229 -225
  213. package/dist/toast.js +102 -42
  214. package/dist/tooltip.css +137 -107
  215. package/dist/tooltip.js +180 -228
  216. package/dist/tooltip2.js +8 -0
  217. package/dist/useClickOutside.js +1 -1
  218. package/dist/useFloatingPosition.js +1284 -0
  219. package/dist/useFocusTrap.js +130 -0
  220. package/dist/useTeleportTarget.js +29 -0
  221. package/docs/public-styles-api.md +133 -0
  222. package/docs/public-tokens.md +545 -0
  223. package/package.json +29 -5
  224. package/src/styles/_tokens.scss +33 -28
  225. package/src/styles/_utilities.scss +11 -9
  226. package/src/styles/styles-manifest.json +4125 -0
  227. package/dist/rafScheduler.js +0 -34
package/dist/dropdown-menu.css CHANGED
@@ -1,159 +1,243 @@
1
+ @layer ropav.components {
1
2
  .rp-dropdown-menu {
2
- --_rp-dropdown-menu-radius: var(--rp-radius-sm);
3
- --_rp-dropdown-menu-focused-bg: var(--rp-color-default-hover);
4
- position: relative;
5
- display: inline-flex;
6
- font-family: var(--rp-font-family);
7
- vertical-align: middle;
3
+ --_rp-dropdown-menu-radius: var(--rp-radius-sm);
4
+ --_rp-dropdown-menu-focused-bg: var(--rp-color-default-hover);
5
+ --_rp-dropdown-menu-arrow-size: 0.5rem;
6
+ position: relative;
7
+ display: inline-flex;
8
+ font-family: var(--rp-font-family);
9
+ vertical-align: middle;
8
10
  }
9
11
  html.dark .rp-dropdown-menu, [data-rp-color-scheme=dark] .rp-dropdown-menu {
10
- --_rp-dropdown-menu-focused-bg: var(--rp-color-disabled);
12
+ --_rp-dropdown-menu-focused-bg: var(--rp-color-disabled);
11
13
  }
12
14
  .rp-dropdown-menu--disabled {
13
- opacity: var(--rp-opacity-disabled);
14
- cursor: not-allowed;
15
+ opacity: var(--rp-opacity-disabled);
16
+ cursor: not-allowed;
17
+ }
18
+ .rp-dropdown-menu--target {
19
+ display: contents;
15
20
  }
16
21
  .rp-dropdown-menu__content {
17
- z-index: 100;
18
- background-color: var(--rp-color-default);
19
- border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
20
- border-radius: var(--_rp-dropdown-menu-radius);
21
- box-shadow: var(--rp-shadow-md);
22
- padding: var(--rp-spacing-1) 0;
23
- position: absolute;
24
- min-width: 180px;
25
- max-width: min(24rem, 100vw - var(--rp-spacing-6));
26
- max-height: 240px;
27
- overflow-y: auto;
28
- padding: var(--rp-spacing-1);
29
- color: var(--rp-color-text);
30
- font-size: var(--rp-font-size-md);
31
- line-height: var(--rp-line-height-md);
32
- outline: none;
22
+ z-index: 100;
23
+ background-color: var(--rp-color-default);
24
+ border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
25
+ border-radius: var(--_rp-dropdown-menu-radius);
26
+ box-shadow: var(--rp-shadow-md);
27
+ padding: var(--rp-spacing-1) 0;
28
+ position: absolute;
29
+ z-index: 100;
30
+ min-width: 180px;
31
+ max-width: min(24rem, 100vw - var(--rp-spacing-6));
32
+ max-height: 240px;
33
+ overflow-y: auto;
34
+ padding: var(--rp-spacing-1);
35
+ color: var(--rp-color-text);
36
+ font-size: var(--rp-font-size-md);
37
+ line-height: var(--rp-line-height-md);
38
+ outline: none;
33
39
  }
34
40
  .rp-dropdown-menu__content--has-submenu {
35
- overflow: visible;
41
+ overflow: visible;
42
+ }
43
+ .rp-dropdown-menu__content--compound {
44
+ overflow: visible;
36
45
  }
37
46
  .rp-dropdown-menu--placement-bottom-start .rp-dropdown-menu__content {
38
- top: calc(100% + var(--rp-spacing-2));
39
- left: 0;
47
+ top: calc(100% + var(--rp-spacing-2));
48
+ left: 0;
40
49
  }
41
50
  .rp-dropdown-menu--placement-bottom-end .rp-dropdown-menu__content {
42
- top: calc(100% + var(--rp-spacing-2));
43
- right: 0;
51
+ top: calc(100% + var(--rp-spacing-2));
52
+ right: 0;
44
53
  }
45
54
  .rp-dropdown-menu--placement-top-start .rp-dropdown-menu__content {
46
- bottom: calc(100% + var(--rp-spacing-2));
47
- left: 0;
55
+ bottom: calc(100% + var(--rp-spacing-2));
56
+ left: 0;
48
57
  }
49
58
  .rp-dropdown-menu--placement-top-end .rp-dropdown-menu__content {
50
- right: 0;
51
- bottom: calc(100% + var(--rp-spacing-2));
59
+ right: 0;
60
+ bottom: calc(100% + var(--rp-spacing-2));
61
+ }
62
+ .rp-dropdown-menu__content[data-placement] {
63
+ position: absolute;
64
+ top: 0;
65
+ right: auto;
66
+ bottom: auto;
67
+ left: 0;
68
+ }
69
+ .rp-dropdown-menu__arrow {
70
+ position: absolute;
71
+ box-sizing: border-box;
72
+ width: var(--_rp-dropdown-menu-arrow-size);
73
+ height: var(--_rp-dropdown-menu-arrow-size);
74
+ pointer-events: none;
75
+ background-color: inherit;
76
+ border: inherit;
77
+ rotate: 45deg;
78
+ }
79
+ .rp-dropdown-menu__arrow[data-side=top] {
80
+ bottom: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);
81
+ }
82
+ .rp-dropdown-menu__arrow[data-side=right] {
83
+ left: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);
84
+ }
85
+ .rp-dropdown-menu__arrow[data-side=bottom] {
86
+ top: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);
87
+ }
88
+ .rp-dropdown-menu__arrow[data-side=left] {
89
+ right: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);
52
90
  }
53
91
  .rp-dropdown-menu__item-wrap {
54
- position: relative;
92
+ position: relative;
55
93
  }
56
94
  .rp-dropdown-menu__item {
57
- padding: 0;
58
- font: inherit;
59
- background: none;
60
- border: none;
61
- cursor: pointer;
62
- display: flex;
63
- align-items: center;
64
- width: 100%;
65
- min-height: var(--rp-size-control-sm);
66
- padding: var(--rp-spacing-2) var(--rp-spacing-3);
67
- gap: var(--rp-spacing-4);
68
- color: var(--rp-color-text);
69
- text-align: left;
70
- border-radius: calc(var(--_rp-dropdown-menu-radius) - var(--rp-spacing-1));
71
- transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
72
- user-select: none;
73
- white-space: nowrap;
95
+ padding: 0;
96
+ font: inherit;
97
+ background: none;
98
+ border: none;
99
+ cursor: pointer;
100
+ display: flex;
101
+ align-items: center;
102
+ width: 100%;
103
+ min-height: var(--rp-size-control-sm);
104
+ padding: var(--rp-spacing-2) var(--rp-spacing-3);
105
+ gap: var(--rp-spacing-4);
106
+ color: var(--rp-color-text);
107
+ text-align: left;
108
+ border-radius: calc(var(--_rp-dropdown-menu-radius) - var(--rp-spacing-1));
109
+ transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
110
+ user-select: none;
111
+ white-space: nowrap;
112
+ }
113
+ .rp-dropdown-menu__item[data-state=checked], .rp-dropdown-menu__item[data-state=indeterminate] {
114
+ position: relative;
115
+ padding-left: var(--rp-spacing-8);
74
116
  }
75
117
  .rp-dropdown-menu__item:focus-visible, .rp-dropdown-menu__item--focused {
76
- outline: none;
77
- background-color: var(--_rp-dropdown-menu-focused-bg);
118
+ outline: none;
119
+ background-color: var(--_rp-dropdown-menu-focused-bg);
78
120
  }
79
121
  .rp-dropdown-menu__item--destructive {
80
- color: var(--rp-color-red-light-color);
122
+ color: var(--rp-color-red-light-color);
81
123
  }
82
124
  .rp-dropdown-menu__item--disabled {
83
- color: var(--rp-color-disabled-color);
84
- cursor: not-allowed;
125
+ color: var(--rp-color-disabled-color);
126
+ cursor: not-allowed;
85
127
  }
86
128
  .rp-dropdown-menu__item--submenu {
87
- padding-right: var(--rp-spacing-2);
129
+ padding-right: var(--rp-spacing-2);
88
130
  }
89
131
  .rp-dropdown-menu__label {
90
- flex: 1;
91
- min-width: 0;
92
- overflow: hidden;
93
- text-overflow: ellipsis;
132
+ flex: 1;
133
+ min-width: 0;
134
+ overflow: hidden;
135
+ text-overflow: ellipsis;
94
136
  }
95
137
  .rp-dropdown-menu__shortcut {
96
- color: var(--rp-color-dimmed);
97
- font: inherit;
98
- font-size: var(--rp-font-size-sm);
138
+ color: var(--rp-color-dimmed);
139
+ font: inherit;
140
+ font-size: var(--rp-font-size-sm);
99
141
  }
100
142
  .rp-dropdown-menu__submenu-icon {
101
- display: inline-flex;
102
- align-items: center;
103
- width: 1rem;
104
- height: 1rem;
105
- flex-shrink: 0;
143
+ display: inline-flex;
144
+ align-items: center;
145
+ width: 1rem;
146
+ height: 1rem;
147
+ flex-shrink: 0;
106
148
  }
107
149
  .rp-dropdown-menu__submenu-icon svg {
108
- width: 100%;
109
- height: 100%;
150
+ width: 100%;
151
+ height: 100%;
110
152
  }
111
153
  .rp-dropdown-menu__submenu-icon {
112
- margin-left: auto;
113
- color: var(--rp-color-dimmed);
154
+ margin-left: auto;
155
+ color: var(--rp-color-dimmed);
114
156
  }
115
157
  .rp-dropdown-menu__submenu {
116
- z-index: 100;
117
- background-color: var(--rp-color-default);
118
- border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
119
- border-radius: var(--_rp-dropdown-menu-radius);
120
- box-shadow: var(--rp-shadow-md);
121
- padding: var(--rp-spacing-1) 0;
122
- position: absolute;
123
- top: calc(-1 * var(--rp-spacing-1));
124
- left: calc(100% + var(--rp-spacing-1));
125
- min-width: 180px;
126
- max-width: min(24rem, 100vw - var(--rp-spacing-6));
127
- max-height: 240px;
128
- overflow-y: auto;
129
- padding: var(--rp-spacing-1);
130
- color: var(--rp-color-text);
131
- font-size: var(--rp-font-size-md);
132
- line-height: var(--rp-line-height-md);
133
- outline: none;
158
+ z-index: 100;
159
+ background-color: var(--rp-color-default);
160
+ border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
161
+ border-radius: var(--_rp-dropdown-menu-radius);
162
+ box-shadow: var(--rp-shadow-md);
163
+ padding: var(--rp-spacing-1) 0;
164
+ position: absolute;
165
+ top: calc(-1 * var(--rp-spacing-1));
166
+ left: calc(100% + var(--rp-spacing-1));
167
+ min-width: 180px;
168
+ max-width: min(24rem, 100vw - var(--rp-spacing-6));
169
+ max-height: 240px;
170
+ overflow-y: auto;
171
+ padding: var(--rp-spacing-1);
172
+ color: var(--rp-color-text);
173
+ font-size: var(--rp-font-size-md);
174
+ line-height: var(--rp-line-height-md);
175
+ outline: none;
134
176
  }
135
177
  .rp-dropdown-menu__submenu--has-submenu {
136
- overflow: visible;
178
+ overflow: visible;
179
+ }
180
+ .rp-dropdown-menu__submenu--compound {
181
+ overflow: visible;
137
182
  }
138
183
  .rp-dropdown-menu--placement-bottom-end .rp-dropdown-menu__submenu, .rp-dropdown-menu--placement-top-end .rp-dropdown-menu__submenu {
139
- right: calc(100% + var(--rp-spacing-1));
140
- left: auto;
184
+ right: calc(100% + var(--rp-spacing-1));
185
+ left: auto;
186
+ }
187
+ .rp-dropdown-menu__submenu[data-placement] {
188
+ position: absolute;
189
+ top: 0;
190
+ right: auto;
191
+ bottom: auto;
192
+ left: 0;
141
193
  }
142
194
  .rp-dropdown-menu__empty {
143
- display: flex;
144
- align-items: center;
145
- justify-content: center;
146
- min-height: var(--rp-size-control-sm);
147
- padding: var(--rp-spacing-2) var(--rp-spacing-4);
148
- color: var(--rp-color-dimmed);
149
- font-size: var(--rp-font-size-md);
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ min-height: var(--rp-size-control-sm);
199
+ padding: var(--rp-spacing-2) var(--rp-spacing-4);
200
+ color: var(--rp-color-dimmed);
201
+ font-size: var(--rp-font-size-md);
202
+ }
203
+ .rp-dropdown-menu__group-label {
204
+ padding: var(--rp-spacing-2) var(--rp-spacing-3);
205
+ color: var(--rp-color-dimmed);
206
+ font-size: var(--rp-font-size-sm);
207
+ font-weight: var(--rp-font-weight-semibold);
208
+ line-height: var(--rp-line-height-sm);
209
+ user-select: none;
210
+ }
211
+ .rp-dropdown-menu__separator {
212
+ height: 1px;
213
+ margin: var(--rp-spacing-1) var(--rp-spacing-2);
214
+ background: var(--rp-color-default-border);
215
+ }
216
+ .rp-dropdown-menu__separator[data-orientation=vertical] {
217
+ width: 1px;
218
+ height: auto;
219
+ align-self: stretch;
220
+ }
221
+ .rp-dropdown-menu__indicator {
222
+ position: absolute;
223
+ left: var(--rp-spacing-3);
224
+ display: inline-flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ width: 1rem;
228
+ height: 1rem;
229
+ pointer-events: none;
230
+ }
231
+ .rp-dropdown-menu__radio-group {
232
+ display: contents;
150
233
  }
151
234
  .rp-dropdown-menu-content-enter-active,
152
- .rp-dropdown-menu-content-leave-active {
153
- transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
235
+ .rp-dropdown-menu-content-leave-active {
236
+ transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
154
237
  }
155
238
  .rp-dropdown-menu-content-enter-from,
156
- .rp-dropdown-menu-content-leave-to {
157
- opacity: 0;
158
- transform: translateY(calc(-1 * var(--rp-spacing-1)));
239
+ .rp-dropdown-menu-content-leave-to {
240
+ opacity: 0;
241
+ transform: translateY(calc(-1 * var(--rp-spacing-1)));
242
+ }
159
243
  }