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

package/CheckPicker/styles/index.css

@@ -102,7 +102,7 @@ body{
   --rs-text-highlight-bg:#fff6c9;
   --rs-border-primary:var(--rs-gray-200);
   --rs-bg-overlay:var(--rs-gray-0);
-  --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg:var(--rs-gray-50);
   --rs-btn-default-text:var(--rs-gray-800);
@@ -163,7 +163,7 @@ body{
 }
 @supports not (color: rgb(from white r g b)){
   :root{
-    --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
+    --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
     --rs-loader-ring:rgba(247, 247, 250, 0.8);
     --rs-loader-backdrop:rgba(255, 255, 255, 0.9);
     --rs-loader-ring-inverse:rgba(247, 247, 250, 0.3);
@@ -260,7 +260,6 @@ body{
   --rs-text-disabled:var(--rs-gray-400);
   --rs-border-primary:var(--rs-gray-600);
   --rs-bg-overlay:var(--rs-gray-700);
-  --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg:var(--rs-gray-600);
   --rs-btn-default-text:var(--rs-gray-50);
@@ -320,7 +319,6 @@ body{
 @supports not (color: rgb(from white r g b)){
   [data-theme=dark],
   .rs-theme-dark{
-    --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring:rgba(233, 235, 240, 0.3);
     --rs-loader-backdrop:rgba(15, 19, 26, 0.83);
     --rs-loader-ring-inverse:rgba(233, 235, 240, 0.8);
@@ -417,7 +415,7 @@ body{
   --rs-text-highlight-bg:var(--rs-primary-500);
   --rs-border-primary:var(--rs-gray-100);
   --rs-bg-overlay:var(--rs-gray-800);
-  --rs-color-focus-ring:var(--rs-gray-0);
+  --rs-focus-ring-color:var(--rs-gray-0);
   --rs-state-error-outline:2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg:transparent;
   --rs-btn-default-text:var(--rs-primary-500);
@@ -516,7 +514,7 @@ body{
   --rs-ripple-bg:rgb(0 0 0 / 20%);
   --rs-zindex-dropdown:5;
   --rs-zindex-picker-toggle:5;
-  --rs-zindex-picker-popup:calc(var(--rs-zindex-picker-toggle) + 2);
+  --rs-zindex-picker-popup:7;
   --rs-zindex-modal:1050;
   --rs-zindex-drawer:1050;
 }
@@ -581,7 +579,7 @@ body{
   position:relative;
   align-items:center;
 }
-.rs-checkbox-disabled label{
+.rs-checkbox[data-disabled=true] label{
   cursor:var(--rs-cursor-disabled);
 }
 .rs-checkbox label{
@@ -591,14 +589,14 @@ body{
 .rs-checkbox-inner::before{
   border-color:var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled label{
+.rs-checkbox[data-disabled=true] label{
   cursor:var(--rs-cursor-disabled);
 }
-.rs-checkbox-disabled > .rs-checkbox-checker > label{
+.rs-checkbox[data-disabled=true] > .rs-checkbox-checker > label{
   color:var(--rs-text-disabled);
 }
 .rs-checkbox [type=checkbox]:focus-visible ~ .rs-checkbox-inner::before{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 
@@ -629,7 +627,7 @@ body{
 [data-theme=high-contrast] .rs-checkbox-control .rs-checkbox-inner::after, .rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::after{
   transition:none;
 }
-.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after, .rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after{
+.rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::after, .rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::after{
   border:solid var(--rs-checkbox-icon);
   width:6px;
   height:9px;
@@ -637,11 +635,11 @@ body{
   margin-inline-start:5px;
   opacity:1;
 }
-.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after{
+.rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::after{
   border-width:0 2px 2px 0;
   transform:rotate(45deg) scale(1);
 }
-.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after{
+.rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::after{
   border-width:0 0 2px;
   transform:rotate(0deg) scale(1);
   width:10px;
@@ -675,7 +673,7 @@ body{
 [data-theme=high-contrast] .rs-checkbox-control::before, .rs-theme-high-contrast .rs-checkbox-control::before{
   transition:none;
 }
-.rs-checkbox-checked .rs-checkbox-control::before{
+.rs-checkbox[data-checked=true] .rs-checkbox-control::before{
   transform:scale(1.5);
   opacity:0;
   visibility:visible;
@@ -692,49 +690,49 @@ body{
 label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   border-color:var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-control .rs-checkbox-inner::before{
+.rs-checkbox[data-disabled=true][data-checked=false] .rs-checkbox-control .rs-checkbox-inner::before{
   border-color:var(--rs-checkbox-disabled-bg);
   background-color:var(--rs-checkbox-disabled-bg);
 }
-.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before{
+.rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::before{
   border-color:var(--rs-checkbox-checked-bg);
   background-color:var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before{
+.rs-checkbox[data-disabled=true][data-checked=true] .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox[data-disabled=true][data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::before{
   opacity:0.5;
 }
 
-.rs-checkbox-red{
+.rs-checkbox[data-color=red]{
   --rs-checkbox-checked-bg:var(--rs-red-500);
   --rs-checkbox-border:var(--rs-red-500);
 }
 
-.rs-checkbox-orange{
+.rs-checkbox[data-color=orange]{
   --rs-checkbox-checked-bg:var(--rs-orange-500);
   --rs-checkbox-border:var(--rs-orange-500);
 }
 
-.rs-checkbox-yellow{
+.rs-checkbox[data-color=yellow]{
   --rs-checkbox-checked-bg:var(--rs-yellow-500);
   --rs-checkbox-border:var(--rs-yellow-500);
 }
 
-.rs-checkbox-green{
+.rs-checkbox[data-color=green]{
   --rs-checkbox-checked-bg:var(--rs-green-500);
   --rs-checkbox-border:var(--rs-green-500);
 }
 
-.rs-checkbox-cyan{
+.rs-checkbox[data-color=cyan]{
   --rs-checkbox-checked-bg:var(--rs-cyan-500);
   --rs-checkbox-border:var(--rs-cyan-500);
 }
 
-.rs-checkbox-blue{
+.rs-checkbox[data-color=blue]{
   --rs-checkbox-checked-bg:var(--rs-blue-500);
   --rs-checkbox-border:var(--rs-blue-500);
 }
 
-.rs-checkbox-violet{
+.rs-checkbox[data-color=violet]{
   --rs-checkbox-checked-bg:var(--rs-violet-500);
   --rs-checkbox-border:var(--rs-violet-500);
 }
@@ -745,9 +743,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-stack-direction:row;
   --rs-stack-align:center;
   --rs-stack-justify:flex-start;
-  --rs-stack-item-grow:0;
-  --rs-stack-item-shrink:1;
-  --rs-stack-item-basis:auto;
 }
 
 .rs-stack{
@@ -774,7 +769,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-stack-align:center;
   flex-direction:row-reverse;
 }
-.rs-stack-wrap{
+.rs-stack[data-wrap=true]{
   flex-wrap:wrap;
 }
 .rs-stack-xs-column{
@@ -860,12 +855,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   }
 }
 
-.rs-stack-item{
-  align-self:var(--rs-stack-item-align-self);
-  order:var(--rs-stack-item-order);
-  flex:var(--rs-stack-item-flex, var(--rs-stack-item-grow) var(--rs-stack-item-shrink) var(--rs-stack-item-basis));
-}
-
 :root{
   --rs-loader-duration-fast:0.4s;
   --rs-loader-duration-normal:0.6s;
@@ -882,7 +871,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-loader-spin-ring-width:3px;
 }
 
-.rs-loader{
+.rs-loader-box{
   display:inline-flex;
   align-items:center;
   justify-content:center;
@@ -924,34 +913,34 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   height:100%;
   background:var(--rs-loader-backdrop);
 }
-.rs-loader-vertical .rs-loader{
+.rs-loader[data-direction=vertical] .rs-loader-box{
   flex-direction:column;
 }
-.rs-loader-inverse .rs-loader-content{
+.rs-loader[data-inverse=true] .rs-loader-content{
   color:var(--rs-text-inverse);
 }
-.rs-loader-inverse .rs-loader-backdrop{
+.rs-loader[data-inverse=true] .rs-loader-backdrop{
   background:var(--rs-loader-backdrop-inverse);
 }
-.rs-loader-inverse .rs-loader-spin::before{
+.rs-loader[data-inverse=true] .rs-loader-spin::before{
   border-color:var(--rs-loader-ring-inverse);
 }
-.rs-loader-inverse .rs-loader-spin::after{
+.rs-loader[data-inverse=true] .rs-loader-spin::after{
   border-top-color:var(--rs-loader-rotor-inverse);
 }
-.rs-loader-speed-fast .rs-loader-spin::after{
+.rs-loader[data-speed=fast] .rs-loader-spin::after{
   animation-duration:var(--rs-loader-duration-fast);
 }
-.rs-loader-speed-normal .rs-loader-spin::after{
+.rs-loader[data-speed=normal] .rs-loader-spin::after{
   animation-duration:var(--rs-loader-duration-normal);
 }
-.rs-loader-speed-slow .rs-loader-spin::after{
+.rs-loader[data-speed=slow] .rs-loader-spin::after{
   animation-duration:var(--rs-loader-duration-slow);
 }
-.rs-loader-speed-paused .rs-loader-spin::after{
+.rs-loader[data-speed=paused] .rs-loader-spin::after{
   animation-play-state:var(--rs-loader-duration-paused);
 }
-.rs-loader-center{
+.rs-loader[data-center=true]{
   position:absolute;
   top:0;
   bottom:0;
@@ -964,26 +953,26 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   align-items:center;
   justify-content:center;
 }
-.rs-loader-center .rs-loader-content{
+.rs-loader[data-center=true] .rs-loader-content{
   z-index:1;
 }
 
-.rs-loader-xs{
+.rs-loader[data-size=xs]{
   --rs-loader-size:var(--rs-loader-size-xs);
   --rs-loader-font-size:var(--rs-loader-font-size-xs);
 }
 
-.rs-loader-sm{
+.rs-loader[data-size=sm]{
   --rs-loader-size:var(--rs-loader-size-sm);
   --rs-loader-font-size:var(--rs-loader-font-size-sm);
 }
 
-.rs-loader-md{
+.rs-loader[data-size=md]{
   --rs-loader-size:var(--rs-loader-size-md);
   --rs-loader-font-size:var(--rs-loader-font-size-md);
 }
 
-.rs-loader-lg{
+.rs-loader[data-size=lg]{
   --rs-loader-size:var(--rs-loader-size-lg);
   --rs-loader-font-size:var(--rs-loader-font-size-lg);
 }
@@ -1045,32 +1034,32 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   border-color:var(--rs-input-focus-border);
 }
 .rs-input:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-input:disabled{
   background-color:var(--rs-input-disabled-bg);
   color:var(--rs-text-disabled);
 }
-.rs-input.rs-input-xs{
+.rs-input[data-size=xs]{
   --rs-input-font-size:var(--rs-input-font-size-xs);
   --rs-input-line-height:var(--rs-input-line-height-xs);
   --rs-input-padding-block:var(--rs-input-padding-block-xs);
   --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
 }
-.rs-input.rs-input-sm{
+.rs-input[data-size=sm]{
   --rs-input-font-size:var(--rs-input-font-size-sm);
   --rs-input-line-height:var(--rs-input-line-height-sm);
   --rs-input-padding-block:var(--rs-input-padding-block-sm);
   --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
 }
-.rs-input.rs-input-md{
+.rs-input[data-size=md]{
   --rs-input-font-size:var(--rs-input-font-size-md);
   --rs-input-line-height:var(--rs-input-line-height-md);
   --rs-input-padding-block:var(--rs-input-padding-block-md);
   --rs-input-padding-inline:var(--rs-input-padding-inline-md);
 }
-.rs-input.rs-input-lg{
+.rs-input[data-size=lg]{
   --rs-input-font-size:var(--rs-input-font-size-lg);
   --rs-input-line-height:var(--rs-input-line-height-lg);
   --rs-input-padding-block:var(--rs-input-padding-block-lg);
@@ -1110,25 +1099,25 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   border:1px solid var(--rs-border-primary);
   overflow:hidden;
 }
-.rs-input-group.rs-input-group-xs{
+.rs-input-group[data-size=xs]{
   --rs-input-group-input-height:var(--rs-input-group-input-height-xs);
   --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-xs);
   --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-xs);
   --rs-input-group-font-size:var(--rs-input-group-font-size-xs);
 }
-.rs-input-group.rs-input-group-sm{
+.rs-input-group[data-size=sm]{
   --rs-input-group-input-height:var(--rs-input-group-input-height-sm);
   --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-sm);
   --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-sm);
   --rs-input-group-font-size:var(--rs-input-group-font-size-sm);
 }
-.rs-input-group.rs-input-group-md{
+.rs-input-group[data-size=md]{
   --rs-input-group-input-height:var(--rs-input-group-input-height-md);
   --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-md);
   --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-md);
   --rs-input-group-font-size:var(--rs-input-group-font-size-md);
 }
-.rs-input-group.rs-input-group-lg{
+.rs-input-group[data-size=lg]{
   --rs-input-group-input-height:var(--rs-input-group-input-height-lg);
   --rs-input-group-inside-btn-spacing:var(--rs-input-group-inside-btn-m-x-lg);
   --rs-input-group-inside-btn-padding:var(--rs-input-group-inside-btn-p-x-lg);
@@ -1137,11 +1126,11 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
 [data-theme=high-contrast] .rs-input-group, .rs-theme-high-contrast .rs-input-group{
   transition:none;
 }
-.rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
+.rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
   border-color:var(--rs-input-focus-border);
 }
-.rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus, .rs-input-group:focus-within{
-  outline:2px solid var(--rs-color-focus-ring);
+.rs-input-group:not([data-disabled=true]).rs-input-group-focus, .rs-input-group:focus-within{
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-input-group .rs-input-group{
@@ -1176,23 +1165,23 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
 .rs-input-group > .rs-input-group-addon > .rs-icon{
   font-size:inherit;
 }
-.rs-input-group.rs-input-group-inside{
+.rs-input-group[data-inside=true]{
   width:var(--rs-input-group-width);
   align-items:center;
   background-color:var(--rs-input-bg);
 }
-.rs-input-group.rs-input-group-inside .rs-input{
+.rs-input-group[data-inside=true] .rs-input{
   display:block;
   width:100%;
   border:none;
   outline:none;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-btn,
-.rs-input-group.rs-input-group-inside .rs-input-group-addon{
+.rs-input-group[data-inside=true] .rs-input-group-btn,
+.rs-input-group[data-inside=true] .rs-input-group-addon{
   flex:0 0 auto;
   width:auto;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-btn{
+.rs-input-group[data-inside=true] .rs-input-group-btn{
   border-radius:var(--rs-input-group-border-radius);
   height:calc(var(--rs-input-group-input-height) - var(--rs-input-group-inside-btn-spacing) * 2);
   margin-inline:var(--rs-input-group-inside-btn-spacing);
@@ -1201,42 +1190,42 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   background-color:transparent;
   color:inherit;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-btn:hover{
+.rs-input-group[data-inside=true] .rs-input-group-btn:hover{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.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{
+.rs-input-group[data-inside=true] .rs-input-group-btn:active, .rs-input-group[data-inside=true] .rs-input-group-btn[data-active=true]{
   color:var(--rs-btn-subtle-active-text);
   background-color:var(--rs-btn-subtle-active-bg);
 }
-.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{
+.rs-input-group[data-inside=true] .rs-input-group-btn:disabled, .rs-input-group[data-inside=true] .rs-input-group-btn[data-disabled=true]{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-btn:focus{
+.rs-input-group[data-inside=true] .rs-input-group-btn:focus{
   outline:none;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-addon{
+.rs-input-group[data-inside=true] .rs-input-group-addon{
   background:none;
   border:none;
 }
-.rs-input-group.rs-input-group-inside .rs-input:not(:first-child),
-.rs-input-group.rs-input-group-inside .rs-auto-complete:not(:first-child) .rs-input{
+.rs-input-group[data-inside=true] .rs-input:not(:first-child),
+.rs-input-group[data-inside=true] .rs-auto-complete:not(:first-child) .rs-input{
   padding-inline-start:0;
 }
-.rs-input-group.rs-input-group-inside .rs-input:not(:last-child),
-.rs-input-group.rs-input-group-inside .rs-auto-complete:not(:last-child) .rs-input{
+.rs-input-group[data-inside=true] .rs-input:not(:last-child),
+.rs-input-group[data-inside=true] .rs-auto-complete:not(:last-child) .rs-input{
   padding-inline-end:0;
 }
 
-.rs-input-group.rs-input-group-disabled{
+.rs-input-group[data-disabled=true]{
   background-color:var(--rs-input-disabled-bg);
   color:var(--rs-text-disabled);
   cursor:not-allowed;
 }
-.rs-input-group.rs-input-group-disabled .rs-input,
-.rs-input-group.rs-input-group-disabled .rs-input-group-btn,
-.rs-input-group.rs-input-group-disabled .rs-input-group-addon{
+.rs-input-group[data-disabled=true] .rs-input,
+.rs-input-group[data-disabled=true] .rs-input-group-btn,
+.rs-input-group[data-disabled=true] .rs-input-group-addon{
   color:inherit;
 }
 
@@ -1256,16 +1245,16 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   padding-inline:var(--rs-spacing);
   min-width:var(--rs-input-group-input-height);
 }
-.rs-input-group-addon.rs-input-sm{
+.rs-input-group-addon[data-size=sm]{
   padding-block:var(--rs-spacing-block-sm);
   padding-inline:var(--rs-spacing-inline-sm);
   font-size:var(--rs-font-size-sm);
 }
-.rs-input-group-addon.rs-input-xs{
+.rs-input-group-addon[data-size=xs]{
   padding:var(--rs-spacing-inline-xs);
   font-size:var(--rs-font-size-xs);
 }
-.rs-input-group-addon.rs-input-lg{
+.rs-input-group-addon[data-size=lg]{
   padding-block:var(--rs-spacing-block-lg);
   padding-inline:var(--rs-spacing-inline-lg);
   font-size:var(--rs-font-size-md);
@@ -1386,7 +1375,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   border-color:var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-btn:hover{
@@ -1394,16 +1383,16 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   background-color:var(--rs-btn-default-hover-bg);
   text-decoration:none;
 }
-.rs-btn:active, .rs-btn.rs-btn-active{
+.rs-btn:active, .rs-btn.rs-btn[data-active=true]{
   color:var(--rs-btn-default-active-text);
   background-color:var(--rs-btn-default-active-bg);
 }
-.rs-btn:disabled, .rs-btn.rs-btn-disabled{
+.rs-btn:disabled, .rs-btn.rs-btn[data-disabled=true]{
   cursor:var(--rs-cursor-disabled);
   color:var(--rs-btn-default-disabled-text);
   background-color:var(--rs-btn-default-disabled-bg);
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 .rs-btn{
@@ -1416,7 +1405,15 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
             mask-image:radial-gradient(white, black);
   }
 }
-.rs-btn.rs-btn-lg{
+.rs-btn{
+  --rs-btn-size:var(--rs-btn-size-md);
+  --rs-btn-font-size:var(--rs-btn-font-size-md);
+  --rs-btn-line-height:var(--rs-btn-line-height-md);
+  --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
+  --rs-btn-padding-block:var(--rs-btn-padding-block-md);
+  --rs-btn-icon-size:var(--rs-btn-icon-size-md);
+}
+.rs-btn[data-size=lg]{
   --rs-btn-size:var(--rs-btn-size-lg);
   --rs-btn-font-size:var(--rs-btn-font-size-lg);
   --rs-btn-line-height:var(--rs-btn-line-height-lg);
@@ -1424,7 +1421,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-padding-block:var(--rs-btn-padding-block-lg);
   --rs-btn-icon-size:var(--rs-btn-icon-size-lg);
 }
-.rs-btn.rs-btn-md{
+.rs-btn[data-size=md]{
   --rs-btn-size:var(--rs-btn-size-md);
   --rs-btn-font-size:var(--rs-btn-font-size-md);
   --rs-btn-line-height:var(--rs-btn-line-height-md);
@@ -1432,7 +1429,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-padding-block:var(--rs-btn-padding-block-md);
   --rs-btn-icon-size:var(--rs-btn-icon-size-md);
 }
-.rs-btn.rs-btn-sm{
+.rs-btn[data-size=sm]{
   --rs-btn-size:var(--rs-btn-size-sm);
   --rs-btn-font-size:var(--rs-btn-font-size-sm);
   --rs-btn-line-height:var(--rs-btn-line-height-sm);
@@ -1440,7 +1437,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-padding-block:var(--rs-btn-padding-block-sm);
   --rs-btn-icon-size:var(--rs-btn-icon-size-sm);
 }
-.rs-btn.rs-btn-xs{
+.rs-btn[data-size=xs]{
   --rs-btn-size:var(--rs-btn-size-xs);
   --rs-btn-font-size:var(--rs-btn-font-size-xs);
   --rs-btn-line-height:var(--rs-btn-line-height-xs);
@@ -1459,101 +1456,111 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   margin-inline-start:var(--rs-btn-icon-gap);
 }
 
-.rs-btn-primary{
+.rs-btn[data-appearance=primary]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   border-color:var(--rs-btn-primary-border-color);
 }
-.rs-btn-primary:hover{
+.rs-btn[data-appearance=primary]:hover{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-hover-bg);
 }
-.rs-btn-primary:active, .rs-btn-primary.rs-btn-active{
+.rs-btn[data-appearance=primary]:active, .rs-btn[data-appearance=primary].rs-btn[data-active=true]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-active-bg);
 }
-.rs-btn-primary:disabled, .rs-btn-primary.rs-btn-disabled{
+.rs-btn[data-appearance=primary]:disabled, .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   opacity:0.3;
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
+.rs-btn[data-appearance=subtle],
 .rs-btn-subtle{
   color:var(--rs-btn-subtle-text);
   background-color:transparent;
 }
+.rs-btn[data-appearance=subtle]:hover,
 .rs-btn-subtle:hover{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.rs-btn-subtle:active, .rs-btn-subtle.rs-btn-active{
+.rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
+.rs-btn-subtle:active,
+.rs-btn-subtle.rs-btn[data-active=true]{
   color:var(--rs-btn-subtle-active-text);
   background-color:var(--rs-btn-subtle-active-bg);
 }
-.rs-btn-subtle:disabled, .rs-btn-subtle.rs-btn-disabled{
+.rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+.rs-btn-subtle:disabled,
+.rs-btn-subtle.rs-btn[data-disabled=true]{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-[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{
+[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],
+[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[data-disabled=true],
+.rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-link{
+.rs-btn[data-appearance=link]{
   color:var(--rs-btn-link-text);
   background-color:transparent;
 }
-.rs-btn-link:hover{
+.rs-btn[data-appearance=link]:hover{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   -webkit-text-decoration:var(--rs-link-hover-decoration);
           text-decoration:var(--rs-link-hover-decoration);
 }
-.rs-btn-link:active, .rs-btn-link.rs-btn-active{
+.rs-btn[data-appearance=link]:active, .rs-btn[data-appearance=link].rs-btn[data-active=true]{
   color:var(--rs-btn-link-active-text);
   background-color:transparent;
 }
-.rs-btn-link:disabled, .rs-btn-link.rs-btn-disabled{
+.rs-btn[data-appearance=link]:disabled, .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   text-decoration:none;
   opacity:0.3;
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-ghost{
+.rs-btn[data-appearance=ghost]{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   border:var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
   padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
 }
-.rs-btn-ghost:hover{
+.rs-btn[data-appearance=ghost]:hover{
   color:var(--rs-btn-ghost-hover-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-hover-border);
   box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
 }
-.rs-btn-ghost:active, .rs-btn-ghost.rs-btn-active{
+.rs-btn[data-appearance=ghost]:active, .rs-btn[data-appearance=ghost].rs-btn[data-active=true]{
   color:var(--rs-btn-ghost-active-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-active-border);
 }
-.rs-btn-ghost:disabled, .rs-btn-ghost.rs-btn-disabled{
+.rs-btn[data-appearance=ghost]:disabled, .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   opacity:0.3;
   border-color:var(--rs-btn-ghost-border);
   box-shadow:var(--rs-shadow-none);
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-red{
+.rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-500);
   --rs-btn-primary-hover-bg:var(--rs-red-700);
   --rs-btn-primary-active-bg:var(--rs-red-800);
@@ -1575,7 +1582,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-red-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-red-900);
 }
-[data-theme=dark] .rs-btn-red, .rs-theme-dark .rs-btn-red{
+[data-theme=dark] .rs-btn[data-color=red], .rs-theme-dark .rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-700);
   --rs-btn-primary-hover-bg:var(--rs-red-500);
   --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -1597,7 +1604,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-red-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-red-300);
 }
-[data-theme=high-contrast] .rs-btn-red, .rs-theme-high-contrast .rs-btn-red{
+[data-theme=high-contrast] .rs-btn[data-color=red], .rs-theme-high-contrast .rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-700);
   --rs-btn-primary-hover-bg:var(--rs-red-600);
   --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -1616,7 +1623,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-red-200);
 }
 
-.rs-btn-orange{
+.rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-500);
   --rs-btn-primary-hover-bg:var(--rs-orange-700);
   --rs-btn-primary-active-bg:var(--rs-orange-800);
@@ -1638,7 +1645,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-orange-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-orange-900);
 }
-[data-theme=dark] .rs-btn-orange, .rs-theme-dark .rs-btn-orange{
+[data-theme=dark] .rs-btn[data-color=orange], .rs-theme-dark .rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-700);
   --rs-btn-primary-hover-bg:var(--rs-orange-500);
   --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -1660,7 +1667,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-orange-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-orange-300);
 }
-[data-theme=high-contrast] .rs-btn-orange, .rs-theme-high-contrast .rs-btn-orange{
+[data-theme=high-contrast] .rs-btn[data-color=orange], .rs-theme-high-contrast .rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-700);
   --rs-btn-primary-hover-bg:var(--rs-orange-600);
   --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -1679,7 +1686,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
 
-.rs-btn-yellow{
+.rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-500);
   --rs-btn-primary-hover-bg:var(--rs-yellow-700);
   --rs-btn-primary-active-bg:var(--rs-yellow-800);
@@ -1701,7 +1708,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-yellow-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-900);
 }
-[data-theme=dark] .rs-btn-yellow, .rs-theme-dark .rs-btn-yellow{
+[data-theme=dark] .rs-btn[data-color=yellow], .rs-theme-dark .rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-700);
   --rs-btn-primary-hover-bg:var(--rs-yellow-500);
   --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1723,7 +1730,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-yellow-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-yellow-300);
 }
-[data-theme=high-contrast] .rs-btn-yellow, .rs-theme-high-contrast .rs-btn-yellow{
+[data-theme=high-contrast] .rs-btn[data-color=yellow], .rs-theme-high-contrast .rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-700);
   --rs-btn-primary-hover-bg:var(--rs-yellow-600);
   --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -1742,7 +1749,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
 
-.rs-btn-green{
+.rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-500);
   --rs-btn-primary-hover-bg:var(--rs-green-700);
   --rs-btn-primary-active-bg:var(--rs-green-800);
@@ -1764,7 +1771,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-green-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-green-900);
 }
-[data-theme=dark] .rs-btn-green, .rs-theme-dark .rs-btn-green{
+[data-theme=dark] .rs-btn[data-color=green], .rs-theme-dark .rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-700);
   --rs-btn-primary-hover-bg:var(--rs-green-500);
   --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1786,7 +1793,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-green-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-green-300);
 }
-[data-theme=high-contrast] .rs-btn-green, .rs-theme-high-contrast .rs-btn-green{
+[data-theme=high-contrast] .rs-btn[data-color=green], .rs-theme-high-contrast .rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-700);
   --rs-btn-primary-hover-bg:var(--rs-green-600);
   --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -1805,7 +1812,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-green-200);
 }
 
-.rs-btn-cyan{
+.rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-500);
   --rs-btn-primary-hover-bg:var(--rs-cyan-700);
   --rs-btn-primary-active-bg:var(--rs-cyan-800);
@@ -1827,7 +1834,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-cyan-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-900);
 }
-[data-theme=dark] .rs-btn-cyan, .rs-theme-dark .rs-btn-cyan{
+[data-theme=dark] .rs-btn[data-color=cyan], .rs-theme-dark .rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-700);
   --rs-btn-primary-hover-bg:var(--rs-cyan-500);
   --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1849,7 +1856,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-cyan-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-cyan-300);
 }
-[data-theme=high-contrast] .rs-btn-cyan, .rs-theme-high-contrast .rs-btn-cyan{
+[data-theme=high-contrast] .rs-btn[data-color=cyan], .rs-theme-high-contrast .rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-700);
   --rs-btn-primary-hover-bg:var(--rs-cyan-600);
   --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1868,7 +1875,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
 
-.rs-btn-blue{
+.rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-500);
   --rs-btn-primary-hover-bg:var(--rs-blue-700);
   --rs-btn-primary-active-bg:var(--rs-blue-800);
@@ -1890,7 +1897,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-blue-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-blue-900);
 }
-[data-theme=dark] .rs-btn-blue, .rs-theme-dark .rs-btn-blue{
+[data-theme=dark] .rs-btn[data-color=blue], .rs-theme-dark .rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-700);
   --rs-btn-primary-hover-bg:var(--rs-blue-500);
   --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1912,7 +1919,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-blue-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-blue-300);
 }
-[data-theme=high-contrast] .rs-btn-blue, .rs-theme-high-contrast .rs-btn-blue{
+[data-theme=high-contrast] .rs-btn[data-color=blue], .rs-theme-high-contrast .rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-700);
   --rs-btn-primary-hover-bg:var(--rs-blue-600);
   --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1931,7 +1938,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
 
-.rs-btn-violet{
+.rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-500);
   --rs-btn-primary-hover-bg:var(--rs-violet-700);
   --rs-btn-primary-active-bg:var(--rs-violet-800);
@@ -1953,7 +1960,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-violet-800);
   --rs-iconbtn-primary-pressed-addon:var(--rs-violet-900);
 }
-[data-theme=dark] .rs-btn-violet, .rs-theme-dark .rs-btn-violet{
+[data-theme=dark] .rs-btn[data-color=violet], .rs-theme-dark .rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-700);
   --rs-btn-primary-hover-bg:var(--rs-violet-500);
   --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1975,7 +1982,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-iconbtn-primary-activated-addon:var(--rs-violet-400);
   --rs-iconbtn-primary-pressed-addon:var(--rs-violet-300);
 }
-[data-theme=high-contrast] .rs-btn-violet, .rs-theme-high-contrast .rs-btn-violet{
+[data-theme=high-contrast] .rs-btn[data-color=violet], .rs-theme-high-contrast .rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-700);
   --rs-btn-primary-hover-bg:var(--rs-violet-600);
   --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1994,20 +2001,20 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
 
-.rs-btn-block{
+.rs-btn[data-block=true]{
   width:100%;
 }
-.rs-btn-block + .rs-btn-block{
+.rs-btn[data-block=true] + .rs-btn[data-block=true]{
   margin-top:5px;
 }
 
-.rs-btn-loading{
+.rs-btn[data-loading=true]{
   color:transparent !important;
   position:relative;
   cursor:default;
   pointer-events:none;
 }
-.rs-btn-loading > .rs-btn-spin::before, .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-loading=true] > .rs-btn-spin::after{
   content:"";
   position:absolute;
   width:var(--rs-btn-loading-spin-default-diameter);
@@ -2020,29 +2027,29 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   border-radius:var(--rs-radius-full);
   z-index:1;
 }
-.rs-btn-xs .rs-btn-loading > .rs-btn-spin::before, .rs-btn-xs .rs-btn-loading > .rs-btn-spin::after{
+.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{
   width:var(--rs-btn-loading-spin-xs-diameter);
   height:var(--rs-btn-loading-spin-xs-diameter);
 }
-.rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-loading=true] > .rs-btn-spin::before{
   border:var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
   border-color:rgba(248, 247, 250, 0.3);
 }
-[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{
+[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{
   border-color:var(--rs-loader-ring-inverse);
 }
-.rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::after{
   border-width:var(--rs-btn-loading-spin-ring-wide);
   border-color:var(--rs-loader-rotor) transparent transparent;
   border-style:solid;
   animation:buttonSpin 0.6s infinite linear;
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
   border-top-color:#fff;
 }
-[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{
+[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{
   border-top-color:var(--rs-loader-rotor-inverse);
 }
 @keyframes buttonSpin{
@@ -2062,14 +2069,14 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   font-size:var(--rs-btn-icon-size);
   vertical-align:bottom;
 }
-.rs-btn-icon:not(.rs-btn-icon-with-text){
+.rs-btn-icon:not([data-with-text]){
   width:var(--rs-btn-size);
 }
-.rs-btn-icon.rs-btn-icon-circle{
+.rs-btn-icon[data-shape=circle]{
   border-radius:var(--rs-radius-full);
 }
 
-.rs-btn-icon-with-text > .rs-icon{
+.rs-btn-icon[data-with-text] > .rs-icon{
   position:absolute;
   top:0;
   display:block;
@@ -2079,45 +2086,45 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   height:var(--rs-btn-size);
   padding:calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
 }
-.rs-btn-icon-with-text.rs-btn-icon-placement-left{
+.rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]){
   padding-inline-start:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
 }
-.rs-btn-icon-with-text.rs-btn-icon-placement-left > .rs-icon{
+.rs-btn-icon[data-with-text]:where([data-placement=start], [data-placement=left]) > .rs-icon{
   inset-inline-start:0;
   border-right-width:1px;
 }
-.rs-btn-icon-with-text.rs-btn-icon-placement-right{
+.rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]){
   padding-inline-end:calc(var(--rs-btn-padding-inline) + var(--rs-btn-size));
 }
-.rs-btn-icon-with-text.rs-btn-icon-placement-right > .rs-icon{
+.rs-btn-icon[data-with-text]:where([data-placement=end], [data-placement=right]) > .rs-icon{
   inset-inline-end:0;
 }
-.rs-btn-icon-with-text:hover > .rs-icon{
+.rs-btn-icon[data-with-text]:hover > .rs-icon{
   background-color:var(--rs-iconbtn-activated-addon);
 }
-.rs-btn-icon-with-text:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-active > .rs-icon{
+.rs-btn-icon[data-with-text]:active > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-active=true] > .rs-icon{
   background-color:var(--rs-iconbtn-pressed-addon);
 }
-.rs-btn-icon-with-text:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-disabled > .rs-icon{
+.rs-btn-icon[data-with-text]:disabled > .rs-icon, .rs-btn-icon[data-with-text].rs-btn[data-disabled=true] > .rs-icon{
   background-color:var(--rs-iconbtn-addon);
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-icon-with-text.rs-btn-primary > .rs-icon{
+.rs-btn-icon[data-with-text][data-appearance=primary] > .rs-icon{
   background-color:var(--rs-iconbtn-primary-addon);
 }
-.rs-btn-icon-with-text.rs-btn-primary:hover > .rs-icon{
+.rs-btn-icon[data-with-text][data-appearance=primary]:hover > .rs-icon{
   background-color:var(--rs-iconbtn-primary-activated-addon);
 }
-.rs-btn-icon-with-text.rs-btn-primary:active > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-active > .rs-icon{
+.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{
   background-color:var(--rs-iconbtn-primary-pressed-addon);
 }
-.rs-btn-icon-with-text.rs-btn-primary:disabled > .rs-icon, .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled > .rs-icon{
+.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{
   background-color:var(--rs-iconbtn-primary-addon);
 }
-[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{
+[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]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
@@ -2195,7 +2202,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
 }
 .rs-picker-toggle-active, .rs-picker.rs-picker-focused{
   --rs-picker-toggle-border-color:var(--rs-input-focus-border);
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-picker-label.rs-input-group-addon{
@@ -2356,18 +2363,18 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   background-color:var(--rs-input-bg);
   outline:none;
 }
-.rs-picker-toggle.rs-btn-lg .rs-picker-toggle-textbox{
+.rs-picker-toggle-textbox:where([readonly]){
+  opacity:0;
+}
+.rs-picker-toggle:where([data-size=lg]) .rs-picker-toggle-textbox{
   padding-inline-start:14px;
 }
-.rs-picker-toggle.rs-btn-sm .rs-picker-toggle-textbox{
+.rs-picker-toggle:where([data-size=sm]) .rs-picker-toggle-textbox{
   padding-inline-start:8px;
 }
-.rs-picker-toggle.rs-btn-xs .rs-picker-toggle-textbox{
+.rs-picker-toggle:where([data-size=xs]) .rs-picker-toggle-textbox{
   padding-inline-start:6px;
 }
-.rs-picker-toggle-read-only{
-  opacity:0;
-}
 .rs-picker-toggle .rs-picker[data-variant=default], .rs-picker-toggle{
   transition:var(--rs-picker-transition);
 }
@@ -2382,22 +2389,10 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   background-color:transparent;
   transition:none;
 }
-.rs-picker[data-variant=subtle] .rs-picker-toggle:hover{
+.rs-picker[data-variant=subtle] .rs-picker-toggle:hover,.rs-picker[data-variant=subtle] .rs-picker-toggle-active{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.rs-picker[data-variant=subtle] .rs-picker-toggle:active, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-active{
-  color:var(--rs-btn-subtle-active-text);
-  background-color:var(--rs-btn-subtle-active-bg);
-}
-.rs-picker[data-variant=subtle] .rs-picker-toggle:disabled, .rs-picker[data-variant=subtle] .rs-picker-toggle.rs-btn-disabled{
-  color:var(--rs-btn-subtle-disabled-text);
-  background:none;
-}
-.rs-picker[data-variant=subtle] .rs-picker-toggle-active{
-  background-color:var(--rs-btn-subtle-hover-bg);
-  color:var(--rs-btn-subtle-hover-text);
-}
 .rs-picker-toggle[data-size=lg] .rs-picker-clean .rs-icon{
   width:16px;
   height:16px;
@@ -2475,7 +2470,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   color:var(--rs-listbox-option-hover-text);
 }
 [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{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   outline-width:2px;