@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/select/option.scss

@@ -73,7 +73,7 @@ $multiple: #{$module}-multiple;
 
     &-selected {
         font-weight: $font-weight-bold;
-
+        background: $color-select-option-bg-selected;
         .#{$module}-option-icon {
             color: $color-select_option-icon-active;
         }

package/lib/es/select/optionFoundation.js

@@ -2,24 +2,16 @@ import BaseFoundation from '../base/foundation';
 export default class OptionFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
+  init() {}
   destroy() {}
-
   onOptionClick(option) {
     const isDisabled = this._isDisabled();
-
     if (!isDisabled) {
       this._adapter.notifyClick(option);
     }
   }
-
   _isDisabled() {
     return this.getProp('disabled');
   }
-
 }

package/lib/es/select/select.css

@@ -61,6 +61,7 @@
 }
 .semi-select-option-selected {
   font-weight: 600;
+  background: transparent;
 }
 .semi-select-option-selected .semi-select-option-icon {
   color: var(--semi-color-text-2);
@@ -83,6 +84,8 @@
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
+  max-height: 300px;
+  overflow-y: auto;
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
@@ -90,8 +93,12 @@
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
   outline: 0;
 }
+.semi-select:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-small {
   height: 24px;
   line-height: 24px;
@@ -224,6 +231,24 @@
   align-items: center;
   height: 100%;
 }
+.semi-select-content-wrapper-collapse {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 100%;
+}
+.semi-select-content-wrapper-collapse .semi-overflow-list-overflow {
+  max-width: 100%;
+  min-width: 50px;
+}
+.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-tag {
+  background-color: transparent;
+}
+.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-N {
+  background-color: transparent;
+  padding: 4px;
+  color: var(--semi-color-text-0);
+  font-size: 12px;
+}
 .semi-select-multiple {
   height: auto;
 }
@@ -411,6 +436,31 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
+  box-sizing: content-box;
+}
+
+.semi-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
+  opacity: 0;
+}
+.semi-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-select-borderless.semi-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-select-borderless.semi-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
 }
 
 .semi-rtl .semi-select,

package/lib/es/select/select.scss

@@ -8,6 +8,7 @@ $module: #{$prefix}-select;
 $single: #{$module}-single;
 $filterable: #{$module}-filterable;
 $multiple: #{$module}-multiple;
+$overflowList: #{$prefix}-overflow-list;
 
 .#{$module} {
     box-sizing: border-box;
@@ -24,6 +25,10 @@ $multiple: #{$module}-multiple;
     cursor: pointer;
     transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
     transform: scale($transform_scale-select);
+
+    max-height: 300px;
+    overflow-y: auto;
+
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -31,9 +36,14 @@ $multiple: #{$module}-multiple;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 
+    &:active{
+        background-color: $color-select-bg-active;
+    }
+
     &-small {
         height: $height-select_small;
         line-height: $height-select_small;
@@ -49,12 +59,12 @@ $multiple: #{$module}-multiple;
 
     &-open,
     &-focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select_default-border-focus;
         outline: 0;
 
         &:hover {
             background-color: $color-select-bg-default;
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
+            border: $width-select-border-hover solid $color-select_default-border-focus;
         }
 
         // when click the trigger, trigger get the focus state, active style should take effect
@@ -114,9 +124,8 @@ $multiple: #{$module}-multiple;
         }
 
         &:focus {
-            // border: $border-thickness-control-focus solid $color-select_default-border-focus;
             // when select is disabled, the border should not have active color
-            border: $border-thickness-control-focus solid transparent;
+            border: $width-select-border-focus solid transparent;
         }
 
         .#{$module}-selection,
@@ -198,6 +207,28 @@ $multiple: #{$module}-multiple;
         display: flex;
         align-items: center;
         height: 100%;
