rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/RangeSlider/styles/index.css

@@ -254,16 +254,19 @@
 }
 /* rtl:end:ignore */
 .rs-slider {
+  --rs-slider-size: 6px;
+  --rs-slider-mark-mt: 9px;
+  --rs-slider-handle-size: 12px;
+  --rs-slider-handle-bw: 2px;
+  --rs-slider-calibration-size: 4px;
+  --rs-slider-transition: 0.15s ease-in-out;
+  --rs-tooltip-offset: 0;
   position: relative;
 }
 .rs-slider .rs-tooltip {
+  left: var(--rs-tooltip-offset);
   display: none;
 }
-.rs-slider .rs-tooltip.rs-tooltip-placement-top .rs-tooltip::after {
-  margin: auto;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-}
 .rs-slider-disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -273,10 +276,30 @@
   pointer-events: none;
 }
 .rs-slider-with-mark:not(.rs-slider-vertical) {
-  margin-bottom: 29px;
+  margin-bottom: calc(20px + var(--rs-slider-mark-mt));
+}
+.rs-slider:where([data-size='xs']) {
+  --rs-slider-size: 4px;
+  --rs-slider-handle-size: 8px;
+  --rs-slider-calibration-size: 0;
+}
+.rs-slider:where([data-size='md']) {
+  --rs-slider-size: 8px;
+  --rs-slider-handle-size: 16px;
+  --rs-slider-calibration-size: 6px;
+}
+.rs-slider:where([data-size='lg']) {
+  --rs-slider-size: 10px;
+  --rs-slider-handle-size: 20px;
+  --rs-slider-calibration-size: 8px;
+}
+.rs-slider:where([data-size='xl']) {
+  --rs-slider-size: 12px;
+  --rs-slider-handle-size: 24px;
+  --rs-slider-calibration-size: 10px;
 }
 .rs-slider-bar {
-  height: 6px;
+  height: var(--rs-slider-size);
   border-radius: var(--rs-radius-sm);
   background-color: var(--rs-slider-bar);
   transition: background-color ease-in-out 0.3s;
@@ -287,26 +310,27 @@
 }
 .rs-slider-vertical .rs-slider-bar {
   height: 100%;
-  width: 6px;
+  width: var(--rs-slider-size);
 }
 .rs-slider-handle {
   position: absolute;
   top: -50%;
   outline: none;
+  left: var(--rs-slider-offset);
 }
 .rs-slider-handle::before {
   content: '';
   position: absolute;
-  width: 12px;
-  height: 12px;
+  width: var(--rs-slider-handle-size);
+  height: var(--rs-slider-handle-size);
   border-radius: var(--rs-radius-full);
-  border: 2px solid var(--rs-slider-thumb-border);
+  border-width: var(--rs-slider-handle-bw);
+  border-style: solid;
+  border-color: var(--rs-slider-thumb-border);
   background-color: var(--rs-slider-thumb-bg);
-  margin-inline-start: -6px;
+  margin-inline-start: calc(var(--rs-slider-handle-size) / -2);
   cursor: pointer;
-  /* stylelint-disable */
-  transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
-  /* stylelint-enable */
+  transition: box-shadow var(--rs-slider-transition), background-color var(--rs-slider-transition), transform var(--rs-slider-transition);
 }
 .rs-slider-handle:hover::before,
 .rs-slider-handle:focus::before {
@@ -317,11 +341,13 @@
   transform: scale(1.2);
 }
 .rs-slider-vertical .rs-slider-handle {
+  left: unset;
   top: unset;
+  bottom: var(--rs-slider-offset);
 }
 .rs-slider-vertical .rs-slider-handle::before {
-  inset-inline-start: 3px;
-  margin-top: -6px;
+  inset-inline-start: calc((var(--rs-slider-handle-size) - var(--rs-slider-size)) / 2);
+  margin-top: calc(var(--rs-slider-handle-size) / -2);
 }
 .rs-slider-handle:hover .rs-tooltip,
 .rs-slider-handle.active .rs-tooltip {
@@ -331,28 +357,38 @@
 }
 .rs-slider-vertical .rs-slider-handle:hover .rs-tooltip,
 .rs-slider-vertical .rs-slider-handle.active .rs-tooltip {
-  top: -33px;
-  margin-inline-start: 3px;
+  top: -12px;
+  margin-inline-start: -36px;
 }
 .rs-slider-mark {
   position: absolute;
-  top: 15px;
-  inset-inline-start: -2px;
+  top: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
   white-space: nowrap;
 }
 .rs-slider-mark-content {
-  margin-inline-start: -50%;
+  margin-inline-start: calc(-50% + 2px);
 }
 .rs-slider-mark-last {
   inset-inline-start: auto;
-  inset-inline-end: -2px;
+  inset-inline-end: 0;
 }
 .rs-slider-mark-last .rs-slider-mark-content {
-  margin-inline-start: 50%;
+  margin-inline-start: calc(50% - 2px);
 }
 .rs-slider-graduator {
+  --rs-slider-tick-offset: 0;
   width: 100%;
 }
+.rs-slider-graduator .rs-slider-tick[data-active='true']::before {
+  visibility: hidden;
+}
+.rs-slider-graduator[data-with-marks='true'] .rs-slider-tick {
+  position: absolute;
+  left: var(--rs-slider-tick-offset);
+}
+.rs-slider-graduator[data-with-marks='true'] .rs-slider-tick:last-child::after {
+  display: none;
+}
 .rs-slider-graduator ol,
 .rs-slider-graduator li {
   list-style: none;
@@ -371,41 +407,38 @@
   content: '';
   display: block;
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: var(--rs-slider-calibration-size);
+  height: var(--rs-slider-calibration-size);
   border-radius: var(--rs-radius-full);
   background-color: var(--rs-slider-thumb-bg);
   box-sizing: border-box;
-  border: 2px solid var(--rs-slider-bar);
-  margin-inline-start: -4px;
-  top: -1px;
+  margin-inline: 2px;
+  top: 1px;
 }
 .rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after,
 .rs-slider-vertical .rs-slider-graduator > ol > li::before {
   top: unset;
-  bottom: -4px;
-  margin-inline-start: -1px;
+  bottom: 2px;
+  margin-inline-start: 1px;
 }
 .rs-slider-graduator > ol > li:last-child::after {
-  inset-inline-end: -4px;
+  inset-inline-end: 0;
 }
 .rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after {
   inset-inline-start: 0;
   bottom: unset;
-  top: -4px;
-}
-.rs-slider-graduator > ol > li.rs-slider-pass::before {
-  border-color: var(--rs-slider-progress);
-}
-.rs-slider-graduator > ol > li.rs-slider-active::before {
-  visibility: hidden;
+  top: 2px;
 }
 .rs-slider-vertical .rs-slider-graduator {
   display: block;
   height: 100%;
 }
+.rs-slider-vertical .rs-slider-graduator[data-with-marks='true'] .rs-slider-tick {
+  left: unset;
+  bottom: var(--rs-slider-tick-offset);
+}
 .rs-slider-vertical .rs-slider-graduator > ol {
-  width: 6px;
+  width: var(--rs-slider-size);
   display: flex;
   flex-direction: column-reverse;
   height: 100%;
@@ -417,13 +450,13 @@
 }
 .rs-slider-progress-bar {
   position: absolute;
-  height: 6px;
+  height: var(--rs-slider-size);
   border-top-left-radius: var(--rs-radius-sm);
   border-bottom-left-radius: var(--rs-radius-sm);
   background-color: var(--rs-slider-progress);
 }
 .rs-slider-vertical .rs-slider-progress-bar {
-  width: 6px;
+  width: var(--rs-slider-size);
   border-bottom-left-radius: var(--rs-radius-sm);
   border-bottom-right-radius: var(--rs-radius-sm);
 }
@@ -433,7 +466,7 @@
 .rs-slider-vertical .rs-slider-mark {
   top: unset;
   bottom: -8px;
-  inset-inline-start: 15px;
+  inset-inline-start: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
 }
 .rs-slider-vertical .rs-slider-mark-content {
   margin-inline-start: auto;

package/Rate/styles/index.css

@@ -16,6 +16,7 @@
   --rs-font-size-2xl: 1.5rem;
   --rs-font-size-3xl: 1.875rem;
   --rs-font-size-4xl: 2.25rem;
+  --rs-font-size-5xl: 3rem;
   --rs-spacing: 0.25rem;
 }
 :root,
@@ -31,7 +32,7 @@
   --rs-blue-500: #2196f3;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-blue-500);
