@douyinfe/semi-foundation 2.23.0-beta.0 → 2.23.0

package/lib/cjs/button/animation.scss

@@ -1,60 +1,60 @@
-$transition_duration-button_primary-bg: var(--semi-transition_duration-faster);//主要按钮-背景色-动画持续时间
+$transition_duration-button_primary-bg: var(--semi-transition_duration-none);//主要按钮-背景色-动画持续时间
 $transition_function-button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
-$transition_delay-button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
+$transition_delay-button_primary-bg: var(--semi-transition_delay-none);//主要按钮-背景色-延迟时间
 
 
-$transition_duration-button_secondary-bg: var(--semi-transition_duration-faster);//次要按钮-背景色-动画持续时间
+$transition_duration-button_secondary-bg: var(--semi-transition_duration-none);//次要按钮-背景色-动画持续时间
 $transition_function-button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
-$transition_delay-button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
+$transition_delay-button_secondary-bg: var(--semi-transition_delay-none);//次要按钮-背景色-延迟时间
 
 
-$transition_duration-button_tertiary-bg: var(--semi-transition_duration-faster);//三级按钮-背景色-动画持续时间
+$transition_duration-button_tertiary-bg: var(--semi-transition_duration-none);//三级按钮-背景色-动画持续时间
 $transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
-$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-none);//三级按钮-背景色-延迟时间
 
 
-$transition_duration-button_light-bg: var(--semi-transition_duration-faster);//浅色按钮-背景色-动画持续时间
+$transition_duration-button_light-bg: var(--semi-transition_duration-none);//浅色按钮-背景色-动画持续时间
 $transition_function-button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
-$transition_delay-button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
+$transition_delay-button_light-bg: var(--semi-transition_delay-none);//浅色按钮-背景色-延迟时间
 
 
-$transition_duration-button_warning-bg: var(--semi-transition_duration-faster);//警告按钮-背景色-动画持续时间
+$transition_duration-button_warning-bg: var(--semi-transition_duration-none);//警告按钮-背景色-动画持续时间
 $transition_function-button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
-$transition_delay-button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
+$transition_delay-button_warning-bg: var(--semi-transition_delay-none);//警告按钮-背景色-延迟时间
 
 
-$transition_duration-button_danger-bg: var(--semi-transition_duration-faster);//危险按钮-背景色-动画持续时间
+$transition_duration-button_danger-bg: var(--semi-transition_duration-none);//危险按钮-背景色-动画持续时间
 $transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
-$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+$transition_delay-button_danger-bg: var(--semi-transition_delay-none);//危险按钮-背景色-延迟时间
 
 
-$transition_duration-button_borderless-bg: var(--semi-transition_duration-faster);//无边框按钮-背景色-动画持续时间
+$transition_duration-button_borderless-bg: var(--semi-transition_duration-none);//无边框按钮-背景色-动画持续时间
 $transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
-$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-none);//无边框按钮-背景色-延迟时间
 
-$transition_duration-button_primary-border: var(--semi-transition_duration-faster);//主要按钮-边框-动画持续时间
+$transition_duration-button_primary-border: var(--semi-transition_duration-none);//主要按钮-边框-动画持续时间
 $transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
-$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+$transition_delay-button_primary-border: var(--semi-transition_delay-none);//主要按钮-边框-延迟时间
 
-$transition_duration-button_secondary-border: var(--semi-transition_duration-faster);//次要按钮-边框-动画持续时间
+$transition_duration-button_secondary-border: var(--semi-transition_duration-none);//次要按钮-边框-动画持续时间
 $transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
-$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+$transition_delay-button_secondary-border: var(--semi-transition_delay-none);//次要按钮-边框-延迟时间
 
-$transition_duration-button_tertiary-border: var(--semi-transition_duration-faster);//三级按钮-边框-动画持续时间
+$transition_duration-button_tertiary-border: var(--semi-transition_duration-none);//三级按钮-边框-动画持续时间
 $transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
-$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-none);//三级按钮-边框-延迟时间
 
-$transition_duration-button_light-border: var(--semi-transition_duration-faster);//浅色按钮-边框-动画持续时间
+$transition_duration-button_light-border: var(--semi-transition_duration-none);//浅色按钮-边框-动画持续时间
 $transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
-$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+$transition_delay-button_light-border: var(--semi-transition_delay-none);//浅色按钮-边框-延迟时间
 
-$transition_duration-button_warning-border: var(--semi-transition_duration-faster);//警告按钮-边框-动画持续时间
+$transition_duration-button_warning-border: var(--semi-transition_duration-none);//警告按钮-边框-动画持续时间
 $transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
-$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+$transition_delay-button_warning-border: var(--semi-transition_delay-none);//警告按钮-边框-延迟时间
 
-$transition_duration-button_danger-border: var(--semi-transition_duration-faster);//危险按钮-边框-动画持续时间
+$transition_duration-button_danger-border: var(--semi-transition_duration-none);//危险按钮-边框-动画持续时间
 $transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
-$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+$transition_delay-button_danger-border: var(--semi-transition_delay-none);//危险按钮-边框-延迟时间
 
 //transform token
 

package/lib/cjs/button/button.css

@@ -50,7 +50,7 @@
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-danger:hover {
@@ -68,7 +68,7 @@
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-warning:hover {
@@ -86,7 +86,7 @@
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-tertiary:hover {
@@ -101,7 +101,7 @@
 .semi-button-primary {
   background-color: var(--semi-color-primary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
@@ -117,7 +117,7 @@
   background-color: var(--semi-color-secondary);
   outline-color: var(--semi-color-secondary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-secondary:hover {
@@ -144,7 +144,7 @@
 .semi-button-borderless {
   background-color: transparent;
   border: 0 transparent solid;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
@@ -158,7 +158,7 @@
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
   border: 0 transparent solid;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
 }
 .semi-button-light:not(.semi-button-disabled):hover {

package/lib/cjs/carousel/animation.scss

@@ -1,7 +1,7 @@
-$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-动画持续时间
 $transition_function_carousel_indicator-bg: var(--semi-transition_function-easeOut); // 指示器-背景色-过渡曲线
 $transition_delay_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-延迟时间
 
-$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-fastest); // 箭头-背景色-动画持续时间
+$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-动画持续时间
 $transition_funciton_carousel_arrow-bg: var(--semi-transition_function-easeOut); // 箭头-背景色-过渡曲线
 $transition_delay_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-延迟时间

package/lib/cjs/carousel/carousel.css

@@ -83,7 +83,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary {
   background-color: rgba(var(--semi-blue-6), 0.4);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-blue-6), 1);
@@ -96,7 +96,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light {
   background-color: rgba(var(--semi-white), 0.4);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-white), 1);
@@ -109,7 +109,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark {
   background-color: rgba(var(--semi-black), 0.5);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
   background-color: rgba(var(--semi-black), 1);
@@ -249,21 +249,21 @@
 }
 .semi-carousel-arrow-light {
   color: rgba(var(--semi-white), 0.4);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-light:hover {
   color: rgba(var(--semi-white), 1);
 }
 .semi-carousel-arrow-primary {
   color: rgba(var(--semi-blue-6), 0.4);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-primary:hover {
   color: rgba(var(--semi-blue-6), 1);
 }
 .semi-carousel-arrow-dark {
   color: rgba(var(--semi-black), 0.5);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-dark:hover {
   color: rgba(var(--semi-black), 1);

package/lib/cjs/cascader/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration-cascader_option-bg: var(--semi-transition_duration-faster);//级联选项-背景色-动画持续时间
+$transition_duration-cascader_option-bg: var(--semi-transition_duration-none);//级联选项-背景色-动画持续时间
 $transition_function-cascader_option-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
-$transition_delay-cascader_option-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
+$transition_delay-cascader_option-bg: var(--semi-transition_delay-none);//级联选项-背景色-延迟时间
 

package/lib/cjs/cascader/cascader.css

@@ -313,7 +313,7 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -337,6 +337,18 @@
 .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty {
   margin-right: 8px;
 }
+.semi-cascader-option-lists .semi-cascader-option-icon-left {
+  margin-left: 8px;
+}
+.semi-cascader-option-lists .semi-cascader-option-spin-icon {
+  width: 16px;
+  height: 16px;
+  line-height: 0;
+}
+.semi-cascader-option-lists .semi-cascader-option-spin-icon svg {
+  width: 16px;
+  height: 16px;
+}
 .semi-cascader-option-lists .semi-cascader-option-label {
   display: flex;
   align-items: center;

package/lib/cjs/cascader/cascader.scss

@@ -408,6 +408,21 @@ $module: #{$prefix}-cascader;
             &-empty {
                 margin-right: $spacing-cascader_empty_icon-marginRight;
             }
+
+            &-left {
+                margin-left: $spacing-cascader_option-icon-marginLeft;
+            }
+        }
+
+        &-spin-icon {
+            width: $width-cascader-icon;
+            height: $width-cascader-icon;
+            line-height: 0;
+
+            & svg {
+                width: $width-cascader-icon;
+                height: $width-cascader-icon;
+            }
         }
 
         &-label {

package/lib/cjs/cascader/variables.scss

@@ -51,6 +51,7 @@ $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
 $spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
 $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
+$spacing-cascader_option-icon-marginLeft: 8px; // 级联选择菜单项图标左侧外边距
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色

package/lib/cjs/checkbox/animation.scss

@@ -1,10 +1,10 @@
-$transition_duration-checkbox-bg: var(--semi-transition_duration-faster);//复选框-背景色-动画持续时间
+$transition_duration-checkbox-bg: var(--semi-transition_duration-none);//复选框-背景色-动画持续时间
 $transition_function-checkbox-bg: var(--semi-transition_function-easeIn);//复选框-背景色-过渡曲线
-$transition_delay-checkbox-bg: var(--semi-transition_delay-fastest);//复选框-背景色-延迟时间
+$transition_delay-checkbox-bg: var(--semi-transition_delay-none);//复选框-背景色-延迟时间
 
-$transition_duration-checkbox-border: var(--semi-transition_duration-faster);//复选框-边框-动画持续时间
+$transition_duration-checkbox-border: var(--semi-transition_duration-none);//复选框-边框-动画持续时间
 $transition_function-checkbox-border: var(--semi-transition_function-easeIn);//复选框-边框-过渡曲线
-$transition_delay-checkbox-border: var(--semi-transition_delay-fastest);//复选框-边框-延迟时间
+$transition_delay-checkbox-border: var(--semi-transition_delay-none);//复选框-边框-延迟时间
 
 // transform token
 $transform_scale-checkbox: var(--semi-transform_scale-none);//复选框-放大

package/lib/cjs/checkbox/checkbox.css

@@ -11,7 +11,7 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: pointer;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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));
   column-gap: 8px;
 }
@@ -77,7 +77,7 @@
   height: 16px;
   margin: 0;
   background: transparent;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  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);
   box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
   border-radius: var(--semi-border-radius-extra-small);
 }

package/lib/cjs/checkbox/variables.scss

@@ -52,7 +52,7 @@ $spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶
 $spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
 $spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
 $spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
-$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片类型复选框的垂直向下外边距
+$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片样式复选框的下间距
 
 $color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
 

package/lib/cjs/collapsible/animation.scss

@@ -1,10 +1,10 @@
 $transition_duration-collapsible-height: 250ms;//折叠-高度-动画持续时间
 $transition_function-collapsible-height: cubic-bezier(0.25,0.1,0.25,1);//折叠-高度-过渡曲线
-$transition_delay-collapsible-height: var(--semi-transition_delay-fastest);//折叠-高度-延迟时间
+$transition_delay-collapsible-height: var(--semi-transition_delay-none);//折叠-高度-延迟时间
 
 $transition_duration-collapsible-opacity: 250ms;//折叠-透明度-动画持续时间
 $transition_function-collapsible-opacity: var(--semi-transition_function-easeIn);//折叠-透明度-过渡曲线
-$transition_delay-collapsible-opacity: var(--semi-transition_delay-fastest);//折叠-透明度-延迟时间
+$transition_delay-collapsible-opacity: var(--semi-transition_delay-none);//折叠-透明度-延迟时间
 
 
 

package/lib/cjs/collapsible/collapsible.css

@@ -2,5 +2,5 @@
 /* sizing */
 /* spacing */
 .semi-collapsible-transition {
-  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-fastest), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }

package/lib/cjs/datePicker/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration-datepicker_date-bg: var(--semi-transition_duration-faster);//时间选择器-格子背景色-动画持续时间
+$transition_duration-datepicker_date-bg: var(--semi-transition_duration-none);//时间选择器-格子背景色-动画持续时间
 $transition_function-datepicker_date-bg: var(--semi-transition_function-easeIn);//时间选择器-格子背景色-过渡曲线
-$transition_delay-datepicker_date-bg: var(--semi-transition_delay-fastest);//时间选择器-格子背景色-延迟时间
+$transition_delay-datepicker_date-bg: var(--semi-transition_delay-none);//时间选择器-格子背景色-延迟时间
 

package/lib/cjs/dropdown/animation.scss

@@ -1,3 +1,3 @@
-$transition_duration-dropdown_item-bg: var(--semi-transition_duration-fastest); // 下拉菜单项-背景颜色-动画持续时间
+$transition_duration-dropdown_item-bg: var(--semi-transition_duration-none); // 下拉菜单项-背景颜色-动画持续时间
 $transition_function-dropdown_item-bg: var(--semi-transition_function-easeOut); // 下拉菜单项-背景颜色-过渡曲线
 $transition_delay-dropdown_item-bg: 0ms; // 下拉菜单项-背景颜色-延迟时间

package/lib/cjs/dropdown/dropdown.css

@@ -45,7 +45,7 @@
   max-width: 280px;
   display: flex;
   align-items: center;
-  transition: background-color var(--semi-transition_duration-fastest) var(--semi-transition_function-easeOut) 0ms;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-dropdown-item:not(.semi-dropdown-item-active):hover {
   background-color: var(--semi-color-fill-0);

package/lib/cjs/dropdown/foundation.d.ts

@@ -2,11 +2,12 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
     notifyVisibleChange(visible: boolean): void;
+    getPopupId(): string;
 }
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
     handleVisibleChange(visible: boolean): void;
-    getMenuItemNodes(target: any): HTMLElement[];
-    setFocusToFirstMenuItem(target: any): void;
-    setFocusToLastMenuItem(target: any): void;
+    getMenuItemNodes(id: string): HTMLElement[];
+    setFocusToFirstMenuItem(id: string): void;
+    setFocusToLastMenuItem(id: string): void;
     handleKeyDown(event: any): void;
 }

package/lib/cjs/dropdown/foundation.js

@@ -16,26 +16,39 @@ class DropdownFoundation extends _foundation.default {
     this._adapter.setPopVisible(visible);
 
     this._adapter.notifyVisibleChange(visible);
+
+    const {
+      trigger
+    } = this.getProps();
+
+    if (visible && trigger === "click") {
+      const popupId = this._adapter.getPopupId();
+
+      this.setFocusToFirstMenuItem(popupId);
+    }
   }
 
-  getMenuItemNodes(target) {
-    const id = target.attributes['data-popupid'].value;
+  getMenuItemNodes(id) {
     const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
 
     return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
   }
 
-  setFocusToFirstMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToFirstMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToFirstItem)(menuItemNodes);
   }
 
-  setFocusToLastMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToLastMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToLastItem)(menuItemNodes);
   }
 
   handleKeyDown(event) {
+    var _a, _b;
+
+    const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -45,12 +58,12 @@ class DropdownFoundation extends _foundation.default {
         break;
 
       case 'ArrowDown':
-        this.setFocusToFirstMenuItem(event.target);
+        this.setFocusToFirstMenuItem(id);
         (0, _a11y.handlePrevent)(event);
         break;
 
       case 'ArrowUp':
-        this.setFocusToLastMenuItem(event.target);
+        this.setFocusToLastMenuItem(id);
         (0, _a11y.handlePrevent)(event);
         break;
 

package/lib/cjs/dropdown/menuFoundation.d.ts

@@ -2,7 +2,6 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
     menuItemNodes: HTMLElement[];
     firstChars: string[];
-    autoFocus(ulElement: any): void;
     handleEscape(menu: Element): void;
     setFocusByFirstCharacter(curItem: any, char: string): void;
     onMenuKeydown(event: any): void;

package/lib/cjs/dropdown/menuFoundation.js

@@ -16,17 +16,6 @@ class DropdownMenuFoundation extends _foundation.default {
     super(...arguments);
     this.menuItemNodes = null;
     this.firstChars = [];
-  } // if trigger is click, auto focus to the first menu item
-
-
-  autoFocus(ulElement) {
-    const trigger = this._adapter.getContext('trigger');
-
-    if (trigger === 'click') {
-      // find all non-disabled li under this menu and set focus to the first menu
-      this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
-      (0, _a11y.setFocusToFirstItem)(this.menuItemNodes);
-    }
   }
 
   handleEscape(menu) {

package/lib/cjs/form/form.css

@@ -45,7 +45,6 @@
 }
 .semi-form-field-label {
   box-sizing: border-box;
-  padding-right: 16px;
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
@@ -232,7 +231,6 @@
 .semi-rtl .semi-form-field-label,
 .semi-portal-rtl .semi-form-field-label {
   padding-right: 0;
-  padding-left: 16px;
 }
 .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
 .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {

package/lib/cjs/form/form.scss

@@ -88,9 +88,7 @@ $rating: #{$prefix}-rating;
     }
 
     &-field-label {
-        // padding-left: $spacing-base;
         box-sizing: border-box;
-        padding-right: $spacing-form_label-paddingRight;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
@@ -146,6 +144,7 @@ $rating: #{$prefix}-rating;
         @include font-size-regular;
         display: flex;
         align-items: center;
+        // TODO help text margin token?
         margin-top: $spacing-form_message-marginTop;
         .#{$prefix}-icon-alert_triangle {
             color: $color-form_alertIcon-icon-default;
@@ -204,8 +203,8 @@ $rating: #{$prefix}-rating;
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;
-            margin-top: $spacing-form_label_small-paddingTop;
-            margin-bottom: $spacing-form_label_small-paddingTop;
+            margin-top: $spacing-form_switch_rating_marginY;
+            margin-bottom: $spacing-form_switch_rating_marginY;
         }
     }
 

package/lib/cjs/form/rtl.scss

@@ -33,7 +33,6 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
-            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {