@douyinfe/semi-ui 2.17.1 → 2.18.1-alpha.0

package/dist/css/semi.css

@@ -540,6 +540,8 @@ body[theme-mode=dark], body .semi-always-dark {
   left: 0;
   top: 0;
   height: 100%;
+  box-sizing: border-box;
+  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -578,6 +580,10 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
@@ -586,6 +592,9 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
@@ -593,6 +602,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .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;
@@ -638,7 +650,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: auto;
 }
 
-.semi-select-option {
+.semi-autoComplete-option {
   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;
@@ -648,15 +660,16 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
-  border-radius: 0;
+  border-radius: 0px;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
-.semi-select-option-icon {
+.semi-autoComplete-option-icon {
   width: 12px;
   color: transparent;
   visibility: hidden;
@@ -665,51 +678,51 @@ body[theme-mode=dark], body .semi-always-dark {
   justify-content: center;
   align-content: center;
 }
-.semi-select-option-text {
+.semi-autoComplete-option-text {
   display: flex;
   flex-wrap: wrap;
   white-space: pre;
 }
-.semi-select-option-keyword {
+.semi-autoComplete-option-keyword {
   color: var(--semi-color-primary);
   background-color: inherit;
   font-weight: 600;
 }
-.semi-select-option:active {
+.semi-autoComplete-option:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-select-option-empty {
+.semi-autoComplete-option-empty {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   justify-content: center;
 }
-.semi-select-option-empty:hover {
+.semi-autoComplete-option-empty:hover {
   background-color: inherit;
 }
-.semi-select-option-empty:active {
+.semi-autoComplete-option-empty:active {
   background-color: inherit;
 }
-.semi-select-option-disabled {
+.semi-autoComplete-option-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-select-option-disabled:hover {
+.semi-autoComplete-option-disabled:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-select-option-selected {
+.semi-autoComplete-option-selected {
   font-weight: 600;
 }
-.semi-select-option-selected .semi-select-option-icon {
+.semi-autoComplete-option-selected .semi-autoComplete-option-icon {
   visibility: visible;
   color: var(--semi-color-text-2);
 }
-.semi-select-option-focused {
+.semi-autoComplete-option-focused {
   background-color: var(--semi-color-fill-0);
 }
-.semi-select-option:first-of-type {
+.semi-autoComplete-option:first-of-type {
   margin-top: 4px;
 }
-.semi-select-option:last-of-type {
+.semi-autoComplete-option:last-of-type {
   margin-bottom: 4px;
 }
 
@@ -1456,7 +1469,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-breadcrumb-item-wrap {
   display: inline-flex;
   align-items: center;
-  margin: 4px 0;
+  margin: 4px 0px;
   margin-right: 4px;
 }
 .semi-breadcrumb-item {
@@ -1495,6 +1508,8 @@ body[theme-mode=dark], body .semi-always-dark {
   align-items: center;
   column-gap: 4px;
   text-decoration: inherit;
+  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-breadcrumb-item-link:hover {
   color: var(--semi-color-link);
@@ -1592,6 +1607,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
@@ -1608,6 +1625,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
@@ -1624,6 +1643,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
@@ -1637,6 +1658,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
@@ -1651,6 +1674,8 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);
@@ -1676,6 +1701,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-0);
@@ -1688,6 +1715,8 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-light:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-1);
@@ -2683,6 +2712,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .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);
@@ -2695,6 +2725,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .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);
@@ -2707,6 +2738,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .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);
@@ -2846,18 +2878,21 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .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);
@@ -2865,7 +2900,6 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-carousel-arrow-hover div {
   z-index: 2;
   opacity: 0;
-  transition: all 0.3s;
 }
 .semi-carousel:hover .semi-carousel-arrow-hover div {
   opacity: 1;
@@ -3252,6 +3286,7 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
@@ -3407,6 +3442,8 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
@@ -3465,6 +3502,7 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
 }
@@ -5285,6 +5323,7 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
@@ -5481,6 +5520,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .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;
 }
@@ -11983,6 +12025,11 @@ body[theme-mode=dark], body .semi-always-dark {
     transform: scale(1);
   }
 }
+.semi-input {
+  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-input-wrapper {
   display: inline-block;
   position: relative;
@@ -11999,6 +12046,8 @@ body[theme-mode=dark], body .semi-always-dark {
   cursor: text;
   box-sizing: border-box;
   color: var(--semi-color-text-0);
+  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-input-wrapper-default {
   height: 32px;
@@ -12575,6 +12624,8 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
+  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-input-number-suffix-btns {
   display: inline-flex;
@@ -12870,6 +12921,10 @@ body[theme-mode=dark], body .semi-always-dark {
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
+.semi-modal-wrap-center {
+  display: flex;
+  align-items: center;
+}
 .semi-modal-title {
   display: inline-flex;
   align-items: flex-start;
@@ -13129,6 +13184,7 @@ body[theme-mode=dark], body .semi-always-dark {
   font-weight: 400;
   color: var(--semi-color-text-0);
   width: 100%;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text {
   overflow: hidden;
@@ -14035,6 +14091,8 @@ body[theme-mode=dark], body .semi-always-dark {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-page-item:hover {
   border-color: transparent;
@@ -14537,6 +14595,7 @@ body[theme-mode=dark], body .semi-always-dark {
   position: relative;
   display: inline-flex;
   flex-wrap: wrap;
+  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);
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -14605,6 +14664,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding: 12px 16px;
   background: transparent;
   border: 1px solid 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);
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
   position: relative;
@@ -14696,6 +14756,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border: solid 1px var(--semi-color-text-3);
   border-radius: 16px;
   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);
 }
 .semi-radio-inner-display .semi-icon {
   position: absolute;
@@ -14725,6 +14786,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-1);
   font-size: 12px;
   padding: 4px 16px;
+  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);
 }
 .semi-radio-addon-buttonRadio-hover {
   font-weight: 600;
@@ -14945,6 +15007,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: inherit;
   cursor: pointer;
   transition: all 0.5s;
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-rating-star:not(:last-child) {
   margin-right: 6px;
@@ -14973,6 +15036,7 @@ body[theme-mode=dark], body .semi-always-dark {
   height: 100%;
 }
 .semi-rating-star-first, .semi-rating-star-second {
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   color: var(--semi-color-fill-0);
   user-select: none;
 }
@@ -15075,6 +15139,7 @@ body[theme-mode=dark], body .semi-always-dark {
   justify-content: center;
   cursor: pointer;
   background-color: transparent;
+  transition: background-color var(--semi-transition_duration-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel,
 .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel {
@@ -15197,18 +15262,18 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
-  border-radius: 0;
+  border-radius: 0px;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-select-option-icon {
   width: 12px;
   color: transparent;
-  visibility: hidden;
   margin-right: 8px;
   display: flex;
   justify-content: center;
@@ -15249,7 +15314,6 @@ body[theme-mode=dark], body .semi-always-dark {
   font-weight: 600;
 }
 .semi-select-option-selected .semi-select-option-icon {
-  visibility: visible;
   color: var(--semi-color-text-2);
 }
 .semi-select-option-focused {
@@ -15274,6 +15338,8 @@ body[theme-mode=dark], body .semi-always-dark {
   position: relative;
   outline: none;
   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-select:hover {
   background-color: var(--semi-color-fill-1);
@@ -15458,6 +15524,7 @@ body[theme-mode=dark], body .semi-always-dark {
   width: 32px;
   color: var(--semi-color-text-2);
   flex-shrink: 0;
+  transform: rotate(var(--semi-transform-rotate-none));
 }
 .semi-select-arrow-empty {
   display: flex;
@@ -15567,7 +15634,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 0 0 0;
+  padding: 0px 0px 0px 0px;
 }
 .semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;
@@ -15728,6 +15795,7 @@ body[theme-mode=dark], body .semi-always-dark {
   overflow: auto;
   background-color: var(--semi-color-bg-2);
   border: 0;
+  transition: var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-header {
   display: flex;
@@ -15753,8 +15821,11 @@ body[theme-mode=dark], body .semi-always-dark {
   width: 100%;
   height: 100%;
   background-color: var(--semi-color-overlay-bg);
+  opacity: 1;
+  transition: opacity var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-mask-hidden {
+  opacity: 0;
   display: none;
 }
 .semi-sidesheet-footer {
@@ -15929,7 +16000,8 @@ body[theme-mode=dark], body .semi-always-dark {
   border: none;
   border-radius: 50%;
   cursor: pointer;
-  transition: #fff 0.3s;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -16246,6 +16318,9 @@ body[theme-mode=dark], body .semi-always-dark {
   border: 1px solid transparent;
   border-radius: var(--semi-border-radius-medium);
   padding: 12px 16px;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps .semi-steps-item .semi-steps-item-title {
   position: relative;
@@ -16258,6 +16333,7 @@ body[theme-mode=dark], body .semi-always-dark {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--semi-color-text-0);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps .semi-steps-item .semi-steps-item-description {
   font-size: 14px;
@@ -16423,6 +16499,7 @@ body[theme-mode=dark], body .semi-always-dark {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic.semi-steps-vertical {
   display: flex;
@@ -16485,6 +16562,8 @@ body[theme-mode=dark], body .semi-always-dark {
   overflow: hidden;
   flex: 1;
   cursor: pointer;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
 }
 .semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
@@ -16520,6 +16599,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background: var(--semi-color-primary);
   border-radius: var(--semi-border-radius-circle);
   color: var(--semi-color-white);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic .semi-steps-item .semi-steps-item-title {
   position: relative;
@@ -16533,6 +16613,7 @@ body[theme-mode=dark], body .semi-always-dark {
   vertical-align: top;
   padding-right: 16px;
   padding-bottom: 4px;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon {
   color: var(--semi-color-primary);
@@ -16680,7 +16761,7 @@ body[theme-mode=dark], body .semi-always-dark {
   position: relative;
   cursor: pointer;
   background-color: var(--semi-color-fill-0);
-  transition: background-color 200ms ease-in-out;
+  transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   width: 40px;
   height: 24px;
 }
@@ -17197,6 +17278,12 @@ body[theme-mode=dark], body .semi-always-dark {
   border-left: 1px solid var(--semi-color-border);
   box-shadow: -3px 0 0 0 var(--semi-color-shadow);
 }
+.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed > * {
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeOut) 0ms;
+}
+.semi-table-tbody > .semi-table-row > * {
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeOut) 0ms;
+}
 .semi-table-tbody > .semi-table-row-section {
   display: table-row;
 }
@@ -17271,10 +17358,14 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-block;
   width: 16px;
   height: 16px;
-  cursor: pointer;
   vertical-align: middle;
   text-align: center;
 }
+.semi-table .semi-table-column-sorter-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
 .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
   height: 0;
   display: block;
@@ -17297,11 +17388,11 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-flex;
   cursor: pointer;
   color: var(--semi-color-text-2);
-  vertical-align: middle;
+  align-items: center;
 }
 .semi-table .semi-table-column-filter svg {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);
@@ -17556,6 +17647,7 @@ body[theme-mode=dark], body .semi-always-dark {
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-tabs-bar .semi-tabs-tab .semi-icon-close {
   margin-right: 0;
@@ -17640,9 +17732,12 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-tabs-bar-line.semi-tabs-bar-top {
   border-bottom: 1px solid var(--semi-color-border);
+  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-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
   padding: 16px 4px 14px 4px;
+  transition: border-bottom-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   border-bottom: 2px solid transparent;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
@@ -17676,6 +17771,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
   padding: 12px;
   border-left: 2px solid transparent;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
   border-left: 2px solid var(--semi-color-fill-0);
@@ -17766,6 +17862,8 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-tabs-bar-card .semi-tabs-tab {
   padding: 8px 12px;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-card .semi-tabs-tab:hover {
   background: var(--semi-color-fill-0);
@@ -17791,6 +17889,8 @@ body[theme-mode=dark], body .semi-always-dark {
   border-radius: var(--semi-border-radius-small);
   color: var(--semi-color-text-2);
   border: none;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-button .semi-tabs-tab:hover {
   border: none;
@@ -18379,6 +18479,7 @@ body[theme-mode=dark], body .semi-always-dark {
   font-weight: 400;
   width: 100%;
   box-sizing: border-box;
+  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);
 }
 .semi-tagInput-drag-item {
   display: flex;
@@ -19171,6 +19272,7 @@ body[theme-mode=dark], body .semi-always-dark {
   flex-wrap: nowrap;
   color: var(--semi-color-text-1);
   cursor: pointer;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-transfer-item:hover {
   background-color: var(--semi-color-fill-0);
@@ -19343,6 +19445,8 @@ body[theme-mode=dark], body .semi-always-dark {
   display: flex;
   align-items: center;
   cursor: pointer;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-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;
@@ -21035,6 +21139,7 @@ p.semi-typography-extended,
   border-radius: var(--semi-border-radius-small);
   vertical-align: bottom;
   background-color: var(--semi-color-fill-0);
+  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);
 }
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);