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
@@ -103,7 +103,7 @@ body{
103
103
  --rs-text-highlight-bg:#fff6c9;
104
104
  --rs-border-primary:var(--rs-gray-200);
105
105
  --rs-bg-overlay:var(--rs-gray-0);
106
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
106
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
107
107
  --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
108
108
  --rs-btn-default-bg:var(--rs-gray-50);
109
109
  --rs-btn-default-text:var(--rs-gray-800);
@@ -163,7 +163,7 @@ body{
163
163
  }
164
164
  @supports not (color: rgb(from white r g b)){
165
165
  :root{
166
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
166
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
167
167
  --rs-loader-ring:rgba(247, 247, 250, 0.8);
168
168
  --rs-loader-backdrop:rgba(255, 255, 255, 0.9);
169
169
  --rs-loader-ring-inverse:rgba(247, 247, 250, 0.3);
@@ -261,7 +261,6 @@ body{
261
261
  --rs-text-disabled:var(--rs-gray-400);
262
262
  --rs-border-primary:var(--rs-gray-600);
263
263
  --rs-bg-overlay:var(--rs-gray-700);
264
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
265
264
  --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
266
265
  --rs-btn-default-bg:var(--rs-gray-600);
267
266
  --rs-btn-default-text:var(--rs-gray-50);
@@ -320,7 +319,6 @@ body{
320
319
  @supports not (color: rgb(from white r g b)){
321
320
  [data-theme=dark],
322
321
  .rs-theme-dark{
323
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
324
322
  --rs-loader-ring:rgba(233, 235, 240, 0.3);
325
323
  --rs-loader-backdrop:rgba(15, 19, 26, 0.83);
326
324
  --rs-loader-ring-inverse:rgba(233, 235, 240, 0.8);
@@ -419,7 +417,7 @@ body{
419
417
  --rs-text-highlight-bg:var(--rs-primary-500);
420
418
  --rs-border-primary:var(--rs-gray-100);
421
419
  --rs-bg-overlay:var(--rs-gray-800);
422
- --rs-color-focus-ring:var(--rs-gray-0);
420
+ --rs-focus-ring-color:var(--rs-gray-0);
423
421
  --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
424
422
  --rs-btn-default-bg:transparent;
425
423
  --rs-btn-default-text:var(--rs-primary-500);
@@ -517,7 +515,7 @@ body{
517
515
  --rs-ripple-bg:rgb(0 0 0 / 20%);
518
516
  --rs-zindex-dropdown:5;
519
517
  --rs-zindex-picker-toggle:5;
520
- --rs-zindex-picker-popup:calc(var(--rs-zindex-picker-toggle) + 2);
518
+ --rs-zindex-picker-popup:7;
521
519
  --rs-zindex-modal:1050;
522
520
  --rs-zindex-drawer:1050;
523
521
  }
@@ -578,9 +576,6 @@ body{
578
576
  --rs-stack-direction:row;
579
577
  --rs-stack-align:center;
580
578
  --rs-stack-justify:flex-start;
581
- --rs-stack-item-grow:0;
582
- --rs-stack-item-shrink:1;
583
- --rs-stack-item-basis:auto;
584
579
  }
585
580
 
586
581
  .rs-stack{
@@ -607,7 +602,7 @@ body{
607
602
  --rs-stack-align:center;
608
603
  flex-direction:row-reverse;
609
604
  }
610
- .rs-stack-wrap{
605
+ .rs-stack[data-wrap=true]{
611
606
  flex-wrap:wrap;
612
607
  }
613
608
  .rs-stack-xs-column{
@@ -693,12 +688,6 @@ body{
693
688
  }
694
689
  }
695
690
 
696
- .rs-stack-item{
697
- align-self:var(--rs-stack-item-align-self);
698
- order:var(--rs-stack-item-order);
699
- flex:var(--rs-stack-item-flex, var(--rs-stack-item-grow) var(--rs-stack-item-shrink) var(--rs-stack-item-basis));
700
- }
701
-
702
691
  :root{
703
692
  --rs-loader-duration-fast:0.4s;
704
693
  --rs-loader-duration-normal:0.6s;
@@ -715,7 +704,7 @@ body{
715
704
  --rs-loader-spin-ring-width:3px;
716
705
  }
717
706
 
718
- .rs-loader{
707
+ .rs-loader-box{
719
708
  display:inline-flex;
720
709
  align-items:center;
721
710
  justify-content:center;
@@ -757,34 +746,34 @@ body{
757
746
  height:100%;
758
747
  background:var(--rs-loader-backdrop);
759
748
  }
760
- .rs-loader-vertical .rs-loader{
749
+ .rs-loader[data-direction=vertical] .rs-loader-box{
761
750
  flex-direction:column;
762
751
  }
763
- .rs-loader-inverse .rs-loader-content{
752
+ .rs-loader[data-inverse=true] .rs-loader-content{
764
753
  color:var(--rs-text-inverse);
765
754
  }
766
- .rs-loader-inverse .rs-loader-backdrop{
755
+ .rs-loader[data-inverse=true] .rs-loader-backdrop{
767
756
  background:var(--rs-loader-backdrop-inverse);
768
757
  }
769
- .rs-loader-inverse .rs-loader-spin::before{
758
+ .rs-loader[data-inverse=true] .rs-loader-spin::before{
770
759
  border-color:var(--rs-loader-ring-inverse);
771
760
  }
772
- .rs-loader-inverse .rs-loader-spin::after{
761
+ .rs-loader[data-inverse=true] .rs-loader-spin::after{
773
762
  border-top-color:var(--rs-loader-rotor-inverse);
774
763
  }
775
- .rs-loader-speed-fast .rs-loader-spin::after{
764
+ .rs-loader[data-speed=fast] .rs-loader-spin::after{
776
765
  animation-duration:var(--rs-loader-duration-fast);
777
766
  }
778
- .rs-loader-speed-normal .rs-loader-spin::after{
767
+ .rs-loader[data-speed=normal] .rs-loader-spin::after{
779
768
  animation-duration:var(--rs-loader-duration-normal);
780
769
  }
781
- .rs-loader-speed-slow .rs-loader-spin::after{
770
+ .rs-loader[data-speed=slow] .rs-loader-spin::after{
782
771
  animation-duration:var(--rs-loader-duration-slow);
783
772
  }
784
- .rs-loader-speed-paused .rs-loader-spin::after{
773
+ .rs-loader[data-speed=paused] .rs-loader-spin::after{
785
774
  animation-play-state:var(--rs-loader-duration-paused);
786
775
  }
787
- .rs-loader-center{
776
+ .rs-loader[data-center=true]{
788
777
  position:absolute;
789
778
  top:0;
790
779
  bottom:0;
@@ -797,26 +786,26 @@ body{
797
786
  align-items:center;
798
787
  justify-content:center;
799
788
  }
800
- .rs-loader-center .rs-loader-content{
789
+ .rs-loader[data-center=true] .rs-loader-content{
801
790
  z-index:1;
802
791
  }
803
792
 
804
- .rs-loader-xs{
793
+ .rs-loader[data-size=xs]{
805
794
  --rs-loader-size:var(--rs-loader-size-xs);
806
795
  --rs-loader-font-size:var(--rs-loader-font-size-xs);
807
796
  }
808
797
 
809
- .rs-loader-sm{
798
+ .rs-loader[data-size=sm]{
810
799
  --rs-loader-size:var(--rs-loader-size-sm);
811
800
  --rs-loader-font-size:var(--rs-loader-font-size-sm);
812
801
  }
813
802
 
814
- .rs-loader-md{
803
+ .rs-loader[data-size=md]{
815
804
  --rs-loader-size:var(--rs-loader-size-md);
816
805
  --rs-loader-font-size:var(--rs-loader-font-size-md);
817
806
  }
818
807
 
819
- .rs-loader-lg{
808
+ .rs-loader[data-size=lg]{
820
809
  --rs-loader-size:var(--rs-loader-size-lg);
821
810
  --rs-loader-font-size:var(--rs-loader-font-size-lg);
822
811
  }
@@ -878,32 +867,32 @@ body{
878
867
  border-color:var(--rs-input-focus-border);
879
868
  }
880
869
  .rs-input:focus-visible{
881
- outline:2px solid var(--rs-color-focus-ring);
870
+ outline:2px solid var(--rs-focus-ring-color);
882
871
  outline-offset:-1px;
883
872
  }
884
873
  .rs-input:disabled{
885
874
  background-color:var(--rs-input-disabled-bg);
886
875
  color:var(--rs-text-disabled);
887
876
  }
888
- .rs-input.rs-input-xs{
877
+ .rs-input[data-size=xs]{
889
878
  --rs-input-font-size:var(--rs-input-font-size-xs);
890
879
  --rs-input-line-height:var(--rs-input-line-height-xs);
891
880
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
892
881
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
893
882
  }
894
- .rs-input.rs-input-sm{
883
+ .rs-input[data-size=sm]{
895
884
  --rs-input-font-size:var(--rs-input-font-size-sm);
896
885
  --rs-input-line-height:var(--rs-input-line-height-sm);
897
886
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
898
887
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
899
888
  }
900
- .rs-input.rs-input-md{
889
+ .rs-input[data-size=md]{
901
890
  --rs-input-font-size:var(--rs-input-font-size-md);
902
891
  --rs-input-line-height:var(--rs-input-line-height-md);
903
892
  --rs-input-padding-block:var(--rs-input-padding-block-md);
904
893
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
905
894
  }
906
- .rs-input.rs-input-lg{
895
+ .rs-input[data-size=lg]{
907
896
  --rs-input-font-size:var(--rs-input-font-size-lg);
908
897
  --rs-input-line-height:var(--rs-input-line-height-lg);
909
898
  --rs-input-padding-block:var(--rs-input-padding-block-lg);
@@ -943,25 +932,25 @@ body{
943
932
  border:1px solid var(--rs-border-primary);
944
933
  overflow:hidden;
945
934
  }
946
- .rs-input-group.rs-input-group-xs{
935
+ .rs-input-group[data-size=xs]{
947
936
  --rs-input-group-input-height:var(--rs-input-group-input-height-xs);
948
937
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-xs);
949
938
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-xs);
950
939
  --rs-input-group-font-size:var(--rs-input-group-font-size-xs);
951
940
  }
952
- .rs-input-group.rs-input-group-sm{
941
+ .rs-input-group[data-size=sm]{
953
942
  --rs-input-group-input-height:var(--rs-input-group-input-height-sm);
954
943
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-sm);
955
944
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-sm);
956
945
  --rs-input-group-font-size:var(--rs-input-group-font-size-sm);
957
946
  }
958
- .rs-input-group.rs-input-group-md{
947
+ .rs-input-group[data-size=md]{
959
948
  --rs-input-group-input-height:var(--rs-input-group-input-height-md);
960
949
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-md);
961
950
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-md);
962
951
  --rs-input-group-font-size:var(--rs-input-group-font-size-md);
963
952
  }
964
- .rs-input-group.rs-input-group-lg{
953
+ .rs-input-group[data-size=lg]{
965
954
  --rs-input-group-input-height:var(--rs-input-group-input-height-lg);
966
955
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-lg);
967
956
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-lg);
@@ -970,11 +959,11 @@ body{
970
959
  [data-theme=high-contrast] .rs-input-group, .rs-theme-high-contrast .rs-input-group{
971
960
  transition:none;
972
961
  }
973
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
962
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
974
963
  border-color:var(--rs-input-focus-border);
975
964
  }
976
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
977
- outline:2px solid var(--rs-color-focus-ring);
965
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
966
+ outline:2px solid var(--rs-focus-ring-color);
978
967
  outline-offset:-1px;
979
968
  }
980
969
  .rs-input-group .rs-input-group{
@@ -1009,23 +998,23 @@ body{
1009
998
  .rs-input-group > .rs-input-group-addon > .rs-icon{
1010
999
  font-size:inherit;
1011
1000
  }
1012
- .rs-input-group.rs-input-group-inside{
1001
+ .rs-input-group[data-inside=true]{
1013
1002
  width:var(--rs-input-group-width);
1014
1003
  align-items:center;
1015
1004
  background-color:var(--rs-input-bg);
1016
1005
  }
1017
- .rs-input-group.rs-input-group-inside .rs-input{
1006
+ .rs-input-group[data-inside=true] .rs-input{
1018
1007
  display:block;
1019
1008
  width:100%;
1020
1009
  border:none;
1021
1010
  outline:none;
1022
1011
  }
1023
- .rs-input-group.rs-input-group-inside .rs-input-group-btn,
1024
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
1012
+ .rs-input-group[data-inside=true] .rs-input-group-btn,
1013
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
1025
1014
  flex:0 0 auto;
1026
1015
  width:auto;
1027
1016
  }
1028
- .rs-input-group.rs-input-group-inside .rs-input-group-btn{
1017
+ .rs-input-group[data-inside=true] .rs-input-group-btn{
1029
1018
  border-radius:var(--rs-input-group-border-radius);
1030
1019
  height:calc(var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2);
1031
1020
  margin-inline:var(--rs-input-group-inside-btn-spacing);
@@ -1034,42 +1023,42 @@ body{
1034
1023
  background-color:transparent;
1035
1024
  color:inherit;
1036
1025
  }
1037
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:hover{
1026
+ .rs-input-group[data-inside=true] .rs-input-group-btn:hover{
1038
1027
  color:var(--rs-btn-subtle-hover-text);
1039
1028
  background-color:var(--rs-btn-subtle-hover-bg);
1040
1029
  }
1041
- .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{
1030
+ .rs-input-group[data-inside=true] .rs-input-group-btn:active, .rs-input-group[data-inside=true] .rs-input-group-btn[data-active=true]{
1042
1031
  color:var(--rs-btn-subtle-active-text);
1043
1032
  background-color:var(--rs-btn-subtle-active-bg);
1044
1033
  }
1045
- .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{
1034
+ .rs-input-group[data-inside=true] .rs-input-group-btn:disabled, .rs-input-group[data-inside=true] .rs-input-group-btn[data-disabled=true]{
1046
1035
  color:var(--rs-btn-subtle-disabled-text);
1047
1036
  background:none;
1048
1037
  }
1049
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:focus{
1038
+ .rs-input-group[data-inside=true] .rs-input-group-btn:focus{
1050
1039
  outline:none;
1051
1040
  }
1052
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
1041
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
1053
1042
  background:none;
1054
1043
  border:none;
1055
1044
  }
1056
- .rs-input-group.rs-input-group-inside .rs-input:not(:first-child),
1057
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:first-child) .rs-input{
1045
+ .rs-input-group[data-inside=true] .rs-input:not(:first-child),
1046
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:first-child) .rs-input{
1058
1047
  padding-inline-start:0;
1059
1048
  }
1060
- .rs-input-group.rs-input-group-inside .rs-input:not(:last-child),
1061
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:last-child) .rs-input{
1049
+ .rs-input-group[data-inside=true] .rs-input:not(:last-child),
1050
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:last-child) .rs-input{
1062
1051
  padding-inline-end:0;
1063
1052
  }
1064
1053
 
1065
- .rs-input-group.rs-input-group-disabled{
1054
+ .rs-input-group[data-disabled=true]{
1066
1055
  background-color:var(--rs-input-disabled-bg);
1067
1056
  color:var(--rs-text-disabled);
1068
1057
  cursor:not-allowed;
1069
1058
  }
1070
- .rs-input-group.rs-input-group-disabled .rs-input,
1071
- .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
1072
- .rs-input-group.rs-input-group-disabled .rs-input-group-addon{
1059
+ .rs-input-group[data-disabled=true] .rs-input,
1060
+ .rs-input-group[data-disabled=true] .rs-input-group-btn,
1061
+ .rs-input-group[data-disabled=true] .rs-input-group-addon{
1073
1062
  color:inherit;
1074
1063
  }
1075
1064
 
@@ -1089,16 +1078,16 @@ body{
1089
1078
  padding-inline:var(--rs-spacing);
1090
1079
  min-width:var(--rs-input-group-input-height);
1091
1080
  }
1092
- .rs-input-group-addon.rs-input-sm{
1081
+ .rs-input-group-addon[data-size=sm]{
1093
1082
  padding-block:var(--rs-spacing-block-sm);
1094
1083
  padding-inline:var(--rs-spacing-inline-sm);
1095
1084
  font-size:var(--rs-font-size-sm);
1096
1085
  }
1097
- .rs-input-group-addon.rs-input-xs{
1086
+ .rs-input-group-addon[data-size=xs]{
1098
1087
  padding:var(--rs-spacing-inline-xs);
1099
1088
  font-size:var(--rs-font-size-xs);
1100
1089
  }
1101
- .rs-input-group-addon.rs-input-lg{
1090
+ .rs-input-group-addon[data-size=lg]{
1102
1091
  padding-block:var(--rs-spacing-block-lg);
1103
1092
  padding-inline:var(--rs-spacing-inline-lg);
1104
1093
  font-size:var(--rs-font-size-md);
@@ -1219,7 +1208,7 @@ body{
1219
1208
  border-color:var(--rs-btn-default-border-color);
1220
1209
  }
1221
1210
  .rs-btn:focus-visible{
1222
- outline:2px solid var(--rs-color-focus-ring);
1211
+ outline:2px solid var(--rs-focus-ring-color);
1223
1212
  outline-offset:-1px;
1224
1213
  }
1225
1214
  .rs-btn:hover{
@@ -1227,16 +1216,16 @@ body{
1227
1216
  background-color:var(--rs-btn-default-hover-bg);
1228
1217
  text-decoration:none;
1229
1218
  }
1230
- .rs-btn:active, .rs-btn.rs-btn-active{
1219
+ .rs-btn:active, .rs-btn.rs-btn[data-active=true]{
1231
1220
  color:var(--rs-btn-default-active-text);
1232
1221
  background-color:var(--rs-btn-default-active-bg);
1233
1222
  }
1234
- .rs-btn:disabled, .rs-btn.rs-btn-disabled{
1223
+ .rs-btn:disabled, .rs-btn.rs-btn[data-disabled=true]{
1235
1224
  cursor:var(--rs-cursor-disabled);
1236
1225
  color:var(--rs-btn-default-disabled-text);
1237
1226
  background-color:var(--rs-btn-default-disabled-bg);
1238
1227
  }
1239
- [data-theme=high-contrast] .rs-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn-disabled, .rs-theme-high-contrast .rs-btn.rs-btn-disabled{
1228
+ [data-theme=high-contrast] .rs-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn.rs-btn[data-disabled=true]{
1240
1229
  border-color:var(--rs-btn-default-disabled-border-color);
1241
1230
  }
1242
1231
  .rs-btn{
@@ -1249,7 +1238,15 @@ body{
1249
1238
  mask-image:radial-gradient(white, black);
1250
1239
  }
1251
1240
  }
1252
- .rs-btn.rs-btn-lg{
1241
+ .rs-btn{
1242
+ --rs-btn-size:var(--rs-btn-size-md);
1243
+ --rs-btn-font-size:var(--rs-btn-font-size-md);
1244
+ --rs-btn-line-height:var(--rs-btn-line-height-md);
1245
+ --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
1246
+ --rs-btn-padding-block:var(--rs-btn-padding-block-md);
1247
+ --rs-btn-icon-size:var(--rs-btn-icon-size-md);
1248
+ }
1249
+ .rs-btn[data-size=lg]{
1253
1250
  --rs-btn-size:var(--rs-btn-size-lg);
1254
1251
  --rs-btn-font-size:var(--rs-btn-font-size-lg);
1255
1252
  --rs-btn-line-height:var(--rs-btn-line-height-lg);
@@ -1257,7 +1254,7 @@ body{
1257
1254
  --rs-btn-padding-block:var(--rs-btn-padding-block-lg);
1258
1255
  --rs-btn-icon-size:var(--rs-btn-icon-size-lg);
1259
1256
  }
1260
- .rs-btn.rs-btn-md{
1257
+ .rs-btn[data-size=md]{
1261
1258
  --rs-btn-size:var(--rs-btn-size-md);
1262
1259
  --rs-btn-font-size:var(--rs-btn-font-size-md);
1263
1260
  --rs-btn-line-height:var(--rs-btn-line-height-md);
@@ -1265,7 +1262,7 @@ body{
1265
1262
  --rs-btn-padding-block:var(--rs-btn-padding-block-md);
1266
1263
  --rs-btn-icon-size:var(--rs-btn-icon-size-md);
1267
1264
  }
1268
- .rs-btn.rs-btn-sm{
1265
+ .rs-btn[data-size=sm]{
1269
1266
  --rs-btn-size:var(--rs-btn-size-sm);
1270
1267
  --rs-btn-font-size:var(--rs-btn-font-size-sm);
1271
1268
  --rs-btn-line-height:var(--rs-btn-line-height-sm);
@@ -1273,7 +1270,7 @@ body{
1273
1270
  --rs-btn-padding-block:var(--rs-btn-padding-block-sm);
1274
1271
  --rs-btn-icon-size:var(--rs-btn-icon-size-sm);
1275
1272
  }
1276
- .rs-btn.rs-btn-xs{
1273
+ .rs-btn[data-size=xs]{
1277
1274
  --rs-btn-size:var(--rs-btn-size-xs);
1278
1275
  --rs-btn-font-size:var(--rs-btn-font-size-xs);
1279
1276
  --rs-btn-line-height:var(--rs-btn-line-height-xs);
@@ -1292,101 +1289,111 @@ body{
1292
1289
  margin-inline-start:var(--rs-btn-icon-gap);
1293
1290
  }
1294
1291
 
1295
- .rs-btn-primary{
1292
+ .rs-btn[data-appearance=primary]{
1296
1293
  color:var(--rs-btn-primary-text);
1297
1294
  background-color:var(--rs-btn-primary-bg);
1298
1295
  border-color:var(--rs-btn-primary-border-color);
1299
1296
  }
1300
- .rs-btn-primary:hover{
1297
+ .rs-btn[data-appearance=primary]:hover{
1301
1298
  color:var(--rs-btn-primary-text);
1302
1299
  background-color:var(--rs-btn-primary-hover-bg);
1303
1300
  }
1304
- .rs-btn-primary:active, .rs-btn-primary.rs-btn-active{
1301
+ .rs-btn[data-appearance=primary]:active, .rs-btn[data-appearance=primary].rs-btn[data-active=true]{
1305
1302
  color:var(--rs-btn-primary-text);
1306
1303
  background-color:var(--rs-btn-primary-active-bg);
1307
1304
  }
1308
- .rs-btn-primary:disabled, .rs-btn-primary.rs-btn-disabled{
1305
+ .rs-btn[data-appearance=primary]:disabled, .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
1309
1306
  color:var(--rs-btn-primary-text);
1310
1307
  background-color:var(--rs-btn-primary-bg);
1311
1308
  opacity:0.3;
1312
1309
  }
1313
- [data-theme=high-contrast] .rs-btn-primary:disabled, .rs-theme-high-contrast .rs-btn-primary:disabled, [data-theme=high-contrast] .rs-btn-primary.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled{
1310
+ [data-theme=high-contrast] .rs-btn[data-appearance=primary]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=primary]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=primary].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
1314
1311
  border-color:var(--rs-btn-default-disabled-border-color);
1315
1312
  }
1316
1313
 
1314
+ .rs-btn[data-appearance=subtle],
1317
1315
  .rs-btn-subtle{
1318
1316
  color:var(--rs-btn-subtle-text);
1319
1317
  background-color:transparent;
1320
1318
  }
1319
+ .rs-btn[data-appearance=subtle]:hover,
1321
1320
  .rs-btn-subtle:hover{
1322
1321
  color:var(--rs-btn-subtle-hover-text);
1323
1322
  background-color:var(--rs-btn-subtle-hover-bg);
1324
1323
  }
1325
- .rs-btn-subtle:active, .rs-btn-subtle.rs-btn-active{
1324
+ .rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
1325
+ .rs-btn-subtle:active,
1326
+ .rs-btn-subtle.rs-btn[data-active=true]{
1326
1327
  color:var(--rs-btn-subtle-active-text);
1327
1328
  background-color:var(--rs-btn-subtle-active-bg);
1328
1329
  }
1329
- .rs-btn-subtle:disabled, .rs-btn-subtle.rs-btn-disabled{
1330
+ .rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
1331
+ .rs-btn-subtle:disabled,
1332
+ .rs-btn-subtle.rs-btn[data-disabled=true]{
1330
1333
  color:var(--rs-btn-subtle-disabled-text);
1331
1334
  background:none;
1332
1335
  }
1333
- [data-theme=high-contrast] .rs-btn-subtle:disabled, .rs-theme-high-contrast .rs-btn-subtle:disabled, [data-theme=high-contrast] .rs-btn-subtle.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled{
1336
+ [data-theme=high-contrast] .rs-btn[data-appearance=subtle]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=subtle]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
1337
+ [data-theme=high-contrast] .rs-btn-subtle:disabled,
1338
+ .rs-theme-high-contrast .rs-btn-subtle:disabled,
1339
+ [data-theme=high-contrast] .rs-btn-subtle.rs-btn[data-disabled=true],
1340
+ .rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true]{
1334
1341
  border-color:var(--rs-btn-default-disabled-border-color);
1335
1342
  }
1336
1343
 
1337
- .rs-btn-link{
1344
+ .rs-btn[data-appearance=link]{
1338
1345
  color:var(--rs-btn-link-text);
1339
1346
  background-color:transparent;
1340
1347
  }
1341
- .rs-btn-link:hover{
1348
+ .rs-btn[data-appearance=link]:hover{
1342
1349
  color:var(--rs-btn-link-hover-text);
1343
1350
  background-color:transparent;
1344
1351
  -webkit-text-decoration:var(--rs-link-hover-decoration);
1345
1352
  text-decoration:var(--rs-link-hover-decoration);
1346
1353
  }
1347
- .rs-btn-link:active, .rs-btn-link.rs-btn-active{
1354
+ .rs-btn[data-appearance=link]:active, .rs-btn[data-appearance=link].rs-btn[data-active=true]{
1348
1355
  color:var(--rs-btn-link-active-text);
1349
1356
  background-color:transparent;
1350
1357
  }
1351
- .rs-btn-link:disabled, .rs-btn-link.rs-btn-disabled{
1358
+ .rs-btn[data-appearance=link]:disabled, .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
1352
1359
  color:var(--rs-btn-link-hover-text);
1353
1360
  background-color:transparent;
1354
1361
  text-decoration:none;
1355
1362
  opacity:0.3;
1356
1363
  }
1357
- [data-theme=high-contrast] .rs-btn-link:disabled, .rs-theme-high-contrast .rs-btn-link:disabled, [data-theme=high-contrast] .rs-btn-link.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled{
1364
+ [data-theme=high-contrast] .rs-btn[data-appearance=link]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=link]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=link].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
1358
1365
  border-color:var(--rs-btn-default-disabled-border-color);
1359
1366
  }
1360
1367
 
1361
- .rs-btn-ghost{
1368
+ .rs-btn[data-appearance=ghost]{
1362
1369
  color:var(--rs-btn-ghost-text);
1363
1370
  background-color:transparent;
1364
1371
  border:var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
1365
1372
  padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
1366
1373
  }
1367
- .rs-btn-ghost:hover{
1374
+ .rs-btn[data-appearance=ghost]:hover{
1368
1375
  color:var(--rs-btn-ghost-hover-text);
1369
1376
  background-color:transparent;
1370
1377
  border-color:var(--rs-btn-ghost-hover-border);
1371
1378
  box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
1372
1379
  }
1373
- .rs-btn-ghost:active, .rs-btn-ghost.rs-btn-active{
1380
+ .rs-btn[data-appearance=ghost]:active, .rs-btn[data-appearance=ghost].rs-btn[data-active=true]{
1374
1381
  color:var(--rs-btn-ghost-active-text);
1375
1382
  background-color:transparent;
1376
1383
  border-color:var(--rs-btn-ghost-active-border);
1377
1384
  }
1378
- .rs-btn-ghost:disabled, .rs-btn-ghost.rs-btn-disabled{
1385
+ .rs-btn[data-appearance=ghost]:disabled, .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
1379
1386
  color:var(--rs-btn-ghost-text);
1380
1387
  background-color:transparent;
1381
1388
  opacity:0.3;
1382
1389
  border-color:var(--rs-btn-ghost-border);
1383
1390
  box-shadow:var(--rs-shadow-none);
1384
1391
  }
1385
- [data-theme=high-contrast] .rs-btn-ghost:disabled, .rs-theme-high-contrast .rs-btn-ghost:disabled, [data-theme=high-contrast] .rs-btn-ghost.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled{
1392
+ [data-theme=high-contrast] .rs-btn[data-appearance=ghost]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=ghost]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
1386
1393
  border-color:var(--rs-btn-default-disabled-border-color);
1387
1394
  }
1388
1395
 
1389
- .rs-btn-red{
1396
+ .rs-btn[data-color=red]{
1390
1397
  --rs-btn-primary-bg:var(--rs-red-500);
1391
1398
  --rs-btn-primary-hover-bg:var(--rs-red-700);
1392
1399
  --rs-btn-primary-active-bg:var(--rs-red-800);
@@ -1408,7 +1415,7 @@ body{
1408
1415
  --rs-iconbtn-primary-activated-addon:var(--rs-red-800);
1409
1416
  --rs-iconbtn-primary-pressed-addon:var(--rs-red-900);
1410
1417
  }
1411
- [data-theme=dark] .rs-btn-red, .rs-theme-dark .rs-btn-red{
1418
+ [data-theme=dark] .rs-btn[data-color=red], .rs-theme-dark .rs-btn[data-color=red]{
1412
1419
  --rs-btn-primary-bg:var(--rs-red-700);
1413
1420
  --rs-btn-primary-hover-bg:var(--rs-red-500);
1414
1421
  --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -1430,7 +1437,7 @@ body{
1430
1437
  --rs-iconbtn-primary-activated-addon:var(--rs-red-400);
1431
1438
  --rs-iconbtn-primary-pressed-addon:var(--rs-red-300);
1432
1439
  }
1433
- [data-theme=high-contrast] .rs-btn-red, .rs-theme-high-contrast .rs-btn-red{
1440
+ [data-theme=high-contrast] .rs-btn[data-color=red], .rs-theme-high-contrast .rs-btn[data-color=red]{
1434
1441
  --rs-btn-primary-bg:var(--rs-red-700);
1435
1442
  --rs-btn-primary-hover-bg:var(--rs-red-600);
1436
1443
  --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -1449,7 +1456,7 @@ body{
1449
1456
  --rs-btn-link-active-text:var(--rs-red-200);
1450
1457
  }
1451
1458
 
1452
- .rs-btn-orange{
1459
+ .rs-btn[data-color=orange]{
1453
1460
  --rs-btn-primary-bg:var(--rs-orange-500);
1454
1461
  --rs-btn-primary-hover-bg:var(--rs-orange-700);
1455
1462
  --rs-btn-primary-active-bg:var(--rs-orange-800);
@@ -1471,7 +1478,7 @@ body{
1471
1478
  --rs-iconbtn-primary-activated-addon:var(--rs-orange-800);
1472
1479
  --rs-iconbtn-primary-pressed-addon:var(--rs-orange-900);
1473
1480
  }
1474
- [data-theme=dark] .rs-btn-orange, .rs-theme-dark .rs-btn-orange{
1481
+ [data-theme=dark] .rs-btn[data-color=orange], .rs-theme-dark .rs-btn[data-color=orange]{
1475
1482
  --rs-btn-primary-bg:var(--rs-orange-700);
1476
1483
  --rs-btn-primary-hover-bg:var(--rs-orange-500);
1477
1484
  --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -1493,7 +1500,7 @@ body{
1493
1500
  --rs-iconbtn-primary-activated-addon:var(--rs-orange-400);
1494
1501
  --rs-iconbtn-primary-pressed-addon:var(--rs-orange-300);
1495
1502
  }
1496
- [data-theme=high-contrast] .rs-btn-orange, .rs-theme-high-contrast .rs-btn-orange{
1503
+ [data-theme=high-contrast] .rs-btn[data-color=orange], .rs-theme-high-contrast .rs-btn[data-color=orange]{
1497
1504
  --rs-btn-primary-bg:var(--rs-orange-700);
1498
1505
  --rs-btn-primary-hover-bg:var(--rs-orange-600);
1499
1506
  --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -1512,7 +1519,7 @@ body{
1512
1519
  --rs-btn-link-active-text:var(--rs-orange-200);
1513
1520
  }
1514
1521
 
1515
- .rs-btn-yellow{
1522
+ .rs-btn[data-color=yellow]{
1516
1523
  --rs-btn-primary-bg:var(--rs-yellow-500);
1517
1524
  --rs-btn-primary-hover-bg:var(--rs-yellow-700);
1518
1525
  --rs-btn-primary-active-bg:var(--rs-yellow-800);
@@ -1534,7 +1541,7 @@ body{
1534
1541
  --rs-iconbtn-primary-activated-addon:var(--rs-yellow-800);
1535
1542
  --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-900);
1536
1543
  }
1537
- [data-theme=dark] .rs-btn-yellow, .rs-theme-dark .rs-btn-yellow{
1544
+ [data-theme=dark] .rs-btn[data-color=yellow], .rs-theme-dark .rs-btn[data-color=yellow]{
1538
1545
  --rs-btn-primary-bg:var(--rs-yellow-700);
1539
1546
  --rs-btn-primary-hover-bg:var(--rs-yellow-500);
1540
1547
  --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1556,7 +1563,7 @@ body{
1556
1563
  --rs-iconbtn-primary-activated-addon:var(--rs-yellow-400);
1557
1564
  --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-300);
1558
1565
  }
1559
- [data-theme=high-contrast] .rs-btn-yellow, .rs-theme-high-contrast .rs-btn-yellow{
1566
+ [data-theme=high-contrast] .rs-btn[data-color=yellow], .rs-theme-high-contrast .rs-btn[data-color=yellow]{
1560
1567
  --rs-btn-primary-bg:var(--rs-yellow-700);
1561
1568
  --rs-btn-primary-hover-bg:var(--rs-yellow-600);
1562
1569
  --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1575,7 +1582,7 @@ body{
1575
1582
  --rs-btn-link-active-text:var(--rs-yellow-200);
1576
1583
  }
1577
1584
 
1578
- .rs-btn-green{
1585
+ .rs-btn[data-color=green]{
1579
1586
  --rs-btn-primary-bg:var(--rs-green-500);
1580
1587
  --rs-btn-primary-hover-bg:var(--rs-green-700);
1581
1588
  --rs-btn-primary-active-bg:var(--rs-green-800);
@@ -1597,7 +1604,7 @@ body{
1597
1604
  --rs-iconbtn-primary-activated-addon:var(--rs-green-800);
1598
1605
  --rs-iconbtn-primary-pressed-addon:var(--rs-green-900);
1599
1606
  }
1600
- [data-theme=dark] .rs-btn-green, .rs-theme-dark .rs-btn-green{
1607
+ [data-theme=dark] .rs-btn[data-color=green], .rs-theme-dark .rs-btn[data-color=green]{
1601
1608
  --rs-btn-primary-bg:var(--rs-green-700);
1602
1609
  --rs-btn-primary-hover-bg:var(--rs-green-500);
1603
1610
  --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1619,7 +1626,7 @@ body{
1619
1626
  --rs-iconbtn-primary-activated-addon:var(--rs-green-400);
1620
1627
  --rs-iconbtn-primary-pressed-addon:var(--rs-green-300);
1621
1628
  }
1622
- [data-theme=high-contrast] .rs-btn-green, .rs-theme-high-contrast .rs-btn-green{
1629
+ [data-theme=high-contrast] .rs-btn[data-color=green], .rs-theme-high-contrast .rs-btn[data-color=green]{
1623
1630
  --rs-btn-primary-bg:var(--rs-green-700);
1624
1631
  --rs-btn-primary-hover-bg:var(--rs-green-600);
1625
1632
  --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1638,7 +1645,7 @@ body{
1638
1645
  --rs-btn-link-active-text:var(--rs-green-200);
1639
1646
  }
1640
1647
 
1641
- .rs-btn-cyan{
1648
+ .rs-btn[data-color=cyan]{
1642
1649
  --rs-btn-primary-bg:var(--rs-cyan-500);
1643
1650
  --rs-btn-primary-hover-bg:var(--rs-cyan-700);
1644
1651
  --rs-btn-primary-active-bg:var(--rs-cyan-800);
@@ -1660,7 +1667,7 @@ body{
1660
1667
  --rs-iconbtn-primary-activated-addon:var(--rs-cyan-800);
1661
1668
  --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-900);
1662
1669
  }
1663
- [data-theme=dark] .rs-btn-cyan, .rs-theme-dark .rs-btn-cyan{
1670
+ [data-theme=dark] .rs-btn[data-color=cyan], .rs-theme-dark .rs-btn[data-color=cyan]{
1664
1671
  --rs-btn-primary-bg:var(--rs-cyan-700);
1665
1672
  --rs-btn-primary-hover-bg:var(--rs-cyan-500);
1666
1673
  --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1682,7 +1689,7 @@ body{
1682
1689
  --rs-iconbtn-primary-activated-addon:var(--rs-cyan-400);
1683
1690
  --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-300);
1684
1691
  }
1685
- [data-theme=high-contrast] .rs-btn-cyan, .rs-theme-high-contrast .rs-btn-cyan{
1692
+ [data-theme=high-contrast] .rs-btn[data-color=cyan], .rs-theme-high-contrast .rs-btn[data-color=cyan]{
1686
1693
  --rs-btn-primary-bg:var(--rs-cyan-700);
1687
1694
  --rs-btn-primary-hover-bg:var(--rs-cyan-600);
1688
1695
  --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1701,7 +1708,7 @@ body{
1701
1708
  --rs-btn-link-active-text:var(--rs-cyan-200);
1702
1709
  }
1703
1710
 
1704
- .rs-btn-blue{
1711
+ .rs-btn[data-color=blue]{
1705
1712
  --rs-btn-primary-bg:var(--rs-blue-500);
1706
1713
  --rs-btn-primary-hover-bg:var(--rs-blue-700);
1707
1714
  --rs-btn-primary-active-bg:var(--rs-blue-800);
@@ -1723,7 +1730,7 @@ body{
1723
1730
  --rs-iconbtn-primary-activated-addon:var(--rs-blue-800);
1724
1731
  --rs-iconbtn-primary-pressed-addon:var(--rs-blue-900);
1725
1732
  }
1726
- [data-theme=dark] .rs-btn-blue, .rs-theme-dark .rs-btn-blue{
1733
+ [data-theme=dark] .rs-btn[data-color=blue], .rs-theme-dark .rs-btn[data-color=blue]{
1727
1734
  --rs-btn-primary-bg:var(--rs-blue-700);
1728
1735
  --rs-btn-primary-hover-bg:var(--rs-blue-500);
1729
1736
  --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1745,7 +1752,7 @@ body{
1745
1752
  --rs-iconbtn-primary-activated-addon:var(--rs-blue-400);
1746
1753
  --rs-iconbtn-primary-pressed-addon:var(--rs-blue-300);
1747
1754
  }
1748
- [data-theme=high-contrast] .rs-btn-blue, .rs-theme-high-contrast .rs-btn-blue{
1755
+ [data-theme=high-contrast] .rs-btn[data-color=blue], .rs-theme-high-contrast .rs-btn[data-color=blue]{
1749
1756
  --rs-btn-primary-bg:var(--rs-blue-700);
1750
1757
  --rs-btn-primary-hover-bg:var(--rs-blue-600);
1751
1758
  --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1764,7 +1771,7 @@ body{
1764
1771
  --rs-btn-link-active-text:var(--rs-blue-200);
1765
1772
  }
1766
1773
 
1767
- .rs-btn-violet{
1774
+ .rs-btn[data-color=violet]{
1768
1775
  --rs-btn-primary-bg:var(--rs-violet-500);
1769
1776
  --rs-btn-primary-hover-bg:var(--rs-violet-700);
1770
1777
  --rs-btn-primary-active-bg:var(--rs-violet-800);
@@ -1786,7 +1793,7 @@ body{
1786
1793
  --rs-iconbtn-primary-activated-addon:var(--rs-violet-800);
1787
1794
  --rs-iconbtn-primary-pressed-addon:var(--rs-violet-900);
1788
1795
  }
1789
- [data-theme=dark] .rs-btn-violet, .rs-theme-dark .rs-btn-violet{
1796
+ [data-theme=dark] .rs-btn[data-color=violet], .rs-theme-dark .rs-btn[data-color=violet]{
1790
1797
  --rs-btn-primary-bg:var(--rs-violet-700);
1791
1798
  --rs-btn-primary-hover-bg:var(--rs-violet-500);
1792
1799
  --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1808,7 +1815,7 @@ body{
1808
1815
  --rs-iconbtn-primary-activated-addon:var(--rs-violet-400);
1809
1816
  --rs-iconbtn-primary-pressed-addon:var(--rs-violet-300);
1810
1817
  }
1811
- [data-theme=high-contrast] .rs-btn-violet, .rs-theme-high-contrast .rs-btn-violet{
1818
+ [data-theme=high-contrast] .rs-btn[data-color=violet], .rs-theme-high-contrast .rs-btn[data-color=violet]{
1812
1819
  --rs-btn-primary-bg:var(--rs-violet-700);
1813
1820
  --rs-btn-primary-hover-bg:var(--rs-violet-600);
1814
1821
  --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1827,20 +1834,20 @@ body{
1827
1834
  --rs-btn-link-active-text:var(--rs-violet-200);
1828
1835
  }
1829
1836
 
1830
- .rs-btn-block{
1837
+ .rs-btn[data-block=true]{
1831
1838
  width:100%;
1832
1839
  }
1833
- .rs-btn-block + .rs-btn-block{
1840
+ .rs-btn[data-block=true] + .rs-btn[data-block=true]{
1834
1841
  margin-top:5px;
1835
1842
  }
1836
1843
 
1837
- .rs-btn-loading{
1844
+ .rs-btn[data-loading=true]{
1838
1845
  color:transparent !important;
1839
1846
  position:relative;
1840
1847
  cursor:default;
1841
1848
  pointer-events:none;
1842
1849
  }
1843
- .rs-btn-loading > .rs-btn-spin::before, .rs-btn-loading > .rs-btn-spin::after{
1850
+ .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-loading=true] > .rs-btn-spin::after{
1844
1851
  content:"";
1845
1852
  position:absolute;
1846
1853
  width:var(--rs-btn-loading-spin-default-diameter);
@@ -1853,29 +1860,29 @@ body{
1853
1860
  border-radius:var(--rs-radius-full);
1854
1861
  z-index:1;
1855
1862
  }
1856
- .rs-btn-xs .rs-btn-loading > .rs-btn-spin::before, .rs-btn-xs .rs-btn-loading > .rs-btn-spin::after{
1863
+ .rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::after{
1857
1864
  width:var(--rs-btn-loading-spin-xs-diameter);
1858
1865
  height:var(--rs-btn-loading-spin-xs-diameter);
1859
1866
  }
1860
- .rs-btn-loading > .rs-btn-spin::before{
1867
+ .rs-btn[data-loading=true] > .rs-btn-spin::before{
1861
1868
  border:var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
1862
1869
  }
1863
- .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
1870
+ .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
1864
1871
  border-color:rgba(248, 247, 250, 0.3);
1865
1872
  }
1866
- [data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
1873
+ [data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
1867
1874
  border-color:var(--rs-loader-ring-inverse);
1868
1875
  }
1869
- .rs-btn-loading > .rs-btn-spin::after{
1876
+ .rs-btn[data-loading=true] > .rs-btn-spin::after{
1870
1877
  border-width:var(--rs-btn-loading-spin-ring-wide);
1871
1878
  border-color:var(--rs-loader-rotor) transparent transparent;
1872
1879
  border-style:solid;
1873
1880
  animation:buttonSpin 0.6s infinite linear;
1874
1881
  }
1875
- .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
1882
+ .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
1876
1883
  border-top-color:#fff;
1877
1884
  }
1878
- [data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
1885
+ [data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
1879
1886
  border-top-color:var(--rs-loader-rotor-inverse);
1880
1887
  }
1881
1888
  @keyframes buttonSpin{
@@ -1895,14 +1902,14 @@ body{
1895
1902
  font-size:var(--rs-btn-icon-size);
1896
1903
  vertical-align:bottom;
1897
1904
  }
1898
- .rs-btn-icon:not(.rs-btn-icon-with-text){
1905
+ .rs-btn-icon:not([data-with-text]){
1899
1906
  width:var(--rs-btn-size);
1900
1907
  }
1901
- .rs-btn-icon.rs-btn-icon-circle{
1908
+ .rs-btn-icon[data-shape=circle]{
1902
1909
  border-radius:var(--rs-radius-full);
1903
1910
  }
1904
1911
 
1905
- .rs-btn-icon-with-text > .rs-icon{
1912
+ .rs-btn-icon[data-with-text] > .rs-icon{
1906
1913
  position:absolute;
1907
1914
  top:0;
1908
1915
  display:block;
@@ -1912,45 +1919,45 @@ body{
1912
1919
  height:var(--rs-btn-size);
1913
1920
  padding:calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
1914
1921
  }
1915
- .rs-btn-icon-with-text.rs-btn-icon-placement-left{
1922
+ .rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]){
1916
1923
  padding-inline-start:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
1917
1924
  }
1918
- .rs-btn-icon-with-text.rs-btn-icon-placement-left > .rs-icon{
1925
+ .rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]) > .rs-icon{
1919
1926
  inset-inline-start:0;
1920
1927
  border-right-width:1px;
1921
1928
  }
1922
- .rs-btn-icon-with-text.rs-btn-icon-placement-right{
1929
+ .rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]){
1923
1930
  padding-inline-end:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
1924
1931
  }
1925
- .rs-btn-icon-with-text.rs-btn-icon-placement-right > .rs-icon{
1932
+ .rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]) > .rs-icon{
1926
1933
  inset-inline-end:0;
1927
1934
  }
1928
- .rs-btn-icon-with-text:hover > .rs-icon{
1935
+ .rs-btn-icon[data-with-text]:hover > .rs-icon{
1929
1936
  background-color:var(--rs-iconbtn-activated-addon);
1930
1937
  }
1931
- .rs-btn-icon-with-text:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-active > .rs-icon{
1938
+ .rs-btn-icon[data-with-text]:active > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-active=true] > .rs-icon{
1932
1939
  background-color:var(--rs-iconbtn-pressed-addon);
1933
1940
  }
1934
- .rs-btn-icon-with-text:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-disabled > .rs-icon{
1941
+ .rs-btn-icon[data-with-text]:disabled > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-disabled=true] > .rs-icon{
1935
1942
  background-color:var(--rs-iconbtn-addon);
1936
1943
  }
1937
- [data-theme=high-contrast] .rs-btn-icon-with-text:disabled, .rs-theme-high-contrast .rs-btn-icon-with-text:disabled, [data-theme=high-contrast] .rs-btn-icon-with-text.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-disabled{
1944
+ [data-theme=high-contrast] .rs-btn-icon[data-with-text]:disabled, .rs-theme-high-contrast .rs-btn-icon[data-with-text]:disabled, [data-theme=high-contrast] .rs-btn-icon[data-with-text].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn-icon[data-with-text].rs-btn[data-disabled=true]{
1938
1945
  border-color:var(--rs-btn-default-disabled-border-color);
1939
1946
  }
1940
1947
 
1941
- .rs-btn-icon-with-text.rs-btn-primary > .rs-icon{
1948
+ .rs-btn-icon[data-with-text][data-appearance=primary] > .rs-icon{
1942
1949
  background-color:var(--rs-iconbtn-primary-addon);
1943
1950
  }
1944
- .rs-btn-icon-with-text.rs-btn-primary:hover > .rs-icon{
1951
+ .rs-btn-icon[data-with-text][data-appearance=primary]:hover > .rs-icon{
1945
1952
  background-color:var(--rs-iconbtn-primary-activated-addon);
1946
1953
  }
1947
- .rs-btn-icon-with-text.rs-btn-primary:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-active > .rs-icon{
1954
+ .rs-btn-icon[data-with-text][data-appearance=primary]:active > .rs-icon, .rs-btn-icon[data-with-text][data-appearance=primary].rs-btn[data-active=true] > .rs-icon{
1948
1955
  background-color:var(--rs-iconbtn-primary-pressed-addon);
1949
1956
  }
1950
- .rs-btn-icon-with-text.rs-btn-primary:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled > .rs-icon{
1957
+ .rs-btn-icon[data-with-text][data-appearance=primary]:disabled > .rs-icon, .rs-btn-icon[data-with-text][data-appearance=primary].rs-btn[data-disabled=true] > .rs-icon{
1951
1958
  background-color:var(--rs-iconbtn-primary-addon);
1952
1959
  }
1953
- [data-theme=high-contrast] .rs-btn-icon-with-text.rs-btn-primary:disabled, .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-primary:disabled, [data-theme=high-contrast] .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled{
1960
+ [data-theme=high-contrast] .rs-btn-icon[data-with-text][data-appearance=primary]:disabled, .rs-theme-high-contrast .rs-btn-icon[data-with-text][data-appearance=primary]:disabled, [data-theme=high-contrast] .rs-btn-icon[data-with-text][data-appearance=primary].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn-icon[data-with-text][data-appearance=primary].rs-btn[data-disabled=true]{
1954
1961
  border-color:var(--rs-btn-default-disabled-border-color);
1955
1962
  }
1956
1963
 
@@ -2028,7 +2035,7 @@ body{
2028
2035
  }
2029
2036
  .rs-picker-toggle-active, .rs-picker.rs-picker-focused{
2030
2037
  --rs-picker-toggle-border-color:var(--rs-input-focus-border);
2031
- outline:2px solid var(--rs-color-focus-ring);
2038
+ outline:2px solid var(--rs-focus-ring-color);
2032
2039
  outline-offset:-1px;
2033
2040
  }
2034
2041
  .rs-picker-label.rs-input-group-addon{
@@ -2189,18 +2196,18 @@ body{
2189
2196
  background-color:var(--rs-input-bg);
2190
2197
  outline:none;
2191
2198
  }
2192
- .rs-picker-toggle.rs-btn-lg .rs-picker-toggle-textbox{
2199
+ .rs-picker-toggle-textbox:where([readonly]){
2200
+ opacity:0;
2201
+ }
2202
+ .rs-picker-toggle:where([data-size=lg]) .rs-picker-toggle-textbox{
2193
2203
  padding-inline-start:14px;
2194
2204
  }
2195
- .rs-picker-toggle.rs-btn-sm .rs-picker-toggle-textbox{
2205
+ .rs-picker-toggle:where([data-size=sm]) .rs-picker-toggle-textbox{
2196
2206
  padding-inline-start:8px;
2197
2207
  }
2198
- .rs-picker-toggle.rs-btn-xs .rs-picker-toggle-textbox{
2208
+ .rs-picker-toggle:where([data-size=xs]) .rs-picker-toggle-textbox{
2199
2209
  padding-inline-start:6px;
2200
2210
  }
2201
- .rs-picker-toggle-read-only{
2202
- opacity:0;
2203
- }
2204
2211
  .rs-picker-toggle .rs-picker[data-variant=default], .rs-picker-toggle{
2205
2212
  transition:var(--rs-picker-transition);
2206
2213
  }
@@ -2215,22 +2222,10 @@ body{
2215
2222
  background-color:transparent;
2216
2223
  transition:none;
2217
2224
  }
2218
- .rs-picker[data-variant=subtle] .rs-picker-toggle:hover{
2225
+ .rs-picker[data-variant=subtle] .rs-picker-toggle:hover,.rs-picker[data-variant=subtle] .rs-picker-toggle-active{
2219
2226
  color:var(--rs-btn-subtle-hover-text);
2220
2227
  background-color:var(--rs-btn-subtle-hover-bg);
2221
2228
  }
2222
- .rs-picker[data-variant=subtle] .rs-picker-toggle:active, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-active{
2223
- color:var(--rs-btn-subtle-active-text);
2224
- background-color:var(--rs-btn-subtle-active-bg);
2225
- }
2226
- .rs-picker[data-variant=subtle] .rs-picker-toggle:disabled, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-disabled{
2227
- color:var(--rs-btn-subtle-disabled-text);
2228
- background:none;
2229
- }
2230
- .rs-picker[data-variant=subtle] .rs-picker-toggle-active{
2231
- background-color:var(--rs-btn-subtle-hover-bg);
2232
- color:var(--rs-btn-subtle-hover-text);
2233
- }
2234
2229
  .rs-picker-toggle[data-size=lg] .rs-picker-clean .rs-icon{
2235
2230
  width:16px;
2236
2231
  height:16px;
@@ -2304,7 +2299,7 @@ body{
2304
2299
  color:var(--rs-listbox-option-hover-text);
2305
2300
  }
2306
2301
  [data-theme=high-contrast] .rs-check-item:not(.rs-checkbox-disabled):hover, .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover, [data-theme=high-contrast] .rs-check-item:focus, .rs-theme-high-contrast .rs-check-item:focus, [data-theme=high-contrast] .rs-check-item.rs-check-item-focus, .rs-theme-high-contrast .rs-check-item.rs-check-item-focus{
2307
- outline:2px solid var(--rs-color-focus-ring);
2302
+ outline:2px solid var(--rs-focus-ring-color);
2308
2303
  outline-offset:-1px;
2309
2304
  outline-offset:-3px;
2310
2305
  outline-width:2px;
@@ -2404,7 +2399,7 @@ body{
2404
2399
  color:var(--rs-listbox-option-hover-text);
2405
2400
  }
2406
2401
  [data-theme=high-contrast] .rs-picker-select-menu-item:hover, .rs-theme-high-contrast .rs-picker-select-menu-item:hover, [data-theme=high-contrast] .rs-picker-select-menu-item:focus, .rs-theme-high-contrast .rs-picker-select-menu-item:focus, [data-theme=high-contrast] .rs-picker-select-menu-item.rs-picker-select-menu-item-focus, .rs-theme-high-contrast .rs-picker-select-menu-item.rs-picker-select-menu-item-focus{
2407
- outline:2px solid var(--rs-color-focus-ring);
2402
+ outline:2px solid var(--rs-focus-ring-color);
2408
2403
  outline-offset:-1px;
2409
2404
  outline-offset:-3px;
2410
2405
  outline-width:2px;