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

package/Sidenav/styles/index.css

@@ -30,9 +30,9 @@ body{
   --rs-body:var(--rs-gray-0);
   --rs-text-primary:var(--rs-gray-800);
   --rs-text-secondary:var(--rs-gray-600);
-  --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-menuitem-active-bg:var(--rs-gray-100);
-  --rs-menuitem-active-text:var(--rs-primary-700);
+  --rs-menuitem-active-text:var(--rs-text-primary);
   --rs-sidenav-default-bg:var(--rs-gray-50);
   --rs-sidenav-default-text:var(--rs-gray-800);
   --rs-sidenav-default-selected-text:var(--rs-primary-700);
@@ -57,7 +57,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);
   }
 }
 
@@ -78,7 +78,6 @@ body{
   --rs-body:var(--rs-gray-900);
   --rs-text-primary:var(--rs-gray-50);
   --rs-text-secondary:var(--rs-gray-200);
-  --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-menuitem-active-bg:var(--rs-gray-600);
   --rs-menuitem-active-text:currentColor;
   --rs-sidenav-default-bg:var(--rs-gray-800);
@@ -103,12 +102,6 @@ body{
   --rs-sidenav-subtle-footer-border:var(--rs-gray-600);
   --rs-sidenav-subtle-subnav-border-color:var(--rs-gray-600);
 }
-@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);
-  }
-}
 
 [data-theme=high-contrast],
 .rs-theme-high-contrast{
@@ -127,9 +120,9 @@ body{
   --rs-body:var(--rs-gray-900);
   --rs-text-primary:var(--rs-gray-50);
   --rs-text-secondary:var(--rs-gray-200);
-  --rs-color-focus-ring:var(--rs-gray-0);
+  --rs-focus-ring-color:var(--rs-gray-0);
   --rs-menuitem-active-bg:transparent;
-  --rs-menuitem-active-text:var(--rs-primary-500);
+  --rs-menuitem-active-text:var(--rs-text-primary);
   --rs-sidenav-default-bg:var(--rs-gray-800);
   --rs-sidenav-default-text:var(--rs-gray-50);
   --rs-sidenav-default-selected-text:var(--rs-primary-500);
@@ -321,13 +314,13 @@ body{
   outline:0;
 }
 .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   z-index:1;
 }
 [data-theme=high-contrast] .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle:focus-visible, .rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-toggle:focus-visible{
-  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;
@@ -352,13 +345,13 @@ body{
   border-width:0 0 0 1px;
 }
 .rs-sidenav-nav .rs-sidenav-item:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   z-index:1;
 }
 [data-theme=high-contrast] .rs-sidenav-nav .rs-sidenav-item:focus-visible, .rs-theme-high-contrast .rs-sidenav-nav .rs-sidenav-item:focus-visible{
-  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;
@@ -389,20 +382,20 @@ body{
 }
 .rs-sidenav-nav > .rs-sidenav-item:focus-visible,
 .rs-sidenav-nav > .rs-dropdown .rs-sidenav-dropdown-toggle:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
 }
 .rs-sidenav-nav > .rs-dropdown-focus .rs-sidenav-dropdown-toggle,
 .rs-sidenav-nav .rs-sidenav-dropdown-toggle:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   z-index:2;
 }
 [data-theme=high-contrast] .rs-sidenav-nav > .rs-dropdown-focus .rs-sidenav-dropdown-toggle, .rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown-focus .rs-sidenav-dropdown-toggle,
 [data-theme=high-contrast] .rs-sidenav-nav .rs-sidenav-dropdown-toggle:focus-visible,
 .rs-theme-high-contrast .rs-sidenav-nav .rs-sidenav-dropdown-toggle:focus-visible{
-  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;
@@ -419,7 +412,7 @@ body{
   text-decoration:none;
 }
 .rs-sidenav-item:focus-visible{
-  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;
@@ -476,14 +469,14 @@ body{
   flex-direction:column;
 }
 .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible, .rs-sidenav-collapse-in .rs-dropdown-item-focus{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   background:none;
   z-index:2;
 }
 [data-theme=high-contrast] .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible, .rs-theme-high-contrast .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible, [data-theme=high-contrast] .rs-sidenav-collapse-in .rs-dropdown-item-focus, .rs-theme-high-contrast .rs-sidenav-collapse-in .rs-dropdown-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;
@@ -492,13 +485,13 @@ body{
   box-shadow:none;
 }
 .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible.rs-dropdown-item-submenu > .rs-dropdown-item-toggle, .rs-sidenav-collapse-in .rs-dropdown-item-focus.rs-dropdown-item-submenu > .rs-dropdown-item-toggle{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   z-index:2;
 }
 [data-theme=high-contrast] .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible.rs-dropdown-item-submenu > .rs-dropdown-item-toggle, .rs-theme-high-contrast .rs-sidenav-collapse-in .rs-dropdown-item:focus-visible.rs-dropdown-item-submenu > .rs-dropdown-item-toggle, [data-theme=high-contrast] .rs-sidenav-collapse-in .rs-dropdown-item-focus.rs-dropdown-item-submenu > .rs-dropdown-item-toggle, .rs-theme-high-contrast .rs-sidenav-collapse-in .rs-dropdown-item-focus.rs-dropdown-item-submenu > .rs-dropdown-item-toggle{
-  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;
@@ -573,13 +566,13 @@ body{
 }
 .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
 .rs-sidenav-collapse-out .rs-dropdown .rs-sidenav-dropdown-toggle:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 [data-theme=high-contrast] .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible, .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
 [data-theme=high-contrast] .rs-sidenav-collapse-out .rs-dropdown .rs-sidenav-dropdown-toggle:focus-visible,
 .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-sidenav-dropdown-toggle:focus-visible{
-  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;
@@ -618,189 +611,189 @@ body{
   animation:sideNavFoldedText var(--rs-sidenav-collapse-transition);
 }
 
-.rs-sidenav-default{
+.rs-sidenav[data-appearance=default]{
   color:var(--rs-sidenav-default-text);
 }
-.rs-sidenav-default,.rs-sidenav-default .rs-sidenav-item,
-.rs-sidenav-default .rs-sidenav-dropdown-toggle,
-.rs-sidenav-default .rs-sidenav-toggle{
+.rs-sidenav[data-appearance=default],.rs-sidenav[data-appearance=default] .rs-sidenav-item,
+.rs-sidenav[data-appearance=default] .rs-sidenav-dropdown-toggle,
+.rs-sidenav[data-appearance=default] .rs-sidenav-toggle{
   background-color:var(--rs-sidenav-default-bg);
 }
-.rs-sidenav-default .rs-sidenav-item:hover,
-.rs-sidenav-default .rs-sidenav-dropdown-toggle:hover,
-.rs-sidenav-default .rs-sidenav-toggle:hover,
-.rs-sidenav-default .rs-dropdown-item:hover,
-.rs-sidenav-default .rs-dropdown.rs-dropdown-open .rs-sidenav-dropdown-toggle{
+.rs-sidenav[data-appearance=default] .rs-sidenav-item:hover,
+.rs-sidenav[data-appearance=default] .rs-sidenav-dropdown-toggle:hover,
+.rs-sidenav[data-appearance=default] .rs-sidenav-toggle:hover,
+.rs-sidenav[data-appearance=default] .rs-dropdown-item:hover,
+.rs-sidenav[data-appearance=default] .rs-dropdown.rs-dropdown-open .rs-sidenav-dropdown-toggle{
   background-color:var(--rs-sidenav-default-hover-bg);
   color:var(--rs-sidenav-default-hover-text);
 }
-.rs-sidenav-default .rs-sidenav-item.rs-sidenav-item-active,
-.rs-sidenav-default .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=default] .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav[data-appearance=default] .rs-dropdown-item.rs-dropdown-item-active{
   color:var(--rs-sidenav-default-selected-text);
   background-color:var(--rs-sidenav-default-selected-bg);
 }
-.rs-sidenav-default .rs-sidenav-footer{
+.rs-sidenav[data-appearance=default] .rs-sidenav-footer{
   border-top-color:var(--rs-sidenav-default-footer-border);
 }
-.rs-sidenav-default .rs-dropdown-menu{
+.rs-sidenav[data-appearance=default] .rs-dropdown-menu{
   border-left:1px solid var(--rs-sidenav-default-subnav-border-color);
 }
-.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active{
   background-color:var(--rs-menuitem-active-bg);
   color:var(--rs-menuitem-active-text);
 }
-[data-theme=high-contrast] .rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active, .rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active{
+[data-theme=high-contrast] .rs-sidenav[data-appearance=default].rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active, .rs-theme-high-contrast .rs-sidenav[data-appearance=default].rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active{
   text-decoration:underline;
   box-shadow:inset 0 0 0 2px #fff;
 }
 
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle{
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle{
   color:var(--rs-sidenav-default-text);
 }
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:hover, .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:focus, .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:focus,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus{
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:hover, .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:focus, .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus{
   background-color:var(--rs-sidenav-default-hover-bg);
   color:var(--rs-sidenav-default-hover-text);
 }
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
   color:var(--rs-sidenav-default-selected-text);
 }
-[data-theme=high-contrast] .rs-sidenav-default.rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active, .rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
-[data-theme=high-contrast] .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
-.rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
-[data-theme=high-contrast] .rs-sidenav-default.rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
-.rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
-[data-theme=high-contrast] .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
-.rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
+[data-theme=high-contrast] .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active, .rs-theme-high-contrast .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
+[data-theme=high-contrast] .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
+.rs-theme-high-contrast .rs-sidenav[data-appearance=default].rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
+[data-theme=high-contrast] .rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
+.rs-theme-high-contrast .rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
+[data-theme=high-contrast] .rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
+.rs-theme-high-contrast .rs-sidenav[data-appearance=default].rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
   text-decoration:underline;
 }
 
-.rs-sidenav-inverse{
+.rs-sidenav[data-appearance=inverse]{
   color:var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse,.rs-sidenav-inverse .rs-sidenav-item,
-.rs-sidenav-inverse .rs-dropdown .rs-sidenav-dropdown-toggle,
-.rs-sidenav-inverse .rs-sidenav-toggle,
-.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle{
+.rs-sidenav[data-appearance=inverse],.rs-sidenav[data-appearance=inverse] .rs-sidenav-item,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown .rs-sidenav-dropdown-toggle,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle{
   background-color:var(--rs-sidenav-inverse-bg);
 }
-.rs-sidenav-inverse .rs-sidenav-item:hover, .rs-sidenav-inverse .rs-sidenav-item:focus,
-.rs-sidenav-inverse .rs-dropdown .rs-sidenav-dropdown-toggle:hover,
-.rs-sidenav-inverse .rs-dropdown .rs-sidenav-dropdown-toggle:focus,
-.rs-sidenav-inverse .rs-sidenav-toggle:hover,
-.rs-sidenav-inverse .rs-sidenav-toggle:focus,
-.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:focus{
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-item:hover, .rs-sidenav[data-appearance=inverse] .rs-sidenav-item:focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown .rs-sidenav-dropdown-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown .rs-sidenav-dropdown-toggle:focus,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle:focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:focus{
   background-color:var(--rs-sidenav-inverse-hover-bg);
 }
-.rs-sidenav-inverse .rs-dropdown-item,
-.rs-sidenav-inverse .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle,
-.rs-sidenav-inverse .rs-sidenav-toggle{
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item > .rs-dropdown-item-toggle,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle{
   color:var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse .rs-dropdown-item:hover, .rs-sidenav-inverse .rs-dropdown-item:focus, .rs-sidenav-inverse .rs-dropdown-item.rs-dropdown-item-focus,
-.rs-sidenav-inverse .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
-.rs-sidenav-inverse .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle:focus,
-.rs-sidenav-inverse .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
-.rs-sidenav-inverse .rs-sidenav-toggle:hover,
-.rs-sidenav-inverse .rs-sidenav-toggle:focus,
-.rs-sidenav-inverse .rs-sidenav-toggle.rs-dropdown-item-focus{
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item:hover, .rs-sidenav[data-appearance=inverse] .rs-dropdown-item:focus, .rs-sidenav[data-appearance=inverse] .rs-dropdown-item.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle:focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle:hover,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle:focus,
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-toggle.rs-dropdown-item-focus{
   background-color:var(--rs-sidenav-inverse-hover-bg);
   color:var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse.rs-sidenav-collapse-out .rs-dropdown-item{
+.rs-sidenav[data-appearance=inverse].rs-sidenav-collapse-out .rs-dropdown-item{
   color:var(--rs-sidenav-default-text);
 }
-.rs-sidenav-inverse.rs-sidenav-collapse-out .rs-dropdown-item:hover, .rs-sidenav-inverse.rs-sidenav-collapse-out .rs-dropdown-item:focus, .rs-sidenav-inverse.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-focus{
+.rs-sidenav[data-appearance=inverse].rs-sidenav-collapse-out .rs-dropdown-item:hover, .rs-sidenav[data-appearance=inverse].rs-sidenav-collapse-out .rs-dropdown-item:focus, .rs-sidenav[data-appearance=inverse].rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-focus{
   background-color:var(--rs-sidenav-default-hover-bg);
   color:var(--rs-sidenav-default-hover-text);
 }
-.rs-sidenav-inverse .rs-sidenav-item.rs-sidenav-item-active,
-.rs-sidenav-inverse .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-item.rs-dropdown-item-active{
   color:var(--rs-sidenav-inverse-selected-text);
   background-color:var(--rs-sidenav-inverse-selected-bg);
 }
-.rs-sidenav-inverse .rs-sidenav-footer{
+.rs-sidenav[data-appearance=inverse] .rs-sidenav-footer{
   border-top-color:var(--rs-sidenav-inverse-footer-border);
 }
-.rs-sidenav-inverse .rs-dropdown-menu{
+.rs-sidenav[data-appearance=inverse] .rs-dropdown-menu{
   border-left:1px solid var(--rs-sidenav-inverse-subnav-border-color);
 }
 
-.rs-sidenav-subtle{
+.rs-sidenav[data-appearance=subtle]{
   background-color:transparent;
 }
-.rs-sidenav-subtle .rs-sidenav-item,
-.rs-sidenav-subtle .rs-sidenav-dropdown-toggle,
-.rs-sidenav-subtle .rs-dropdown-item,
-.rs-sidenav-subtle .rs-sidenav-toggle{
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-item,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-dropdown-toggle,
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-item,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-toggle{
   background-color:transparent;
   color:var(--rs-sidenav-subtle-text);
 }
-.rs-sidenav-subtle .rs-sidenav-item:hover, .rs-sidenav-subtle .rs-sidenav-item:focus-visible,
-.rs-sidenav-subtle .rs-sidenav-dropdown-toggle:hover,
-.rs-sidenav-subtle .rs-sidenav-dropdown-toggle:focus-visible,
-.rs-sidenav-subtle .rs-dropdown-item:hover,
-.rs-sidenav-subtle .rs-dropdown-item:focus-visible,
-.rs-sidenav-subtle .rs-sidenav-toggle:hover,
-.rs-sidenav-subtle .rs-sidenav-toggle:focus-visible{
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-item:hover, .rs-sidenav[data-appearance=subtle] .rs-sidenav-item:focus-visible,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-dropdown-toggle:hover,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-dropdown-toggle:focus-visible,
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-item:hover,
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-item:focus-visible,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-toggle:hover,
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-toggle:focus-visible{
   background-color:var(--rs-sidenav-subtle-hover-bg);
   color:var(--rs-sidenav-subtle-hover-text);
 }
-.rs-sidenav-subtle .rs-sidenav-item.rs-sidenav-item-active,
-.rs-sidenav-subtle .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-item.rs-dropdown-item-active{
   color:var(--rs-sidenav-subtle-selected-text);
   background-color:var(--rs-sidenav-subtle-selected-bg);
 }
-.rs-sidenav-subtle .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn{
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn{
   background-color:transparent;
 }
-.rs-sidenav-subtle .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn:hover, .rs-sidenav-subtle .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn:focus{
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn:hover, .rs-sidenav[data-appearance=subtle] .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn:focus{
   background-color:var(--rs-sidenav-subtle-hover-bg);
 }
-.rs-sidenav-subtle .rs-sidenav-footer{
+.rs-sidenav[data-appearance=subtle] .rs-sidenav-footer{
   border-top-color:var(--rs-sidenav-subtle-footer-border);
 }
-.rs-sidenav-subtle .rs-dropdown-menu{
+.rs-sidenav[data-appearance=subtle] .rs-dropdown-menu{
   border-left:1px solid var(--rs-sidenav-subtle-subnav-border-color);
 }
 
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle{
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle{
   color:var(--rs-sidenav-subtle-text);
 }
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:hover, .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:focus-visible,
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:focus-visible,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:focus-visible,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:focus-visible{
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:hover, .rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle:focus-visible,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:focus-visible,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle:focus-visible,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:focus-visible{
   background-color:var(--rs-sidenav-subtle-hover-bg);
   color:var(--rs-sidenav-subtle-hover-text);
 }
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
+.rs-sidenav[data-appearance=subtle].rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active{
   color:var(--rs-sidenav-subtle-selected-text);
 }
 

package/Stack/styles/index.css

@@ -106,9 +106,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{
@@ -135,7 +132,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{
@@ -219,10 +216,4 @@ body{
   .rs-stack-xxl-row-reverse{
     flex-direction:row-reverse;
   }
-}
-
-.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));
 }