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

package/Nav/styles/index.css

@@ -90,7 +90,7 @@ body{
   --rs-border-secondary:var(--rs-gray-100);
   --rs-bg-card:var(--rs-gray-0);
   --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-btn-default-bg:var(--rs-gray-50);
   --rs-btn-default-text:var(--rs-gray-800);
   --rs-btn-default-border-color:var(--rs-gray-200);
@@ -128,7 +128,7 @@ body{
   --rs-dropdown-header-text:var(--rs-gray-500);
   --rs-menuitem-text-active:var(--rs-primary-700);
   --rs-menuitem-active-bg:var(--rs-gray-100);
-  --rs-menuitem-active-text:var(--rs-primary-700);
+  --rs-menuitem-active-text:var(--rs-text-primary);
   --rs-navs-text:var(--rs-gray-800);
   --rs-navs-text-hover:var(--rs-gray-800);
   --rs-navs-bg-hover:var(--rs-gray-200);
@@ -144,7 +144,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-ring-inverse:rgba(247, 247, 250, 0.3);
   }
@@ -227,7 +227,6 @@ body{
   --rs-border-secondary:var(--rs-gray-700);
   --rs-bg-card:var(--rs-gray-800);
   --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-btn-default-bg:var(--rs-gray-600);
   --rs-btn-default-text:var(--rs-gray-50);
   --rs-btn-default-border-color:var(--rs-gray-700);
@@ -282,7 +281,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-ring-inverse:rgba(233, 235, 240, 0.8);
     --rs-menuitem-bg-active:rgba(#006199, 0.2);
@@ -366,7 +364,7 @@ body{
   --rs-border-secondary:var(--rs-gray-700);
   --rs-bg-card:var(--rs-gray-800);
   --rs-bg-overlay:var(--rs-gray-800);
-  --rs-color-focus-ring:var(--rs-gray-0);
+  --rs-focus-ring-color:var(--rs-gray-0);
   --rs-btn-default-bg:transparent;
   --rs-btn-default-text:var(--rs-primary-500);
   --rs-btn-default-border-color:var(--rs-primary-500);
@@ -405,7 +403,7 @@ body{
   --rs-menuitem-bg-active:rgb(from var(--rs-primary-900) r g b / 20%);
   --rs-menuitem-text-active:var(--rs-primary-500);
   --rs-menuitem-active-bg:transparent;
-  --rs-menuitem-active-text:var(--rs-primary-500);
+  --rs-menuitem-active-text:var(--rs-text-primary);
   --rs-navs-text:var(--rs-gray-200);
   --rs-navs-text-hover:var(--rs-primary-500);
   --rs-navs-bg-hover:transparent;
@@ -592,7 +590,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{
@@ -600,16 +598,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{
@@ -622,28 +620,35 @@ 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[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);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-lg);
   --rs-btn-padding-block:var(--rs-btn-padding-block-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);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
   --rs-btn-padding-block:var(--rs-btn-padding-block-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);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-sm);
   --rs-btn-padding-block:var(--rs-btn-padding-block-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);
@@ -661,101 +666,111 @@ 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[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);
@@ -774,7 +789,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-800);
   --rs-btn-link-active-text: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);
@@ -793,7 +808,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-400);
   --rs-btn-link-active-text:var(--rs-red-200);
 }
-[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);
@@ -812,7 +827,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);
@@ -831,7 +846,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-800);
   --rs-btn-link-active-text: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);
@@ -850,7 +865,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-400);
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
-[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);
@@ -869,7 +884,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);
@@ -888,7 +903,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-800);
   --rs-btn-link-active-text: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);
@@ -907,7 +922,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-400);
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
-[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);
@@ -926,7 +941,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);
@@ -945,7 +960,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-800);
   --rs-btn-link-active-text: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);
@@ -964,7 +979,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-400);
   --rs-btn-link-active-text:var(--rs-green-200);
 }
-[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);
@@ -983,7 +998,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);
@@ -1002,7 +1017,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-800);
   --rs-btn-link-active-text: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);
@@ -1021,7 +1036,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-400);
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
-[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);
@@ -1040,7 +1055,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);
@@ -1059,7 +1074,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-800);
   --rs-btn-link-active-text: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);
@@ -1078,7 +1093,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-400);
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
-[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);
@@ -1097,7 +1112,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);
@@ -1116,7 +1131,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-800);
   --rs-btn-link-active-text: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);
