@douyinfe/semi-ui 2.24.4-alpha.0 → 2.25.0

package/dist/css/semi.css

@@ -2739,16 +2739,20 @@ body {
 .semi-carousel-content-slide .semi-carousel-content-item-slide-out {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-out;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-slide .semi-carousel-content-item-slide-in {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-in;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
   animation: semi-carousel-content-item-keyframe-slide-out-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
   animation: semi-carousel-content-item-keyframe-slide-in-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-indicator {
   display: flex;
@@ -11842,26 +11846,31 @@ img[src=""], img:not([src]) {
   flex-wrap: wrap;
 }
 .semi-input-group .semi-select,
+.semi-input-group .semi-tagInput,
 .semi-input-group .semi-cascader,
 .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
   border-radius: 0;
 }
 .semi-input-group .semi-select:first-child,
+.semi-input-group .semi-tagInput:first-child,
 .semi-input-group .semi-cascader:first-child,
 .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
 }
 .semi-input-group .semi-select:last-child,
+.semi-input-group .semi-tagInput:last-child,
 .semi-input-group .semi-cascader:last-child,
 .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-select:not(:last-child),
+.semi-input-group .semi-tagInput:not(:last-child),
 .semi-input-group .semi-cascader:not(:last-child),
 .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-select:not(:last-child)::after,
+.semi-input-group .semi-tagInput:not(:last-child)::after,
 .semi-input-group .semi-cascader:not(:last-child)::after,
 .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
   content: "";
@@ -11874,11 +11883,13 @@ img[src=""], img:not([src]) {
 }
 .semi-input-group .semi-input-number,
 .semi-input-group .semi-datepicker,
+.semi-input-group .semi-timepicker,
 .semi-input-group .semi-autocomplete {
   border-radius: 0;
 }
 .semi-input-group .semi-input-number .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
   border-radius: 0;
 }
@@ -11886,6 +11897,8 @@ img[src=""], img:not([src]) {
 .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
@@ -11894,17 +11907,21 @@ img[src=""], img:not([src]) {
 .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-input-number:not(:last-child),
 .semi-input-group .semi-datepicker:not(:last-child),
+.semi-input-group .semi-timepicker:not(:last-child),
 .semi-input-group .semi-autocomplete:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-input-number:not(:last-child)::after,
 .semi-input-group .semi-datepicker:not(:last-child)::after,
+.semi-input-group .semi-timepicker:not(:last-child)::after,
 .semi-input-group .semi-autocomplete:not(:last-child)::after {
   content: "";
   background-color: var(--semi-color-border);
@@ -12421,18 +12438,22 @@ img[src=""], img:not([src]) {
 
 .semi-modal-content-animate-show {
   animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-content-animate-hide {
   animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-show {
   animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-hide {
   animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes semi-modal-content-keyframe-show {
@@ -13538,39 +13559,51 @@ img[src=""], img:not([src]) {
 }
 .semi-notification-notice-animation-show_top {
   animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_top {
   animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topLeft {
   animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topLeft {
   animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topRight {
   animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topRight {
   animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottom {
   animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottom {
   animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomLeft {
   animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomLeft {
   animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomRight {
   animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomRight {
   animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-notification-notice.semi-notification-notice-rtl {
@@ -13925,9 +13958,11 @@ img[src=""], img:not([src]) {
 }
 .semi-popover-animation-show {
   animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-popover-animation-hide {
   animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-popover-wrapper .semi-popover-icon-arrow {
@@ -15425,33 +15460,43 @@ img[src=""], img:not([src]) {
 }
 .semi-sidesheet-animation-content_show_top {
   animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_top {
   animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_bottom {
   animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_bottom {
   animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_left {
   animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_left {
   animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_right {
   animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_right {
   animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_show {
   animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_hide {
   animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-sidesheet-fixed .semi-sidesheet-inner {
@@ -15564,6 +15609,7 @@ img[src=""], img:not([src]) {
   background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
   background-size: 400% 100%;
   animation: 1400ms skeleton-loading ease infinite;
+  animation-fill-mode: forwards;
 }
 @keyframes skeleton-loading {
   0% {
@@ -15846,12 +15892,14 @@ img[src=""], img:not([src]) {
 }
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
   width: 20px;
   height: 20px;
 }
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-spin-children {
   opacity: 0.5;
@@ -16430,6 +16478,10 @@ img[src=""], img:not([src]) {
   box-shadow: none;
   border: 1px var(--semi-color-border) solid;
 }
+.semi-switch-disabled .semi-switch-native-control {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 .semi-switch-disabled.semi-switch-checked {
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);
@@ -17644,15 +17696,19 @@ img[src=""], img:not([src]) {
 }
 .semi-tabs-pane-animate-leftShow {
   animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-rightShow {
   animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-topShow {
   animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-bottomShow {
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 
 .semi-rtl .semi-tabs,
@@ -17747,7 +17803,6 @@ img[src=""], img:not([src]) {
 
 .semi-tag {
   box-sizing: border-box;
-  display: inline-block;
   border-radius: var(--semi-border-radius-small);
   background-color: transparent;
   position: relative;
@@ -17755,6 +17810,10 @@ img[src=""], img:not([src]) {
   overflow: hidden;
   white-space: nowrap;
   vertical-align: bottom;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;
@@ -17786,11 +17845,10 @@ img[src=""], img:not([src]) {
   display: none;
 }
 .semi-tag-content {
-  display: flex;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .semi-tag-close {
   display: flex;
@@ -17800,6 +17858,12 @@ img[src=""], img:not([src]) {
   padding-left: 4px;
   cursor: pointer;
 }
+.semi-tag-close :hover {
+  color: var(--semi-color-text-1);
+}
+.semi-tag-close :active {
+  color: var(--semi-color-text-0);
+}
 .semi-tag-closable {
   padding: 4px 4px 4px 8px;
 }
@@ -18211,9 +18275,16 @@ img[src=""], img:not([src]) {
   display: inline-flex;
   font-weight: 400;
   width: 100%;
+  min-height: 32px;
   box-sizing: border-box;
   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);
 }
+.semi-tagInput-small {
+  min-height: 24px;
+}
+.semi-tagInput-large {
+  min-height: 40px;
+}
 .semi-tagInput-drag-item {
   display: flex;
   align-items: center;
@@ -18288,15 +18359,6 @@ img[src=""], img:not([src]) {
   padding-right: 4px;
   overflow: hidden;
 }
-.semi-tagInput-wrapper-small {
-  min-height: 24px;
-}
-.semi-tagInput-wrapper-default {
-  min-height: 32px;
-}
-.semi-tagInput-wrapper-large {
-  min-height: 40px;
-}
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
@@ -18785,9 +18847,11 @@ img[src=""], img:not([src]) {
 }
 .semi-toast-animation-show {
   animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 .semi-toast-animation-hide {
   animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 @keyframes semi-toast-keyframe-toast-show {
   0% {
@@ -18887,9 +18951,11 @@ img[src=""], img:not([src]) {
 }
 .semi-tooltip-animation-show {
   animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-tooltip-animation-hide {
   animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-tooltip-wrapper .semi-tooltip-icon-arrow {
@@ -20798,6 +20864,7 @@ p.semi-typography-extended,
 
 .semi-icon-spinning {
   animation: 0.6s linear infinite semi-icon-animation-rotate;
+  animation-fill-mode: forwards;
 }
 
 @keyframes semi-icon-animation-rotate {
@@ -20825,6 +20892,7 @@ p.semi-typography-extended,
   width: 16px;
   height: 16px;
   animation: 0.6s linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-button.semi-button-with-icon-only {
   padding-left: 8px;