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);
@@ -520,7 +518,7 @@ body{
520
518
  --rs-ripple-bg:rgb(0 0 0 / 20%);
521
519
  --rs-zindex-dropdown:5;
522
520
  --rs-zindex-picker-toggle:5;
523
- --rs-zindex-picker-popup:calc(var(--rs-zindex-picker-toggle) + 2);
521
+ --rs-zindex-picker-popup:7;
524
522
  --rs-zindex-modal:1050;
525
523
  --rs-zindex-drawer:1050;
526
524
  }
@@ -636,7 +634,7 @@ body{
636
634
  --rs-btn-icon-gap:5px;
637
635
  }
638
636
 
639
- .rs-btn, .rs-pagination-btn{
637
+ .rs-btn{
640
638
  display:inline-flex;
641
639
  align-items:center;
642
640
  justify-content:center;
@@ -663,43 +661,51 @@ body{
663
661
  padding-inline:var(--rs-btn-padding-inline);
664
662
  padding-block:var(--rs-btn-padding-block);
665
663
  }
666
- [data-theme=high-contrast] .rs-btn, [data-theme=high-contrast] .rs-pagination-btn, .rs-theme-high-contrast .rs-btn, .rs-theme-high-contrast .rs-pagination-btn{
664
+ [data-theme=high-contrast] .rs-btn, .rs-theme-high-contrast .rs-btn{
667
665
  transition:none;
668
666
  border-width:1px;
669
667
  border-color:var(--rs-btn-default-border-color);
670
668
  }
671
- .rs-btn:focus-visible, .rs-pagination-btn:focus-visible{
672
- outline:2px solid var(--rs-color-focus-ring);
669
+ .rs-btn:focus-visible{
670
+ outline:2px solid var(--rs-focus-ring-color);
673
671
  outline-offset:-1px;
674
672
  }
675
- .rs-btn:hover, .rs-pagination-btn:hover{
673
+ .rs-btn:hover{
676
674
  color:var(--rs-btn-default-hover-text);
677
675
  background-color:var(--rs-btn-default-hover-bg);
678
676
  text-decoration:none;
679
677
  }
680
- .rs-btn:active, .rs-pagination-btn:active, .rs-btn.rs-btn-active, .rs-btn-active.rs-pagination-btn{
678
+ .rs-btn:active, .rs-btn.rs-btn[data-active=true]{
681
679
  color:var(--rs-btn-default-active-text);
682
680
  background-color:var(--rs-btn-default-active-bg);
683
681
  }
684
- .rs-btn:disabled, .rs-pagination-btn:disabled, .rs-btn.rs-btn-disabled, .rs-btn-disabled.rs-pagination-btn{
682
+ .rs-btn:disabled, .rs-btn.rs-btn[data-disabled=true]{
685
683
  cursor:var(--rs-cursor-disabled);
686
684
  color:var(--rs-btn-default-disabled-text);
687
685
  background-color:var(--rs-btn-default-disabled-bg);
688
686
  }
689
- [data-theme=high-contrast] .rs-btn:disabled, [data-theme=high-contrast] .rs-pagination-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, .rs-theme-high-contrast .rs-pagination-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn-disabled, [data-theme=high-contrast] .rs-btn-disabled.rs-pagination-btn, .rs-theme-high-contrast .rs-btn.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-disabled.rs-pagination-btn{
687
+ [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]{
690
688
  border-color:var(--rs-btn-default-disabled-border-color);
691
689
  }
692
- .rs-btn, .rs-pagination-btn{
690
+ .rs-btn{
693
691
  position:relative;
694
692
  overflow:hidden;
695
693
  }
696
694
  @media not all and (min-resolution: 0.001dpcm){
697
- .rs-btn, .rs-pagination-btn{
695
+ .rs-btn{
698
696
  -webkit-mask-image:radial-gradient(white, black);
699
697
  mask-image:radial-gradient(white, black);
700
698
  }
701
699
  }
702
- .rs-btn.rs-btn-lg, .rs-btn-lg.rs-pagination-btn{
700
+ .rs-btn{
701
+ --rs-btn-size:var(--rs-btn-size-md);
702
+ --rs-btn-font-size:var(--rs-btn-font-size-md);
703
+ --rs-btn-line-height:var(--rs-btn-line-height-md);
704
+ --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
705
+ --rs-btn-padding-block:var(--rs-btn-padding-block-md);
706
+ --rs-btn-icon-size:var(--rs-btn-icon-size-md);
707
+ }
708
+ .rs-btn[data-size=lg]{
703
709
  --rs-btn-size:var(--rs-btn-size-lg);
704
710
  --rs-btn-font-size:var(--rs-btn-font-size-lg);
705
711
  --rs-btn-line-height:var(--rs-btn-line-height-lg);
@@ -707,7 +713,7 @@ body{
707
713
  --rs-btn-padding-block:var(--rs-btn-padding-block-lg);
708
714
  --rs-btn-icon-size:var(--rs-btn-icon-size-lg);
709
715
  }
710
- .rs-btn.rs-btn-md, .rs-btn-md.rs-pagination-btn{
716
+ .rs-btn[data-size=md]{
711
717
  --rs-btn-size:var(--rs-btn-size-md);
712
718
  --rs-btn-font-size:var(--rs-btn-font-size-md);
713
719
  --rs-btn-line-height:var(--rs-btn-line-height-md);
@@ -715,7 +721,7 @@ body{
715
721
  --rs-btn-padding-block:var(--rs-btn-padding-block-md);
716
722
  --rs-btn-icon-size:var(--rs-btn-icon-size-md);
717
723
  }
718
- .rs-btn.rs-btn-sm, .rs-btn-sm.rs-pagination-btn{
724
+ .rs-btn[data-size=sm]{
719
725
  --rs-btn-size:var(--rs-btn-size-sm);
720
726
  --rs-btn-font-size:var(--rs-btn-font-size-sm);
721
727
  --rs-btn-line-height:var(--rs-btn-line-height-sm);
@@ -723,7 +729,7 @@ body{
723
729
  --rs-btn-padding-block:var(--rs-btn-padding-block-sm);
724
730
  --rs-btn-icon-size:var(--rs-btn-icon-size-sm);
725
731
  }
726
- .rs-btn.rs-btn-xs, .rs-btn-xs.rs-pagination-btn{
732
+ .rs-btn[data-size=xs]{
727
733
  --rs-btn-size:var(--rs-btn-size-xs);
728
734
  --rs-btn-font-size:var(--rs-btn-font-size-xs);
729
735
  --rs-btn-line-height:var(--rs-btn-line-height-xs);
@@ -742,101 +748,111 @@ body{
742
748
  margin-inline-start:var(--rs-btn-icon-gap);
743
749
  }
744
750
 
745
- .rs-btn-primary{
751
+ .rs-btn[data-appearance=primary]{
746
752
  color:var(--rs-btn-primary-text);
747
753
  background-color:var(--rs-btn-primary-bg);
748
754
  border-color:var(--rs-btn-primary-border-color);
749
755
  }
750
- .rs-btn-primary:hover{
756
+ .rs-btn[data-appearance=primary]:hover{
751
757
  color:var(--rs-btn-primary-text);
752
758
  background-color:var(--rs-btn-primary-hover-bg);
753
759
  }
754
- .rs-btn-primary:active, .rs-btn-primary.rs-btn-active{
760
+ .rs-btn[data-appearance=primary]:active, .rs-btn[data-appearance=primary].rs-btn[data-active=true]{
755
761
  color:var(--rs-btn-primary-text);
756
762
  background-color:var(--rs-btn-primary-active-bg);
757
763
  }
758
- .rs-btn-primary:disabled, .rs-btn-primary.rs-btn-disabled{
764
+ .rs-btn[data-appearance=primary]:disabled, .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
759
765
  color:var(--rs-btn-primary-text);
760
766
  background-color:var(--rs-btn-primary-bg);
761
767
  opacity:0.3;
762
768
  }
763
- [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{
769
+ [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]{
764
770
  border-color:var(--rs-btn-default-disabled-border-color);
765
771
  }
766
772
 
767
- .rs-btn-subtle, .rs-pagination-btn{
773
+ .rs-btn[data-appearance=subtle],
774
+ .rs-btn-subtle{
768
775
  color:var(--rs-btn-subtle-text);
769
776
  background-color:transparent;
770
777
  }
771
- .rs-btn-subtle:hover, .rs-pagination-btn:hover{
778
+ .rs-btn[data-appearance=subtle]:hover,
779
+ .rs-btn-subtle:hover{
772
780
  color:var(--rs-btn-subtle-hover-text);
773
781
  background-color:var(--rs-btn-subtle-hover-bg);
774
782
  }
775
- .rs-btn-subtle:active, .rs-pagination-btn:active, .rs-btn-subtle.rs-btn-active, .rs-btn-active.rs-pagination-btn{
783
+ .rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
784
+ .rs-btn-subtle:active,
785
+ .rs-btn-subtle.rs-btn[data-active=true]{
776
786
  color:var(--rs-btn-subtle-active-text);
777
787
  background-color:var(--rs-btn-subtle-active-bg);
778
788
  }
779
- .rs-btn-subtle:disabled, .rs-pagination-btn:disabled, .rs-btn-subtle.rs-btn-disabled, .rs-btn-disabled.rs-pagination-btn{
789
+ .rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
790
+ .rs-btn-subtle:disabled,
791
+ .rs-btn-subtle.rs-btn[data-disabled=true]{
780
792
  color:var(--rs-btn-subtle-disabled-text);
781
793
  background:none;
782
794
  }
783
- [data-theme=high-contrast] .rs-btn-subtle:disabled, [data-theme=high-contrast] .rs-pagination-btn:disabled, .rs-theme-high-contrast .rs-btn-subtle:disabled, .rs-theme-high-contrast .rs-pagination-btn:disabled, [data-theme=high-contrast] .rs-btn-subtle.rs-btn-disabled, [data-theme=high-contrast] .rs-btn-disabled.rs-pagination-btn, .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-disabled.rs-pagination-btn{
795
+ [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],
796
+ [data-theme=high-contrast] .rs-btn-subtle:disabled,
797
+ .rs-theme-high-contrast .rs-btn-subtle:disabled,
798
+ [data-theme=high-contrast] .rs-btn-subtle.rs-btn[data-disabled=true],
799
+ .rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true]{
784
800
  border-color:var(--rs-btn-default-disabled-border-color);
785
801
  }
786
802
 
787
- .rs-btn-link{
803
+ .rs-btn[data-appearance=link]{
788
804
  color:var(--rs-btn-link-text);
789
805
  background-color:transparent;
790
806
  }
791
- .rs-btn-link:hover{
807
+ .rs-btn[data-appearance=link]:hover{
792
808
  color:var(--rs-btn-link-hover-text);
793
809
  background-color:transparent;
794
810
  -webkit-text-decoration:var(--rs-link-hover-decoration);
795
811
  text-decoration:var(--rs-link-hover-decoration);
796
812
  }
797
- .rs-btn-link:active, .rs-btn-link.rs-btn-active{
813
+ .rs-btn[data-appearance=link]:active, .rs-btn[data-appearance=link].rs-btn[data-active=true]{
798
814
  color:var(--rs-btn-link-active-text);
799
815
  background-color:transparent;
800
816
  }
801
- .rs-btn-link:disabled, .rs-btn-link.rs-btn-disabled{
817
+ .rs-btn[data-appearance=link]:disabled, .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
802
818
  color:var(--rs-btn-link-hover-text);
803
819
  background-color:transparent;
804
820
  text-decoration:none;
805
821
  opacity:0.3;
806
822
  }
807
- [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{
823
+ [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]{
808
824
  border-color:var(--rs-btn-default-disabled-border-color);
809
825
  }
810
826
 
811
- .rs-btn-ghost{
827
+ .rs-btn[data-appearance=ghost]{
812
828
  color:var(--rs-btn-ghost-text);
813
829
  background-color:transparent;
814
830
  border:var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
815
831
  padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
816
832
  }
817
- .rs-btn-ghost:hover{
833
+ .rs-btn[data-appearance=ghost]:hover{
818
834
  color:var(--rs-btn-ghost-hover-text);
819
835
  background-color:transparent;
820
836
  border-color:var(--rs-btn-ghost-hover-border);
821
837
  box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
822
838
  }
823
- .rs-btn-ghost:active, .rs-btn-ghost.rs-btn-active{
839
+ .rs-btn[data-appearance=ghost]:active, .rs-btn[data-appearance=ghost].rs-btn[data-active=true]{
824
840
  color:var(--rs-btn-ghost-active-text);
825
841
  background-color:transparent;
826
842
  border-color:var(--rs-btn-ghost-active-border);
827
843
  }
828
- .rs-btn-ghost:disabled, .rs-btn-ghost.rs-btn-disabled{
844
+ .rs-btn[data-appearance=ghost]:disabled, .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
829
845
  color:var(--rs-btn-ghost-text);
830
846
  background-color:transparent;
831
847
  opacity:0.3;
832
848
  border-color:var(--rs-btn-ghost-border);
833
849
  box-shadow:var(--rs-shadow-none);
834
850
  }
835
- [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{
851
+ [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]{
836
852
  border-color:var(--rs-btn-default-disabled-border-color);
837
853
  }
838
854
 
839
- .rs-btn-red{
855
+ .rs-btn[data-color=red]{
840
856
  --rs-btn-primary-bg:var(--rs-red-500);
841
857
  --rs-btn-primary-hover-bg:var(--rs-red-700);
842
858
  --rs-btn-primary-active-bg:var(--rs-red-800);
@@ -858,7 +874,7 @@ body{
858
874
  --rs-iconbtn-primary-activated-addon:var(--rs-red-800);
859
875
  --rs-iconbtn-primary-pressed-addon:var(--rs-red-900);
860
876
  }
861
- [data-theme=dark] .rs-btn-red, .rs-theme-dark .rs-btn-red{
877
+ [data-theme=dark] .rs-btn[data-color=red], .rs-theme-dark .rs-btn[data-color=red]{
862
878
  --rs-btn-primary-bg:var(--rs-red-700);
863
879
  --rs-btn-primary-hover-bg:var(--rs-red-500);
864
880
  --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -880,7 +896,7 @@ body{
880
896
  --rs-iconbtn-primary-activated-addon:var(--rs-red-400);
881
897
  --rs-iconbtn-primary-pressed-addon:var(--rs-red-300);
882
898
  }
883
- [data-theme=high-contrast] .rs-btn-red, .rs-theme-high-contrast .rs-btn-red{
899
+ [data-theme=high-contrast] .rs-btn[data-color=red], .rs-theme-high-contrast .rs-btn[data-color=red]{
884
900
  --rs-btn-primary-bg:var(--rs-red-700);
885
901
  --rs-btn-primary-hover-bg:var(--rs-red-600);
886
902
  --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -899,7 +915,7 @@ body{
899
915
  --rs-btn-link-active-text:var(--rs-red-200);
900
916
  }
901
917
 
902
- .rs-btn-orange{
918
+ .rs-btn[data-color=orange]{
903
919
  --rs-btn-primary-bg:var(--rs-orange-500);
904
920
  --rs-btn-primary-hover-bg:var(--rs-orange-700);
905
921
  --rs-btn-primary-active-bg:var(--rs-orange-800);
@@ -921,7 +937,7 @@ body{
921
937
  --rs-iconbtn-primary-activated-addon:var(--rs-orange-800);
922
938
  --rs-iconbtn-primary-pressed-addon:var(--rs-orange-900);
923
939
  }
924
- [data-theme=dark] .rs-btn-orange, .rs-theme-dark .rs-btn-orange{
940
+ [data-theme=dark] .rs-btn[data-color=orange], .rs-theme-dark .rs-btn[data-color=orange]{
925
941
  --rs-btn-primary-bg:var(--rs-orange-700);
926
942
  --rs-btn-primary-hover-bg:var(--rs-orange-500);
927
943
  --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -943,7 +959,7 @@ body{
943
959
  --rs-iconbtn-primary-activated-addon:var(--rs-orange-400);
944
960
  --rs-iconbtn-primary-pressed-addon:var(--rs-orange-300);
945
961
  }
946
- [data-theme=high-contrast] .rs-btn-orange, .rs-theme-high-contrast .rs-btn-orange{
962
+ [data-theme=high-contrast] .rs-btn[data-color=orange], .rs-theme-high-contrast .rs-btn[data-color=orange]{
947
963
  --rs-btn-primary-bg:var(--rs-orange-700);
948
964
  --rs-btn-primary-hover-bg:var(--rs-orange-600);
949
965
  --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -962,7 +978,7 @@ body{
962
978
  --rs-btn-link-active-text:var(--rs-orange-200);
963
979
  }
964
980
 
965
- .rs-btn-yellow{
981
+ .rs-btn[data-color=yellow]{
966
982
  --rs-btn-primary-bg:var(--rs-yellow-500);
967
983
  --rs-btn-primary-hover-bg:var(--rs-yellow-700);
968
984
  --rs-btn-primary-active-bg:var(--rs-yellow-800);
@@ -984,7 +1000,7 @@ body{
984
1000
  --rs-iconbtn-primary-activated-addon:var(--rs-yellow-800);
985
1001
  --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-900);
986
1002
  }
987
- [data-theme=dark] .rs-btn-yellow, .rs-theme-dark .rs-btn-yellow{
1003
+ [data-theme=dark] .rs-btn[data-color=yellow], .rs-theme-dark .rs-btn[data-color=yellow]{
988
1004
  --rs-btn-primary-bg:var(--rs-yellow-700);
989
1005
  --rs-btn-primary-hover-bg:var(--rs-yellow-500);
990
1006
  --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1006,7 +1022,7 @@ body{
1006
1022
  --rs-iconbtn-primary-activated-addon:var(--rs-yellow-400);
1007
1023
  --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-300);
1008
1024
  }
1009
- [data-theme=high-contrast] .rs-btn-yellow, .rs-theme-high-contrast .rs-btn-yellow{
1025
+ [data-theme=high-contrast] .rs-btn[data-color=yellow], .rs-theme-high-contrast .rs-btn[data-color=yellow]{
1010
1026
  --rs-btn-primary-bg:var(--rs-yellow-700);
1011
1027
  --rs-btn-primary-hover-bg:var(--rs-yellow-600);
1012
1028
  --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1025,7 +1041,7 @@ body{
1025
1041
  --rs-btn-link-active-text:var(--rs-yellow-200);
1026
1042
  }
1027
1043
 
1028
- .rs-btn-green{
1044
+ .rs-btn[data-color=green]{
1029
1045
  --rs-btn-primary-bg:var(--rs-green-500);
1030
1046
  --rs-btn-primary-hover-bg:var(--rs-green-700);
1031
1047
  --rs-btn-primary-active-bg:var(--rs-green-800);
@@ -1047,7 +1063,7 @@ body{
1047
1063
  --rs-iconbtn-primary-activated-addon:var(--rs-green-800);
1048
1064
  --rs-iconbtn-primary-pressed-addon:var(--rs-green-900);
1049
1065
  }
1050
- [data-theme=dark] .rs-btn-green, .rs-theme-dark .rs-btn-green{
1066
+ [data-theme=dark] .rs-btn[data-color=green], .rs-theme-dark .rs-btn[data-color=green]{
1051
1067
  --rs-btn-primary-bg:var(--rs-green-700);
1052
1068
  --rs-btn-primary-hover-bg:var(--rs-green-500);
1053
1069
  --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1069,7 +1085,7 @@ body{
1069
1085
  --rs-iconbtn-primary-activated-addon:var(--rs-green-400);
1070
1086
  --rs-iconbtn-primary-pressed-addon:var(--rs-green-300);
1071
1087
  }
1072
- [data-theme=high-contrast] .rs-btn-green, .rs-theme-high-contrast .rs-btn-green{
1088
+ [data-theme=high-contrast] .rs-btn[data-color=green], .rs-theme-high-contrast .rs-btn[data-color=green]{
1073
1089
  --rs-btn-primary-bg:var(--rs-green-700);
1074
1090
  --rs-btn-primary-hover-bg:var(--rs-green-600);
1075
1091
  --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1088,7 +1104,7 @@ body{
1088
1104
  --rs-btn-link-active-text:var(--rs-green-200);
1089
1105
  }
1090
1106
 
1091
- .rs-btn-cyan{
1107
+ .rs-btn[data-color=cyan]{
1092
1108
  --rs-btn-primary-bg:var(--rs-cyan-500);
1093
1109
  --rs-btn-primary-hover-bg:var(--rs-cyan-700);
1094
1110
  --rs-btn-primary-active-bg:var(--rs-cyan-800);
@@ -1110,7 +1126,7 @@ body{
1110
1126
  --rs-iconbtn-primary-activated-addon:var(--rs-cyan-800);
1111
1127
  --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-900);
1112
1128
  }
1113
- [data-theme=dark] .rs-btn-cyan, .rs-theme-dark .rs-btn-cyan{
1129
+ [data-theme=dark] .rs-btn[data-color=cyan], .rs-theme-dark .rs-btn[data-color=cyan]{
1114
1130
  --rs-btn-primary-bg:var(--rs-cyan-700);
1115
1131
  --rs-btn-primary-hover-bg:var(--rs-cyan-500);
1116
1132
  --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1132,7 +1148,7 @@ body{
1132
1148
  --rs-iconbtn-primary-activated-addon:var(--rs-cyan-400);
1133
1149
  --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-300);
1134
1150
  }
1135
- [data-theme=high-contrast] .rs-btn-cyan, .rs-theme-high-contrast .rs-btn-cyan{
1151
+ [data-theme=high-contrast] .rs-btn[data-color=cyan], .rs-theme-high-contrast .rs-btn[data-color=cyan]{
1136
1152
  --rs-btn-primary-bg:var(--rs-cyan-700);
1137
1153
  --rs-btn-primary-hover-bg:var(--rs-cyan-600);
1138
1154
  --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1151,7 +1167,7 @@ body{
1151
1167
  --rs-btn-link-active-text:var(--rs-cyan-200);
1152
1168
  }
1153
1169
 
1154
- .rs-btn-blue{
1170
+ .rs-btn[data-color=blue]{
1155
1171
  --rs-btn-primary-bg:var(--rs-blue-500);
1156
1172
  --rs-btn-primary-hover-bg:var(--rs-blue-700);
1157
1173
  --rs-btn-primary-active-bg:var(--rs-blue-800);
@@ -1173,7 +1189,7 @@ body{
1173
1189
  --rs-iconbtn-primary-activated-addon:var(--rs-blue-800);
1174
1190
  --rs-iconbtn-primary-pressed-addon:var(--rs-blue-900);
1175
1191
  }
1176
- [data-theme=dark] .rs-btn-blue, .rs-theme-dark .rs-btn-blue{
1192
+ [data-theme=dark] .rs-btn[data-color=blue], .rs-theme-dark .rs-btn[data-color=blue]{
1177
1193
  --rs-btn-primary-bg:var(--rs-blue-700);
1178
1194
  --rs-btn-primary-hover-bg:var(--rs-blue-500);
1179
1195
  --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1195,7 +1211,7 @@ body{
1195
1211
  --rs-iconbtn-primary-activated-addon:var(--rs-blue-400);
1196
1212
  --rs-iconbtn-primary-pressed-addon:var(--rs-blue-300);
1197
1213
  }
1198
- [data-theme=high-contrast] .rs-btn-blue, .rs-theme-high-contrast .rs-btn-blue{
1214
+ [data-theme=high-contrast] .rs-btn[data-color=blue], .rs-theme-high-contrast .rs-btn[data-color=blue]{
1199
1215
  --rs-btn-primary-bg:var(--rs-blue-700);
1200
1216
  --rs-btn-primary-hover-bg:var(--rs-blue-600);
1201
1217
  --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1214,7 +1230,7 @@ body{
1214
1230
  --rs-btn-link-active-text:var(--rs-blue-200);
1215
1231
  }
1216
1232
 
1217
- .rs-btn-violet{
1233
+ .rs-btn[data-color=violet]{
1218
1234
  --rs-btn-primary-bg:var(--rs-violet-500);
1219
1235
  --rs-btn-primary-hover-bg:var(--rs-violet-700);
1220
1236
  --rs-btn-primary-active-bg:var(--rs-violet-800);
@@ -1236,7 +1252,7 @@ body{
1236
1252
  --rs-iconbtn-primary-activated-addon:var(--rs-violet-800);
1237
1253
  --rs-iconbtn-primary-pressed-addon:var(--rs-violet-900);
1238
1254
  }
1239
- [data-theme=dark] .rs-btn-violet, .rs-theme-dark .rs-btn-violet{
1255
+ [data-theme=dark] .rs-btn[data-color=violet], .rs-theme-dark .rs-btn[data-color=violet]{
1240
1256
  --rs-btn-primary-bg:var(--rs-violet-700);
1241
1257
  --rs-btn-primary-hover-bg:var(--rs-violet-500);
1242
1258
  --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1258,7 +1274,7 @@ body{
1258
1274
  --rs-iconbtn-primary-activated-addon:var(--rs-violet-400);
1259
1275
  --rs-iconbtn-primary-pressed-addon:var(--rs-violet-300);
1260
1276
  }
1261
- [data-theme=high-contrast] .rs-btn-violet, .rs-theme-high-contrast .rs-btn-violet{
1277
+ [data-theme=high-contrast] .rs-btn[data-color=violet], .rs-theme-high-contrast .rs-btn[data-color=violet]{
1262
1278
  --rs-btn-primary-bg:var(--rs-violet-700);
1263
1279
  --rs-btn-primary-hover-bg:var(--rs-violet-600);
1264
1280
  --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1277,20 +1293,20 @@ body{
1277
1293
  --rs-btn-link-active-text:var(--rs-violet-200);
1278
1294
  }
1279
1295
 
1280
- .rs-btn-block{
1296
+ .rs-btn[data-block=true]{
1281
1297
  width:100%;
1282
1298
  }
1283
- .rs-btn-block + .rs-btn-block{
1299
+ .rs-btn[data-block=true] + .rs-btn[data-block=true]{
1284
1300
  margin-top:5px;
1285
1301
  }
1286
1302
 
1287
- .rs-btn-loading{
1303
+ .rs-btn[data-loading=true]{
1288
1304
  color:transparent !important;
1289
1305
  position:relative;
1290
1306
  cursor:default;
1291
1307
  pointer-events:none;
1292
1308
  }
1293
- .rs-btn-loading > .rs-btn-spin::before, .rs-btn-loading > .rs-btn-spin::after{
1309
+ .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-loading=true] > .rs-btn-spin::after{
1294
1310
  content:"";
1295
1311
  position:absolute;
1296
1312
  width:var(--rs-btn-loading-spin-default-diameter);
@@ -1303,29 +1319,29 @@ body{
1303
1319
  border-radius:var(--rs-radius-full);
1304
1320
  z-index:1;
1305
1321
  }
1306
- .rs-btn-xs .rs-btn-loading > .rs-btn-spin::before, .rs-btn-xs .rs-btn-loading > .rs-btn-spin::after{
1322
+ .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{
1307
1323
  width:var(--rs-btn-loading-spin-xs-diameter);
1308
1324
  height:var(--rs-btn-loading-spin-xs-diameter);
1309
1325
  }
1310
- .rs-btn-loading > .rs-btn-spin::before{
1326
+ .rs-btn[data-loading=true] > .rs-btn-spin::before{
1311
1327
  border:var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
1312
1328
  }
1313
- .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
1329
+ .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
1314
1330
  border-color:rgba(248, 247, 250, 0.3);
1315
1331
  }
1316
- [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{
1332
+ [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{
1317
1333
  border-color:var(--rs-loader-ring-inverse);
1318
1334
  }
1319
- .rs-btn-loading > .rs-btn-spin::after{
1335
+ .rs-btn[data-loading=true] > .rs-btn-spin::after{
1320
1336
  border-width:var(--rs-btn-loading-spin-ring-wide);
1321
1337
  border-color:var(--rs-loader-rotor) transparent transparent;
1322
1338
  border-style:solid;
1323
1339
  animation:buttonSpin 0.6s infinite linear;
1324
1340
  }
1325
- .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
1341
+ .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
1326
1342
  border-top-color:#fff;
1327
1343
  }
1328
- [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{
1344
+ [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{
1329
1345
  border-top-color:var(--rs-loader-rotor-inverse);
1330
1346
  }
1331
1347
  @keyframes buttonSpin{
@@ -1405,9 +1421,6 @@ body{
1405
1421
  --rs-stack-direction:row;
1406
1422
  --rs-stack-align:center;
1407
1423
  --rs-stack-justify:flex-start;
1408
- --rs-stack-item-grow:0;
1409
- --rs-stack-item-shrink:1;
1410
- --rs-stack-item-basis:auto;
1411
1424
  }
1412
1425
 
1413
1426
  .rs-stack{
@@ -1434,7 +1447,7 @@ body{
1434
1447
  --rs-stack-align:center;
1435
1448
  flex-direction:row-reverse;
1436
1449
  }
1437
- .rs-stack-wrap{
1450
+ .rs-stack[data-wrap=true]{
1438
1451
  flex-wrap:wrap;
1439
1452
  }
1440
1453
  .rs-stack-xs-column{
@@ -1520,12 +1533,6 @@ body{
1520
1533
  }
1521
1534
  }
1522
1535
 
1523
- .rs-stack-item{
1524
- align-self:var(--rs-stack-item-align-self);
1525
- order:var(--rs-stack-item-order);
1526
- flex:var(--rs-stack-item-flex, var(--rs-stack-item-grow) var(--rs-stack-item-shrink) var(--rs-stack-item-basis));
1527
- }
1528
-
1529
1536
  :root{
1530
1537
  --rs-loader-duration-fast:0.4s;
1531
1538
  --rs-loader-duration-normal:0.6s;
@@ -1542,7 +1549,7 @@ body{
1542
1549
  --rs-loader-spin-ring-width:3px;
1543
1550
  }
1544
1551
 
1545
- .rs-loader{
1552
+ .rs-loader-box{
1546
1553
  display:inline-flex;
1547
1554
  align-items:center;
1548
1555
  justify-content:center;
@@ -1584,34 +1591,34 @@ body{
1584
1591
  height:100%;
1585
1592
  background:var(--rs-loader-backdrop);
1586
1593
  }
1587
- .rs-loader-vertical .rs-loader{
1594
+ .rs-loader[data-direction=vertical] .rs-loader-box{
1588
1595
  flex-direction:column;
1589
1596
  }
1590
- .rs-loader-inverse .rs-loader-content{
1597
+ .rs-loader[data-inverse=true] .rs-loader-content{
1591
1598
  color:var(--rs-text-inverse);
1592
1599
  }
1593
- .rs-loader-inverse .rs-loader-backdrop{
1600
+ .rs-loader[data-inverse=true] .rs-loader-backdrop{
1594
1601
  background:var(--rs-loader-backdrop-inverse);
1595
1602
  }
1596
- .rs-loader-inverse .rs-loader-spin::before{
1603
+ .rs-loader[data-inverse=true] .rs-loader-spin::before{
1597
1604
  border-color:var(--rs-loader-ring-inverse);
1598
1605
  }
1599
- .rs-loader-inverse .rs-loader-spin::after{
1606
+ .rs-loader[data-inverse=true] .rs-loader-spin::after{
1600
1607
  border-top-color:var(--rs-loader-rotor-inverse);
1601
1608
  }
1602
- .rs-loader-speed-fast .rs-loader-spin::after{
1609
+ .rs-loader[data-speed=fast] .rs-loader-spin::after{
1603
1610
  animation-duration:var(--rs-loader-duration-fast);
1604
1611
  }
1605
- .rs-loader-speed-normal .rs-loader-spin::after{
1612
+ .rs-loader[data-speed=normal] .rs-loader-spin::after{
1606
1613
  animation-duration:var(--rs-loader-duration-normal);
1607
1614
  }
1608
- .rs-loader-speed-slow .rs-loader-spin::after{
1615
+ .rs-loader[data-speed=slow] .rs-loader-spin::after{
1609
1616
  animation-duration:var(--rs-loader-duration-slow);
1610
1617
  }
1611
- .rs-loader-speed-paused .rs-loader-spin::after{
1618
+ .rs-loader[data-speed=paused] .rs-loader-spin::after{
1612
1619
  animation-play-state:var(--rs-loader-duration-paused);
1613
1620
  }
1614
- .rs-loader-center{
1621
+ .rs-loader[data-center=true]{
1615
1622
  position:absolute;
1616
1623
  top:0;
1617
1624
  bottom:0;
@@ -1624,26 +1631,26 @@ body{
1624
1631
  align-items:center;
1625
1632
  justify-content:center;
1626
1633
  }
1627
- .rs-loader-center .rs-loader-content{
1634
+ .rs-loader[data-center=true] .rs-loader-content{
1628
1635
  z-index:1;
1629
1636
  }
1630
1637
 
1631
- .rs-loader-xs{
1638
+ .rs-loader[data-size=xs]{
1632
1639
  --rs-loader-size:var(--rs-loader-size-xs);
1633
1640
  --rs-loader-font-size:var(--rs-loader-font-size-xs);
1634
1641
  }
1635
1642
 
1636
- .rs-loader-sm{
1643
+ .rs-loader[data-size=sm]{
1637
1644
  --rs-loader-size:var(--rs-loader-size-sm);
1638
1645
  --rs-loader-font-size:var(--rs-loader-font-size-sm);
1639
1646
  }
1640
1647
 
1641
- .rs-loader-md{
1648
+ .rs-loader[data-size=md]{
1642
1649
  --rs-loader-size:var(--rs-loader-size-md);
1643
1650
  --rs-loader-font-size:var(--rs-loader-font-size-md);
1644
1651
  }
1645
1652
 
1646
- .rs-loader-lg{
1653
+ .rs-loader[data-size=lg]{
1647
1654
  --rs-loader-size:var(--rs-loader-size-lg);
1648
1655
  --rs-loader-font-size:var(--rs-loader-font-size-lg);
1649
1656
  }
@@ -1705,32 +1712,32 @@ body{
1705
1712
  border-color:var(--rs-input-focus-border);
1706
1713
  }
1707
1714
  .rs-input:focus-visible{
1708
- outline:2px solid var(--rs-color-focus-ring);
1715
+ outline:2px solid var(--rs-focus-ring-color);
1709
1716
  outline-offset:-1px;
1710
1717
  }
1711
1718
  .rs-input:disabled{
1712
1719
  background-color:var(--rs-input-disabled-bg);
1713
1720
  color:var(--rs-text-disabled);
1714
1721
  }
1715
- .rs-input.rs-input-xs{
1722
+ .rs-input[data-size=xs]{
1716
1723
  --rs-input-font-size:var(--rs-input-font-size-xs);
1717
1724
  --rs-input-line-height:var(--rs-input-line-height-xs);
1718
1725
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
1719
1726
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
1720
1727
  }
1721
- .rs-input.rs-input-sm{
1728
+ .rs-input[data-size=sm]{
1722
1729
  --rs-input-font-size:var(--rs-input-font-size-sm);
1723
1730
  --rs-input-line-height:var(--rs-input-line-height-sm);
1724
1731
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
1725
1732
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
1726
1733
  }
1727
- .rs-input.rs-input-md{
1734
+ .rs-input[data-size=md]{
1728
1735
  --rs-input-font-size:var(--rs-input-font-size-md);
1729
1736
  --rs-input-line-height:var(--rs-input-line-height-md);
1730
1737
  --rs-input-padding-block:var(--rs-input-padding-block-md);
1731
1738
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
1732
1739
  }
1733
- .rs-input.rs-input-lg{
1740
+ .rs-input[data-size=lg]{
1734
1741
  --rs-input-font-size:var(--rs-input-font-size-lg);
1735
1742
  --rs-input-line-height:var(--rs-input-line-height-lg);
1736
1743
  --rs-input-padding-block:var(--rs-input-padding-block-lg);
@@ -1770,25 +1777,25 @@ body{
1770
1777
  border:1px solid var(--rs-border-primary);
1771
1778
  overflow:hidden;
1772
1779
  }
1773
- .rs-input-group.rs-input-group-xs{
1780
+ .rs-input-group[data-size=xs]{
1774
1781
  --rs-input-group-input-height:var(--rs-input-group-input-height-xs);
1775
1782
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-xs);
1776
1783
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-xs);
1777
1784
  --rs-input-group-font-size:var(--rs-input-group-font-size-xs);
1778
1785
  }
1779
- .rs-input-group.rs-input-group-sm{
1786
+ .rs-input-group[data-size=sm]{
1780
1787
  --rs-input-group-input-height:var(--rs-input-group-input-height-sm);
1781
1788
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-sm);
1782
1789
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-sm);
1783
1790
  --rs-input-group-font-size:var(--rs-input-group-font-size-sm);
1784
1791
  }
1785
- .rs-input-group.rs-input-group-md{
1792
+ .rs-input-group[data-size=md]{
1786
1793
  --rs-input-group-input-height:var(--rs-input-group-input-height-md);
1787
1794
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-md);
1788
1795
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-md);
1789
1796
  --rs-input-group-font-size:var(--rs-input-group-font-size-md);
1790
1797
  }
1791
- .rs-input-group.rs-input-group-lg{
1798
+ .rs-input-group[data-size=lg]{
1792
1799
  --rs-input-group-input-height:var(--rs-input-group-input-height-lg);
1793
1800
  --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-lg);
1794
1801
  --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-lg);
@@ -1797,11 +1804,11 @@ body{
1797
1804
  [data-theme=high-contrast] .rs-input-group, .rs-theme-high-contrast .rs-input-group{
1798
1805
  transition:none;
1799
1806
  }
1800
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
1807
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
1801
1808
  border-color:var(--rs-input-focus-border);
1802
1809
  }
1803
- .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
1804
- outline:2px solid var(--rs-color-focus-ring);
1810
+ .rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
1811
+ outline:2px solid var(--rs-focus-ring-color);
1805
1812
  outline-offset:-1px;
1806
1813
  }
1807
1814
  .rs-input-group .rs-input-group{
@@ -1836,23 +1843,23 @@ body{
1836
1843
  .rs-input-group > .rs-input-group-addon > .rs-icon{
1837
1844
  font-size:inherit;
1838
1845
  }
1839
- .rs-input-group.rs-input-group-inside{
1846
+ .rs-input-group[data-inside=true]{
1840
1847
  width:var(--rs-input-group-width);
1841
1848
  align-items:center;
1842
1849
  background-color:var(--rs-input-bg);
1843
1850
  }
1844
- .rs-input-group.rs-input-group-inside .rs-input{
1851
+ .rs-input-group[data-inside=true] .rs-input{
1845
1852
  display:block;
1846
1853
  width:100%;
1847
1854
  border:none;
1848
1855
  outline:none;
1849
1856
  }
1850
- .rs-input-group.rs-input-group-inside .rs-input-group-btn,
1851
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
1857
+ .rs-input-group[data-inside=true] .rs-input-group-btn,
1858
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
1852
1859
  flex:0 0 auto;
1853
1860
  width:auto;
1854
1861
  }
1855
- .rs-input-group.rs-input-group-inside .rs-input-group-btn{
1862
+ .rs-input-group[data-inside=true] .rs-input-group-btn{
1856
1863
  border-radius:var(--rs-input-group-border-radius);
1857
1864
  height:calc(var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2);
1858
1865
  margin-inline:var(--rs-input-group-inside-btn-spacing);
@@ -1861,42 +1868,42 @@ body{
1861
1868
  background-color:transparent;
1862
1869
  color:inherit;
1863
1870
  }
1864
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:hover{
1871
+ .rs-input-group[data-inside=true] .rs-input-group-btn:hover{
1865
1872
  color:var(--rs-btn-subtle-hover-text);
1866
1873
  background-color:var(--rs-btn-subtle-hover-bg);
1867
1874
  }
1868
- .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{
1875
+ .rs-input-group[data-inside=true] .rs-input-group-btn:active, .rs-input-group[data-inside=true] .rs-input-group-btn[data-active=true]{
1869
1876
  color:var(--rs-btn-subtle-active-text);
1870
1877
  background-color:var(--rs-btn-subtle-active-bg);
1871
1878
  }
1872
- .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{
1879
+ .rs-input-group[data-inside=true] .rs-input-group-btn:disabled, .rs-input-group[data-inside=true] .rs-input-group-btn[data-disabled=true]{
1873
1880
  color:var(--rs-btn-subtle-disabled-text);
1874
1881
  background:none;
1875
1882
  }
1876
- .rs-input-group.rs-input-group-inside .rs-input-group-btn:focus{
1883
+ .rs-input-group[data-inside=true] .rs-input-group-btn:focus{
1877
1884
  outline:none;
1878
1885
  }
1879
- .rs-input-group.rs-input-group-inside .rs-input-group-addon{
1886
+ .rs-input-group[data-inside=true] .rs-input-group-addon{
1880
1887
  background:none;
1881
1888
  border:none;
1882
1889
  }
1883
- .rs-input-group.rs-input-group-inside .rs-input:not(:first-child),
1884
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:first-child) .rs-input{
1890
+ .rs-input-group[data-inside=true] .rs-input:not(:first-child),
1891
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:first-child) .rs-input{
1885
1892
  padding-inline-start:0;
1886
1893
  }
1887
- .rs-input-group.rs-input-group-inside .rs-input:not(:last-child),
1888
- .rs-input-group.rs-input-group-inside .rs-auto-complete:not(:last-child) .rs-input{
1894
+ .rs-input-group[data-inside=true] .rs-input:not(:last-child),
1895
+ .rs-input-group[data-inside=true] .rs-auto-complete:not(:last-child) .rs-input{
1889
1896
  padding-inline-end:0;
1890
1897
  }
1891
1898
 
1892
- .rs-input-group.rs-input-group-disabled{
1899
+ .rs-input-group[data-disabled=true]{
1893
1900
  background-color:var(--rs-input-disabled-bg);
1894
1901
  color:var(--rs-text-disabled);
1895
1902
  cursor:not-allowed;
1896
1903
  }
1897
- .rs-input-group.rs-input-group-disabled .rs-input,
1898
- .rs-input-group.rs-input-group-disabled .rs-input-group-btn,
1899
- .rs-input-group.rs-input-group-disabled .rs-input-group-addon{
1904
+ .rs-input-group[data-disabled=true] .rs-input,
1905
+ .rs-input-group[data-disabled=true] .rs-input-group-btn,
1906
+ .rs-input-group[data-disabled=true] .rs-input-group-addon{
1900
1907
  color:inherit;
1901
1908
  }
1902
1909
 
@@ -1916,16 +1923,16 @@ body{
1916
1923
  padding-inline:var(--rs-spacing);
1917
1924
  min-width:var(--rs-input-group-input-height);
1918
1925
  }
1919
- .rs-input-group-addon.rs-input-sm{
1926
+ .rs-input-group-addon[data-size=sm]{
1920
1927
  padding-block:var(--rs-spacing-block-sm);
1921
1928
  padding-inline:var(--rs-spacing-inline-sm);
1922
1929
  font-size:var(--rs-font-size-sm);
1923
1930
  }
1924
- .rs-input-group-addon.rs-input-xs{
1931
+ .rs-input-group-addon[data-size=xs]{
1925
1932
  padding:var(--rs-spacing-inline-xs);
1926
1933
  font-size:var(--rs-font-size-xs);
1927
1934
  }
1928
- .rs-input-group-addon.rs-input-lg{
1935
+ .rs-input-group-addon[data-size=lg]{
1929
1936
  padding-block:var(--rs-spacing-block-lg);
1930
1937
  padding-inline:var(--rs-spacing-inline-lg);
1931
1938
  font-size:var(--rs-font-size-md);
@@ -1960,14 +1967,14 @@ body{
1960
1967
  font-size:var(--rs-btn-icon-size);
1961
1968
  vertical-align:bottom;
1962
1969
  }
1963
- .rs-btn-icon:not(.rs-btn-icon-with-text){
1970
+ .rs-btn-icon:not([data-with-text]){
1964
1971
  width:var(--rs-btn-size);
1965
1972
  }
1966
- .rs-btn-icon.rs-btn-icon-circle{
1973
+ .rs-btn-icon[data-shape=circle]{
1967
1974
  border-radius:var(--rs-radius-full);
1968
1975
  }
1969
1976
 
1970
- .rs-btn-icon-with-text > .rs-icon{
1977
+ .rs-btn-icon[data-with-text] > .rs-icon{
1971
1978
  position:absolute;
1972
1979
  top:0;
1973
1980
  display:block;
@@ -1977,45 +1984,45 @@ body{
1977
1984
  height:var(--rs-btn-size);
1978
1985
  padding:calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
1979
1986
  }
1980
- .rs-btn-icon-with-text.rs-btn-icon-placement-left{
1987
+ .rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]){
1981
1988
  padding-inline-start:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
1982
1989
  }
1983
- .rs-btn-icon-with-text.rs-btn-icon-placement-left > .rs-icon{
1990
+ .rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]) > .rs-icon{
1984
1991
  inset-inline-start:0;
1985
1992
  border-right-width:1px;
1986
1993
  }
1987
- .rs-btn-icon-with-text.rs-btn-icon-placement-right{
1994
+ .rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]){
1988
1995
  padding-inline-end:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
1989
1996
  }
1990
- .rs-btn-icon-with-text.rs-btn-icon-placement-right > .rs-icon{
1997
+ .rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]) > .rs-icon{
1991
1998
  inset-inline-end:0;
1992
1999
  }
1993
- .rs-btn-icon-with-text:hover > .rs-icon{
2000
+ .rs-btn-icon[data-with-text]:hover > .rs-icon{
1994
2001
  background-color:var(--rs-iconbtn-activated-addon);
1995
2002
  }
1996
- .rs-btn-icon-with-text:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-active > .rs-icon{
2003
+ .rs-btn-icon[data-with-text]:active > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-active=true] > .rs-icon{
1997
2004
  background-color:var(--rs-iconbtn-pressed-addon);
1998
2005
  }
1999
- .rs-btn-icon-with-text:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-disabled > .rs-icon{
2006
+ .rs-btn-icon[data-with-text]:disabled > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-disabled=true] > .rs-icon{
2000
2007
  background-color:var(--rs-iconbtn-addon);
2001
2008
  }
2002
- [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{
2009
+ [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]{
2003
2010
  border-color:var(--rs-btn-default-disabled-border-color);
2004
2011
  }
2005
2012
 
2006
- .rs-btn-icon-with-text.rs-btn-primary > .rs-icon{
2013
+ .rs-btn-icon[data-with-text][data-appearance=primary] > .rs-icon{
2007
2014
  background-color:var(--rs-iconbtn-primary-addon);
2008
2015
  }
2009
- .rs-btn-icon-with-text.rs-btn-primary:hover > .rs-icon{
2016
+ .rs-btn-icon[data-with-text][data-appearance=primary]:hover > .rs-icon{
2010
2017
  background-color:var(--rs-iconbtn-primary-activated-addon);
2011
2018
  }
2012
- .rs-btn-icon-with-text.rs-btn-primary:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-active > .rs-icon{
2019
+ .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{
2013
2020
  background-color:var(--rs-iconbtn-primary-pressed-addon);
2014
2021
  }
2015
- .rs-btn-icon-with-text.rs-btn-primary:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled > .rs-icon{
2022
+ .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{
2016
2023
  background-color:var(--rs-iconbtn-primary-addon);
2017
2024
  }
2018
- [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{
2025
+ [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]{
2019
2026
  border-color:var(--rs-btn-default-disabled-border-color);
2020
2027
  }
2021
2028
 
@@ -2070,7 +2077,7 @@ body{
2070
2077
  .rs-picker-toggle .rs-picker-toggle-placeholder{
2071
2078
  color:var(--rs-text-secondary);
2072
2079
  }
2073
- .rs-picker-has-value .rs-btn .rs-picker-toggle-value, .rs-picker-has-value .rs-pagination-btn .rs-picker-toggle-value, .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value{
2080
+ .rs-picker-has-value .rs-btn .rs-picker-toggle-value, .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value{
2074
2081
  color:var(--rs-picker-value);
2075
2082
  }
2076
2083
  .rs-picker-value-list{
@@ -2093,7 +2100,7 @@ body{
2093
2100
  }
2094
2101
  .rs-picker-toggle-active, .rs-picker.rs-picker-focused{
2095
2102
  --rs-picker-toggle-border-color:var(--rs-input-focus-border);
2096
- outline:2px solid var(--rs-color-focus-ring);
2103
+ outline:2px solid var(--rs-focus-ring-color);
2097
2104
  outline-offset:-1px;
2098
2105
  }
2099
2106
  .rs-picker-label.rs-input-group-addon{
@@ -2254,18 +2261,18 @@ body{
2254
2261
  background-color:var(--rs-input-bg);
2255
2262
  outline:none;
2256
2263
  }
2257
- .rs-picker-toggle.rs-btn-lg .rs-picker-toggle-textbox{
2264
+ .rs-picker-toggle-textbox:where([readonly]){
2265
+ opacity:0;
2266
+ }
2267
+ .rs-picker-toggle:where([data-size=lg]) .rs-picker-toggle-textbox{
2258
2268
  padding-inline-start:14px;
2259
2269
  }
2260
- .rs-picker-toggle.rs-btn-sm .rs-picker-toggle-textbox{
2270
+ .rs-picker-toggle:where([data-size=sm]) .rs-picker-toggle-textbox{
2261
2271
  padding-inline-start:8px;
2262
2272
  }
2263
- .rs-picker-toggle.rs-btn-xs .rs-picker-toggle-textbox{
2273
+ .rs-picker-toggle:where([data-size=xs]) .rs-picker-toggle-textbox{
2264
2274
  padding-inline-start:6px;
2265
2275
  }
2266
- .rs-picker-toggle-read-only{
2267
- opacity:0;
2268
- }
2269
2276
  .rs-picker-toggle .rs-picker[data-variant=default], .rs-picker-toggle{
2270
2277
  transition:var(--rs-picker-transition);
2271
2278
  }
@@ -2280,22 +2287,10 @@ body{
2280
2287
  background-color:transparent;
2281
2288
  transition:none;
2282
2289
  }
2283
- .rs-picker[data-variant=subtle] .rs-picker-toggle:hover{
2290
+ .rs-picker[data-variant=subtle] .rs-picker-toggle:hover,.rs-picker[data-variant=subtle] .rs-picker-toggle-active{
2284
2291
  color:var(--rs-btn-subtle-hover-text);
2285
2292
  background-color:var(--rs-btn-subtle-hover-bg);
2286
2293
  }
2287
- .rs-picker[data-variant=subtle] .rs-picker-toggle:active, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-active{
2288
- color:var(--rs-btn-subtle-active-text);
2289
- background-color:var(--rs-btn-subtle-active-bg);
2290
- }
2291
- .rs-picker[data-variant=subtle] .rs-picker-toggle:disabled, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-disabled{
2292
- color:var(--rs-btn-subtle-disabled-text);
2293
- background:none;
2294
- }
2295
- .rs-picker[data-variant=subtle] .rs-picker-toggle-active{
2296
- background-color:var(--rs-btn-subtle-hover-bg);
2297
- color:var(--rs-btn-subtle-hover-text);
2298
- }
2299
2294
  .rs-picker-toggle[data-size=lg] .rs-picker-clean .rs-icon{
2300
2295
  width:16px;
2301
2296
  height:16px;
@@ -2315,14 +2310,14 @@ body{
2315
2310
  align-items:center;
2316
2311
  }
2317
2312
 
2318
- .rs-picker-toggle.rs-btn, .rs-picker-toggle.rs-pagination-btn{
2313
+ .rs-picker-toggle.rs-btn{
2319
2314
  text-align:start;
2320
2315
  display:inline-flex;
2321
2316
  align-items:center;
2322
2317
  justify-content:flex-start;
2323
2318
  padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-picker-toggle-border-width));
2324
2319
  }
2325
- [data-block=true] .rs-picker-toggle.rs-btn, [data-block=true] .rs-picker-toggle.rs-pagination-btn{
2320
+ [data-block=true] .rs-picker-toggle.rs-btn{
2326
2321
  display:flex;
2327
2322
  }
2328
2323
 
@@ -2350,10 +2345,9 @@ body{
2350
2345
  color:var(--rs-text-secondary);
2351
2346
  }
2352
2347
 
2353
- .rs-picker[data-variant=default] .rs-btn, .rs-picker[data-variant=default] .rs-pagination-btn,
2348
+ .rs-picker[data-variant=default] .rs-btn,
2354
2349
  .rs-picker[data-variant=default] .rs-picker-toggle,
2355
2350
  .rs-picker-input .rs-btn,
2356
- .rs-picker-input .rs-pagination-btn,
2357
2351
  .rs-picker-input .rs-picker-toggle{
2358
2352
  background-color:var(--rs-picker-toggle-bg);
2359
2353
  }
@@ -2370,7 +2364,7 @@ body{
2370
2364
  color:var(--rs-listbox-option-hover-text);
2371
2365
  }
2372
2366
  [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{
2373
- outline:2px solid var(--rs-color-focus-ring);
2367
+ outline:2px solid var(--rs-focus-ring-color);
2374
2368
  outline-offset:-1px;
2375
2369
  outline-offset:-3px;
2376
2370
  outline-width:2px;
@@ -2470,7 +2464,7 @@ body{
2470
2464
  color:var(--rs-listbox-option-hover-text);
2471
2465
  }
2472
2466
  [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{
2473
- outline:2px solid var(--rs-color-focus-ring);
2467
+ outline:2px solid var(--rs-focus-ring-color);
2474
2468
  outline-offset:-1px;
2475
2469
  outline-offset:-3px;
2476
2470
  outline-width:2px;
@@ -2518,45 +2512,39 @@ body{
2518
2512
  padding-inline-start:0;
2519
2513
  margin-bottom:0;
2520
2514
  }
2521
- .rs-pagination-lg .rs-pagination-btn{
2515
+ .rs-pagination[data-size=lg] .rs-pagination-btn{
2522
2516
  min-width:42px;
2523
2517
  }
2524
- .rs-pagination-lg .rs-pagination-btn .rs-pagination-symbol{
2518
+ .rs-pagination[data-size=lg] .rs-pagination-btn .rs-pagination-symbol{
2525
2519
  height:var(--rs-line-height-plus);
2526
2520
  }
2527
- .rs-pagination-lg .rs-pagination-btn-active{
2521
+ .rs-pagination[data-size=lg] .rs-pagination-btn-active{
2528
2522
  padding-block:calc(var(--rs-spacing-block-lg) - 1px);
2529
2523
  padding-inline:calc(var(--rs-spacing-inline-lg) - 1px);
2530
2524
  }
2531
- .rs-pagination-md .rs-pagination-btn{
2525
+ .rs-pagination[data-size=md] .rs-pagination-btn{
2532
2526
  min-width:36px;
2533
2527
  }
2534
- .rs-pagination-md .rs-pagination-btn-active{
2528
+ .rs-pagination[data-size=md] .rs-pagination-btn-active{
2535
2529
  padding-block:calc(var(--rs-padding-block-md) - 1px);
2536
2530
  padding-inline:calc(var(--rs-padding-inline-md) - 1px);
2537
2531
  }
2538
- .rs-pagination-sm .rs-pagination-btn{
2532
+ .rs-pagination[data-size=sm] .rs-pagination-btn{
2539
2533
  min-width:30px;
2540
2534
  }
2541
- .rs-pagination-sm .rs-pagination-btn-active{
2535
+ .rs-pagination[data-size=sm] .rs-pagination-btn-active{
2542
2536
  padding-block:calc(var(--rs-spacing-block-sm) - 1px);
2543
2537
  padding-inline:calc(var(--rs-spacing-inline-sm) - 1px);
2544
2538
  }
2545
- .rs-pagination-xs .rs-pagination-btn{
2539
+ .rs-pagination[data-size=xs] .rs-pagination-btn{
2546
2540
  min-width:24px;
2547
2541
  }
2548
- .rs-pagination-xs .rs-pagination-btn-active{
2542
+ .rs-pagination[data-size=xs] .rs-pagination-btn-active{
2549
2543
  padding-block:calc(var(--rs-spacing-block-xs) - 1px);
2550
2544
  padding-inline:calc(var(--rs-spacing-inline-xs) - 1px);
2551
2545
  }
2552
2546
 
2553
2547
  .rs-pagination-btn{
2554
- --rs-btn-size:var(--rs-btn-size-sm);
2555
- --rs-btn-font-size:var(--rs-btn-font-size-sm);
2556
- --rs-btn-line-height:var(--rs-btn-line-height-sm);
2557
- --rs-btn-padding-inline:var(--rs-btn-padding-inline-sm);
2558
- --rs-btn-padding-block:var(--rs-btn-padding-block-sm);
2559
- --rs-btn-icon-size:var(--rs-btn-icon-size-sm);
2560
2548
  margin:0 2px;
2561
2549
  position:relative;
2562
2550
  float:inline-start;
@@ -2592,17 +2580,6 @@ body{
2592
2580
  padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width, 1px));
2593
2581
  padding-block:calc(var(--rs-btn-padding-block) - var(--rs-btn-ghost-border-width, 1px));
2594
2582
  }
2595
- .rs-pagination-btn.rs-pagination-btn-active:hover{
2596
- color:var(--rs-btn-ghost-hover-text);
2597
- background-color:transparent;
2598
- border-color:var(--rs-btn-ghost-hover-border);
2599
- box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
2600
- }
2601
- .rs-pagination-btn.rs-pagination-btn-active:active, .rs-pagination-btn.rs-pagination-btn-active.rs-btn-active{
2602
- color:var(--rs-btn-ghost-active-text);
2603
- background-color:transparent;
2604
- border-color:var(--rs-btn-ghost-active-border);
2605
- }
2606
2583
  .high-contrast-mode .rs-pagination-btn.rs-pagination-btn-active{
2607
2584
  color:var(--rs-pagination-item-current-text);
2608
2585
  text-decoration:underline;