@douyinfe/semi-foundation 2.51.3 → 2.52.0-beta.0

package/lib/cjs/avatar/variables.scss

@@ -24,29 +24,85 @@ $font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
 
 $radius-avatar: var(--semi-border-radius-circle); // 头像圆角
 
-$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
-$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+$width-avatar_extra_large-border: 3px; // 头像组头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像组头像左侧外边距 - 超大
 
-$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$width-avatar_large-border: 3px; // 头像组头像描边尺寸 - 大
 $spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
 
-$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$width-avatar_medium-border: 2px; // 头像组头像描边尺寸 - 中
 $spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
 
-$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$width-avatar_default-border: 2px; // 头像组头像描边尺寸 - 默认
 $spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
 
-$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$width-avatar_small-border: 2px; // 头像组头像描边尺寸 - 小
 $spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
 
-$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$width-avatar_extra_small-border: 1px; // 头像组头像描边尺寸 - 超小
 $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
-$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
-
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
+$color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
+
+$width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_large: 28px; // large 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部 slot 圆形半径
+$color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
+
+$radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
+$font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-large-fontSize: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large-fontSize: 14px; // extra large 底部 slot 文字大小
+$spacing-avatar-bottom_slot_square-paddingX:4px; // 底部 slot square 形状左边距
+$spacing-avatar-bottom_slot_square-paddingY:1px; //底部 slot square 形状右边距
+
+$font-avatar_top_slot-small-fontSize: 5px; // small 顶部 slot 文字大小
+$font-avatar_top_slot-default-fontSize: 6px; // default 顶部 slot 文字大小
+$font-avatar_top_slot-medium-fontSize: 8px; // medium 顶部 slot 文字大小
+$font-avatar_top_slot-large-fontSize: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large-fontSize: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: 0px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
+
+$color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 
+$width-avatar-bottom_slot_square_large-border:2px; // large 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_extra_large-border:2px; // extra large 头像底部 square 边框宽度
+
+$color-avatar-top_slot_text:var(--semi-color-bg-0); //顶部 Slot 文字颜色
+$color-avatar-top_slot_gradient_start: var(--semi-color-primary); // 顶部 slot 渐变起始色
+$color-avatar-top_slot_gradient_end: var(--semi-color-primary); //  顶部 slot 渐变结束色
+
+
+$spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+
+$spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
+$spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
+$spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
+$spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
+
+
 // radius
 $radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
 $radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
@@ -54,4 +110,4 @@ $radius-avatar_small: 3px; // 小尺寸头像的圆角
 $radius-avatar_default: 3px; // 默认尺寸头像的圆角
 $radius-avatar_medium: 3px; // 中尺寸头像的圆角
 $radius-avatar_large: 6px; // 大尺寸头像的圆角
-$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/lib/cjs/datePicker/foundation.d.ts

