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

package/DateRangePicker/styles/index.less

@@ -24,7 +24,7 @@
   }
 
   > .rs-input-group.rs-input-group-inside .rs-input {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
@@ -85,7 +85,7 @@
 // Header
 .rs-picker-daterange-header {
   padding: @date-range-picker-header-padding-vertical @picker-menu-padding;
-  font-size: @date-range-picker-header-font-size;
+  font-size: var(--rs-font-size-sm);
   line-height: @date-range-picker-header-line-height;
   border-bottom: 1px solid var(--rs-border-primary);
 
@@ -106,14 +106,14 @@
       width: 50%;
       bottom: -1px;
       border-bottom: 2px solid #3498ff;
-      left: 0;
+      inset-inline-start:  0;
       transition: left 0.3s;
     }
   }
 
   &.rs-picker-tab-active-end {
     &::after {
-      left: 50%;
+      inset-inline-start:  50%;
     }
   }
 }

package/Divider/styles/index.css

@@ -3,6 +3,19 @@
   * @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-sm: 0.875rem;
+  --rs-spacing: 0.25rem;
+  --rs-scale: 1;
+}
 :root,
 .rs-theme-light {
   --rs-gray-200: #e5e5ea;
@@ -19,44 +32,65 @@
   --rs-gray-600: #3c3f43;
   --rs-divider-border: var(--rs-gray-600);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
+.rs-divider {
+  --rs-divider-size-xs: calc(0.0625rem * var(--rs-scale));
+  --rs-divider-size: var(--rs-divider-size-xs);
+  --rs-divider-spacing-xs: calc(var(--rs-spacing) * 2);
+  --rs-divider-spacing: var(--rs-divider-spacing-xs);
+  --rs-divider-border-style: solid;
+  --rs-divider-border-color: var(--rs-divider-color, var(--rs-divider-border));
+  --rs-divider-label-font-size: var(--rs-font-size-sm);
+  font-size: var(--rs-divider-label-font-size);
+  color: var(--rs-divider-color, inherit);
+  border-style: var(--rs-divider-border-style);
+  border-color: var(--rs-divider-border-color);
+  border-width: 0;
 }
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
+.rs-divider:where([data-appearance='dashed']) {
+  --rs-divider-border-style: dashed;
 }
-.rs-divider {
-  background-color: var(--rs-divider-border);
+.rs-divider:where([data-appearance='dotted']) {
+  --rs-divider-border-style: dotted;
 }
-.rs-divider-vertical {
+.rs-divider:where([data-orientation='horizontal']) {
+  width: 100%;
+  margin-block: var(--rs-divider-spacing);
+  border-top-width: var(--rs-divider-size);
+}
+.rs-divider:where([data-orientation='vertical']) {
   display: inline-block;
   min-height: 1em;
   height: 100%;
   width: 1px;
   vertical-align: middle;
-  margin: 0 12px;
+  margin-inline: var(--rs-divider-spacing);
+  border-inline-start-width: var(--rs-divider-size);
 }
-.rs-divider-horizontal {
-  height: 1px;
-  width: 100%;
-  margin: 24px 0;
-}
-.rs-divider-horizontal.rs-divider-with-text {
+.rs-divider:where([data-orientation='horizontal'][data-with-label='true']) {
   display: flex;
   flex-direction: row;
   align-items: center;
   background: transparent;
-  margin: 30px 0;
+  flex: 0 0 auto;
+  border-width: 0;
 }
-.rs-divider-horizontal.rs-divider-with-text::before,
-.rs-divider-horizontal.rs-divider-with-text::after {
+.rs-divider:where([data-orientation='horizontal'][data-with-label='true'])::before,
+.rs-divider:where([data-orientation='horizontal'][data-with-label='true'])::after {
   content: '';
   flex: 1 1 auto;
-  border-top: 1px solid var(--rs-divider-border);
+  border-top-style: var(--rs-divider-border-style);
+  border-top-color: var(--rs-divider-border-color);
+  border-top-width: var(--rs-divider-size);
 }
-.rs-divider-inner-text {
-  padding: 0 12px;
-  flex: 0 0 auto;
+.rs-divider:where([data-orientation='horizontal'][data-with-label='true'])::before {
+  margin-inline-end: var(--rs-divider-spacing-xs);
+}
+.rs-divider:where([data-orientation='horizontal'][data-with-label='true'])::after {
+  margin-inline-start: var(--rs-divider-spacing-xs);
+}
+.rs-divider:where([data-position='left']):before {
+  display: none;
+}
+.rs-divider:where([data-position='right']):after {
+  display: none;
 }

package/Divider/styles/index.less

@@ -1,40 +1,85 @@
 @import '../../styles/common';
 
 .rs-divider {
-  background-color: var(--rs-divider-border);
+  --rs-divider-size-xs: calc(0.0625rem * var(--rs-scale));
+  --rs-divider-size-sm: calc(0.125rem * var(--rs-scale));
+  --rs-divider-size-md: calc(0.1875rem * var(--rs-scale));
+  --rs-divider-size-lg: calc(0.25rem * var(--rs-scale));
+  --rs-divider-size-xl: calc(0.3125rem * var(--rs-scale));
+  --rs-divider-size: var(--rs-divider-size-xs);
 
-  &-vertical {
+  --rs-divider-spacing-xs: calc(var(--rs-spacing) * 2);
+  --rs-divider-spacing-sm: calc(var(--rs-spacing) * 3);
+  --rs-divider-spacing-md: calc(var(--rs-spacing) * 4);
+  --rs-divider-spacing-lg: calc(var(--rs-spacing) * 5);
+  --rs-divider-spacing-xl: calc(var(--rs-spacing) * 6);
+  --rs-divider-spacing: var(--rs-divider-spacing-xs);
+
+  --rs-divider-border-style: solid;
+  --rs-divider-border-color: var(--rs-divider-color, var(--rs-divider-border));
+  --rs-divider-label-font-size: var(--rs-font-size-sm);
+
+  font-size: var(--rs-divider-label-font-size);
+  color: var(--rs-divider-color, inherit);
+  border-style: var(--rs-divider-border-style);
+  border-color: var(--rs-divider-border-color);
+  border-width: 0;
+
+  &:where([data-appearance='dashed']) {
+    --rs-divider-border-style: dashed;
+  }
+
+  &:where([data-appearance='dotted']) {
+    --rs-divider-border-style: dotted;
+  }
+
+  &:where([data-orientation='horizontal']) {
+    width: 100%;
+    margin-block: var(--rs-divider-spacing);
+    border-top-width: var(--rs-divider-size);
+  }
+
+  &:where([data-orientation='vertical']) {
     display: inline-block;
     min-height: 1em;
     height: 100%;
     width: 1px;
     vertical-align: middle;
-    margin: 0 @divider-vertical-margin;
-  }
-
-  &-horizontal {
-    height: 1px;
-    width: 100%;
-    margin: @divider-horizontal-margin 0;
+    margin-inline: var(--rs-divider-spacing);
+    border-inline-start-width: var(--rs-divider-size);
   }
 
-  &-horizontal&-with-text {
+  &:where([data-orientation='horizontal'][data-with-label='true']) {
     display: flex;
     flex-direction: row;
     align-items: center;
     background: transparent;
-    margin: @divider-with-text-horizontal-margin 0;
+    flex: 0 0 auto;
+    border-width: 0;
 
     &::before,
     &::after {
       content: '';
       flex: 1 1 auto;
-      border-top: 1px solid var(--rs-divider-border);
+      border-top-style: var(--rs-divider-border-style);
+      border-top-color: var(--rs-divider-border-color);
+      border-top-width: var(--rs-divider-size);
+    }
+
+    &::before {
+      margin-inline-end: var(--rs-divider-spacing-xs);
+    }
+
+    &::after {
+      margin-inline-start: var(--rs-divider-spacing-xs);
     }
   }
 
-  &-inner-text {
-    padding: 0 @divider-text-space;
-    flex: 0 0 auto;
+  &:where([data-position='left']):before {
+    display: none;
+  }
+
+  &:where([data-position='right']):after {
+    display: none;
   }
 }

package/Drawer/styles/index.css

@@ -3,6 +3,19 @@
   * @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-spacing: 0.25rem;
+  --rs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.1);
+}
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -16,7 +29,6 @@
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-overlay: var(--rs-gray-0);
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -36,7 +48,6 @@
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-overlay: var(--rs-gray-700);
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -56,21 +67,12 @@
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
   --rs-drawer-bg: var(--rs-gray-700);
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-high-contrast {
     --rs-bg-backdrop: rgba(15, 19, 26, 0.8);
   }
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 @keyframes shakeHead {
   0%,
   100% {
@@ -84,18 +86,20 @@
     transform: translate3d(10px, 0, 0);
   }
 }
-.rs-drawer-wrapper {
-  position: fixed;
-  z-index: 1050;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.rs-drawer-wrapper.rs-drawer-no-backdrop {
-  pointer-events: none;
-}
 .rs-drawer {
+  --rs-drawer-shadow: var(--rs-shadow-lg);
+  --rs-drawer-title-font-size: var(--rs-font-size-lg);
+  --rs-drawer-title-line-height: 2.25rem;
+  --rs-drawer-body-padding: calc(var(--rs-spacing) * 7.5) calc(var(--rs-spacing) * 15);
+  --rs-drawer-size-full: 100%;
+  --rs-drawer-inline-size-xs: 400px;
+  --rs-drawer-inline-size-sm: 600px;
+  --rs-drawer-inline-size-md: 800px;
+  --rs-drawer-inline-size-lg: 968px;
+  --rs-drawer-block-size-xs: 290px;
+  --rs-drawer-block-size-sm: 400px;
+  --rs-drawer-block-size-md: 480px;
+  --rs-drawer-block-size-lg: 568px;
   display: none;
   overflow: hidden;
   position: fixed;
@@ -111,60 +115,55 @@
 .rs-drawer-right {
   top: 0;
   height: 100%;
+  width: var(--rs-drawer-inline-size);
+  max-width: 100%;
 }
 .rs-drawer-left.rs-drawer-lg,
 .rs-drawer-right.rs-drawer-lg {
-  width: 968px;
+  --rs-drawer-inline-size: var(--rs-drawer-inline-size-lg);
 }
 .rs-drawer-left.rs-drawer-md,
 .rs-drawer-right.rs-drawer-md {
-  width: 800px;
+  --rs-drawer-inline-size: var(--rs-drawer-inline-size-md);
 }
 .rs-drawer-left.rs-drawer-sm,
 .rs-drawer-right.rs-drawer-sm {
-  width: 600px;
+  --rs-drawer-inline-size: var(--rs-drawer-inline-size-sm);
 }
 .rs-drawer-left.rs-drawer-xs,
 .rs-drawer-right.rs-drawer-xs {
-  width: 400px;
+  --rs-drawer-inline-size: var(--rs-drawer-inline-size-xs);
 }
 .rs-drawer-top,
 .rs-drawer-bottom {
   width: 100%;
+  height: var(--rs-drawer-block-size);
 }
 .rs-drawer-top.rs-drawer-lg,
 .rs-drawer-bottom.rs-drawer-lg {
-  height: 568px;
+  --rs-drawer-block-size: var(--rs-drawer-block-size-lg);
 }
 .rs-drawer-top.rs-drawer-md,
 .rs-drawer-bottom.rs-drawer-md {
-  height: 480px;
+  --rs-drawer-block-size: var(--rs-drawer-block-size-md);
 }
 .rs-drawer-top.rs-drawer-sm,
 .rs-drawer-bottom.rs-drawer-sm {
-  height: 400px;
+  --rs-drawer-block-size: var(--rs-drawer-block-size-sm);
 }
 .rs-drawer-top.rs-drawer-xs,
 .rs-drawer-bottom.rs-drawer-xs {
-  height: 290px;
-}
-.rs-drawer-full.rs-drawer-top,
-.rs-drawer-full.rs-drawer-bottom {
-  height: 100%;
-}
-.rs-drawer-full.rs-drawer-top .rs-drawer-content,
-.rs-drawer-full.rs-drawer-bottom .rs-drawer-content {
-  height: 100%;
+  --rs-drawer-block-size: var(--rs-drawer-block-size-xs);
 }
-.rs-drawer-full.rs-drawer-left,
-.rs-drawer-full.rs-drawer-right {
-  width: 100%;
+.rs-drawer-full {
+  height: var(--rs-drawer-size-full);
+  width: var(--rs-drawer-size-full);
 }
 .rs-drawer-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .rs-drawer-left {
-  left: 0;
+  inset-inline-start: 0;
 }
 .rs-drawer-top {
   top: 0;
@@ -172,6 +171,17 @@
 .rs-drawer-bottom {
   bottom: 0;
 }
+.rs-drawer-wrapper {
+  position: fixed;
+  z-index: 1050;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+}
+.rs-drawer-wrapper.rs-drawer-no-backdrop {
+  pointer-events: none;
+}
 .rs-drawer-open .rs-drawer {
   overflow: visible;
 }
@@ -179,26 +189,20 @@
   position: relative;
   width: 100%;
   height: 100%;
+  background-color: var(--rs-bg-overlay);
 }
 .rs-drawer-shake .rs-drawer-dialog {
   animation: 0.3s linear shakeHead;
 }
-.rs-drawer-content {
-  position: absolute;
-  background-color: var(--rs-bg-overlay);
-  outline: 0;
-  width: 100%;
-  height: 100%;
-}
-.rs-theme-high-contrast .rs-drawer-content {
+.rs-theme-high-contrast .rs-drawer-dialog {
   background-color: var(--rs-drawer-bg);
 }
 .rs-drawer-backdrop {
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
   z-index: 1050;
   background-color: var(--rs-bg-backdrop);
 }
@@ -225,26 +229,28 @@
 }
 .rs-drawer-header .rs-drawer-header-close {
   position: absolute;
-  left: 15px;
+  inset-inline-start: 15px;
   top: 23px;
 }
 .rs-drawer-title {
+  display: inline-flex;
+  align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   margin: 0;
   color: var(--rs-text-heading);
   font-weight: normal;
-  font-size: 18px;
-  line-height: 36px;
+  font-size: var(--rs-drawer-title-font-size);
+  line-height: var(--rs-drawer-title-line-height);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .rs-drawer-actions {
   flex-shrink: 0;
-  text-align: right;
+  text-align: end;
   border-top: none;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .rs-drawer-actions::before,
 .rs-drawer-actions::after {
@@ -255,21 +261,21 @@
   clear: both;
 }
 .rs-drawer-title ~ .rs-drawer-actions {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 .rs-drawer-actions .rs-btn + .rs-btn {
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-bottom: 0;
 }
 .rs-drawer-actions .rs-btn-group .rs-btn + .rs-btn {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 .rs-drawer-actions .rs-btn-block + .rs-btn-block {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .rs-drawer-body {
   position: relative;
-  padding: 30px 60px;
+  padding: var(--rs-drawer-body-padding);
   height: 100%;
   overflow: auto;
 }
@@ -278,7 +284,7 @@
 }
 .rs-drawer-body-close {
   position: absolute;
-  left: 15px;
+  inset-inline-start: 15px;
   top: 25px;
 }
 .rs-drawer-header ~ .rs-drawer-body .rs-drawer-body-close {
@@ -292,7 +298,7 @@
   overflow: scroll;
 }
 .rs-drawer-footer {
-  text-align: right;
+  text-align: end;
   border-top: none;
   margin: 0 20px 20px;
 }
@@ -305,12 +311,12 @@
   clear: both;
 }
 .rs-drawer-footer .rs-btn + .rs-btn {
-  margin-left: 10px;
+  margin-inline-start: 10px;
   margin-bottom: 0;
 }
 .rs-drawer-footer .rs-btn-group .rs-btn + .rs-btn {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 .rs-drawer-footer .rs-btn-block + .rs-btn-block {
-  margin-left: 0;
+  margin-inline-start: 0;
 }