@douyinfe/semi-ui 2.15.2-alpha.0 → 2.16.1

package/_base/_story/a11y.jsx

@@ -218,7 +218,7 @@ const initValues = {
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang1.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         },
         {
             uid: '3',
@@ -229,7 +229,7 @@ const initValues = {
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang2.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         },
     ],
 };

package/avatar/__test__/avatar.test.js

@@ -261,7 +261,7 @@ describe('Avatar', () => {
     it('src', () => {
         const element = (
            <Avatar
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                 style={{ margin: 4 }}
             />
         );
@@ -272,7 +272,7 @@ describe('Avatar', () => {
                 .at(0)
                 .props()
                 .src
-        ).toEqual('https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg');
+        ).toEqual('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png');
     });
 
     it('shape', () => {
@@ -320,7 +320,7 @@ describe('Avatar', () => {
         const avatar = mount(
             <Avatar 
                 onError={spyOnError}
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
             />
         );
         avatar

package/avatar/interface.ts

@@ -38,7 +38,7 @@ export interface AvatarProps extends BaseProps {
 }
 
 export type AvatarGroupShape = 'circle' | 'square';
-export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
 export type AvatarGroupOverlapFrom = 'start' | 'end';
 
 export interface AvatarGroupProps {

package/button/buttonGroup.tsx

@@ -33,9 +33,10 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     static defaultProps = {
+        // There are default values ​​for type and theme in Button. 
+        // In order to allow users to individually customize the type and theme of the Button through the parameters of the Button in the ButtonGroup,
+        // the default value of type and theme is not given in the ButtonGroup。
         size: 'default',
-        type: 'primary',
-        theme: 'light',
     };
 
     render() {

package/cascader/index.tsx

@@ -29,6 +29,7 @@ import Tag from '../tag';
 import TagInput from '../tagInput';
 import { Motion } from '../_base/base';
 import { isSemiIcon } from '../_utils';
+import { Position } from '../tooltip/index';
 
 export { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
 export { CascaderData, Entity, Data, CascaderItemProps } from './item';
@@ -82,6 +83,7 @@ export interface CascaderProps extends BasicCascaderProps {
     onBlur?: (e: MouseEvent) => void;
     onFocus?: (e: MouseEvent) => void;
     validateStatus?: ValidateStatus;
+    position?: Position;
 }
 
 export interface CascaderState extends BasicCascaderInnerData {
@@ -169,6 +171,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
         preventScroll: PropTypes.bool,
+        position:PropTypes.string
     };
 
     static defaultProps = {
@@ -954,12 +957,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             stopPropagation,
             mouseLeaveDelay,
             mouseEnterDelay,
+            position
         } = this.props;
         const { isOpen, rePosKey } = this.state;
         const { direction } = this.context;
         const content = this.renderContent();
         const selection = this.renderSelection();
-        const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+        const pos = position ?? (direction === 'rtl' ? 'bottomRight' : 'bottomLeft');
         const mergedMotion: Motion = this.foundation.getMergedMotion();
         return (
             <Popover

package/collapsible/_story/collapsible.stories.js

@@ -368,7 +368,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'd116a179410eb0ca18e66074509bde93-0',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
       {
         preview: false,
@@ -376,7 +376,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'b7d579069320590ba4b128672eedbae2-1',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
       {
         preview: false,
@@ -384,7 +384,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'b7d579069320590ba4b128672eedbae2-2',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
     ];
   }
@@ -410,7 +410,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'd116a179410eb0ca18e66074509bde93-0',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
               {
                 preview: false,
@@ -418,7 +418,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'b7d579069320590ba4b128672eedbae2-1',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
               {
                 preview: false,
@@ -426,7 +426,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'b7d579069320590ba4b128672eedbae2-2',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
             ]}
             dragMainText="点击上传文件或拖拽文件到这里"

package/configProvider/_story/RTLDirection/RTLForm.jsx

@@ -35,7 +35,7 @@ class RTLForm extends React.Component {
                             type: 'image/jpeg',
                         }),
                         url:
-                            'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                            'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                     },
                 ],
             },

package/dist/css/semi.css

@@ -11788,7 +11788,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-2);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
@@ -11806,6 +11806,10 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper-error:active {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -11818,6 +11822,10 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper-warning:active {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper__with-prefix {
   display: inline-flex;
   align-items: center;
@@ -11938,6 +11946,12 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
   border-radius: 0;
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
+  background-color: var(--semi-color-fill-2);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
   background-color: var(--semi-color-fill-0);
 }
@@ -11966,6 +11980,13 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
+  background-color: var(--semi-color-danger-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
   background-color: var(--semi-color-danger-light-default);
 }
@@ -11994,6 +12015,13 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
+  background-color: var(--semi-color-warning-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
   background-color: var(--semi-color-warning-light-default);
 }
@@ -12027,6 +12055,9 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: transparent;
   box-sizing: border-box;
 }
+.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
+  display: none;
+}
 .semi-input::placeholder {
   color: var(--semi-color-text-2);
 }
@@ -14257,8 +14288,9 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
+  position: relative;
   display: inline-flex;
-  column-gap: 8px;
+  flex-wrap: wrap;
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -14306,7 +14338,6 @@ body[theme-mode=dark], body .semi-always-dark {
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
-  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -14330,6 +14361,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border: 1px solid transparent;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
+  position: relative;
   margin-right: 8px;
   flex-shrink: 0;
 }
@@ -14399,18 +14431,19 @@ body[theme-mode=dark], body .semi-always-dark {
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  display: inline-flex;
-  margin-top: 2px;
-  position: relative;
+  position: absolute;
+  display: inline-block;
+  top: 2px;
+  left: 0;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -14419,14 +14452,11 @@ body[theme-mode=dark], body .semi-always-dark {
   background: transparent;
 }
 .semi-radio-inner-display .semi-icon {
+  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
-.semi-radio-content {
-  display: flex;
-  flex-direction: column;
-}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -14435,6 +14465,8 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-addon {
   user-select: none;
+  padding-left: 8px;
+  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
@@ -14523,7 +14555,11 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 0;
   color: var(--semi-color-text-2);
+  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -14538,20 +14574,25 @@ 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;
 }
-.semi-radioGroup-vertical {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+.semi-radioGroup-vertical .semi-radio:last-of-type {
+  margin-bottom: 0;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: flex;
+  display: block;
+  margin-bottom: 12px;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
+  margin-bottom: 16px;
 }
-.semi-radioGroup-horizontal {
-  display: inline-flex;
-  column-gap: 16px;
+.semi-radioGroup-horizontal .semi-radio {
+  margin-right: 16px;
+}
+.semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-right: 0;
+}
+.semi-radioGroup-horizontal-default {
+  display: inline-block;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -14575,14 +14616,59 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
+.semi-rtl .semi-radio-inner,
+.semi-portal-rtl .semi-radio-inner {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-inner-display,
+.semi-portal-rtl .semi-radio-inner-display {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-addon,
+.semi-portal-rtl .semi-radio-addon {
+  padding-left: 0;
+  margin-left: 0;
+  padding-right: 8px;
+  margin-right: 16px;
+}
 .semi-rtl .semi-radio-addon-buttonRadio,
 .semi-portal-rtl .semi-radio-addon-buttonRadio {
   margin-right: 0;
 }
+.semi-rtl .semi-radio-extra,
+.semi-portal-rtl .semi-radio-extra {
+  padding-left: 0;
+  padding-right: 24px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-inner,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-addon,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
+  margin-right: 0;
+  padding-right: 0;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-extra,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
+  padding-right: 0;
+}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
 }
+.semi-rtl .semi-radioGroup-horizontal .semi-radio,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-left: 0;
+}
 
 .semi-rating {
   display: inline-block;
@@ -15137,11 +15223,11 @@ body[theme-mode=dark], body .semi-always-dark {
   align-items: center;
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
-  margin: 0 12px;
+  margin: 0px 12px;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);
-  margin: 0 8px;
+  margin: 0px 8px;
 }
 .semi-select-suffix {
   display: flex;
@@ -15599,6 +15685,9 @@ body[theme-mode=dark], body .semi-always-dark {
   cursor: pointer;
   transition: #fff 0.3s;
 }
+.semi-slider-handle:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }
@@ -16427,8 +16516,8 @@ body[theme-mode=dark], body .semi-always-dark {
   left: 0;
 }
 .semi-switch-native-control[type=checkbox] {
-  width: 100%;
-  height: 100%;
+  width: inherit;
+  height: inherit;
 }
 .semi-switch-checked-text, .semi-switch-unchecked-text {
   position: absolute;
@@ -19596,6 +19685,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-tree-select-arrow {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   height: 100%;
   justify-content: center;
   width: 32px;
@@ -19620,6 +19710,7 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-flex;
   align-items: center;
   height: 100%;
+  flex-shrink: 0;
   justify-content: center;
   width: 32px;
   color: var(--semi-color-text-2);
@@ -20749,7 +20840,7 @@ p.semi-typography-extended,
 }
 .semi-input-textarea-wrapper-error:active {
   background-color: var(--semi-color-danger-light-active);
-  border-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
 }
 .semi-input-textarea-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
@@ -20765,7 +20856,7 @@ p.semi-typography-extended,
 }
 .semi-input-textarea-wrapper-warning:active {
   background-color: var(--semi-color-warning-light-active);
-  border-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
 }
 
 .semi-input-textarea {