+
+        &-collapse {
+            display: inline-flex;
+            flex-shrink: 0;
+            width: 100%;
+
+            .#{$overflowList}-overflow {
+                max-width: 100%; // when one tag exceed the max width
+                min-width: 50px;
+            }
+
+            &>&-tag {
+                background-color: transparent;
+            }
+
+            &>&-N {
+                background-color: transparent;
+                padding: 4px;
+                color: var(--semi-color-text-0);
+                font-size: 12px;
+            }
+        }
     }
 
     &-multiple {
@@ -436,6 +467,44 @@ $multiple: #{$module}-multiple;
     padding-top: $spacing-select_loading_wrapper-paddingTop;
     padding-bottom: $spacing-select_loading_wrapper-paddingBottom;
     cursor: not-allowed;
+    // make sure that spin align vertical, no need to make 20px as a spacing token here
+    height: 20px;
+    box-sizing: content-box;
 }
 
-@import './rtl.scss';
+
+.#{$module}-borderless {
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-select_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-select_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-select_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-select_warning-border-focus;
+    }
+
+}
+
+
+    @import './rtl.scss';

package/lib/es/select/variables.scss

@@ -2,10 +2,12 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色 - 聚焦态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
-$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 选中态
+
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -14,6 +16,7 @@ $color-select_warning-bg-focus: var(--semi-color-warning-light-default); // 警
 $color-select_warning-border-focus: var(--semi-color-warning); // 警示选择器输入框描边颜色 - 选中态
 $color-select_warning-bg-active: var(--semi-color-warning-light-active); // 警示选择器输入框背景色 - 按下态
 $color-select_warning-border-active: var(--semi-color-warning-light-active); // 警示选择器输入框描边颜色 - 按下态
+
 $color-select_danger-bg-default: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 默认态
 $color-select_danger-border-default: var(--semi-color-danger-light-default); // 报错选择器输入框描边颜色 - 默认态
 $color-select_danger-bg-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框背景色 - 悬停态
@@ -22,7 +25,9 @@ $color-select_danger-bg-focus: var(--semi-color-danger-light-default); // 报错
 $color-select_danger-border-focus: var(--semi-color-danger); // 报错选择器输入框描边颜色 - 选中态
 $color-select_danger-bg-active: var(--semi-color-danger-light-active); // 报错选择器输入框背景色 - 按下态
 $color-select_danger-border-active: var(--semi-color-danger-light-active); // 报错选择器输入框描边颜色 - 按下态
-$color-select_default-border-focus: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 选中态
+
+$color-select_default-border-focus: var(--semi-color-focus-border); // 默认选择器输入框描边颜色 - 选中态
+
 $color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框回填内容文本颜色
 $color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
 $color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
@@ -33,6 +38,7 @@ $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
 $color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
+
 $color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
 $color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
 $color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
@@ -43,6 +49,7 @@ $color-select_option_disabled-text: var(--semi-color-disabled-text); // 禁用
 $color-select_option_disabled-bg: transparent; // 禁用选择器菜单选项背景颜色
 $color-select_option-icon-active: var(--semi-color-text-2); // 禁用选择器菜单选项图标颜色 - 选中态
 $color-select_option-border-default: var(--semi-color-border); // 分组选择器菜单项描边颜色
+$color-select-option-bg-selected: transparent; // 选择器菜单选项背景颜色 - 选中态
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
@@ -86,10 +93,6 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
 
 
-// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-
-
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距

package/lib/es/sideSheet/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-sidesheet"),
-  DIALOG: "".concat(BASE_CLASS_PREFIX, "-modal")
+  PREFIX: `${BASE_CLASS_PREFIX}-sidesheet`,
+  DIALOG: `${BASE_CLASS_PREFIX}-modal`
 };
 const strings = {
   PLACEMENT: ['top', 'right', 'bottom', 'left'],

package/lib/es/sideSheet/sideSheet.css

@@ -61,6 +61,7 @@
   line-height: 24px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
+  font-size: 18px;
   color: var(--semi-color-text-0);
   text-align: left;
 }
@@ -75,12 +76,31 @@
   align-items: flex-start;
   padding: 24px;
   padding-bottom: 20px;
+  border-bottom: 0px solid var(--semi-color-border);
 }
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
   overflow: auto;
 }
