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

package/Slider/styles/index.less

@@ -5,16 +5,21 @@
 // Slider
 // --------------------------------------------------
 .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-calibration-bw: 2px;
+  --rs-slider-handle-ratio: 2;
+  --rs-slider-transition: 0.15s ease-in-out;
+  --rs-tooltip-offset: 0;
+
   position: relative;
 
   .rs-tooltip {
+    left: var(--rs-tooltip-offset);
     display: none;
-
-    &.rs-tooltip-placement-top .rs-tooltip::after {
-      margin: auto;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-    }
   }
 
   &-disabled {
@@ -29,13 +34,37 @@
 
   &-with-mark:not(&-vertical) {
     //White space for mark
-    margin-bottom: (@line-height-computed + @slider-mark-margin-top);
+    margin-bottom: calc(@line-height-computed + var(--rs-slider-mark-mt));
+  }
+
+  &:where([data-size='xs']) {
+    --rs-slider-size: 4px;
+    --rs-slider-handle-size: 8px;
+    --rs-slider-calibration-size: 0;
+  }
+
+  &:where([data-size='md']) {
+    --rs-slider-size: 8px;
+    --rs-slider-handle-size: 16px;
+    --rs-slider-calibration-size: 6px;
+  }
+
+  &:where([data-size='lg']) {
+    --rs-slider-size: 10px;
+    --rs-slider-handle-size: 20px;
+    --rs-slider-calibration-size: 8px;
+  }
+
+  &:where([data-size='xl']) {
+    --rs-slider-size: 12px;
+    --rs-slider-handle-size: 24px;
+    --rs-slider-calibration-size: 10px;
   }
 }
 
 // Bar
 .rs-slider-bar {
-  height: @slider-bar-side-length;
+  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;
@@ -47,7 +76,7 @@
 
   .rs-slider-vertical & {
     height: 100%;
-    width: @slider-bar-side-length;
+    width: var(--rs-slider-size);
   }
 }
 
@@ -56,21 +85,24 @@
   position: absolute;
   top: -50%;
   outline: none;
+  left: var(--rs-slider-offset);
 
   &::before {
     content: '';
     position: absolute;
-    width: @slider-handle-diameter;
-    height: @slider-handle-diameter;
+    width: var(--rs-slider-handle-size);
+    height: var(--rs-slider-handle-size);
     border-radius: var(--rs-radius-full);
-    border: @slider-handle-border-width 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: -(@slider-handle-diameter / 2);
+    margin-inline-start: calc(var(--rs-slider-handle-size) / -2);
     cursor: pointer;
-    /* stylelint-disable */ //Formatted by prettier
-    transition: box-shadow @slider-handle-transition, background-color @slider-handle-transition,
-      transform @slider-handle-transition;
-    /* stylelint-enable */
+    transition:
+      box-shadow var(--rs-slider-transition),
+      background-color var(--rs-slider-transition),
+      transform var(--rs-slider-transition);
   }
 
   &:hover::before,
@@ -86,11 +118,13 @@
   }
 
   .rs-slider-vertical & {
+    left: unset;
     top: unset;
+    bottom: var(--rs-slider-offset);
 
     &::before {
-      inset-inline-start: ((@slider-handle-diameter - @slider-bar-side-length)/2);
-      margin-top: (-@slider-handle-diameter / 2);
+      inset-inline-start: calc((var(--rs-slider-handle-size) - var(--rs-slider-size)) / 2);
+      margin-top: calc(var(--rs-slider-handle-size) / -2);
     }
   }
 }
@@ -102,37 +136,52 @@
   top: -30px;
 
   .rs-slider-vertical & {
-    top: -33px;
-    // Make sure tooltip align center.
-    margin-inline-start: 3px;
+    top: -12px;
+    margin-inline-start: -36px;
   }
 }
 
 // Mark
 .rs-slider-mark {
   position: absolute;
-  top: (@slider-bar-side-length + @slider-mark-margin-top);
-  inset-inline-start: -2px;
+  top: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
   white-space: nowrap;
 
   &-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-content {
-    margin-inline-start: 50%;
+    margin-inline-start: calc(50% - 2px);
   }
 }
 
 // Graduator
 .rs-slider-graduator {
+  --rs-slider-tick-offset: 0;
   width: 100%;
 
+  .rs-slider-tick {
+    &[data-active='true']::before {
+      visibility: hidden;
+    }
+  }
+  &[data-with-marks='true'] {
+    .rs-slider-tick {
+      position: absolute;
+      left: var(--rs-slider-tick-offset);
+
+      &:last-child::after {
+        display: none;
+      }
+    }
+  }
+
   ol,
   li {
     list-style: none;
@@ -152,41 +201,32 @@
         content: '';
         display: block;
         position: absolute;
-        width: @slider-calibration-diameter;
-        height: @slider-calibration-diameter;
+        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: @slider-calibration-border-width solid var(--rs-slider-bar);
-        margin-inline-start: -4px;
-        top: -1px;
+        margin-inline: 2px;
+        top: 1px;
 
         // Vertical styles
         .rs-slider-vertical & {
           top: unset;
-          bottom: -4px;
-          margin-inline-start: -1px;
+          bottom: 2px;
+          margin-inline-start: 1px;
         }
       }
 
       &:last-child::after {
-        inset-inline-end: -4px;
+        inset-inline-end: 0;
 
         // Vertical styles
         .rs-slider-vertical & {
           inset-inline-start: 0;
           bottom: unset;
-          top: -4px;
+          top: 2px;
         }
       }
-
-      &.rs-slider-pass::before {
-        border-color: var(--rs-slider-progress);
-      }
-
-      &.rs-slider-active::before {
-        visibility: hidden;
-      }
     }
   }
 
@@ -195,8 +235,15 @@
     display: block;
     height: 100%;
 
+    &[data-with-marks='true'] {
+      .rs-slider-tick {
+        left: unset;
+        bottom: var(--rs-slider-tick-offset);
+      }
+    }
+
     > ol {
-      width: @slider-bar-side-length;
+      width: var(--rs-slider-size);
       display: flex;
       flex-direction: column-reverse;
       height: 100%;
@@ -213,13 +260,13 @@
 // Progress bar
 .rs-slider-progress-bar {
   position: absolute;
-  height: @slider-bar-side-length;
+  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 & {
-    width: @slider-bar-side-length;
+    width: var(--rs-slider-size);
     border-bottom-left-radius: var(--rs-radius-sm);
     border-bottom-right-radius: var(--rs-radius-sm);
   }
@@ -233,7 +280,7 @@
   .rs-slider-mark {
     top: unset;
     bottom: -8px;
-    inset-inline-start: (@slider-bar-side-length + @slider-mark-margin-top);
+    inset-inline-start: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
 
     &-content {
       margin-inline-start: auto;

package/Tabs/styles/index.css

@@ -1659,6 +1659,7 @@
 }
 .rs-nav-justified {
   display: flex;
+  width: 100%;
 }
 .rs-nav-justified > .rs-nav-item,
 .rs-nav-justified > .rs-dropdown {