rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/RadioTile/styles/index.less

@@ -1,10 +1,15 @@
 @import '../../styles/common';
 
 .rs-radio-tile {
-  border-radius: 6px;
+
+  --rs-radio-tile-border-radius: var(--rs-radius-md);
+  --rs-radio-tile-padding: calc(var(--rs-spacing) * 2.5);
+  --rs-radio-tile-mark-size: 48px;
+
+  border-radius: var(--rs-radio-tile-border-radius);
   overflow: hidden;
   border: 2px solid var(--rs-radio-tile-border);
-  padding: 10px;
+  padding: var(--rs-radio-tile-padding);
   position: relative;
   cursor: pointer;
 
@@ -19,19 +24,19 @@
   &-mark {
     background: var(--rs-radio-tile-checked-color);
     border-bottom-left-radius: 50%;
-    height: 48px;
+    height: var(--rs-radio-tile-mark-size);
+    width: var(--rs-radio-tile-mark-size);
     position: absolute;
-    right: -24px;
-    top: -24px;
-    width: 48px;
+    inset-inline-end: calc(var(--rs-radio-tile-mark-size) / -2);
+    top: calc(var(--rs-radio-tile-mark-size) / -2);
     z-index: 3;
     opacity: 0;
 
     &-icon {
       position: absolute;
-      font-size: 16px;
+      font-size: var(--rs-font-size-md);
       top: 25px;
-      left: 7px;
+      inset-inline-start: 7px;
       color: var(--rs-radio-tile-checked-mark-color);
     }
   }

package/RangeSlider/styles/index.css

@@ -3,6 +3,20 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-text-line-height-xs: calc(1 / 0.75);
+  --rs-radius-sm: 0.25rem;
+  --rs-radius-full: calc(infinity * 1px);
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -80,28 +94,31 @@
     --rs-slider-thumb-hover-shadow: 0 0 0 8px rgba(255, 255, 0, 0.25);
   }
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 /* rtl:begin:ignore */
 /* rtl:end:ignore */
 .rs-tooltip {
+  --rs-tooltip-border-radius: var(--rs-radius-sm);
+  --rs-tooltip-padding-block: 4px;
+  --rs-tooltip-padding-inline: 10px;
+  --rs-tooltip-z-index: 1070;
+  --rs-tooltip-max-width: 250px;
+  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
+  --rs-tooltip-position-x: var(--rs-position-x);
+  --rs-tooltip-position-y: var(--rs-position-y);
+  --rs-tooltip-opacity: var(--rs-opacity, 0);
   position: absolute;
-  z-index: 1070;
+  top: var(--rs-tooltip-position-y);
+  left: var(--rs-tooltip-position-x) /* rtl:ignore */;
+  z-index: var(--rs-tooltip-z-index);
   display: block;
-  font-size: 12px;
-  opacity: 0;
-  line-height: 1.66666667;
-  max-width: 250px;
-  padding: 2px 10px;
+  font-size: var(--rs-font-size-xs);
+  opacity: var(--rs-tooltip-opacity);
+  line-height: var(--rs-tooltip-line-height);
+  max-width: var(--rs-tooltip-max-width);
+  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
   color: var(--rs-tooltip-text);
   background-color: var(--rs-tooltip-bg);
-  border-radius: 4px;
+  border-radius: var(--rs-tooltip-border-radius);
   overflow-wrap: break-word;
 }
 .rs-tooltip.rs-anim-fade {
@@ -130,124 +147,112 @@
 .rs-theme-high-contrast .rs-tooltip-arrow::before {
   display: block;
 }
-.rs-tooltip[class*='placement-top'] {
+.rs-tooltip:where([data-placement*='top']) {
   margin-top: -8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-top'].rs-anim-in {
+.rs-tooltip:where([data-placement*='top']).rs-anim-in {
   transform: translate(0, -2px);
 }
-.rs-tooltip[class*='placement-top']::after {
+.rs-tooltip:where([data-placement*='top'])::after {
   bottom: -6px;
   margin-left: -6px;
   border-width: 6px 6px 0;
   border-top-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-top']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='top'])::before {
   bottom: -7px;
   margin-left: -7px;
   border-width: 7px 7px 0;
   border-top-color: var(--rs-tooltip-border);
 }
-.rs-tooltip[class*='placement-bottom'] {
+.rs-tooltip:where([data-placement*='bottom']) {
   margin-top: 8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-bottom'].rs-anim-in {
+.rs-tooltip:where([data-placement*='bottom']).rs-anim-in {
   transform: translate(0, 2px);
 }
-.rs-tooltip[class*='placement-bottom']::after {
+.rs-tooltip:where([data-placement*='bottom'])::after {
   top: -6px;
   margin-left: -6px;
   border-width: 0 6px 6px;
   border-bottom-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-bottom']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='bottom'])::before {
   top: -7px;
   margin-left: -7px;
   border-width: 0 7px 7px;
   border-bottom-color: var(--rs-tooltip-border);
 }
+.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::before,
+.rs-tooltip:where([data-placement='bottom'], [data-placement='top'])::after {
+  left: 50%;
+}
+.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::before,
+.rs-tooltip:where([data-placement='bottom-start'], [data-placement='top-start'])::after {
+  left: 10px;
+}
+.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::before {
+  right: 3px;
+}
+.rs-tooltip:where([data-placement='bottom-end'], [data-placement='top-end'])::after {
+  right: 4px;
+}
+.rs-tooltip:where([data-placement='left'], [data-placement='right'])::before,
+.rs-tooltip:where([data-placement='left'], [data-placement='right'])::after {
+  top: 50%;
+}
+.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::before,
+.rs-tooltip:where([data-placement='left-start'], [data-placement='right-start'])::after {
+  top: 10px;
+}
+.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::before {
+  bottom: 3px;
+}
+.rs-tooltip:where([data-placement='left-end'], [data-placement='right-end'])::after {
+  bottom: 4px;
+}
 /* rtl:begin:ignore */
-.rs-tooltip[class*='placement-right'] {
+.rs-tooltip:where([data-placement*='right']) {
   margin-left: 8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-right'].rs-anim-in {
+.rs-tooltip:where([data-placement*='right']).rs-anim-in {
   transform: translate(2px, 0);
 }
-.rs-tooltip[class*='placement-right']::after {
+.rs-tooltip:where([data-placement*='right'])::after {
   left: -6px;
   margin-top: -6px;
   border-width: 6px 6px 6px 0;
   border-right-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-right']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='right'])::before {
   left: -7px;
   margin-top: -7px;
   border-width: 7px 7px 7px 0;
   border-right-color: var(--rs-tooltip-border);
 }
-.rs-tooltip[class*='placement-left'] {
+.rs-tooltip:where([data-placement*='left']) {
   margin-left: -8px;
   transform: translate(0, 0);
 }
-.rs-tooltip[class*='placement-left'].rs-anim-in {
+.rs-tooltip:where([data-placement*='left']).rs-anim-in {
   transform: translate(-2px, 0);
 }
-.rs-tooltip[class*='placement-left']::after {
+.rs-tooltip:where([data-placement*='left'])::after {
   right: -6px;
   margin-top: -6px;
   border-width: 6px 0 6px 6px;
   border-left-color: var(--rs-tooltip-bg);
 }
-.rs-theme-high-contrast .rs-tooltip[class*='placement-left']::before {
+.rs-theme-high-contrast .rs-tooltip:where([data-placement*='left'])::before {
   right: -7px;
   margin-top: -7px;
   border-width: 7px 0 7px 7px;
   border-left-color: var(--rs-tooltip-border);
 }
 /* rtl:end:ignore */
-.rs-tooltip.placement-bottom::before,
-.rs-tooltip.placement-top::before,
-.rs-tooltip.placement-bottom::after,
-.rs-tooltip.placement-top::after {
-  left: 50%;
-}
-.rs-tooltip.placement-bottom-start::before,
-.rs-tooltip.placement-top-start::before,
-.rs-tooltip.placement-bottom-start::after,
-.rs-tooltip.placement-top-start::after {
-  left: 10px;
-}
-.rs-tooltip.placement-bottom-end::before,
-.rs-tooltip.placement-top-end::before {
-  right: 3px;
-}
-.rs-tooltip.placement-bottom-end::after,
-.rs-tooltip.placement-top-end::after {
-  right: 4px;
-}
-.rs-tooltip.placement-right::before,
-.rs-tooltip.placement-left::before,
-.rs-tooltip.placement-right::after,
-.rs-tooltip.placement-left::after {
-  top: 50%;
-}
-.rs-tooltip.placement-right-start::before,
-.rs-tooltip.placement-left-start::before,
-.rs-tooltip.placement-right-start::after,
-.rs-tooltip.placement-left-start::after {
-  top: 10px;
-}
-.rs-tooltip.placement-right-end::before,
-.rs-tooltip.placement-left-end::before {
-  bottom: 3px;
-}
-.rs-tooltip.placement-right-end::after,
-.rs-tooltip.placement-left-end::after {
-  bottom: 4px;
-}
 .rs-slider {
   position: relative;
 }
@@ -256,8 +261,8 @@
 }
 .rs-slider .rs-tooltip.rs-tooltip-placement-top .rs-tooltip::after {
   margin: auto;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
 }
 .rs-slider-disabled {
   opacity: 0.5;
@@ -272,7 +277,7 @@
 }
 .rs-slider-bar {
   height: 6px;
-  border-radius: 3px;
+  border-radius: var(--rs-radius-sm);
   background-color: var(--rs-slider-bar);
   transition: background-color ease-in-out 0.3s;
   cursor: pointer;
@@ -294,10 +299,10 @@
   position: absolute;
   width: 12px;
   height: 12px;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
   border: 2px solid var(--rs-slider-thumb-border);
   background-color: var(--rs-slider-thumb-bg);
-  margin-left: -6px;
+  margin-inline-start: -6px;
   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;
@@ -315,7 +320,7 @@
   top: unset;
 }
 .rs-slider-vertical .rs-slider-handle::before {
-  left: 3px;
+  inset-inline-start: 3px;
   margin-top: -6px;
 }
 .rs-slider-handle:hover .rs-tooltip,
@@ -327,23 +332,23 @@
 .rs-slider-vertical .rs-slider-handle:hover .rs-tooltip,
 .rs-slider-vertical .rs-slider-handle.active .rs-tooltip {
   top: -33px;
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 .rs-slider-mark {
   position: absolute;
   top: 15px;
-  left: -2px;
+  inset-inline-start: -2px;
   white-space: nowrap;
 }
 .rs-slider-mark-content {
-  margin-left: -50%;
+  margin-inline-start: -50%;
 }
 .rs-slider-mark-last {
-  left: auto;
-  right: -2px;
+  inset-inline-start: auto;
+  inset-inline-end: -2px;
 }
 .rs-slider-mark-last .rs-slider-mark-content {
-  margin-left: 50%;
+  margin-inline-start: 50%;
 }
 .rs-slider-graduator {
   width: 100%;
@@ -354,7 +359,7 @@
 }
 .rs-slider-graduator > ol {
   display: flex;
-  padding-left: 0;
+  padding-inline-start: 0;
   width: 100%;
 }
 .rs-slider-graduator > ol > li {
@@ -368,24 +373,24 @@
   position: absolute;
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  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-left: -4px;
+  margin-inline-start: -4px;
   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-left: -1px;
+  margin-inline-start: -1px;
 }
 .rs-slider-graduator > ol > li:last-child::after {
-  right: -4px;
+  inset-inline-end: -4px;
 }
 .rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after {
-  left: 0;
+  inset-inline-start: 0;
   bottom: unset;
   top: -4px;
 }
@@ -413,12 +418,14 @@
 .rs-slider-progress-bar {
   position: absolute;
   height: 6px;
-  border-radius: 3px 0 0 3px;
+  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;
-  border-radius: 0 0 3px 3px;
+  border-bottom-left-radius: var(--rs-radius-sm);
+  border-bottom-right-radius: var(--rs-radius-sm);
 }
 .rs-slider-vertical {
   height: 100%;
@@ -426,10 +433,10 @@
 .rs-slider-vertical .rs-slider-mark {
   top: unset;
   bottom: -8px;
-  left: 15px;
+  inset-inline-start: 15px;
 }
 .rs-slider-vertical .rs-slider-mark-content {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .rs-slider-vertical .rs-slider-mark-last {
   bottom: unset;

package/Rate/styles/index.css

@@ -3,6 +3,21 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-lg: 1.125rem;
+  --rs-font-size-2xl: 1.5rem;
+  --rs-font-size-3xl: 1.875rem;
+  --rs-font-size-4xl: 2.25rem;
+  --rs-spacing: 0.25rem;
+}
 :root,
 .rs-theme-light {
   --rs-gray-100: #f2f2f5;
@@ -46,32 +61,30 @@
   --rs-rate-symbol: var(--rs-gray-100);
   --rs-rate-symbol-checked: var(--rs-primary-500);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 .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);
   position: relative;
   display: inline-flex;
   color: var(--rs-rate-symbol-checked);
+  font-size: var(--rate-font-size, var(--rate-font-size-md));
   list-style: none;
   vertical-align: middle;
   margin: 0;
   padding: 0;
+  gap: calc(var(--rs-spacing) * 2);
 }
 .rs-rate-character {
   position: relative;
-  margin-right: 10px;
-  padding: 3px 0;
   cursor: pointer;
   outline: none;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  width: var(--rate-font-size);
+  height: var(--rate-font-size);
 }
 .rs-rate-character-before {
   position: absolute;
@@ -112,7 +125,7 @@
   width: 100%;
   height: 50%;
   flex-direction: column-reverse;
-  bottom: 3px;
+  bottom: 0;
 }
 .rs-rate-character .rs-icon,
 .rs-rate-character svg {
@@ -137,59 +150,36 @@
   cursor: default;
   pointer-events: none;
 }
-.rs-rate-lg {
-  font-size: 36px;
-}
-.rs-rate-lg .rs-rate-character {
-  width: 36px;
-  height: 42px;
-}
-.rs-rate-md {
-  font-size: 30px;
-}
-.rs-rate-md .rs-rate-character {
-  width: 30px;
-  height: 36px;
-}
-.rs-rate-sm {
-  font-size: 24px;
+.rs-rate.rs-rate-lg {
+  --rate-font-size: var(--rate-font-size-lg);
 }
-.rs-rate-sm .rs-rate-character {
-  width: 24px;
-  height: 30px;
+.rs-rate.rs-rate-md {
+  --rate-font-size: var(--rate-font-size-md);
 }
-.rs-rate-xs {
-  font-size: 18px;
+.rs-rate.rs-rate-sm {
+  --rate-font-size: var(--rate-font-size-sm);
 }
-.rs-rate-xs .rs-rate-character {
-  width: 18px;
-  height: 24px;
+.rs-rate.rs-rate-xs {
+  --rate-font-size: var(--rate-font-size-xs);
 }
-.rs-rate-red {
+.rs-rate.rs-rate-red {
   --rs-rate-symbol-checked: var(--rs-red-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-orange {
+.rs-rate.rs-rate-orange {
   --rs-rate-symbol-checked: var(--rs-orange-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-yellow {
+.rs-rate.rs-rate-yellow {
   --rs-rate-symbol-checked: var(--rs-yellow-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-green {
+.rs-rate.rs-rate-green {
   --rs-rate-symbol-checked: var(--rs-green-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-cyan {
+.rs-rate.rs-rate-cyan {
   --rs-rate-symbol-checked: var(--rs-cyan-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-blue {
+.rs-rate.rs-rate-blue {
   --rs-rate-symbol-checked: var(--rs-blue-500);
-  color: var(--rs-rate-symbol-checked);
 }
-.rs-rate-violet {
+.rs-rate.rs-rate-violet {
   --rs-rate-symbol-checked: var(--rs-violet-500);
-  color: var(--rs-rate-symbol-checked);
 }

package/Rate/styles/index.less

@@ -4,21 +4,28 @@
 // ----------------------
 
 .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);
+
   position: relative;
   display: inline-flex;
   color: var(--rs-rate-symbol-checked);
+  font-size: var(--rate-font-size, var(--rate-font-size-md));
   list-style: none;
   vertical-align: middle;
   margin: 0;
   padding: 0;
+  gap: calc(var(--rs-spacing) * 2);
 
   &-character {
     position: relative;
-    margin-right: 10px;
-    padding: 3px 0;
     cursor: pointer;
     outline: none;
     user-select: none;
+    width: var(--rate-font-size);
+    height: var(--rate-font-size);
 
     &-before {
       position: absolute;
@@ -68,7 +75,7 @@
       width: 100%;
       height: 50%;
       flex-direction: column-reverse;
-      bottom: 3px;
+      bottom: 0;
     }
 
     .rs-icon,
@@ -107,26 +114,15 @@
   @sizes: lg, md, sm, xs;
 
   each(@sizes, .(@size) {
-    @font-size-var-name: ~'rate-@{size}-font-size';
-    @font-size: @@font-size-var-name;
-
-    &-@{size} {
-      font-size: @font-size;
-
-      .rs-rate-character {
-        width: @font-size;
-        height: (@font-size + 6);
-      }
+    &&-@{size} {
+      --rate-font-size: var(~'--rate-font-size-@{size}');
     }
   });
 
   // Color variants
   each(@spectrum, .(@color) {
-    &-@{color} {
-
+    &&-@{color} {
       --rs-rate-symbol-checked: var(~'--rs-@{color}-500');
-
-      color: var(--rs-rate-symbol-checked);
     }
   });
 }

package/Row/styles/index.css

@@ -1,25 +0,0 @@
-/**
-  * Map mixin
-  * @param {string} @size-name - The size name
-  * @param {string} @suffix - The suffix
-  */
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
-.rs-row {
-  margin-left: -5px;
-  margin-right: -5px;
-}
-.rs-row::before,
-.rs-row::after {
-  content: ' ';
-  display: table;
-}
-.rs-row::after {
-  clear: both;
-}

package/Row/styles/index.less

@@ -1,10 +1,2 @@
-@import '../../styles/common';
-@import '../../Grid/styles/mixin';
-@import '../../Grid/styles/grid-framework';
-
-// Row
-//
-// Rows contain and clear the floats of your columns.
-.rs-row {
-  .make-row();
-}
+// Col styles are included in Grid component
+// --------------------------------------------------