+.semi-sidesheet-size-small {
+  width: 448px;
+}
+.semi-sidesheet-size-medium {
+  width: 684px;
+}
+.semi-sidesheet-size-large {
+  width: 920px;
+}
+.semi-sidesheet-size-small.semi-sidesheet {
+  width: 448px;
+}
+.semi-sidesheet-size-medium.semi-sidesheet {
+  width: 684px;
+}
+.semi-sidesheet-size-large.semi-sidesheet {
+  width: 920px;
+}
 .semi-sidesheet-content {
   height: 100%;
   display: flex;
@@ -186,33 +206,43 @@
 }
 .semi-sidesheet-animation-content_show_top {
   animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_top {
   animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_bottom {
   animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_bottom {
   animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_left {
   animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_left {
   animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_right {
   animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_right {
   animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_show {
   animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_hide {
   animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-sidesheet-fixed .semi-sidesheet-inner {

package/lib/es/sideSheet/sideSheet.scss

@@ -76,6 +76,7 @@ $module: #{$prefix}-sidesheet;
         margin: $spacing-sideSheet_title-margin;
         @include font-size-header-5;
         font-weight: $font-sideSheet_title-fontWeight;
+        font-size: $font-sideSheet_title-fontSize;
         color: $color-sideSheet_main-text;
         text-align: left;
     }
@@ -94,6 +95,7 @@ $module: #{$prefix}-sidesheet;
         align-items: flex-start;
         padding: $spacing-sideSheet_header-padding;
         padding-bottom: $spacing-sideSheet_header-paddingBottom;
+        border-bottom: $width-sideSheet_header-borderBottom solid $color-sideSheet_header-borderBottom;
     }
 
     &-body {
@@ -102,6 +104,32 @@ $module: #{$prefix}-sidesheet;
         overflow: auto;
     }
 
+    &-size-small {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large {
+        width: $width-sideSheet_size-large;
+    }
+
+    &-size-small.#{$module} {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium.#{$module} {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large.#{$module} {
+        width: $width-sideSheet_size-large;
+    }
+
+
+
     &-content {
         height: 100%;
         display: flex;
@@ -224,42 +252,52 @@ $module: #{$prefix}-sidesheet;
 
     &-animation-content_show_top{
         animation: #{$module}-slideShow_top $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_top{
         animation: #{$module}-slideHide_top $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_bottom{
         animation: #{$module}-slideShow_bottom $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_bottom{
         animation: #{$module}-slideHide_bottom $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_left{
         animation: #{$module}-slideShow_left $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_left{
         animation: #{$module}-slideHide_left $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_right{
         animation: #{$module}-slideShow_right $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_right{
         animation: #{$module}-slideHide_right $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_show{
         animation: #{$module}-opacityShow $animation_duration-sideSheet_mask-show $animation_function-sideSheet_mask-show $animation_delay-sideSheet_mask-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_hide{
         animation: #{$module}-opacityHide $animation_duration-sideSheet_mask-hide $animation_function-sideSheet_mask-hide $animation_delay-sideSheet_mask-hide;
+        animation-fill-mode: forwards;
     }
 
 }

package/lib/es/sideSheet/sideSheetFoundation.d.ts

@@ -4,6 +4,7 @@ export interface SideSheetProps {
     bodyStyle?: Record<string, any>;
     className?: string;
     closable?: boolean;
+    closeIcon?: any;
     closeOnEsc?: boolean;
     disableScroll?: boolean;
     footer?: any;

package/lib/es/sideSheet/sideSheetFoundation.js

@@ -4,12 +4,10 @@ import KeyCode from '../utils/keyCode';
 export default class SideSheetFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, SideSheetFoundation.defaultAdapter), adapter));
-
     this.toggleDisplayNone = displayNone => {
       this._adapter.toggleDisplayNone(displayNone);
     };
   }
-
   get defaultAdapter() {
     return {
       handleCancel: _noop,
@@ -17,43 +15,33 @@ export default class SideSheetFoundation extends BaseFoundation {
       afterHide: _noop
     };
   }
-
   destroy() {
     this.afterHide();
   }
-
   handleCancel(e) {
     this._adapter.notifyCancel(e);
   }
-
   beforeShow() {
     const allowDisable = this.getProp('disableScroll');
     allowDisable && this._adapter.disabledBodyScroll();
-
     this._adapter.setOnKeyDownListener();
   }
-
   afterHide() {
     const allowDisable = this.getProp('disableScroll');
     allowDisable && this._adapter.enabledBodyScroll();
-
     this._adapter.removeKeyDownListener();
   }
-
   handleKeyDown(e) {
     const {
       closeOnEsc
     } = this.getProps();
-
     if (closeOnEsc && e.keyCode === KeyCode.ESC) {
       e.stopPropagation();
       this.handleCancel(e);
       return;
     }
   }
-
   onVisibleChange(visible) {
     this._adapter.notifyVisibleChange(visible);
   }
-
 }

package/lib/es/sideSheet/variables.scss

@@ -2,6 +2,7 @@
 $color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
+$color-sideSheet_header-borderBottom: var(--semi-color-border); // 侧边栏 header 底部边框颜色
 
 // Spacing
 $spacing-sideSheet-margin: 0; // 侧边栏整体外边距
@@ -12,5 +13,11 @@ $spacing-sideSheet_body-paddingY: 0; // 侧边栏 body 垂直内边距
 $spacing-sideSheet_body-paddingX: $spacing-loose; // 侧边栏 body 水平内边距
 $spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
 
+$width-sideSheet_header-borderBottom: 0px; // 侧边栏 header 底部边框宽度
+$width-sideSheet_size-small: 448px; // 小尺寸侧边栏宽度
+$width-sideSheet_size-medium: 684px; // 中尺寸侧边栏宽度
+$width-sideSheet_size-large: 920px; // 大尺寸侧边栏宽度
+
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
+$font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号

package/lib/es/skeleton/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-skeleton")
+  PREFIX: `${BASE_CLASS_PREFIX}-skeleton`
 };
 const strings = {};
 export { cssClasses, strings };

package/lib/es/skeleton/skeleton.css

@@ -3,7 +3,7 @@
 /* spacing */
 .semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
   background: var(--semi-color-fill-0);
-  border-radius: 4px;
+  border-radius: var(--semi-border-radius-small);
 }
 .semi-skeleton-avatar-circle {
   border-radius: 50%;
@@ -39,7 +39,7 @@
 }
 .semi-skeleton-paragraph li {
   background: var(--semi-color-fill-0);
-  border-radius: 4px;
+  border-radius: var(--semi-border-radius-small);
   width: 100%;
   height: 16px;
   margin-bottom: 10px;
@@ -71,6 +71,7 @@
   background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
   background-size: 400% 100%;
   animation: 1400ms skeleton-loading ease infinite;
+  animation-fill-mode: forwards;
 }
 @keyframes skeleton-loading {
   0% {

package/lib/es/skeleton/skeleton.scss

@@ -99,6 +99,7 @@ $module: #{$prefix}-skeleton;
             );
             background-size: 400% 100%;
             animation: $animation_duration-skeleton-highlight skeleton-loading $animation_function-skeleton-highlight infinite;
+            animation-fill-mode: forwards;
         }
     }
 

package/lib/es/skeleton/variables.scss

@@ -15,6 +15,6 @@ $height-skeleton_button: $height-control-default; // 按钮骨架屏高度
 
 $spacing-skeleton_li-marginBottom: 10px; // 按钮骨架屏高度
 
-$radius-skeleton_item: 4px; // 骨架屏圆角
-$radius-skeleton_li: 4px; // 骨架屏圆角
+$radius-skeleton_item: var(--semi-border-radius-small); // 骨架屏圆角
+$radius-skeleton_li: var(--semi-border-radius-small); // 骨架屏圆角
 

package/lib/es/slider/constants.d.ts

@@ -6,6 +6,7 @@ declare const cssClasses: {
     DOTS: string;
     MARKS: string;
     HANDLE: string;
+    HANDLE_DOT: string;
 };
 declare const strings: {
     SIZE: string[];