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

package/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/carousel/foundation.ts

@@ -38,7 +38,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(activeIndex);
         this._adapter.setIsReverse(stateActiveIndex > targetIndex);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -50,7 +50,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex + 1);
         this._adapter.setIsReverse(false);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -62,7 +62,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex - 1);
         this._adapter.setIsReverse(true);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -110,7 +110,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         return speed;
     }
 
-    getIsControledComponent(): boolean {
+    getIsControlledComponent(): boolean {
         return this._isInProps('activeIndex');
     }
 
@@ -135,7 +135,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         this._adapter.setIsReverse(stateActiveIndex > activeIndex);
         this._notifyChange(activeIndex);
-        if (!this.getIsControledComponent()) {
+        if (!this.getIsControlledComponent()) {
             this.handleNewActiveIndex(activeIndex);
         }
     }

package/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/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/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/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/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/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/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/form/form.scss

@@ -109,14 +109,15 @@ $rating: #{$prefix}-rating;
                     font-weight: $font-form_requiredMark-fontWeight;
                 }
             }
-            // .#{$field}-label-extra {
-            // }
-
             &-disabled {
                 color: $color-form_requiredMark_disabled-text-default;
             }
         }
 
+        &-optional-text {
+            color: $color-form_label_optional-text-default;
+        }
+
         &-left {
             text-align: left;
         }

package/form/variables.scss

@@ -32,6 +32,7 @@ $font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
 $color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
 $color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
 
 $color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色

package/gulpfile.js

@@ -39,7 +39,9 @@ const excludeScss = [
     '!**/steps/fillSteps.scss',
     '!**/steps/navSteps.scss',
     '!**/table/operationPanel.scss',
-    '!**/tooltip/arrow.scss'
+    '!**/tooltip/arrow.scss',
+    '!**/autoComplete/option.scss',
+    '!**/select/option.scss',
 ];
 gulp.task('compileScss', function compileScss() {
     return gulp.src(['**/*.scss', '!node_modules/**/*.*', '!**/rtl.scss', '!**/variables.scss', ...excludeScss])

package/input/animation.scss

@@ -0,0 +1,14 @@
+$transition_duration-input-bg: var(--semi-transition_duration-faster);//输入框-背景色-动画持续时间
+$transition_function-input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
+$transition_delay-input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
+
+$transition_duration-input-border: var(--semi-transition_duration-faster);//输入框-边框-动画持续时间
+$transition_function-input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
+$transition_delay-input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
+
+$transition_duration-input-text: var(--semi-transition_duration-faster);//输入框-文字或图标-动画持续时间
+$transition_function-input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
+$transition_delay-input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+
+// transform token
+$transform_scale-input: var(--semi-transform_scale-none);//输入框-变大

package/input/input.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -23,6 +24,12 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}{
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+    transform: scale($transform_scale-input);
+}
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -40,6 +47,11 @@ $module: #{$prefix}-input;
     box-sizing: border-box;
     color: $color-input_default-text-default;
 
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+
+    transform: scale($transform_scale-input);
+
     &-default {
         height: $height-input_wrapper_default;
         @include font-size-regular;

package/input/textarea.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -12,6 +13,8 @@ $module: #{$prefix}-input;
     border-radius: $radius-input_wrapper;
     vertical-align: bottom;
     background-color: $color-input_default-bg-default;
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
     &:hover {
         background-color: $color-input_default-bg-hover;

package/inputNumber/animation.scss

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

package/inputNumber/inputNumber.scss

@@ -1,3 +1,4 @@
+@import "./animation.scss";
 @import '../input/variables.scss';
 @import './variables.scss';
 
@@ -7,6 +8,9 @@ $module: #{$prefix}-input-number;
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
+    transition: background-color $transition_duration-inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
+    border $transition_duration-inputNumber-border $transition_function-inputNumber-border $transition_delay-inputNumber-border;
+    transform: scale($transform_scale-inputNumber);
 
     &-suffix-btns {
         display: inline-flex;

package/lib/cjs/anchor/anchor.css

@@ -19,6 +19,8 @@
   left: 0;
   top: 0;
   height: 100%;
+  box-sizing: border-box;
+  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -57,6 +59,10 @@
 .semi-anchor-link {
   padding-left: 8px;
 }
+.semi-anchor-link-wrapper {
+  padding-right: 2px;
+  margin: 2px 0;
+}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -65,6 +71,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 3px;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-anchor-link-title:hover {
   color: var(--semi-color-tertiary-hover);
@@ -72,6 +81,9 @@
 .semi-anchor-link-title-active {
   color: var(--semi-color-text-0);
 }
+.semi-anchor-link-title:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;