@@ -30,8 +30,8 @@ export type DisabledDateOptions = {
     rangeInputFocus?: 'rangeStart' | 'rangeEnd' | false;
 };
 export type PresetType = {
-    start?: string | Date | number;
-    end?: string | Date | number;
+    start?: BaseValueType | (() => BaseValueType);
+    end?: BaseValueType | (() => BaseValueType);
     text?: string;
 };
 export type TriggerRenderProps = {

package/lib/cjs/datePicker/foundation.js

@@ -884,17 +884,19 @@ class DatePickerFoundation extends _foundation.default {
       timeZone
     } = this.getProps();
     const prevTimeZone = this.getState('prevTimezone');
+    const start = typeof item.start === 'function' ? item.start() : item.start;
+    const end = typeof item.end === 'function' ? item.end() : item.end;
     let value;
     switch (type) {
       case 'month':
       case 'dateTime':
       case 'date':
-        value = this.parseWithTimezone([item.start], timeZone, prevTimeZone);
+        value = this.parseWithTimezone([start], timeZone, prevTimeZone);
         this.handleSelectedChange(value);
         break;
       case 'dateTimeRange':
       case 'dateRange':
-        value = this.parseWithTimezone([item.start, item.end], timeZone, prevTimeZone);
+        value = this.parseWithTimezone([start, end], timeZone, prevTimeZone);
         this.handleSelectedChange(value, {
           needCheckFocusRecord: false
         });

package/lib/cjs/input/input.css

@@ -553,6 +553,18 @@
   margin-bottom: 0;
 }
 
+.semi-input-only_border {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:hover {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:focus-within {
+  background: transparent;
+}
+
 .semi-input-borderless:not(:focus-within):not(:hover) {
   background-color: transparent;
   border-color: transparent;

package/lib/cjs/input/input.scss

@@ -85,7 +85,7 @@ $module: #{$prefix}-input;
         border: $color-input_default-border-focus solid $width-input_wrapper_focus-border;
 
         &:hover {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-focus-hover;
             border-color: $color-input_default-border-focus;
         }
 
@@ -690,7 +690,18 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-only_border{
+    background: transparent;
+    &:hover{
+        background: transparent;
+        border-color: $color_input-default-border-only_border-hover;
+    }
+    &:focus-within{
+        background: transparent;
+    }
+    border-color: $color_input-default-border-only_border-default;
 
+}
 
 .#{$module}-borderless{
 
@@ -713,8 +724,6 @@ $module: #{$prefix}-input;
     }
 
 
-
-
 }
 
 @import "./rtl.scss";

package/lib/cjs/input/variables.scss

@@ -13,6 +13,8 @@ $color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
 $color-input_icon-outline: var(--semi-color-primary-light-active); // 输入框 icon outline 颜色
 
+$color-input_default-bg-focus-hover: $color-input_default-bg-focus; // 输入框背景颜色 - 选中悬浮
+
 // error
 $color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
 $color-input_danger-border-default: var(--semi-color-danger-light-default); // 错误输入框描边颜色 - 默认
@@ -57,6 +59,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
+$color_input-default-border-only_border-default: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+$color_input-default-border-only_border-hover: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+
 $height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
 $height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
 $height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸

package/lib/cjs/modal/modal.css

@@ -64,6 +64,9 @@
   overflow: hidden;
   box-shadow: var(--semi-shadow-elevated);
 }
+.semi-modal-footerfill {
+  display: flex;
+}
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;

package/lib/cjs/modal/modal.scss

@@ -70,7 +70,11 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {

package/lib/cjs/modal/modalFoundation.d.ts

@@ -51,6 +51,7 @@ export interface ModalProps {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
 }
 export interface ModalState {
     displayNone: boolean;

package/lib/cjs/modal/variables.scss

@@ -71,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated)
+
+

package/lib/cjs/slider/constants.d.ts

@@ -6,6 +6,7 @@ declare const cssClasses: {
     DOTS: string;
     MARKS: string;
     HANDLE: string;
+    HANDLE_DOT: string;
 };
 declare const strings: {
     SIZE: string[];

package/lib/cjs/slider/constants.js

@@ -12,7 +12,8 @@ const cssClasses = {
   TRACK: `${_constants.BASE_CLASS_PREFIX}-slider-track`,
   DOTS: `${_constants.BASE_CLASS_PREFIX}-slider-dots`,
   MARKS: `${_constants.BASE_CLASS_PREFIX}-slider-marks`,
-  HANDLE: `${_constants.BASE_CLASS_PREFIX}-slider-handle`
+  HANDLE: `${_constants.BASE_CLASS_PREFIX}-slider-handle`,
+  HANDLE_DOT: `${_constants.BASE_CLASS_PREFIX}-slider-handle-dot`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/slider/foundation.d.ts

@@ -31,6 +31,13 @@ export interface SliderProps {
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
     getAriaValueText?: (value: number, index?: number) => string;
+    handleDot?: {
+        size?: string;
+        color?: string;
+    } & ({
+        size?: string;
+        color?: string;
+    }[]);
 }
 export interface SliderState {
     currentValue: number | number[];

package/lib/cjs/slider/slider.css

@@ -46,10 +46,19 @@
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
+.semi-slider-handle-dot {
+  background: var(--semi-color-primary);
+  width: 4px;
+  height: 4px;
+  border-radius: var(--semi-border-radius-circle);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }

package/lib/cjs/slider/slider.scss

@@ -58,9 +58,19 @@ $module: #{$prefix}-slider;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
         transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
+
+        &-dot{
+            background:$color-slider_handle_dot;
+            width:$width-slider_handle_dot;
+            height: $width-slider_handle_dot;
+            border-radius: var(--semi-border-radius-circle);
+        }
     }
 
     &-handle:hover {

package/lib/cjs/slider/variables.scss

@@ -15,6 +15,7 @@ $color-slider_rail: rgba(0, 0, 0, 0.65);
 $color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
 $color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
 $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按钮轮廓 - 聚焦
+$color-slider_handle_dot: var(--semi-color-primary); // 圆形按钮内部圆点颜色
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
@@ -57,6 +58,7 @@ $height-slider_track: 4px; // 滚动条已填充轨道高度
 $width-slider_dot: 4px; // 滚动条圆形刻度点宽度
 $width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
 $width-slider_handle-focus: 2px; // 圆形按钮轮廓 - 聚焦
+$width-slider_handle_dot: 4px; // 圆形按钮内部圆点宽度
 
 // Font
 $font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号

package/lib/cjs/treeSelect/foundation.d.ts

@@ -96,6 +96,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     closeMenu: (cb?: () => void) => void;
     getTriggerWidth: () => boolean | number;
     setOptionWrapperWidth: (width: null | number) => void;
+    notifyClear: (e: any) => void;
     notifyChange: BasicOnChangeWithBasic;
     notifyChangeWithObject: BasicOnChangeWithObject;
     notifyExpand: (expandedKeys: Set<string>, expandedOtherProps: BasicExpandedOtherProps) => void;

package/lib/cjs/treeSelect/foundation.js

@@ -385,6 +385,7 @@ class TreeSelectFoundation extends _foundation.default {
         }
       }
     }
+    this._adapter.notifyClear(e);
   }
   /**
    * A11y: simulate clear button click

package/lib/es/avatar/animation.scss

@@ -0,0 +1,19 @@
+$animation_duration-additionalBorder: 800ms; // 边框动画持续时间
+$animation_duration-content: 1000ms; // 内容动画持续时间
+
+
+$animation_opacity-additionalBorder-start: 1; // 边框动画起始透明度
+$animation_opacity-additionalBorder-end: 0; // 边框动画结束透明度
+
+
+$animation_width-additionalBorder-end:0; // 边框动画结束宽度
+
+
+$animation_scale-additionalBorder-start: 1; // 边框动画起始缩放比例
+$animation_scale-additionalBorder-end: 1.15; // 边框动画结束缩放比例
+
+$animation_scale-content-start: 1; // 边框动画起始缩放比例
+$animation_scale-content-middle: 0.9; // 边框动画中间态缩放比例
+$animation_scale-content-end: 1; // 边框动画结束缩放比例
+
+

package/lib/es/avatar/avatar.css

@@ -129,6 +129,170 @@
   cursor: pointer;
 }
 
+.semi-avatar-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-small {
+  width: 32px;
+  height: 32px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-default {
+  width: 40px;
+  height: 40px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-medium {
+  width: 48px;
+  height: 48px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-large {
+  width: 72px;
+  height: 72px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-extra-large {
+  width: 128px;
+  height: 128px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg {
+  position: absolute;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-small {
+  top: -28px;
+  scale: 0.4;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-default {
+  top: -32px;
+  scale: 0.7;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-medium {
+  top: -30px;
+  scale: 0.8;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-large {
+  top: -30px;
+  scale: 1.1;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-extra-large {
+  top: -32px;
+  scale: 1.4;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot {
+  color: var(--semi-color-bg-0);
+  font-weight: 600;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content {
+  user-select: none;
+  position: relative;
+  line-height: normal;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-small {
+  font-size: 5px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-default {
+  font-size: 6px;
+  margin-top: -2px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-medium {
+  font-size: 8px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-large {
+  font-size: 14px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-extra-large {
+  font-size: 16px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot {
+  color: var(--semi-color-bg-0);
+  position: absolute;
+  cursor: pointer;
+  bottom: 3.5px;
+  transform: translateY(50%);
+  user-select: none;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-circle);
+  line-height: normal;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
+  width: 12px;
+  height: 12px;
+  font-size: 5px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-default {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-medium {
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-large {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-large {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--semi-color-primary);
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-weight: 600;
+  border-style: solid;
+  border-color: var(--semi-color-bg-0);
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
+  font-size: 5px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-default {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-medium {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-large {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra-large {
+  font-size: 14px;
+  border-width: 2px;
+}
+
 .semi-avatar-group {
   display: inline-block;
 }
@@ -376,6 +540,103 @@
   color: rgba(var(--semi-white), 1);
 }
 
+.semi-avatar-additionalBorder {
+  border-style: solid;
+  border-color: var(--semi-color-primary);
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  border-width: 1.5px;
+  top: -3.5px;
+  left: -3.5px;
+}
+.semi-avatar-additionalBorder-extra-extra-small {
+  width: 27px;
+  height: 27px;
+}
+.semi-avatar-additionalBorder-extra-small {
+  width: 31px;
+  height: 31px;
+}
+.semi-avatar-additionalBorder-small {
+  width: 39px;
+  height: 39px;
+}
+.semi-avatar-additionalBorder-default {
+  width: 47px;
+  height: 47px;
+}
+.semi-avatar-additionalBorder-medium {
+  width: 55px;
+  height: 55px;
+}
+.semi-avatar-additionalBorder-large {
+  width: 79px;
+  height: 79px;
+}
+.semi-avatar-additionalBorder-extra-large {
+  width: 135px;
+  height: 135px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-extra_extra_small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-extra_small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-default {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-medium {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-large {
+  border-radius: 6px;
+}
+
+.semi-avatar-additionalBorder-circle {
+  border-radius: var(--semi-border-radius-circle);
+}
+
+.semi-avatar-additionalBorder-animated {
+  animation: 800ms linear infinite semi-avatar-additionalBorder;
+}
+
+.semi-avatar-animated {
+  animation: 1000ms linear infinite semi-avatar-content;
+}
+
+@keyframes semi-avatar-additionalBorder {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    border-width: 0;
+    opacity: 0;
+    transform: scale(1.15);
+  }
+}
+@keyframes semi-avatar-content {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+}
 .semi-rtl .semi-avatar,
 .semi-portal-rtl .semi-avatar {
   direction: rtl;