rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

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 (247) hide show
  1. package/AutoComplete/styles/index.css +156 -161
  2. package/AvatarGroup/styles/index.css +1 -10
  3. package/Badge/styles/index.css +21 -21
  4. package/Button/styles/index.css +78 -63
  5. package/ButtonGroup/styles/index.css +15 -12
  6. package/ButtonToolbar/styles/index.css +1 -10
  7. package/CHANGELOG.md +9 -0
  8. package/Calendar/styles/index.css +92 -67
  9. package/Card/styles/index.css +7 -7
  10. package/CascadeTree/styles/index.css +8 -9
  11. package/Cascader/styles/index.css +160 -164
  12. package/CheckPicker/styles/index.css +173 -178
  13. package/CheckTree/styles/index.css +175 -180
  14. package/CheckTreePicker/styles/index.css +175 -180
  15. package/Checkbox/styles/index.css +21 -28
  16. package/CheckboxGroup/styles/index.css +1 -1
  17. package/DateInput/styles/index.css +8 -18
  18. package/DatePicker/styles/index.css +173 -168
  19. package/DateRangeInput/styles/index.css +8 -18
  20. package/DateRangePicker/styles/index.css +173 -168
  21. package/Dropdown/styles/index.css +110 -94
  22. package/IconButton/styles/index.css +95 -79
  23. package/InlineEdit/styles/index.css +12 -19
  24. package/Input/styles/index.css +8 -18
  25. package/InputGroup/styles/index.css +31 -38
  26. package/InputNumber/styles/index.css +115 -100
  27. package/InputPicker/styles/index.css +156 -161
  28. package/List/styles/index.css +10 -10
  29. package/Loader/styles/index.css +16 -16
  30. package/Menu/styles/index.css +2 -2
  31. package/Message/styles/index.css +2 -2
  32. package/MultiCascadeTree/styles/index.css +178 -191
  33. package/MultiCascader/styles/index.css +178 -200
  34. package/Nav/styles/index.css +162 -146
  35. package/Navbar/styles/index.css +140 -124
  36. package/NumberInput/styles/index.css +115 -100
  37. package/Pagination/styles/index.css +177 -200
  38. package/PasswordInput/styles/index.css +36 -43
  39. package/PinInput/styles/index.css +12 -22
  40. package/Radio/styles/index.css +22 -29
  41. package/RadioGroup/styles/index.css +11 -11
  42. package/SelectPicker/styles/index.css +156 -161
  43. package/Sidenav/styles/index.css +122 -129
  44. package/Stack/styles/index.css +1 -10
  45. package/Stat/styles/index.css +95 -79
  46. package/Steps/styles/index.css +26 -25
  47. package/Table/styles/index.css +11 -0
  48. package/Tabs/styles/index.css +162 -146
  49. package/Tag/styles/index.css +112 -96
  50. package/TagInput/styles/index.css +174 -179
  51. package/TagPicker/styles/index.css +174 -179
  52. package/TimePicker/styles/index.css +173 -168
  53. package/TimeRangePicker/styles/index.css +173 -168
  54. package/Toggle/styles/index.css +27 -30
  55. package/Tree/styles/index.css +157 -162
  56. package/TreePicker/styles/index.css +157 -162
  57. package/Uploader/styles/index.css +94 -65
  58. package/cjs/Badge/Badge.js +16 -11
  59. package/cjs/Breadcrumb/Breadcrumb.d.ts +2 -2
  60. package/cjs/Button/Button.js +9 -7
  61. package/cjs/ButtonGroup/ButtonGroup.js +7 -7
  62. package/cjs/Card/Card.js +6 -6
  63. package/cjs/Checkbox/Checkbox.js +6 -7
  64. package/cjs/CheckboxGroup/CheckboxGroup.js +3 -4
  65. package/cjs/Dropdown/Dropdown.js +3 -4
  66. package/cjs/Dropdown/DropdownItem.js +4 -4
  67. package/cjs/Dropdown/DropdownMenu.js +9 -10
  68. package/cjs/FormControl/FormControl.d.ts +1 -1
  69. package/cjs/FormControlLabel/FormControlLabel.d.ts +1 -1
  70. package/cjs/FormHelpText/FormHelpText.d.ts +1 -1
  71. package/cjs/IconButton/IconButton.d.ts +1 -1
  72. package/cjs/IconButton/IconButton.js +9 -9
  73. package/cjs/Image/Image.d.ts +1 -1
  74. package/cjs/InlineEdit/InlineEdit.js +3 -2
  75. package/cjs/InputGroup/InputGroup.js +12 -14
  76. package/cjs/InputGroup/InputGroupAddon.d.ts +2 -2
  77. package/cjs/InputPicker/InputAutosize.js +4 -6
  78. package/cjs/List/List.d.ts +1 -1
  79. package/cjs/List/List.js +7 -8
  80. package/cjs/List/ListItem.d.ts +2 -2
  81. package/cjs/List/ListItem.js +4 -4
  82. package/cjs/Loader/Loader.js +8 -7
  83. package/cjs/Menu/MenuSeparator.d.ts +2 -2
  84. package/cjs/Nav/Nav.d.ts +2 -2
  85. package/cjs/Nav/Nav.js +12 -13
  86. package/cjs/Nav/NavDropdownItem.js +4 -4
  87. package/cjs/Nav/NavDropdownMenu.js +10 -13
  88. package/cjs/Nav/NavItem.d.ts +2 -2
  89. package/cjs/Nav/NavItem.js +6 -8
  90. package/cjs/Navbar/Navbar.js +6 -6
  91. package/cjs/Navbar/NavbarDropdown.d.ts +1 -1
  92. package/cjs/Navbar/NavbarDropdown.js +3 -4
  93. package/cjs/Navbar/NavbarDropdownItem.js +4 -4
  94. package/cjs/Navbar/NavbarDropdownMenu.js +8 -11
  95. package/cjs/NumberInput/NumberInput.d.ts +1 -1
  96. package/cjs/Pagination/Pagination.js +3 -2
  97. package/cjs/Pagination/PaginationButton.d.ts +3 -3
  98. package/cjs/Pagination/PaginationButton.js +9 -17
  99. package/cjs/Pagination/PaginationGroup.js +2 -1
  100. package/cjs/Panel/PanelHeader.d.ts +1 -1
  101. package/cjs/Radio/Radio.js +6 -6
  102. package/cjs/RadioGroup/RadioGroup.js +4 -4
  103. package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  104. package/cjs/Sidenav/Sidenav.js +3 -2
  105. package/cjs/Sidenav/SidenavDropdown.js +3 -5
  106. package/cjs/Sidenav/SidenavDropdownItem.js +4 -4
  107. package/cjs/Sidenav/SidenavDropdownMenu.js +10 -13
  108. package/cjs/Sidenav/SidenavItem.d.ts +2 -2
  109. package/cjs/Sidenav/SidenavItem.js +4 -5
  110. package/cjs/Slider/Handle.d.ts +1 -1
  111. package/cjs/Stack/Stack.d.ts +1 -17
  112. package/cjs/Stack/Stack.js +3 -4
  113. package/cjs/Stack/StackItem.d.ts +4 -5
  114. package/cjs/Stack/StackItem.js +4 -10
  115. package/cjs/Steps/StepItem.js +7 -8
  116. package/cjs/Steps/Steps.d.ts +2 -1
  117. package/cjs/Steps/Steps.js +32 -34
  118. package/cjs/Tabs/Tabs.js +1 -1
  119. package/cjs/Tag/Tag.js +5 -2
  120. package/cjs/Toggle/Toggle.d.ts +1 -1
  121. package/cjs/Toggle/Toggle.js +7 -6
  122. package/cjs/Tree/types.d.ts +2 -2
  123. package/cjs/Uploader/Uploader.d.ts +2 -2
  124. package/cjs/internals/Box/Box.d.ts +1 -0
  125. package/cjs/internals/Box/index.d.ts +1 -1
  126. package/cjs/internals/Box/utils.js +5 -4
  127. package/cjs/internals/InputBase/InputBase.d.ts +1 -1
  128. package/cjs/internals/InputBase/InputBase.js +3 -2
  129. package/cjs/internals/Menu/MenuItem.js +1 -1
  130. package/cjs/internals/Overlay/Modal.d.ts +1 -1
  131. package/cjs/internals/Picker/PickerToggle.js +2 -4
  132. package/cjs/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  133. package/cjs/internals/Tree/TreeView.d.ts +2 -2
  134. package/cjs/internals/hooks/useCustom.js +24 -7
  135. package/cjs/internals/styled-system/css-alias.d.ts +7 -0
  136. package/cjs/internals/styled-system/css-alias.js +391 -0
  137. package/cjs/internals/styled-system/css-properties.d.ts +6 -0
  138. package/cjs/internals/styled-system/css-properties.js +30 -0
  139. package/cjs/internals/styled-system/index.d.ts +1 -1
  140. package/cjs/internals/styled-system/index.js +4 -4
  141. package/cjs/internals/styled-system/responsive.d.ts +0 -4
  142. package/cjs/internals/styled-system/responsive.js +12 -33
  143. package/cjs/internals/styled-system/types.d.ts +59 -5
  144. package/cjs/internals/styled-system/useStyled.js +3 -3
  145. package/cjs/internals/types/html.d.ts +6 -6
  146. package/cjs/internals/types/picker.d.ts +1 -1
  147. package/dist/rsuite-no-reset.css +641 -641
  148. package/dist/rsuite-no-reset.min.css +1 -1
  149. package/dist/rsuite.css +641 -641
  150. package/dist/rsuite.js +60 -60
  151. package/dist/rsuite.min.css +1 -1
  152. package/dist/rsuite.min.js +1 -1
  153. package/dist/rsuite.min.js.map +1 -1
  154. package/esm/Badge/Badge.js +16 -11
  155. package/esm/Breadcrumb/Breadcrumb.d.ts +2 -2
  156. package/esm/Button/Button.js +9 -7
  157. package/esm/ButtonGroup/ButtonGroup.js +7 -7
  158. package/esm/Card/Card.js +6 -6
  159. package/esm/Checkbox/Checkbox.js +6 -7
  160. package/esm/CheckboxGroup/CheckboxGroup.js +3 -4
  161. package/esm/Dropdown/Dropdown.js +3 -4
  162. package/esm/Dropdown/DropdownItem.js +4 -4
  163. package/esm/Dropdown/DropdownMenu.js +9 -10
  164. package/esm/FormControl/FormControl.d.ts +1 -1
  165. package/esm/FormControlLabel/FormControlLabel.d.ts +1 -1
  166. package/esm/FormHelpText/FormHelpText.d.ts +1 -1
  167. package/esm/IconButton/IconButton.d.ts +1 -1
  168. package/esm/IconButton/IconButton.js +9 -9
  169. package/esm/Image/Image.d.ts +1 -1
  170. package/esm/InlineEdit/InlineEdit.js +3 -2
  171. package/esm/InputGroup/InputGroup.js +12 -14
  172. package/esm/InputGroup/InputGroupAddon.d.ts +2 -2
  173. package/esm/InputPicker/InputAutosize.js +4 -6
  174. package/esm/List/List.d.ts +1 -1
  175. package/esm/List/List.js +7 -8
  176. package/esm/List/ListItem.d.ts +2 -2
  177. package/esm/List/ListItem.js +4 -4
  178. package/esm/Loader/Loader.js +8 -7
  179. package/esm/Menu/MenuSeparator.d.ts +2 -2
  180. package/esm/Nav/Nav.d.ts +2 -2
  181. package/esm/Nav/Nav.js +12 -13
  182. package/esm/Nav/NavDropdownItem.js +4 -4
  183. package/esm/Nav/NavDropdownMenu.js +10 -13
  184. package/esm/Nav/NavItem.d.ts +2 -2
  185. package/esm/Nav/NavItem.js +6 -8
  186. package/esm/Navbar/Navbar.js +7 -7
  187. package/esm/Navbar/NavbarDropdown.d.ts +1 -1
  188. package/esm/Navbar/NavbarDropdown.js +3 -4
  189. package/esm/Navbar/NavbarDropdownItem.js +4 -4
  190. package/esm/Navbar/NavbarDropdownMenu.js +8 -11
  191. package/esm/NumberInput/NumberInput.d.ts +1 -1
  192. package/esm/Pagination/Pagination.js +3 -2
  193. package/esm/Pagination/PaginationButton.d.ts +3 -3
  194. package/esm/Pagination/PaginationButton.js +9 -16
  195. package/esm/Pagination/PaginationGroup.js +2 -1
  196. package/esm/Panel/PanelHeader.d.ts +1 -1
  197. package/esm/Radio/Radio.js +6 -6
  198. package/esm/RadioGroup/RadioGroup.js +4 -4
  199. package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  200. package/esm/Sidenav/Sidenav.js +3 -2
  201. package/esm/Sidenav/SidenavDropdown.js +3 -5
  202. package/esm/Sidenav/SidenavDropdownItem.js +4 -4
  203. package/esm/Sidenav/SidenavDropdownMenu.js +10 -13
  204. package/esm/Sidenav/SidenavItem.d.ts +2 -2
  205. package/esm/Sidenav/SidenavItem.js +4 -5
  206. package/esm/Slider/Handle.d.ts +1 -1
  207. package/esm/Stack/Stack.d.ts +1 -17
  208. package/esm/Stack/Stack.js +3 -4
  209. package/esm/Stack/StackItem.d.ts +4 -5
  210. package/esm/Stack/StackItem.js +5 -11
  211. package/esm/Steps/StepItem.js +7 -8
  212. package/esm/Steps/Steps.d.ts +2 -1
  213. package/esm/Steps/Steps.js +31 -34
  214. package/esm/Tabs/Tabs.js +1 -1
  215. package/esm/Tag/Tag.js +5 -2
  216. package/esm/Toggle/Toggle.d.ts +1 -1
  217. package/esm/Toggle/Toggle.js +7 -6
  218. package/esm/Tree/types.d.ts +2 -2
  219. package/esm/Uploader/Uploader.d.ts +2 -2
  220. package/esm/internals/Box/Box.d.ts +1 -0
  221. package/esm/internals/Box/index.d.ts +1 -1
  222. package/esm/internals/Box/utils.js +6 -5
  223. package/esm/internals/InputBase/InputBase.d.ts +1 -1
  224. package/esm/internals/InputBase/InputBase.js +3 -2
  225. package/esm/internals/Menu/MenuItem.js +1 -1
  226. package/esm/internals/Overlay/Modal.d.ts +1 -1
  227. package/esm/internals/Picker/PickerToggle.js +2 -4
  228. package/esm/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  229. package/esm/internals/Tree/TreeView.d.ts +2 -2
  230. package/esm/internals/hooks/useCustom.js +24 -7
  231. package/esm/internals/styled-system/css-alias.d.ts +7 -0
  232. package/esm/internals/styled-system/css-alias.js +387 -0
  233. package/esm/internals/styled-system/css-properties.d.ts +6 -0
  234. package/esm/internals/styled-system/css-properties.js +26 -0
  235. package/esm/internals/styled-system/index.d.ts +1 -1
  236. package/esm/internals/styled-system/index.js +1 -1
  237. package/esm/internals/styled-system/responsive.d.ts +0 -4
  238. package/esm/internals/styled-system/responsive.js +11 -31
  239. package/esm/internals/styled-system/types.d.ts +59 -5
  240. package/esm/internals/styled-system/useStyled.js +3 -3
  241. package/esm/internals/types/html.d.ts +6 -6
  242. package/esm/internals/types/picker.d.ts +1 -1
  243. package/package.json +1 -1
  244. package/cjs/internals/styled-system/css-property.d.ts +0 -6
  245. package/cjs/internals/styled-system/css-property.js +0 -289
  246. package/esm/internals/styled-system/css-property.d.ts +0 -6
  247. package/esm/internals/styled-system/css-property.js +0 -285
package/Input/styles/index.css CHANGED
@@ -20,7 +20,6 @@ body{
20
20
  --rs-gray-100:#f2f2f5;
21
21
  --rs-gray-200:#e5e5ea;
22
22
  --rs-gray-400:#b6b7b8;
23
- --rs-gray-500:#939393;
24
23
  --rs-gray-600:#717273;
25
24
  --rs-gray-700:#575757;
26
25
  --rs-gray-800:#343434;
@@ -31,14 +30,14 @@ body{
31
30
  --rs-text-secondary:var(--rs-gray-600);
32
31
  --rs-text-disabled:var(--rs-gray-600);
33
32
  --rs-border-primary:var(--rs-gray-200);
34
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
33
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
35
34
  --rs-input-bg:var(--rs-gray-0);
36
35
  --rs-input-focus-border:var(--rs-primary-500);
37
36
  --rs-input-disabled-bg:var(--rs-gray-50);
38
37
  }
39
38
  @supports not (color: rgb(from white r g b)){
40
39
  :root{
41
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
40
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
42
41
  }
43
42
  }
44
43
 
@@ -49,7 +48,6 @@ body{
49
48
  --rs-gray-100:#cbced4;
50
49
  --rs-gray-200:#a4a9b3;
51
50
  --rs-gray-400:#6a6f76;
52
- --rs-gray-500:#5c6066;
53
51
  --rs-gray-600:#3c3f43;
54
52
  --rs-gray-700:#292d33;
55
53
  --rs-gray-800:#1a1d24;
@@ -60,17 +58,10 @@ body{
60
58
  --rs-text-secondary:var(--rs-gray-200);
61
59
  --rs-text-disabled:var(--rs-gray-400);
62
60
  --rs-border-primary:var(--rs-gray-600);
63
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
64
61
  --rs-input-bg:var(--rs-gray-800);
65
62
  --rs-input-focus-border:var(--rs-primary-500);
66
63
  --rs-input-disabled-bg:var(--rs-gray-700);
67
64
  }
68
- @supports not (color: rgb(from white r g b)){
69
- [data-theme=dark],
70
- .rs-theme-dark{
71
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
72
- }
73
- }
74
65
 
75
66
  [data-theme=high-contrast],
76
67
  .rs-theme-high-contrast{
@@ -79,7 +70,6 @@ body{
79
70
  --rs-gray-100:#cbced4;
80
71
  --rs-gray-200:#a4a9b3;
81
72
  --rs-gray-400:#6a6f76;
82
- --rs-gray-500:#5c6066;
83
73
  --rs-gray-600:#3c3f43;
84
74
  --rs-gray-700:#292d33;
85
75
  --rs-gray-800:#1a1d24;
@@ -90,7 +80,7 @@ body{
90
80
  --rs-text-secondary:var(--rs-gray-200);
91
81
  --rs-text-disabled:var(--rs-gray-400);
92
82
  --rs-border-primary:var(--rs-gray-100);
93
- --rs-color-focus-ring:var(--rs-gray-0);
83
+ --rs-focus-ring-color:var(--rs-gray-0);
94
84
  --rs-input-bg:var(--rs-gray-800);
95
85
  --rs-input-focus-border:var(--rs-primary-500);
96
86
  --rs-input-disabled-bg:var(--rs-gray-700);
@@ -211,32 +201,32 @@ body{
211
201
  border-color:var(--rs-input-focus-border);
212
202
  }
213
203
  .rs-input:focus-visible{
214
- outline:2px solid var(--rs-color-focus-ring);
204
+ outline:2px solid var(--rs-focus-ring-color);
215
205
  outline-offset:-1px;
216
206
  }
217
207
  .rs-input:disabled{
218
208
  background-color:var(--rs-input-disabled-bg);
219
209
  color:var(--rs-text-disabled);
220
210
  }
221
- .rs-input.rs-input-xs{
211
+ .rs-input[data-size=xs]{
222
212
  --rs-input-font-size:var(--rs-input-font-size-xs);
223
213
  --rs-input-line-height:var(--rs-input-line-height-xs);
224
214
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
225
215
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
226
216
  }
227
- .rs-input.rs-input-sm{
217
+ .rs-input[data-size=sm]{
228
218
  --rs-input-font-size:var(--rs-input-font-size-sm);
229
219
  --rs-input-line-height:var(--rs-input-line-height-sm);
230
220
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
231
221
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
232
222
  }
233
- .rs-input.rs-input-md{
223
+ .rs-input[data-size=md]{
234
224
  --rs-input-font-size:var(--rs-input-font-size-md);
235
225
  --rs-input-line-height:var(--rs-input-line-height-md);
236
226
  --rs-input-padding-block:var(--rs-input-padding-block-md);
237
227
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
238
228
  }
239
- .rs-input.rs-input-lg{
229
+ .rs-input[data-size=lg]{
240
230
  --rs-input-font-size:var(--rs-input-font-size-lg);
241
231
  --rs-input-line-height:var(--rs-input-line-height-lg);
242
232
  --rs-input-padding-block:var(--rs-input-padding-block-lg);
package/InputGroup/styles/index.css CHANGED
@@ -32,7 +32,7 @@ body{
32
32
  --rs-text-primary:var(--rs-gray-800);
33
33
  --rs-text-disabled:var(--rs-gray-600);
34
34
  --rs-border-primary:var(--rs-gray-200);
35
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
35
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
36
36
  --rs-btn-default-bg:var(--rs-gray-50);
37
37
  --rs-btn-subtle-text:var(--rs-gray-800);
38
38
  --rs-btn-subtle-hover-bg:var(--rs-gray-200);
@@ -46,7 +46,7 @@ body{
46
46
  }
47
47
  @supports not (color: rgb(from white r g b)){
48
48
  :root{
49
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
49
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
50
50
  }
51
51
  }
52
52
 
@@ -69,7 +69,6 @@ body{
69
69
  --rs-text-primary:var(--rs-gray-50);
70
70
  --rs-text-disabled:var(--rs-gray-400);
71
71
  --rs-border-primary:var(--rs-gray-600);
72
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
73
72
  --rs-btn-default-bg:var(--rs-gray-600);
74
73
  --rs-btn-subtle-text:var(--rs-gray-200);
75
74
  --rs-btn-subtle-hover-bg:var(--rs-gray-500);
@@ -81,12 +80,6 @@ body{
81
80
  --rs-input-focus-border:var(--rs-primary-500);
82
81
  --rs-input-disabled-bg:var(--rs-gray-700);
83
82
  }
84
- @supports not (color: rgb(from white r g b)){
85
- [data-theme=dark],
86
- .rs-theme-dark{
87
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
88
- }
89
- }
90
83
 
91
84
  [data-theme=high-contrast],
92
85
  .rs-theme-high-contrast{
@@ -107,7 +100,7 @@ body{
107
100
  --rs-text-primary:var(--rs-gray-50);
108
101
  --rs-text-disabled:var(--rs-gray-400);
109
102
  --rs-border-primary:var(--rs-gray-100);
110
- --rs-color-focus-ring:var(--rs-gray-0);
103
+ --rs-focus-ring-color:var(--rs-gray-0);
111
104
  --rs-btn-default-bg:transparent;
112
105
  --rs-btn-subtle-text:var(--rs-primary-500);
113
106
  --rs-btn-subtle-hover-bg:transparent;
@@ -224,25 +217,25 @@ body{
224
217
  border:1px solid var(--rs-border-primary);
225
218
  overflow:hidden;
226
219
  }
227
- .rs-input-group.rs-input-group-xs{
220
+ .rs-input-group[data-size=xs]{
228
221
  --rs-input-group-input-height:var(--rs-input-group-input-height-xs);
229
222
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-xs);
230
223
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-xs);
231
224
  --rs-input-group-font-size:var(--rs-input-group-font-size-xs);
232
225
  }
233
- .rs-input-group.rs-input-group-sm{
226
+ .rs-input-group[data-size=sm]{
234
227
  --rs-input-group-input-height:var(--rs-input-group-input-height-sm);
235
228
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-sm);
236
229
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-sm);
237
230
  --rs-input-group-font-size:var(--rs-input-group-font-size-sm);
238
231
  }
239
- .rs-input-group.rs-input-group-md{
232
+ .rs-input-group[data-size=md]{
240
233
  --rs-input-group-input-height:var(--rs-input-group-input-height-md);
241
234
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-md);
242
235
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-md);
243
236
  --rs-input-group-font-size:var(--rs-input-group-font-size-md);
244
237
  }
245
- .rs-input-group.rs-input-group-lg{
238
+ .rs-input-group[data-size=lg]{
246
239
  --rs-input-group-input-height:var(--rs-input-group-input-height-lg);
247
240
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-lg);
248
241
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-lg);
@@ -251,11 +244,11 @@ body{
251
244
  [data-theme=high-contrast] .rs-input-group, .rs-theme-high-contrast .rs-input-group{
252
245
  transition:none;
253
246
  }
254
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
247
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
255
248
  border-color:var(--rs-input-focus-border);
256
249
  }
257
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
258
- outline:2px solid var(--rs-color-focus-ring);
250
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
251
+ outline:2px solid var(--rs-focus-ring-color);
259
252
  outline-offset:-1px;
260
253
  }
261
254
  .rs-input-group .rs-input-group{
@@ -290,23 +283,23 @@ body{
290
283
  .rs-input-group > .rs-input-group-addon > .rs-icon{
291
284
  font-size:inherit;
292
285
  }
293
- .rs-input-group.rs-input-group-inside{
286
+ .rs-input-group[data-inside=true]{
294
287
  width:var(--rs-input-group-width);
295
288
  align-items:center;
296
289
  background-color:var(--rs-input-bg);
297
290
  }
298
- .rs-input-group.rs-input-group-inside .rs-input{
291
+ .rs-input-group[data-inside=true] .rs-input{
299
292
  display:block;
300
293
  width:100%;
301
294
  border:none;
302
295
  outline:none;
303
296
  }
304
- .rs-input-group.rs-input-group-inside .rs-input-group-btn,
305
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
297
+ .rs-input-group[data-inside=true] .rs-input-group-btn,
298
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
306
299
  flex:0 0 auto;
307
300
  width:auto;
308
301
  }
309
- .rs-input-group.rs-input-group-inside .rs-input-group-btn{
302
+ .rs-input-group[data-inside=true] .rs-input-group-btn{
310
303
  border-radius:var(--rs-input-group-border-radius);
311
304
  height:calc(var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2);
312
305
  margin-inline:var(--rs-input-group-inside-btn-spacing);
@@ -315,42 +308,42 @@ body{
315
308
  background-color:transparent;
316
309
  color:inherit;
317
310
  }
318
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:hover{
311
+ .rs-input-group[data-inside=true] .rs-input-group-btn:hover{
319
312
  color:var(--rs-btn-subtle-hover-text);
320
313
  background-color:var(--rs-btn-subtle-hover-bg);
321
314
  }
322
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:active, .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-active{
315
+ .rs-input-group[data-inside=true] .rs-input-group-btn:active, .rs-input-group[data-inside=true] .rs-input-group-btn[data-active=true]{
323
316
  color:var(--rs-btn-subtle-active-text);
324
317
  background-color:var(--rs-btn-subtle-active-bg);
325
318
  }
326
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled, .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled{
319
+ .rs-input-group[data-inside=true] .rs-input-group-btn:disabled, .rs-input-group[data-inside=true] .rs-input-group-btn[data-disabled=true]{
327
320
  color:var(--rs-btn-subtle-disabled-text);
328
321
  background:none;
329
322
  }
330
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:focus{
323
+ .rs-input-group[data-inside=true] .rs-input-group-btn:focus{
331
324
  outline:none;
332
325
  }
333
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
326
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
334
327
  background:none;
335
328
  border:none;
336
329
  }
337
- .rs-input-group.rs-input-group-inside .rs-input:not(:first-child),
338
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:first-child) .rs-input{
330
+ .rs-input-group[data-inside=true] .rs-input:not(:first-child),
331
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:first-child) .rs-input{
339
332
  padding-inline-start:0;
340
333
  }
341
- .rs-input-group.rs-input-group-inside .rs-input:not(:last-child),
342
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:last-child) .rs-input{
334
+ .rs-input-group[data-inside=true] .rs-input:not(:last-child),
335
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:last-child) .rs-input{
343
336
  padding-inline-end:0;
344
337
  }
345
338
 
346
- .rs-input-group.rs-input-group-disabled{
339
+ .rs-input-group[data-disabled=true]{
347
340
  background-color:var(--rs-input-disabled-bg);
348
341
  color:var(--rs-text-disabled);
349
342
  cursor:not-allowed;
350
343
  }
351
- .rs-input-group.rs-input-group-disabled .rs-input,
352
- .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
353
- .rs-input-group.rs-input-group-disabled .rs-input-group-addon{
344
+ .rs-input-group[data-disabled=true] .rs-input,
345
+ .rs-input-group[data-disabled=true] .rs-input-group-btn,
346
+ .rs-input-group[data-disabled=true] .rs-input-group-addon{
354
347
  color:inherit;
355
348
  }
356
349
 
@@ -370,16 +363,16 @@ body{
370
363
  padding-inline:var(--rs-spacing);
371
364
  min-width:var(--rs-input-group-input-height);
372
365
  }
373
- .rs-input-group-addon.rs-input-sm{
366
+ .rs-input-group-addon[data-size=sm]{
374
367
  padding-block:var(--rs-spacing-block-sm);
375
368
  padding-inline:var(--rs-spacing-inline-sm);
376
369
  font-size:var(--rs-font-size-sm);
377
370
  }
378
- .rs-input-group-addon.rs-input-xs{
371
+ .rs-input-group-addon[data-size=xs]{
379
372
  padding:var(--rs-spacing-inline-xs);
380
373
  font-size:var(--rs-font-size-xs);
381
374
  }
382
- .rs-input-group-addon.rs-input-lg{
375
+ .rs-input-group-addon[data-size=lg]{
383
376
  padding-block:var(--rs-spacing-block-lg);
384
377
  padding-inline:var(--rs-spacing-inline-lg);
385
378
  font-size:var(--rs-font-size-md);