@@ -1135,7 +1150,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-400);
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
-[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);
@@ -1154,20 +1169,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);
@@ -1180,29 +1195,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{
@@ -1232,26 +1247,26 @@ body{
   display:inline-block;
   vertical-align:middle;
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn{
   cursor:var(--rs-cursor-disabled) !important;
   box-shadow:none;
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-subtle, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-subtle:focus, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-subtle:active{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=subtle], .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=subtle]:focus, .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=subtle]:active{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-primary, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-primary:focus, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-primary:active{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=primary], .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=primary]:focus, .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=primary]:active{
   opacity:0.3;
   background-color:var(--rs-btn-primary-bg);
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-link, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-link:focus, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-link:active{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=link], .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=link]:focus, .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=link]:active{
   opacity:0.3;
   text-decoration:none;
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-ghost, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-ghost:focus, .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn.rs-btn-ghost:active{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=ghost], .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=ghost]:focus, .rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn.rs-btn[data-appearance=ghost]:active{
   opacity:0.3;
 }
-.rs-dropdown-disabled .rs-dropdown-toggle.rs-btn .rs-ripple-pond{
+.rs-dropdown[data-disabled=true] .rs-dropdown-toggle.rs-btn .rs-ripple-pond{
   display:none !important;
 }
 
@@ -1277,7 +1292,7 @@ body{
   outline:0;
 }
 .rs-dropdown-menu:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-dropdown .rs-dropdown-menu{
@@ -1325,35 +1340,36 @@ body{
   width:var(--rs-font-size-base);
   text-align:center;
 }
-.rs-dropdown-item.rs-dropdown-item-active{
+.rs-dropdown-item[data-active=true]{
   outline:0;
   font-weight:bold;
 }
-.rs-dropdown-item.rs-dropdown-item-active, .rs-dropdown-item.rs-dropdown-item-active:hover, .rs-dropdown-item.rs-dropdown-item-active:focus{
+.rs-dropdown-item[data-active=true], .rs-dropdown-item[data-active=true]:hover, .rs-dropdown-item[data-active=true]:focus{
   color:var(--rs-menuitem-text-active);
   background-color:var(--rs-menuitem-bg-active);
 }
-.rs-dropdown-item.rs-dropdown-item-active .rs-text, .rs-dropdown-item.rs-dropdown-item-active:hover .rs-text, .rs-dropdown-item.rs-dropdown-item-active:focus .rs-text{
+.rs-dropdown-item[data-active=true] .rs-text, .rs-dropdown-item[data-active=true]:hover .rs-text, .rs-dropdown-item[data-active=true]:focus .rs-text{
   color:var(--rs-menuitem-text-active);
 }
-.rs-dropdown-item:focus-visible, .rs-dropdown-item.rs-dropdown-item-focus{
+.rs-dropdown-item:focus-visible, .rs-dropdown-item[data-focus=true]{
   background-color:var(--rs-menuitem-active-bg);
   color:var(--rs-menuitem-active-text);
 }
-[data-theme=high-contrast] .rs-dropdown-item:focus-visible, .rs-theme-high-contrast .rs-dropdown-item:focus-visible, [data-theme=high-contrast] .rs-dropdown-item.rs-dropdown-item-focus, .rs-theme-high-contrast .rs-dropdown-item.rs-dropdown-item-focus{
+[data-theme=high-contrast] .rs-dropdown-item:focus-visible, .rs-theme-high-contrast .rs-dropdown-item:focus-visible, [data-theme=high-contrast] .rs-dropdown-item[data-focus=true], .rs-theme-high-contrast .rs-dropdown-item[data-focus=true]{
   text-decoration:underline;
   box-shadow:inset 0 0 0 2px #fff;
 }
 .rs-dropdown-item:focus{
   outline:0;
 }
-.rs-dropdown-item-disabled{
+.rs-dropdown-item[data-disabled=true]{
+  color:var(--rs-text-disabled);
   cursor:var(--rs-cursor-disabled);
 }
-.rs-dropdown-item-disabled,.rs-dropdown-item-disabled .rs-text{
+.rs-dropdown-item[data-disabled=true] .rs-text{
   color:var(--rs-text-disabled);
 }
-.rs-dropdown-item-disabled:hover, .rs-dropdown-item-disabled:focus{
+.rs-dropdown-item[data-disabled=true]:hover, .rs-dropdown-item[data-disabled=true]:focus{
   text-decoration:none;
   background-color:transparent;
   background-image:none;
@@ -1405,53 +1421,53 @@ body{
   inset-inline-start:unset;
   inset-inline-end:100%;
 }
-.rs-dropdown-item-submenu.rs-dropdown-item-open > .rs-dropdown-menu{
+.rs-dropdown-item-submenu[data-open=true] > .rs-dropdown-menu{
   display:table;
   animation-name:slideUpIn;
   animation-play-state:running;
 }
 
-.rs-dropdown-menu > .rs-dropdown-menu-item-focus{
+.rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]{
   outline:0;
   background-color:var(--rs-menuitem-bg-active);
 }
-.rs-dropdown-menu > .rs-dropdown-menu-item-focus:hover, .rs-dropdown-menu > .rs-dropdown-menu-item-focus:focus{
+.rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:hover, .rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:focus{
   background-color:var(--rs-menuitem-active-bg);
   color:var(--rs-menuitem-active-text);
 }
-[data-theme=high-contrast] .rs-dropdown-menu > .rs-dropdown-menu-item-focus:hover, .rs-theme-high-contrast .rs-dropdown-menu > .rs-dropdown-menu-item-focus:hover, [data-theme=high-contrast] .rs-dropdown-menu > .rs-dropdown-menu-item-focus:focus, .rs-theme-high-contrast .rs-dropdown-menu > .rs-dropdown-menu-item-focus:focus{
+[data-theme=high-contrast] .rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:hover, .rs-theme-high-contrast .rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:hover, [data-theme=high-contrast] .rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:focus, .rs-theme-high-contrast .rs-dropdown-menu > .rs-dropdown-menu-item[data-focus=true]:focus{
   text-decoration:underline;
   box-shadow:inset 0 0 0 2px #fff;
 }
 
-.rs-dropdown-open > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true]) > .rs-dropdown-menu{
   animation-play-state:running;
 }
-.rs-dropdown-open > a{
+.rs-dropdown:where([data-open=true]) > a{
   outline:0;
 }
-.rs-dropdown-open[data-placement=top-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=top-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=top-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=top-end] > .rs-dropdown-menu{
   bottom:100%;
 }
-.rs-dropdown-open[data-placement=bottom-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=bottom-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=bottom-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=bottom-end] > .rs-dropdown-menu{
   top:100%;
 }
-.rs-dropdown-open[data-placement=left-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=left-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=left-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=left-end] > .rs-dropdown-menu{
   inset-inline-end:100%;
 }
-.rs-dropdown-open[data-placement=right-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=right-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=right-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=right-end] > .rs-dropdown-menu{
   inset-inline-start:100%;
 }
-.rs-dropdown-open[data-placement=top-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=bottom-start] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=top-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=bottom-start] > .rs-dropdown-menu{
   inset-inline-start:0;
 }
-.rs-dropdown-open[data-placement=top-end] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=bottom-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=top-end] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=bottom-end] > .rs-dropdown-menu{
   inset-inline-end:0;
 }
-.rs-dropdown-open[data-placement=left-start] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=right-start] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=left-start] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=right-start] > .rs-dropdown-menu{
   top:0;
 }
-.rs-dropdown-open[data-placement=left-end] > .rs-dropdown-menu, .rs-dropdown-open[data-placement=right-end] > .rs-dropdown-menu{
+.rs-dropdown:where([data-open=true])[data-placement=left-end] > .rs-dropdown-menu, .rs-dropdown:where([data-open=true])[data-placement=right-end] > .rs-dropdown-menu{
   bottom:0;
 }
 
@@ -1486,18 +1502,18 @@ body{
   height:36px;
   vertical-align:bottom;
 }
-.rs-nav-default .rs-nav-item, .rs-nav-tabs .rs-nav-item{
+.rs-nav[data-appearance=default] .rs-nav-item, .rs-nav[data-appearance=tabs] .rs-nav-item{
   position:relative;
   overflow:hidden;
 }
 @media not all and (min-resolution: 0.001dpcm){
-  .rs-nav-default .rs-nav-item, .rs-nav-tabs .rs-nav-item{
+  .rs-nav[data-appearance=default] .rs-nav-item, .rs-nav[data-appearance=tabs] .rs-nav-item{
     -webkit-mask-image:radial-gradient(white, black);
             mask-image:radial-gradient(white, black);
   }
 }
 
-.rs-nav-default .rs-nav-item, .rs-nav-tabs .rs-nav-item,.rs-nav-item{
+.rs-nav[data-appearance=default] .rs-nav-item, .rs-nav[data-appearance=tabs] .rs-nav-item,.rs-nav-item{
   transition:var(--rs-nav-item-transition);
 }
 
@@ -1533,7 +1549,7 @@ body{
   text-decoration:underline;
 }
 .rs-nav-item:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-width:2px;
   outline-offset:0;
@@ -1545,17 +1561,17 @@ body{
 [data-theme=high-contrast] .rs-nav-item:active, .rs-theme-high-contrast .rs-nav-item:active{
   text-decoration:underline;
 }
-.rs-nav-item.rs-nav-item-disabled{
+.rs-nav-item[data-disabled=true]{
   cursor:not-allowed;
   pointer-events:none;
   color:var(--rs-text-disabled);
 }
-.rs-nav-item.rs-nav-item-active{
+.rs-nav-item[data-active=true]{
   position:relative;
   color:var(--rs-navs-selected);
   z-index:1;
 }
-[data-theme=high-contrast] .rs-nav-item.rs-nav-item-active, .rs-theme-high-contrast .rs-nav-item.rs-nav-item-active{
+[data-theme=high-contrast] .rs-nav-item[data-active=true], .rs-theme-high-contrast .rs-nav-item[data-active=true]{
   text-decoration:underline;
 }
 .rs-nav-item-icon{
@@ -1567,148 +1583,148 @@ body{
   margin-inline-start:6px;
 }
 
-.rs-nav-horizontal{
+.rs-nav[data-direction=horizontal]{
   white-space:nowrap;
 }
-.rs-nav-horizontal > .rs-nav-item{
+.rs-nav[data-direction=horizontal] > .rs-nav-item{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   vertical-align:top;
 }
-.rs-nav-horizontal .rs-nav-bar{
+.rs-nav[data-direction=horizontal] .rs-nav-bar{
   position:absolute;
   bottom:0;
   width:100%;
 }
-.rs-nav-horizontal.rs-nav-reversed .rs-nav-bar{
+.rs-nav[data-direction=horizontal][data-reversed=true] .rs-nav-bar{
   bottom:auto;
   top:0;
 }
 
-.rs-nav-vertical > .rs-nav-item{
+.rs-nav[data-direction=vertical] > .rs-nav-item{
   display:flex;
   align-items:center;
 }
-.rs-nav-vertical > .rs-dropdown{
+.rs-nav[data-direction=vertical] > .rs-dropdown{
   width:100%;
 }
-.rs-nav-vertical > .rs-dropdown > .rs-dropdown-toggle{
+.rs-nav[data-direction=vertical] > .rs-dropdown > .rs-dropdown-toggle{
   width:100%;
   text-align:start;
   z-index:0;
 }
-.rs-nav-vertical .rs-nav-bar{
+.rs-nav[data-direction=vertical] .rs-nav-bar{
   display:block;
   position:absolute;
   top:0;
   bottom:0;
   inset-inline-end:0;
 }
-.rs-nav-vertical.rs-nav-reversed .rs-nav-bar{
+.rs-nav[data-direction=vertical][data-reversed=true] .rs-nav-bar{
   inset-inline-end:auto;
 }
 
-.rs-nav-default .rs-nav-item{
+.rs-nav[data-appearance=default] .rs-nav-item{
   border-radius:var(--rs-radius-md);
 }
 
-.rs-nav-default .rs-nav-item:hover,.rs-nav-tabs .rs-nav-item:hover, .rs-nav-tabs .rs-nav-item:focus{
+.rs-nav[data-appearance=default] .rs-nav-item:hover,.rs-nav[data-appearance=tabs] .rs-nav-item:hover, .rs-nav[data-appearance=tabs] .rs-nav-item:focus{
   background:var(--rs-navs-bg-hover);
 }
-.rs-nav-tabs .rs-nav-item.rs-nav-item-active{
+.rs-nav[data-appearance=tabs] .rs-nav-item[data-active=true]{
   border:1px solid var(--rs-navs-tab-border);
   background-color:var(--rs-bg-card);
   z-index:1;
 }
-.rs-nav-tabs.rs-nav-horizontal > .rs-nav-item,
-.rs-nav-tabs.rs-nav-horizontal > .rs-dropdown .rs-dropdown-toggle{
+.rs-nav[data-appearance=tabs][data-direction=horizontal] > .rs-nav-item,
+.rs-nav[data-appearance=tabs][data-direction=horizontal] > .rs-dropdown .rs-dropdown-toggle{
   border-top-left-radius:var(--rs-radius-md);
   border-top-right-radius:var(--rs-radius-md);
 }
-.rs-nav-tabs.rs-nav-horizontal .rs-nav-bar{
+.rs-nav[data-appearance=tabs][data-direction=horizontal] .rs-nav-bar{
   border-top:1px solid var(--rs-navs-tab-border);
 }
-.rs-nav-tabs.rs-nav-horizontal .rs-nav-item.rs-nav-item-active{
+.rs-nav[data-appearance=tabs][data-direction=horizontal] .rs-nav-item[data-active=true]{
   border-bottom-width:0;
 }
-.rs-nav-tabs.rs-nav-horizontal.rs-nav-reversed > .rs-nav-item,
-.rs-nav-tabs.rs-nav-horizontal.rs-nav-reversed > .rs-dropdown .rs-dropdown-toggle{
+.rs-nav[data-appearance=tabs][data-direction=horizontal][data-reversed=true] > .rs-nav-item,
+.rs-nav[data-appearance=tabs][data-direction=horizontal][data-reversed=true] > .rs-dropdown .rs-dropdown-toggle{
   border-top-left-radius:var(--rs-radius-none);
   border-top-right-radius:var(--rs-radius-none);
   border-bottom-left-radius:var(--rs-radius-md);
   border-bottom-right-radius:var(--rs-radius-md);
 }
-.rs-nav-tabs.rs-nav-horizontal.rs-nav-reversed .rs-nav-item.rs-nav-item-active{
+.rs-nav[data-appearance=tabs][data-direction=horizontal][data-reversed=true] .rs-nav-item[data-active=true]{
   border-bottom-width:1px;
   border-top-width:0;
 }
-.rs-nav-tabs.rs-nav-vertical > .rs-nav-item,
-.rs-nav-tabs.rs-nav-vertical > .rs-dropdown .rs-dropdown-toggle{
+.rs-nav[data-appearance=tabs][data-direction=vertical] > .rs-nav-item,
+.rs-nav[data-appearance=tabs][data-direction=vertical] > .rs-dropdown .rs-dropdown-toggle{
   border-end-start-radius:var(--rs-radius-md);
   border-start-start-radius:var(--rs-radius-md);
 }
-.rs-nav-tabs.rs-nav-vertical .rs-nav-bar{
+.rs-nav[data-appearance=tabs][data-direction=vertical] .rs-nav-bar{
   width:1px;
   background:var(--rs-navs-tab-border);
 }
-.rs-nav-tabs.rs-nav-vertical .rs-nav-item.rs-nav-item-active{
+.rs-nav[data-appearance=tabs][data-direction=vertical] .rs-nav-item[data-active=true]{
   border-inline-end-width:0;
 }
-.rs-nav-tabs.rs-nav-vertical.rs-nav-reversed > .rs-nav-item,
-.rs-nav-tabs.rs-nav-vertical.rs-nav-reversed > .rs-dropdown .rs-dropdown-toggle{
+.rs-nav[data-appearance=tabs][data-direction=vertical][data-reversed=true] > .rs-nav-item,
+.rs-nav[data-appearance=tabs][data-direction=vertical][data-reversed=true] > .rs-dropdown .rs-dropdown-toggle{
   border-start-start-radius:var(--rs-radius-none);
   border-end-start-radius:var(--rs-radius-none);
   border-start-end-radius:var(--rs-radius-md);
   border-end-end-radius:var(--rs-radius-md);
 }
-.rs-nav-tabs.rs-nav-vertical.rs-nav-reversed .rs-nav-item.rs-nav-item-active{
+.rs-nav[data-appearance=tabs][data-direction=vertical][data-reversed=true] .rs-nav-item[data-active=true]{
   border-inline-start-width:0;
   border-inline-end-width:1px;
 }
 
-.rs-nav-subtle .rs-nav-item{
+.rs-nav[data-appearance=subtle] .rs-nav-item{
   position:relative;
 }
-.rs-nav-subtle .rs-nav-item:hover, .rs-nav-subtle .rs-nav-item:focus{
+.rs-nav[data-appearance=subtle] .rs-nav-item:hover, .rs-nav[data-appearance=subtle] .rs-nav-item:focus{
   color:var(--rs-navs-selected);
 }
-.rs-nav-subtle .rs-nav-item.rs-nav-item-active::before{
+.rs-nav[data-appearance=subtle] .rs-nav-item[data-active=true]::before{
   content:"";
   position:absolute;
   background-color:var(--rs-navs-selected);
   display:block;
   z-index:1;
 }
-.rs-nav-subtle.rs-nav-horizontal .rs-nav-bar{
+.rs-nav[data-appearance=subtle][data-direction=horizontal] .rs-nav-bar{
   border-top:2px solid var(--rs-navs-subtle-border);
 }
-.rs-nav-subtle.rs-nav-horizontal .rs-nav-item.rs-nav-item-active::before{
+.rs-nav[data-appearance=subtle][data-direction=horizontal] .rs-nav-item[data-active=true]::before{
   bottom:0;
   inset-inline-start:0;
   inset-inline-end:0;
   height:2px;
 }
-.rs-nav-subtle.rs-nav-horizontal.rs-nav-reversed .rs-nav-item.rs-nav-item-active::before{
+.rs-nav[data-appearance=subtle][data-direction=horizontal][data-reversed=true] .rs-nav-item[data-active=true]::before{
   bottom:auto;
   top:0;
 }
-.rs-nav-subtle.rs-nav-vertical .rs-nav-bar{
+.rs-nav[data-appearance=subtle][data-direction=vertical] .rs-nav-bar{
   width:2px;
   background:var(--rs-navs-subtle-border);
 }
-.rs-nav-subtle.rs-nav-vertical .rs-nav-item.rs-nav-item-active::before{
+.rs-nav[data-appearance=subtle][data-direction=vertical] .rs-nav-item[data-active=true]::before{
   inset-inline-end:0;
   top:0;
   bottom:0;
   width:2px;
 }
-.rs-nav-subtle.rs-nav-vertical.rs-nav-reversed .rs-nav-item.rs-nav-item-active::before{
+.rs-nav[data-appearance=subtle][data-direction=vertical][data-reversed=true] .rs-nav-item[data-active=true]::before{
   inset-inline-end:auto;
   inset-inline-start:0;
 }
 
-.rs-nav-pills{
+.rs-nav[data-appearance=pills]{
   display:inline-flex;
   background-color:var(--rs-navs-pills-bg);
   border-radius:var(--rs-radius-md);
@@ -1716,37 +1732,37 @@ body{
   width:-moz-max-content;
   width:max-content;
 }
-.rs-nav-pills .rs-nav-item{
+.rs-nav[data-appearance=pills] .rs-nav-item{
   border-radius:var(--rs-radius-md);
   position:relative;
   padding:4px 12px;
   color:var(--rs-navs-pills-item-color);
 }
-.rs-nav-pills .rs-nav-item-active{
+.rs-nav[data-appearance=pills] .rs-nav-item[data-active=true]{
   background-color:var(--rs-navs-pills-item-active-bg);
   color:var(--rs-navs-pills-item-active-color);
   box-shadow:var(--rs-nav-pills-item-shadow);
 }
-.rs-nav-pills .rs-nav-item-disabled{
+.rs-nav[data-appearance=pills] .rs-nav-item[data-disabled=true]{
   color:var(--rs-navs-pills-item-disabled-color);
 }
-.rs-nav-pills.rs-nav-vertical{
+.rs-nav[data-appearance=pills][data-direction=vertical]{
   flex-direction:column;
 }
-.rs-nav-pills.rs-nav-vertical .rs-nav-item{
+.rs-nav[data-appearance=pills][data-direction=vertical] .rs-nav-item{
   padding:6px 12px;
   justify-content:center;
 }
 
-.rs-nav-justified{
+.rs-nav[data-justified=true]{
   display:flex;
   width:100%;
 }
-.rs-nav-justified > .rs-nav-item,
-.rs-nav-justified > .rs-dropdown{
+.rs-nav[data-justified=true] > .rs-nav-item,
+.rs-nav[data-justified=true] > .rs-dropdown{
   flex:1 1 1%;
 }
-.rs-nav-justified > .rs-dropdown .rs-dropdown-toggle{
+.rs-nav[data-justified=true] > .rs-dropdown .rs-dropdown-toggle{
   width:100%;
   text-align:start;
 }