+  --rs-rate-color: var(--rs-blue-500);
 }
 .rs-theme-dark {
   --rs-gray-100: #cbced4;
@@ -45,7 +46,7 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  --rs-rate-color: var(--rs-yellow-500);
 }
 .rs-theme-high-contrast {
   --rs-gray-100: #cbced4;
@@ -59,17 +60,20 @@
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
   --rs-rate-symbol: var(--rs-gray-100);
-  --rs-rate-symbol-checked: var(--rs-primary-500);
+  --rs-rate-color: var(--rs-primary-500);
 }
 .rs-rate {
-  --rate-font-size-xs: var(--rs-font-size-lg);
-  --rate-font-size-sm: var(--rs-font-size-2xl);
-  --rate-font-size-md: var(--rs-font-size-3xl);
-  --rate-font-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xs: var(--rs-font-size-lg);
+  --rs-rate-size-sm: var(--rs-font-size-2xl);
+  --rs-rate-size-md: var(--rs-font-size-3xl);
+  --rs-rate-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xl: var(--rs-font-size-5xl);
+  --rs-rate-size: var(--rs-rate-size-md);
+  --rs-rate-before-size: 50%;
   position: relative;
   display: inline-flex;
-  color: var(--rs-rate-symbol-checked);
-  font-size: var(--rate-font-size, var(--rate-font-size-md));
+  color: var(--rs-rate-color);
+  font-size: var(--rs-rate-size);
   list-style: none;
   vertical-align: middle;
   margin: 0;
@@ -83,12 +87,14 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  width: var(--rate-font-size);
-  height: var(--rate-font-size);
+  width: -moz-max-content;
+  width: max-content;
+  height: -moz-max-content;
+  height: max-content;
 }
 .rs-rate-character-before {
   position: absolute;
-  width: 50%;
+  width: var(--rs-rate-before-size);
   height: 100%;
   overflow: hidden;
   opacity: 0;
@@ -110,76 +116,84 @@
 .rs-rate-character-after > .rs-icon {
   font-size: inherit;
 }
-.rs-rate-character-half .rs-rate-character-before {
+.rs-rate-character:where([data-status='half']) .rs-rate-character-before,
+.rs-rate-character:where([data-status='frac']) .rs-rate-character-before {
   opacity: 1;
   filter: none;
 }
-.rs-rate-character-full .rs-rate-character-after {
+.rs-rate-character:where([data-status='full']) .rs-rate-character-after {
   color: inherit;
   filter: none;
 }
-.rs-rate-character-full .rs-rate-character-after > .rs-icon {
+.rs-rate-character:where([data-status='full']) .rs-rate-character-after > .rs-icon {
   fill: currentColor;
 }
 .rs-rate-character-vertical {
   width: 100%;
-  height: 50%;
+  height: var(--rs-rate-before-size);
   flex-direction: column-reverse;
   bottom: 0;
 }
 .rs-rate-character .rs-icon,
 .rs-rate-character svg {
-  position: absolute;
   height: 1em;
   width: 1em;
 }
-.rs-rate:not(.rs-rate-readonly).rs-rate:not(.rs-rate-disabled) .rs-rate-character:hover {
+.rs-rate-character-before .rs-icon,
+.rs-rate-character-before svg {
+  position: absolute;
+}
+.rs-rate-character:hover {
   transform: scale(1.1);
 }
-.rs-rate:not(.rs-rate-readonly).rs-rate:not(.rs-rate-disabled) .rs-rate-character:active {
+.rs-rate-character:active {
   transform: scale(1);
 }
-.rs-rate-disabled {
+.rs-rate:where([data-disabled='true']) {
+  cursor: not-allowed;
   opacity: 0.5;
   outline: none;
 }
-.rs-rate-disabled .rs-rate-character {
-  cursor: not-allowed;
+.rs-rate:where([data-disabled='true']) .rs-rate-character {
+  pointer-events: none;
 }
-.rs-rate-readonly .rs-rate-character {
+.rs-rate:where([data-readonly='true']) .rs-rate-character {
   cursor: default;
   pointer-events: none;
 }
+.rs-rate.rs-rate-xl {
+  --rs-rate-size: var(--rs-rate-size-xl);
+}
 .rs-rate.rs-rate-lg {
-  --rate-font-size: var(--rate-font-size-lg);
+  --rs-rate-size: var(--rs-rate-size-lg);
 }
 .rs-rate.rs-rate-md {
-  --rate-font-size: var(--rate-font-size-md);
+  --rs-rate-size: var(--rs-rate-size-md);
 }
 .rs-rate.rs-rate-sm {
-  --rate-font-size: var(--rate-font-size-sm);
+  --rs-rate-size: var(--rs-rate-size-sm);
 }
 .rs-rate.rs-rate-xs {
-  --rate-font-size: var(--rate-font-size-xs);
+  --rs-rate-size: var(--rs-rate-size-xs);
 }
 .rs-rate.rs-rate-red {
-  --rs-rate-symbol-checked: var(--rs-red-500);
+  --rs-rate-color: var(--rs-red-500);
 }
 .rs-rate.rs-rate-orange {
-  --rs-rate-symbol-checked: var(--rs-orange-500);
+  --rs-rate-color: var(--rs-orange-500);
 }
 .rs-rate.rs-rate-yellow {
-  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  --rs-rate-color: var(--rs-yellow-500);
 }
 .rs-rate.rs-rate-green {
-  --rs-rate-symbol-checked: var(--rs-green-500);
+  --rs-rate-color: var(--rs-green-500);
 }
 .rs-rate.rs-rate-cyan {
-  --rs-rate-symbol-checked: var(--rs-cyan-500);
+  --rs-rate-color: var(--rs-cyan-500);
 }
 .rs-rate.rs-rate-blue {
-  --rs-rate-symbol-checked: var(--rs-blue-500);
+  --rs-rate-color: var(--rs-blue-500);
 }
 .rs-rate.rs-rate-violet {
-  --rs-rate-symbol-checked: var(--rs-violet-500);
+  --rs-rate-color: var(--rs-violet-500);
 }

package/Rate/styles/index.less

@@ -4,15 +4,18 @@
 // ----------------------
 
 .rs-rate {
-  --rate-font-size-xs: var(--rs-font-size-lg);
-  --rate-font-size-sm: var(--rs-font-size-2xl);
-  --rate-font-size-md: var(--rs-font-size-3xl);
-  --rate-font-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xs: var(--rs-font-size-lg);
+  --rs-rate-size-sm: var(--rs-font-size-2xl);
+  --rs-rate-size-md: var(--rs-font-size-3xl);
+  --rs-rate-size-lg: var(--rs-font-size-4xl);
+  --rs-rate-size-xl: var(--rs-font-size-5xl);
+  --rs-rate-size: var(--rs-rate-size-md);
+  --rs-rate-before-size: 50%;
 
   position: relative;
   display: inline-flex;
-  color: var(--rs-rate-symbol-checked);
-  font-size: var(--rate-font-size, var(--rate-font-size-md));
+  color: var(--rs-rate-color);
+  font-size: var(--rs-rate-size);
   list-style: none;
   vertical-align: middle;
   margin: 0;
@@ -24,12 +27,12 @@
     cursor: pointer;
     outline: none;
     user-select: none;
-    width: var(--rate-font-size);
-    height: var(--rate-font-size);
+    width: max-content;
+    height: max-content;
 
     &-before {
       position: absolute;
-      width: 50%;
+      width: var(--rs-rate-before-size);
       height: 100%;
       overflow: hidden;
       opacity: 0;
@@ -57,12 +60,13 @@
       }
     }
 
-    &-half &-before {
+    &:where([data-status='half']) &-before,
+    &:where([data-status='frac']) &-before {
       opacity: 1;
       filter: none;
     }
 
-    &-full &-after {
+    &:where([data-status='full']) &-after {
       color: inherit;
       filter: none;
 
@@ -73,20 +77,26 @@
 
     &-vertical {
       width: 100%;
-      height: 50%;
+      height: var(--rs-rate-before-size);
       flex-direction: column-reverse;
       bottom: 0;
     }
 
     .rs-icon,
     svg {
-      position: absolute;
       height: 1em;
       width: 1em;
     }
+
+    &-before {
+      .rs-icon,
+      svg {
+        position: absolute;
+      }
+    }
   }
 
-  &:not(&-readonly)&:not(&-disabled) &-character {
+  &-character {
     &:hover {
       transform: scale(1.1);
     }
@@ -96,33 +106,34 @@
     }
   }
 
-  &-disabled {
+  &:where([data-disabled='true']) {
+    cursor: @cursor-disabled;
     opacity: 0.5;
     outline: none;
   }
 
-  &-disabled &-character {
-    cursor: @cursor-disabled;
+  &:where([data-disabled='true']) &-character {
+    pointer-events: none;
   }
 
-  &-readonly &-character {
+  &:where([data-readonly='true']) &-character {
     cursor: default;
     pointer-events: none;
   }
 
   // Size variants
-  @sizes: lg, md, sm, xs;
+  @sizes: xl, lg, md, sm, xs;
 
   each(@sizes, .(@size) {
     &&-@{size} {
-      --rate-font-size: var(~'--rate-font-size-@{size}');
+      --rs-rate-size: var(~'--rs-rate-size-@{size}');
     }
   });
 
   // Color variants
   each(@spectrum, .(@color) {
     &&-@{color} {
-      --rs-rate-symbol-checked: var(~'--rs-@{color}-500');
+      --rs-rate-color: var(~'--rs-@{color}-500');
     }
   });
 }