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

package/DateRangePicker/styles/index.css

@@ -108,7 +108,7 @@ body{
   --rs-bg-well:var(--rs-gray-50);
   --rs-bg-active:var(--rs-primary-500);
   --rs-state-hover-bg:var(--rs-primary-50);
-  --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);
@@ -171,7 +171,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);
@@ -274,7 +274,6 @@ body{
   --rs-bg-well:var(--rs-gray-900);
   --rs-bg-active:var(--rs-primary-700);
   --rs-state-hover-bg:var(--rs-gray-600);
-  --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);
@@ -336,7 +335,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);
@@ -439,7 +437,7 @@ body{
   --rs-bg-well:var(--rs-gray-900);
   --rs-bg-active:var(--rs-primary-500);
   --rs-state-hover-bg:var(--rs-gray-600);
-  --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);
@@ -544,7 +542,7 @@ body{
   --rs-zindex-date-range-picker-table-cell-content:1;
   --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;
 }
@@ -605,9 +603,6 @@ body{
   --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{
@@ -634,7 +629,7 @@ body{
   --rs-stack-align:center;
   flex-direction:row-reverse;
 }
-.rs-stack-wrap{
+.rs-stack[data-wrap=true]{
   flex-wrap:wrap;
 }
 .rs-stack-xs-column{
@@ -720,12 +715,6 @@ body{
   }
 }
 
-.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;
@@ -742,7 +731,7 @@ body{
   --rs-loader-spin-ring-width:3px;
 }
 
-.rs-loader{
+.rs-loader-box{
   display:inline-flex;
   align-items:center;
   justify-content:center;
@@ -784,34 +773,34 @@ body{
   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;
@@ -824,26 +813,26 @@ body{
   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);
 }
@@ -905,32 +894,32 @@ body{
   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);
@@ -970,25 +959,25 @@ body{
   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);
@@ -997,11 +986,11 @@ body{
 [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{
@@ -1036,23 +1025,23 @@ body{
 .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);
@@ -1061,42 +1050,42 @@ body{
   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;
 }
 
@@ -1116,16 +1105,16 @@ body{
   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);
@@ -1246,7 +1235,7 @@ body{
   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{
@@ -1254,16 +1243,16 @@ body{
   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{
@@ -1276,7 +1265,15 @@ body{
             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);
@@ -1284,7 +1281,7 @@ body{
   --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);
@@ -1292,7 +1289,7 @@ body{
   --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);
@@ -1300,7 +1297,7 @@ body{
   --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);
@@ -1319,101 +1316,121 @@ body{
   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-subtle, .rs-calendar-header-error{
+.rs-btn[data-appearance=subtle],
+.rs-btn-subtle,
+.rs-calendar-header-error{
   color:var(--rs-btn-subtle-text);
   background-color:transparent;
 }
-.rs-btn-subtle:hover, .rs-calendar-header-error:hover{
+.rs-btn[data-appearance=subtle]:hover,
+.rs-btn-subtle:hover,
+.rs-calendar-header-error:hover{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.rs-btn-subtle:active, .rs-calendar-header-error:active, .rs-btn-subtle.rs-btn-active, .rs-btn-active.rs-calendar-header-error{
+.rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
+.rs-btn-subtle:active,
+.rs-calendar-header-error:active,
+.rs-btn-subtle.rs-btn[data-active=true],
+.rs-btn[data-active=true].rs-calendar-header-error{
   color:var(--rs-btn-subtle-active-text);
   background-color:var(--rs-btn-subtle-active-bg);
 }
-.rs-btn-subtle:disabled, .rs-calendar-header-error:disabled, .rs-btn-subtle.rs-btn-disabled, .rs-btn-disabled.rs-calendar-header-error{
+.rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+.rs-btn-subtle:disabled,
+.rs-calendar-header-error:disabled,
+.rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-btn[data-disabled=true].rs-calendar-header-error{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-[data-theme=high-contrast] .rs-btn-subtle:disabled, [data-theme=high-contrast] .rs-calendar-header-error:disabled, .rs-theme-high-contrast .rs-btn-subtle:disabled, .rs-theme-high-contrast .rs-calendar-header-error:disabled, [data-theme=high-contrast] .rs-btn-subtle.rs-btn-disabled, [data-theme=high-contrast] .rs-btn-disabled.rs-calendar-header-error, .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-disabled.rs-calendar-header-error{
+[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,
+[data-theme=high-contrast] .rs-calendar-header-error:disabled,
+.rs-theme-high-contrast .rs-btn-subtle:disabled,
+.rs-theme-high-contrast .rs-calendar-header-error:disabled,
+[data-theme=high-contrast] .rs-btn-subtle.rs-btn[data-disabled=true],
+[data-theme=high-contrast] .rs-btn[data-disabled=true].rs-calendar-header-error,
+.rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-theme-high-contrast .rs-btn[data-disabled=true].rs-calendar-header-error{
   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);
@@ -1435,7 +1452,7 @@ body{
   --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);
@@ -1457,7 +1474,7 @@ body{
   --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);
@@ -1476,7 +1493,7 @@ body{
   --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);
@@ -1498,7 +1515,7 @@ body{
   --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);
@@ -1520,7 +1537,7 @@ body{
   --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);
@@ -1539,7 +1556,7 @@ body{
   --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);
@@ -1561,7 +1578,7 @@ body{
   --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);
@@ -1583,7 +1600,7 @@ body{
   --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);
@@ -1602,7 +1619,7 @@ body{
   --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);
@@ -1624,7 +1641,7 @@ body{
   --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);
@@ -1646,7 +1663,7 @@ body{
   --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);
@@ -1665,7 +1682,7 @@ body{
   --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);
@@ -1687,7 +1704,7 @@ body{
   --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);
@@ -1709,7 +1726,7 @@ body{
   --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);
@@ -1728,7 +1745,7 @@ body{
   --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);
@@ -1750,7 +1767,7 @@ body{
   --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);
@@ -1772,7 +1789,7 @@ body{
   --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);
@@ -1791,7 +1808,7 @@ body{
   --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);
@@ -1813,7 +1830,7 @@ body{
   --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);
@@ -1835,7 +1852,7 @@ body{
   --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);
@@ -1854,20 +1871,20 @@ body{
   --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);
@@ -1880,29 +1897,29 @@ body{
   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{
@@ -1922,14 +1939,14 @@ body{
   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;
@@ -1939,45 +1956,45 @@ body{
   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);
 }
 
@@ -2051,7 +2068,7 @@ body{
 }
 .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{
@@ -2212,18 +2229,18 @@ body{
   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);
 }
@@ -2238,22 +2255,10 @@ body{
   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;
@@ -2327,7 +2332,7 @@ body{
   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;
@@ -2949,7 +2954,7 @@ body{
   color:var(--rs-listbox-option-hover-text);
 }
 [data-theme=high-contrast] .rs-calendar-time-dropdown-cell:hover, .rs-theme-high-contrast .rs-calendar-time-dropdown-cell:hover{
-  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;
@@ -2966,7 +2971,7 @@ body{
     color:var(--rs-listbox-option-hover-text);
   }
   [data-theme=high-contrast] .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover, .rs-theme-high-contrast .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover{
-    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;
@@ -3070,13 +3075,13 @@ body{
   width:unset;
 }
 .rs-picker-popup .rs-calendar-month-dropdown-cell:focus-visible .rs-calendar-month-dropdown-cell-content{
-  outline:3px solid var(--rs-color-focus-ring);
+  outline:3px solid var(--rs-focus-ring-color);
 }
 .rs-picker-popup .rs-calendar-table-cell:focus-visible{
   outline:none;
 }
 .rs-picker-popup .rs-calendar-table-cell:focus-visible .rs-calendar-table-cell-content{
-  outline:3px solid var(--rs-color-focus-ring);
+  outline:3px solid var(--rs-focus-ring-color);
 }
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content{
   width:var(--rs-calendar-in-menu-content-side-length);
@@ -3087,7 +3092,7 @@ body{
   color:var(--rs-listbox-option-hover-text);
 }
 [data-theme=high-contrast] .rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content:hover, .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content:hover{
-  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;
@@ -3115,7 +3120,7 @@ body{
   color:var(--rs-listbox-option-hover-text);
 }
 [data-theme=high-contrast] .rs-picker-popup .rs-calendar .rs-calendar-table-cell:hover .rs-calendar-table-cell-content, .rs-theme-high-contrast .rs-picker-popup .rs-calendar .rs-calendar-table-cell:hover .rs-calendar-table-cell-content{
-  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;