rsuite 6.0.0-canary-20241227 → 6.0.0-canary-20250103

package/dist/rsuite.css

@@ -340,6 +340,7 @@
   --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-50);
   --rs-card-bg: var(--rs-gray-0);
@@ -726,6 +727,7 @@
   --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-900);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
   --rs-card-bg: var(--rs-gray-900);
@@ -1111,6 +1113,7 @@
   --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-red-500);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-900);
   --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
   --rs-card-bg: var(--rs-gray-900);
@@ -1823,58 +1826,118 @@ tbody.rs-anim-collapse.rs-anim-in {
   position: relative;
 }
 .rs-badge {
-  display: inline-block;
+  --rs-badge-offset-x: 5%;
+  --rs-badge-offset-y: 5%;
+  --rs-badge-translate: 40%;
+  display: inline-flex;
+}
+.rs-badge-circle {
+  --rs-badge-translate: 30%;
 }
 .rs-badge-independent,
 .rs-badge-content {
+  opacity: 1;
+  display: flex;
+  align-items: center;
   background-color: var(--rs-badge-bg);
   color: var(--rs-badge-text);
-  border-radius: 8px;
+  border-radius: 999px;
   font-size: 12px;
   line-height: 16px;
   padding: 0 5px;
+  transition: opacity 0.3s ease-in-out;
 }
-.rs-badge-independent.rs-badge-dot,
-.rs-badge-wrapper .rs-badge-content:empty {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
+.rs-badge-hidden .rs-badge-content,
+.rs-badge-hidden.rs-badge-independent {
+  opacity: 0;
+}
+.rs-badge-compact .rs-badge-content,
+.rs-badge-compact.rs-badge-independent {
+  padding: 0;
+}
+.rs-badge:empty,
+.rs-badge-content:empty {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
   padding: 0;
 }
 .rs-badge-wrapper .rs-badge-content {
   position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
   z-index: 1;
 }
+.rs-badge-outline .rs-badge-content {
+  box-sizing: content-box;
+  border: 2px solid var(--rs-badge-border);
+}
+.rs-badge-top-start .rs-badge-content {
+  transform: translate(calc(0px - var(--rs-badge-translate)), calc(0px - var(--rs-badge-translate)));
+  top: var(--rs-badge-offset-y);
+  left: var(--rs-badge-offset-x);
+}
+.rs-badge-top-end .rs-badge-content {
+  transform: translate(var(--rs-badge-translate), calc(0px - var(--rs-badge-translate)));
+  top: var(--rs-badge-offset-y);
+  right: var(--rs-badge-offset-x);
+}
+.rs-badge-bottom-start .rs-badge-content {
+  transform: translate(calc(0px - var(--rs-badge-translate)), var(--rs-badge-translate));
+  bottom: var(--rs-badge-offset-y);
+  left: var(--rs-badge-offset-x);
+}
+.rs-badge-bottom-end .rs-badge-content {
+  transform: translate(var(--rs-badge-translate), var(--rs-badge-translate));
+  bottom: var(--rs-badge-offset-y);
+  right: var(--rs-badge-offset-x);
+}
+.rs-badge-red {
+  --rs-badge-bg: var(--rs-red-500);
+}
 .rs-badge-red.rs-badge-independent,
 .rs-badge-red .rs-badge-content {
-  background-color: var(--rs-red-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-orange {
+  --rs-badge-bg: var(--rs-orange-500);
 }
 .rs-badge-orange.rs-badge-independent,
 .rs-badge-orange .rs-badge-content {
-  background-color: var(--rs-orange-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-yellow {
+  --rs-badge-bg: var(--rs-yellow-500);
 }
 .rs-badge-yellow.rs-badge-independent,
 .rs-badge-yellow .rs-badge-content {
-  background-color: var(--rs-yellow-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-green {
+  --rs-badge-bg: var(--rs-green-500);
 }
 .rs-badge-green.rs-badge-independent,
 .rs-badge-green .rs-badge-content {
-  background-color: var(--rs-green-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-cyan {
+  --rs-badge-bg: var(--rs-cyan-500);
 }
 .rs-badge-cyan.rs-badge-independent,
 .rs-badge-cyan .rs-badge-content {
-  background-color: var(--rs-cyan-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-blue {
+  --rs-badge-bg: var(--rs-blue-500);
 }
 .rs-badge-blue.rs-badge-independent,
 .rs-badge-blue .rs-badge-content {
-  background-color: var(--rs-blue-500);
+  background-color: var(--rs-badge-bg);
+}
+.rs-badge-violet {
+  --rs-badge-bg: var(--rs-violet-500);
 }
 .rs-badge-violet.rs-badge-independent,
 .rs-badge-violet .rs-badge-content {
-  background-color: var(--rs-violet-500);
+  background-color: var(--rs-badge-bg);
 }
 .rs-breadcrumb {
   margin-bottom: 20px;
@@ -1968,8 +2031,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-theme-high-contrast .rs-btn:focus-visible {
   outline-offset: 2px;
 }
-.rs-btn:hover,
-.rs-btn:focus {
+.rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
@@ -2009,8 +2071,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   background-color: var(--rs-btn-primary-bg);
   border: none;
 }
-.rs-btn-primary:hover,
-.rs-btn-primary:focus {
+.rs-btn-primary:hover {
   color: var(--rs-btn-primary-text);
   background-color: var(--rs-btn-primary-hover-bg);
 }
@@ -2034,8 +2095,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   background-color: transparent;
   border: none;
 }
-.rs-btn-subtle:hover,
-.rs-btn-subtle:focus {
+.rs-btn-subtle:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
@@ -2058,8 +2118,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   background-color: transparent;
   border: none;
 }
-.rs-btn-link:hover,
-.rs-btn-link:focus {
+.rs-btn-link:hover {
   color: var(--rs-btn-link-hover-text);
   background-color: transparent;
   text-decoration: underline;
@@ -2085,8 +2144,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   background-color: transparent;
   border: 1px solid var(--rs-btn-ghost-border);
 }
-.rs-btn-ghost:hover,
-.rs-btn-ghost:focus {
+.rs-btn-ghost:hover {
   color: var(--rs-btn-ghost-hover-text);
   background-color: transparent;
   border-color: var(--rs-btn-ghost-hover-border);
@@ -3048,8 +3106,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-subtle-active-bg: var(--rs-red-600);
   --rs-btn-subtle-active-text: #fff;
 }
-.rs-calendar-header-error:hover,
-.rs-calendar-header-error:focus {
+.rs-calendar-header-error:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
@@ -7572,8 +7629,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   background-color: var(--rs-iconbtn-addon);
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
 }
-.rs-btn-icon-with-text:hover > .rs-icon,
-.rs-btn-icon-with-text:focus > .rs-icon {
+.rs-btn-icon-with-text:hover > .rs-icon {
   background-color: var(--rs-iconbtn-activated-addon);
 }
 .rs-btn-icon-with-text:active > .rs-icon,
@@ -7591,8 +7647,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-btn-icon-with-text.rs-btn-primary > .rs-icon {
   background-color: var(--rs-iconbtn-primary-addon);
 }
-.rs-btn-icon-with-text.rs-btn-primary:hover > .rs-icon,
-.rs-btn-icon-with-text.rs-btn-primary:focus > .rs-icon {
+.rs-btn-icon-with-text.rs-btn-primary:hover > .rs-icon {
   background-color: var(--rs-iconbtn-primary-activated-addon);
 }
 .rs-btn-icon-with-text.rs-btn-primary:active > .rs-icon,
@@ -7829,8 +7884,7 @@ textarea.rs-input-sm {
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;
 }
-.rs-input-group.rs-input-group-inside .rs-input-group-btn:hover,
-.rs-input-group.rs-input-group-inside .rs-input-group-btn:focus {
+.rs-input-group.rs-input-group-inside .rs-input-group-btn:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
@@ -10075,8 +10129,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-theme-high-contrast .rs-pagination-btn:focus-visible {
   outline-offset: 2px;
 }
-.rs-pagination-btn:hover,
-.rs-pagination-btn:focus {
+.rs-pagination-btn:hover {
   color: var(--rs-btn-default-hover-text);
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
@@ -10103,8 +10156,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
     /* stylelint-enable */
   }
 }
-.rs-pagination-btn:hover,
-.rs-pagination-btn:focus {
+.rs-pagination-btn:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
@@ -10173,8 +10225,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   background-color: transparent;
   border: 1px solid var(--rs-btn-ghost-border);
 }
-.rs-pagination-btn.rs-pagination-btn-active:hover,
-.rs-pagination-btn.rs-pagination-btn-active:focus {
+.rs-pagination-btn.rs-pagination-btn-active:hover {
   color: var(--rs-btn-ghost-hover-text);
   background-color: transparent;
   border-color: var(--rs-btn-ghost-hover-border);
@@ -12711,7 +12762,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-table-scrollbar-horizontal .rs-table-scrollbar-handle {
   height: 8px;
   left: 0 /* rtl:ignore */;
-  top: 1px;
+  top: 2px/2;
 }
 .rs-table-scrollbar-pressed.rs-table-scrollbar-horizontal:hover,
 .rs-table-scrollbar-horizontal:hover {
@@ -12729,7 +12780,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   min-height: 20px;
   width: 8px;
   top: 0;
-  left: 1px;
+  left: 2px/2;
 }
 .rs-table-scrollbar-pressed.rs-table-scrollbar-vertical:hover,
 .rs-table-scrollbar-vertical:hover {
@@ -12739,7 +12790,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-tag {
   display: inline-block;
   background-color: var(--rs-tag-bg);
-  color: var(--rs-text-primary);
+  color: var(--rs-tag-text);
   border-radius: 6px;
   line-height: 20px;
 }
@@ -12785,32 +12836,46 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   margin-left: 10px;
 }
 .rs-tag-red {
-  background-color: var(--rs-red-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-red-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-orange {
-  background-color: var(--rs-orange-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-orange-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-yellow {
-  background-color: var(--rs-yellow-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-yellow-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-green {
-  background-color: var(--rs-green-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-green-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-cyan {
-  background-color: var(--rs-cyan-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-cyan-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-blue {
-  background-color: var(--rs-blue-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-blue-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-violet {
-  background-color: var(--rs-violet-500);
-  color: #ffffff;
+  --rs-tag-bg: var(--rs-violet-500);
+  --rs-tag-text: #fff;
+  background-color: var(--rs-tag-bg);
+  color: var(--rs-tag-text);
 }
 .rs-tag-group {
   margin: -10px 0 0 -10px;
@@ -14036,8 +14101,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:focus-visible {
   outline-offset: 2px;
 }
-.rs-uploader-picture .rs-uploader-trigger-btn:hover,
-.rs-uploader-picture .rs-uploader-trigger-btn:focus {
+.rs-uploader-picture .rs-uploader-trigger-btn:hover {
   color: var(--rs-btn-default-hover-text);
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
@@ -14064,8 +14128,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
     /* stylelint-enable */
   }
 }
-.rs-uploader-picture .rs-uploader-trigger-btn:hover,
-.rs-uploader-picture .rs-uploader-trigger-btn:focus {
+.rs-uploader-picture .rs-uploader-trigger-btn:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
@@ -14447,7 +14510,8 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   flex-direction: column-reverse;
   bottom: 3px;
 }
-.rs-rate-character .rs-icon {
+.rs-rate-character .rs-icon,
+.rs-rate-character svg {
   position: absolute;
   height: 1em;
   width: 1em;
@@ -14498,25 +14562,32 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   height: 24px;
 }
 .rs-rate-red {
-  color: var(--rs-red-500);
+  --rs-rate-symbol-checked: var(--rs-red-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-orange {
-  color: var(--rs-orange-500);
+  --rs-rate-symbol-checked: var(--rs-orange-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-yellow {
-  color: var(--rs-yellow-500);
+  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-green {
-  color: var(--rs-green-500);
+  --rs-rate-symbol-checked: var(--rs-green-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-cyan {
-  color: var(--rs-cyan-500);
+  --rs-rate-symbol-checked: var(--rs-cyan-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-blue {
-  color: var(--rs-blue-500);
+  --rs-rate-symbol-checked: var(--rs-blue-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-rate-violet {
-  color: var(--rs-violet-500);
+  --rs-rate-symbol-checked: var(--rs-violet-500);
+  color: var(--rs-rate-symbol-checked);
 }
 .rs-toast {
   pointer-events: auto;
@@ -14942,8 +15013,7 @@ kbd.rs-text {
 .rs-theme-high-contrast .rs-picker-toggle:focus-visible {
   outline-offset: 2px;
 }
-.rs-picker-toggle:hover,
-.rs-picker-toggle:focus {
+.rs-picker-toggle:hover {
   color: var(--rs-btn-default-hover-text);
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
@@ -15015,8 +15085,7 @@ kbd.rs-text {
   border: none;
   transition: none;
 }
-.rs-picker-subtle .rs-picker-toggle:hover,
-.rs-picker-subtle .rs-picker-toggle:focus {
+.rs-picker-subtle .rs-picker-toggle:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }