@douyinfe/semi-foundation 2.17.1 → 2.18.0-beta.0

package/lib/es/calendar/foundation.js

@@ -114,7 +114,10 @@ export default class CalendarFoundation extends BaseFoundation {
     data.month = format(value, 'LLL', {
       locale: dateFnsLocale
     });
-    data.week = calcWeekData(value, 'week', dateFnsLocale);
+    const {
+      weekStartsOn
+    } = this.getProps();
+    data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
 
     this._adapter.setWeeklyData(data);
 
@@ -142,10 +145,13 @@ export default class CalendarFoundation extends BaseFoundation {
 
     const monthStart = startOfMonth(value);
     const data = {};
+    const {
+      weekStartsOn
+    } = this.getProps();
     const numberOfWeek = getWeeksInMonth(value);
 
     _mapInstanceProperty(_context = [..._keysInstanceProperty(_context2 = Array(numberOfWeek)).call(_context2)]).call(_context, ind => {
-      data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale);
+      data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
     });
 
     this._adapter.setMonthlyData(data);

package/lib/es/carousel/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/es/carousel/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$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_funciton_carousel_arrow-bg: var(--semi-transition_function-easeOut); // 箭头-背景色-过渡曲线
+$transition_delay_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-延迟时间

package/lib/es/carousel/carousel.css

@@ -83,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-blue-6), 1);
@@ -95,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-white), 1);
@@ -107,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
   background-color: rgba(var(--semi-black), 1);
@@ -246,18 +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);
 }
 .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);
 }
 .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);
 }
 .semi-carousel-arrow-dark:hover {
   color: rgba(var(--semi-black), 1);
@@ -265,7 +271,6 @@
 .semi-carousel-arrow-hover div {
   z-index: 2;
   opacity: 0;
-  transition: all 0.3s;
 }
 .semi-carousel:hover .semi-carousel-arrow-hover div {
   opacity: 1;

package/lib/es/carousel/carousel.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-carousel;
 
@@ -23,22 +24,20 @@ $module: #{$prefix}-carousel;
             &-current {
                 z-index: 1;
             }
-
         }
 
         &-fade {
-            
             > * {
                 opacity: 0;
             }
-    
+
             .#{$module}-content-item-current {
                 opacity: 1;
             }
         }
 
         &-slide {
-            &>*:not(.#{$module}-content-item-current) {
+            & > *:not(.#{$module}-content-item-current) {
                 visibility: hidden;
             }
 
@@ -46,21 +45,20 @@ $module: #{$prefix}-carousel;
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
             }
-        
+
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
             }
-          
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
-                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-out-reverse;
             }
-    
+
             .#{$module}-content-item-slide-in {
-                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-in-reverse;
             }
         }
     }
@@ -89,7 +87,6 @@ $module: #{$prefix}-carousel;
             bottom: $spacing-carousel_indicator-padding;
         }
 
-    
         &-dot {
             .#{$module}-indicator-item {
                 border-radius: $radius-carousel_indicator_dot;
@@ -102,7 +99,6 @@ $module: #{$prefix}-carousel;
                 &-small {
                     width: $width-carousel_indicator_dot_small;
                     height: $width-carousel_indicator_dot_small;
-                   
                 }
 
                 &-medium {
@@ -112,6 +108,8 @@ $module: #{$prefix}-carousel;
 
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
@@ -127,8 +125,9 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_light-bg-active;
@@ -145,6 +144,8 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background-color: $color-carousel_indicator_theme_dark-bg-active;
@@ -159,14 +160,13 @@ $module: #{$prefix}-carousel;
                     }
                 }
             }
-
         }
 
         &-line {
             width: $width-carousel_indicator_line;
 
             .#{$module}-indicator-item {
-                flex: 1; 
+                flex: 1;
                 cursor: pointer;
 
                 &:not(:last-child) {
@@ -175,7 +175,6 @@ $module: #{$prefix}-carousel;
 
                 &-small {
                     height: $height-carousel_indicator_line_small;
-                   
                 }
 
                 &-medium {
@@ -199,7 +198,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -216,7 +214,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-dark {
-
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -231,15 +228,13 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
 
         &-columnar {
             .#{$module}-indicator-item {
                 cursor: pointer;
-                
+
                 &:not(:last-child) {
                     margin-right: $spacing-carousel_indicator_columnar-marginX;
                 }
@@ -262,11 +257,9 @@ $module: #{$prefix}-carousel;
                     }
                 }
 
-
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
 
-
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
                     }
@@ -298,7 +291,7 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
-                    
+
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
@@ -311,9 +304,7 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
     }
 
@@ -340,15 +331,18 @@ $module: #{$prefix}-carousel;
 
         &-light {
             color: $color-carousel_arrow_theme_light-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_light-bg-hover;
             }
         }
 
-
         &-primary {
             color: $color-carousel_arrow_theme_primary-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_primary-bg-hover;
@@ -357,20 +351,20 @@ $module: #{$prefix}-carousel;
 
         &-dark {
             color: $color-carousel_arrow_theme_dark-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_dark-bg-hover;
             }
         }
-
     }
 
     &-arrow-hover div {
         z-index: 2;
         opacity: 0;
-        transition: all .3s;
     }
-    
+
     &:hover {
         .#{$module}-arrow-hover div {
             opacity: 1;
@@ -379,47 +373,43 @@ $module: #{$prefix}-carousel;
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in {
-
     from {
         transform: translateX(100%);
     }
-    
+
     to {
         transform: translateX(0);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-out {
-
     from {
         transform: translateX(0);
     }
-    
+
     to {
         transform: translateX(-100%);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in-reverse {
-
     from {
         transform: translateX(-100%);
     }
-  
+
     to {
         transform: translateX(0);
     }
 }
-  
-@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
 
+@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
     from {
         transform: translateX(0);
     }
-  
+
     to {
         transform: translateX(100%);
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/es/carousel/foundation.d.ts

@@ -19,7 +19,7 @@ declare class CarouselFoundation<P = Record<string, any>, S = Record<string, any
     _notifyChange(activeIndex: number): void;
     getValidIndex(index: number): number;
     getSwitchingTime(): number;
-    getIsControledComponent(): boolean;
+    getIsControlledComponent(): boolean;
     handleAutoPlay(): void;
     handleKeyDown(event: any): void;
     onIndicatorChange(activeIndex: number): void;

package/lib/es/carousel/foundation.js

@@ -35,7 +35,7 @@ class CarouselFoundation extends BaseFoundation {
 
     this._adapter.setIsReverse(stateActiveIndex > targetIndex);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -52,7 +52,7 @@ class CarouselFoundation extends BaseFoundation {
 
     this._adapter.setIsReverse(false);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -69,7 +69,7 @@ class CarouselFoundation extends BaseFoundation {
 
     this._adapter.setIsReverse(true);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -131,7 +131,7 @@ class CarouselFoundation extends BaseFoundation {
     return speed;
   }
 
-  getIsControledComponent() {
+  getIsControlledComponent() {
     return this._isInProps('activeIndex');
   }
 
@@ -165,7 +165,7 @@ class CarouselFoundation extends BaseFoundation {
 
     this._notifyChange(activeIndex);
 
-    if (!this.getIsControledComponent()) {
+    if (!this.getIsControlledComponent()) {
       this.handleNewActiveIndex(activeIndex);
     }
   }

package/lib/es/cascader/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/es/cascader/animation.scss

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

package/lib/es/cascader/cascader.css

@@ -313,6 +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);
   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;

package/lib/es/cascader/cascader.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-cascader;
 
@@ -380,6 +381,7 @@ $module: #{$prefix}-cascader;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_option-bg $transition_delay-cascader_option-bg;
 
         @include font-size-regular;
         min-width: min-content;

package/lib/es/checkbox/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/es/checkbox/animation.scss

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

package/lib/es/checkbox/checkbox.css

@@ -11,6 +11,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-checkbox input[type=checkbox] {
   position: absolute;
@@ -69,6 +71,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);
   box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
   border-radius: var(--semi-border-radius-extra-small);
 }

package/lib/es/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/mixin.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./mixin.scss";
 
 $module: #{$prefix}-checkbox;
@@ -14,6 +15,9 @@ $module: #{$prefix}-checkbox;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
+    transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+    border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
+    transform: scale($transform_scale-checkbox);
 
     input[type="checkbox"] {
         position: absolute;
@@ -93,6 +97,8 @@ $module: #{$prefix}-checkbox;
             height: $width-checkbox_inner;
             margin: 0;
             background: $color-checkbox_default-bg-default;
+            transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+                border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
 
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-default;
             border-radius: $radius-checkbox_inner;
@@ -112,7 +118,7 @@ $module: #{$prefix}-checkbox;
             border-radius: $radius-checkbox_inner;
         }
 
-        & > .#{$module}-addon {
+        &>.#{$module}-addon {
             color: $color-checkbox_label-text-default;
         }
     }
@@ -178,11 +184,14 @@ $module: #{$prefix}-checkbox;
         background: transparent;
         border: $width-checkbox_cardType_checked-border solid transparent;
 
+
         .#{$module}-inner {
             position: relative;
+
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
+
             margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
@@ -232,6 +241,7 @@ $module: #{$prefix}-checkbox;
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
                 border-color: $color-checkbox_cardType_checked_border-hover;
+
                 .#{$module}-inner-checked .#{$module}-inner-display {
                     box-shadow: none;
                 }
@@ -247,12 +257,13 @@ $module: #{$prefix}-checkbox;
             &:active {
                 background: transparent;
             }
+
             &:hover {
                 background: transparent;
             }
         }
 
-        &_checked_disabled.#{$module}-cardType  {
+        &_checked_disabled.#{$module}-cardType {
             background: $color-checkbox_cardType_checked_disabled-bg;
             border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
 
@@ -355,7 +366,7 @@ $module: #{$prefix}-checkbox;
 
     &-focus {
         outline: $width-checkbox-outline solid $color-checkbox_primary-outline-focus;
-        
+
         &-border {
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
         }
@@ -366,6 +377,7 @@ $module: #{$prefix}-checkbox;
     @include font-size-regular;
     // make sure group height 32px
     line-height: $font-size-regular;
+
     .#{$module} {
         &.#{$module}-vertical {
             margin-bottom: $spacing-checkbox_group_vertical-marginBottom;
@@ -376,6 +388,7 @@ $module: #{$prefix}-checkbox;
         .#{$module} {
             margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
+
             &:last-of-type {
                 margin-right: 0;
             }
@@ -385,10 +398,12 @@ $module: #{$prefix}-checkbox;
     &-vertical {
         .#{$module} {
             margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+
             &:last-of-type {
                 margin-bottom: 0;
             }
         }
+
         &-cardType {
             .#{$module} {
                 margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
@@ -397,4 +412,4 @@ $module: #{$prefix}-checkbox;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

package/lib/es/datePicker/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/es/datePicker/animation.scss

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

package/lib/es/dropdown/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/es/dropdown/animation.scss

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

package/lib/es/dropdown/dropdown.css

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

package/lib/es/dropdown/dropdown.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-dropdown;
 
@@ -43,6 +44,9 @@ $module: #{$prefix}-dropdown;
         max-width: $width-dropdown;
         display: flex;
         align-items: center;
+        transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
+            $transition_delay-dropdown_item-bg;
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;
@@ -107,4 +111,4 @@ $module: #{$prefix}-dropdown;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/es/form/form.css

@@ -68,6 +68,9 @@
 .semi-form-field-label-required-disabled {
   color: var(--semi-color-danger);
 }
+.semi-form-field-label-optional-text {
+  color: var(--semi-color-tertiary);
+}
 .semi-form-field-label-left {
   text-align: left;
 }