@douyinfe/semi-foundation 2.11.0 → 2.12.0-alpha.0

package/inputNumber/foundation.ts

@@ -294,7 +294,8 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
-        if (!this._isMouseButtonLeft(event)) {
+        const { readonly } = this.getProps();
+        if (!this._isMouseButtonLeft(event) || readonly) {
             return;
         }
         this._adapter.setClickUpOrDown(true);
@@ -314,7 +315,8 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
-        if (!this._isMouseButtonLeft(event)) {
+        const { readonly } = this.getProps();
+        if (!this._isMouseButtonLeft(event) || readonly) {
             return;
         }
         this._adapter.setClickUpOrDown(true);

package/lib/cjs/inputNumber/foundation.js

@@ -321,7 +321,11 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleUpClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 
@@ -344,7 +348,11 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleDownClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 

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

@@ -19,5 +19,10 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     handleTabListChange(): void;
     handleTabPanesChange(): void;
     handleTabDelete(tabKey: string): void;
+    handlePrevent: (event: any) => void;
+    handleKeyDown: (event: any, itemKey: string, closable: boolean) => void;
+    determineOrientation(event: any, tabs: HTMLElement[]): void;
+    handleDeleteKeyDown(event: any, tabs: HTMLElement[], itemKey: string, closable: boolean): void;
+    switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void;
 }
 export default TabsFoundation;

package/lib/cjs/tabs/foundation.js

@@ -12,14 +12,69 @@ exports.default = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 class TabsFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
     this.destroy = _noop2.default;
+
+    this.handlePrevent = event => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    this.handleKeyDown = (event, itemKey, closable) => {
+      var _context;
+
+      const tabs = (0, _filter.default)(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
+        var _context2;
+
+        return (0, _includes.default)(_context2 = (0, _get2.default)(item, 'attributes.data-tabkey.value', '')).call(_context2, 'semiTab') && item.ariaDisabled !== "true";
+      });
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "ArrowDown":
+          this.determineOrientation(event, tabs);
+          break;
+
+        case "Backspace":
+        case "Delete":
+          this.handleDeleteKeyDown(event, tabs, itemKey, closable);
+          break;
+
+        case "Enter":
+        case " ":
+          this.handleTabClick(itemKey, event);
+          this.handlePrevent(event);
+          break;
+
+        case "Home":
+          tabs[0].focus(); // focus first tab
+
+          this.handlePrevent(event);
+          break;
+
+        case "End":
+          tabs[tabs.length - 1].focus(); // focus last tab
+
+          this.handlePrevent(event);
+          break;
+      }
+    };
   }
 
   init() {
@@ -89,6 +144,59 @@ class TabsFoundation extends _foundation.default {
     this._adapter.notifyTabDelete(tabKey);
   }
 
+  determineOrientation(event, tabs) {
+    const {
+      tabPosition
+    } = this.getProps();
+    const isVertical = tabPosition === 'left';
+
+    if (isVertical) {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    } else {
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    }
+  }
+
+  handleDeleteKeyDown(event, tabs, itemKey, closable) {
+    if (closable) {
+      this.handleTabDelete(itemKey);
+      const index = (0, _indexOf.default)(tabs).call(tabs, event.target); // Move focus to next element after deletion
+      // If the element is the last removable tab, focus to its previous tab
+
+      if (tabs.length !== 1) {
+        tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();
+      }
+    }
+  }
+
+  switchTabOnArrowPress(event, tabs) {
+    const index = (0, _indexOf.default)(tabs).call(tabs, event.target);
+    const direction = {
+      "ArrowLeft": -1,
+      "ArrowUp": -1,
+      "ArrowRight": 1,
+      "ArrowDown": 1
+    };
+
+    if (direction[event.key]) {
+      if (index !== undefined) {
+        if (tabs[index + direction[event.key]]) {
+          tabs[index + direction[event.key]].focus();
+        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+          tabs[tabs.length - 1].focus(); // focus last tab
+        } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
+          tabs[0].focus(); // focus first tab
+        }
+      }
+    }
+  }
+
 }
 
 var _default = TabsFoundation;

package/lib/cjs/tabs/tabs.css

@@ -101,6 +101,10 @@
   width: 0;
   height: 0;
 }
+.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
@@ -130,6 +134,10 @@
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
   border-bottom: 2px solid var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
   border-bottom: 2px solid var(--semi-color-fill-1);
 }
@@ -156,6 +164,10 @@
   border-left: 2px solid var(--semi-color-fill-0);
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
   border-left: 2px solid var(--semi-color-fill-1);
   background-color: var(--semi-color-fill-1);
@@ -241,6 +253,10 @@
 .semi-tabs-bar-card .semi-tabs-tab:hover {
   background: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-card .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-card .semi-tabs-tab:active {
   background: var(--semi-color-fill-1);
 }
@@ -263,6 +279,10 @@
   border: none;
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-button .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-button .semi-tabs-tab:active {
   background-color: var(--semi-color-fill-1);
 }
@@ -283,6 +303,9 @@
   width: 100%;
   overflow: hidden;
 }
+.semi-tabs-pane:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
   display: none;
 }

package/lib/cjs/tabs/tabs.scss

@@ -124,6 +124,11 @@ $module: #{$prefix}-tabs;
                     width: 0;
                     height: 0;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
             }
         }
         
@@ -164,6 +169,11 @@ $module: #{$prefix}-tabs;
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
                 
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -202,6 +212,11 @@ $module: #{$prefix}-tabs;
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
                 
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -327,6 +342,11 @@ $module: #{$prefix}-tabs;
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background: $color-tabs_tab_card-bg-active;
@@ -365,6 +385,11 @@ $module: #{$prefix}-tabs;
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
@@ -393,13 +418,17 @@ $module: #{$prefix}-tabs;
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-    
+
     &-pane {
         width: 100%;
         overflow: hidden;
         // position: absolute;
         // flex-shrink: 0;
         // position: absolute;
+
+        &:focus-visible {
+            outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+        }
     }
     
     &-pane-inactive,

package/lib/cjs/tabs/variables.scss

@@ -44,6 +44,8 @@ $color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 -
 $color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
 $color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
 
+$color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签轮廓 - 聚焦
+
 
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
@@ -54,6 +56,9 @@ $width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部
 $width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
 
 $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+$width-tabs-outline: 2px; // 聚焦轮廓宽度
+$width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
+$width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高

package/lib/cjs/tag/tag.css

@@ -19,6 +19,9 @@
   height: 20px;
   padding: 2px 8px;
 }
+.semi-tag-default:focus-visible, .semi-tag-small:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-large {
   font-size: 12px;
   line-height: 16px;
@@ -26,6 +29,9 @@
   padding: 4px 8px;
   height: 24px;
 }
+.semi-tag-large:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-invisible {
   display: none;
 }
@@ -392,6 +398,10 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-solid .semi-tag-close {
+  color: var(--semi-color-white);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/cjs/tag/tag.scss

@@ -25,12 +25,18 @@ $types: "ghost", "solid", "light";
         @include font-size-small;
         height: $height-tag_small;
         padding: $spacing-tag_small-paddingY $spacing-tag_small-paddingX;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-large {
         @include font-size-small;
         padding: $spacing-tag_large-paddingY $spacing-tag_large-paddingX;
         height: $height-tag_large;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-invisible {
@@ -46,12 +52,13 @@ $types: "ghost", "solid", "light";
     &-close {
         @include all-center;
         color: $color-tag_close-icon-default;
-        padding-left: $spacing-tag_close-paddingLeft; 
+        padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
     }
 
     &-closable {
-        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingLeft;
+        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom
+            $spacing-tag_closable-paddingLeft;
     }
 
     &-avatar-square,
@@ -62,10 +69,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-square {
-        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
+        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight
+            $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
 
         .#{$prefix}-avatar {
-
             & > img {
                 background-color: $color-tag_avatar_square_img-bg-default;
             }
@@ -73,10 +80,12 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle {
-        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
+        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight
+            $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
     }
 
-    &-avatar-square.#{$module}-default, &-avatar-square.#{$module}-small {
+    &-avatar-square.#{$module}-default,
+    &-avatar-square.#{$module}-small {
         .#{$prefix}-avatar {
             width: $height-tag_small;
             height: $height-tag_small;
@@ -179,4 +188,10 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
-@import "./rtl.scss";
+.#{$module}-solid {
+    .#{$module}-close {
+        color: $color-tag_close-icon_deep-default;
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/tag/variables.scss

@@ -7,12 +7,16 @@ $color-tag_white-border-default: rgba(var(--semi-grey-2), 0.7); // 白色标签
 $color-tag_white-text-default: var(--semi-color-text-0); // 白色标签文字颜色 - 默认
 $color-tag_white-icon-default: var(--semi-color-text-2); // 白色标签图标颜色 - 默认
 
+$color-tag-outline-focus: var(--semi-color-primary-light-active); // 标签轮廓 - 聚焦
+
 $width-tag_avatar_circle_small: 16px; // 头像标签圆角 - 小尺寸
 $width-tag_avatar_circle_large: 20px; // 头像标签圆角 - 大尺寸
 
 $width-tag-border: 1px; // 标签描边宽度
 $width-tag_avatar-border: $width-tag-border; // 头像标签描边宽度
 
+$width-tag-outline: 2px; // 标签轮廓宽度
+
 $height-tag_small: 20px; // 小尺寸标签高度
 $height-tag_large: 24px; // 大尺寸标签高度
 $radius-tag: var(--semi-border-radius-small); // 标签圆角大小
@@ -24,6 +28,7 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
 $spacing-tag_closable-paddingRight: $spacing-extra-tight; // 可删除的标签删除按钮右侧内边距

package/lib/cjs/utils/a11y.d.ts

@@ -0,0 +1 @@
+export declare function handlePrevent(event: any): void;

package/lib/cjs/utils/a11y.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.handlePrevent = handlePrevent;
+
+function handlePrevent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}

package/lib/es/inputNumber/foundation.js

@@ -296,7 +296,11 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleUpClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 
@@ -319,7 +323,11 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleDownClick(event) {
-    if (!this._isMouseButtonLeft(event)) {
+    const {
+      readonly
+    } = this.getProps();
+
+    if (!this._isMouseButtonLeft(event) || readonly) {
       return;
     }
 

package/lib/es/tabs/foundation.d.ts

@@ -19,5 +19,10 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     handleTabListChange(): void;
     handleTabPanesChange(): void;
     handleTabDelete(tabKey: string): void;
+    handlePrevent: (event: any) => void;
+    handleKeyDown: (event: any, itemKey: string, closable: boolean) => void;
+    determineOrientation(event: any, tabs: HTMLElement[]): void;
+    handleDeleteKeyDown(event: any, tabs: HTMLElement[], itemKey: string, closable: boolean): void;
+    switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void;
 }
 export default TabsFoundation;

package/lib/es/tabs/foundation.js

@@ -1,11 +1,62 @@
 import _noop from "lodash/noop";
+import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import BaseFoundation from '../base/foundation';
 
 class TabsFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter));
     this.destroy = _noop;
+
+    this.handlePrevent = event => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    this.handleKeyDown = (event, itemKey, closable) => {
+      var _context;
+
+      const tabs = _filterInstanceProperty(_context = [...event.target.parentNode.childNodes]).call(_context, item => {
+        var _context2;
+
+        return _includesInstanceProperty(_context2 = _get(item, 'attributes.data-tabkey.value', '')).call(_context2, 'semiTab') && item.ariaDisabled !== "true";
+      });
+
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "ArrowDown":
+          this.determineOrientation(event, tabs);
+          break;
+
+        case "Backspace":
+        case "Delete":
+          this.handleDeleteKeyDown(event, tabs, itemKey, closable);
+          break;
+
+        case "Enter":
+        case " ":
+          this.handleTabClick(itemKey, event);
+          this.handlePrevent(event);
+          break;
+
+        case "Home":
+          tabs[0].focus(); // focus first tab
+
+          this.handlePrevent(event);
+          break;
+
+        case "End":
+          tabs[tabs.length - 1].focus(); // focus last tab
+
+          this.handlePrevent(event);
+          break;
+      }
+    };
   }
 
   init() {
@@ -75,6 +126,62 @@ class TabsFoundation extends BaseFoundation {
     this._adapter.notifyTabDelete(tabKey);
   }
 
+  determineOrientation(event, tabs) {
+    const {
+      tabPosition
+    } = this.getProps();
+    const isVertical = tabPosition === 'left';
+
+    if (isVertical) {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    } else {
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        this.switchTabOnArrowPress(event, tabs);
+        this.handlePrevent(event);
+      }
+    }
+  }
+
+  handleDeleteKeyDown(event, tabs, itemKey, closable) {
+    if (closable) {
+      this.handleTabDelete(itemKey);
+
+      const index = _indexOfInstanceProperty(tabs).call(tabs, event.target); // Move focus to next element after deletion
+      // If the element is the last removable tab, focus to its previous tab
+
+
+      if (tabs.length !== 1) {
+        tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();
+      }
+    }
+  }
+
+  switchTabOnArrowPress(event, tabs) {
+    const index = _indexOfInstanceProperty(tabs).call(tabs, event.target);
+
+    const direction = {
+      "ArrowLeft": -1,
+      "ArrowUp": -1,
+      "ArrowRight": 1,
+      "ArrowDown": 1
+    };
+
+    if (direction[event.key]) {
+      if (index !== undefined) {
+        if (tabs[index + direction[event.key]]) {
+          tabs[index + direction[event.key]].focus();
+        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+          tabs[tabs.length - 1].focus(); // focus last tab
+        } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
+          tabs[0].focus(); // focus first tab
+        }
+      }
+    }
+  }
+
 }
 
 export default TabsFoundation;

package/lib/es/tabs/tabs.css

@@ -101,6 +101,10 @@
   width: 0;
   height: 0;
 }
+.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
@@ -130,6 +134,10 @@
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
   border-bottom: 2px solid var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
   border-bottom: 2px solid var(--semi-color-fill-1);
 }
@@ -156,6 +164,10 @@
   border-left: 2px solid var(--semi-color-fill-0);
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
   border-left: 2px solid var(--semi-color-fill-1);
   background-color: var(--semi-color-fill-1);
@@ -241,6 +253,10 @@
 .semi-tabs-bar-card .semi-tabs-tab:hover {
   background: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-card .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-card .semi-tabs-tab:active {
   background: var(--semi-color-fill-1);
 }
@@ -263,6 +279,10 @@
   border: none;
   background-color: var(--semi-color-fill-0);
 }
+.semi-tabs-bar-button .semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
 .semi-tabs-bar-button .semi-tabs-tab:active {
   background-color: var(--semi-color-fill-1);
 }
@@ -283,6 +303,9 @@
   width: 100%;
   overflow: hidden;
 }
+.semi-tabs-pane:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
   display: none;
 }

package/lib/es/tabs/tabs.scss

@@ -124,6 +124,11 @@ $module: #{$prefix}-tabs;
                     width: 0;
                     height: 0;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
             }
         }
         
@@ -164,6 +169,11 @@ $module: #{$prefix}-tabs;
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
                 
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -202,6 +212,11 @@ $module: #{$prefix}-tabs;
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
                 
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -327,6 +342,11 @@ $module: #{$prefix}-tabs;
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background: $color-tabs_tab_card-bg-active;
@@ -365,6 +385,11 @@ $module: #{$prefix}-tabs;
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
@@ -393,13 +418,17 @@ $module: #{$prefix}-tabs;
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-    
+
     &-pane {
         width: 100%;
         overflow: hidden;
         // position: absolute;
         // flex-shrink: 0;
         // position: absolute;
+
+        &:focus-visible {
+            outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+        }
     }
     
     &-pane-inactive,

package/lib/es/tabs/variables.scss

@@ -44,6 +44,8 @@ $color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 -
 $color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
 $color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
 
+$color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签轮廓 - 聚焦
+
 
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
@@ -54,6 +56,9 @@ $width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部
 $width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
 
 $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+$width-tabs-outline: 2px; // 聚焦轮廓宽度
+$width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
+$width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高

package/lib/es/tag/tag.css

@@ -19,6 +19,9 @@
   height: 20px;
   padding: 2px 8px;
 }
+.semi-tag-default:focus-visible, .semi-tag-small:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-large {
   font-size: 12px;
   line-height: 16px;
@@ -26,6 +29,9 @@
   padding: 4px 8px;
   height: 24px;
 }
+.semi-tag-large:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-invisible {
   display: none;
 }
@@ -392,6 +398,10 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-solid .semi-tag-close {
+  color: var(--semi-color-white);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/es/tag/tag.scss

@@ -25,12 +25,18 @@ $types: "ghost", "solid", "light";
         @include font-size-small;
         height: $height-tag_small;
         padding: $spacing-tag_small-paddingY $spacing-tag_small-paddingX;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-large {
         @include font-size-small;
         padding: $spacing-tag_large-paddingY $spacing-tag_large-paddingX;
         height: $height-tag_large;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-invisible {
@@ -46,12 +52,13 @@ $types: "ghost", "solid", "light";
     &-close {
         @include all-center;
         color: $color-tag_close-icon-default;
-        padding-left: $spacing-tag_close-paddingLeft; 
+        padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
     }
 
     &-closable {
-        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingLeft;
+        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom
+            $spacing-tag_closable-paddingLeft;
     }
 
     &-avatar-square,
@@ -62,10 +69,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-square {
-        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
+        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight
+            $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
 
         .#{$prefix}-avatar {
-
             & > img {
                 background-color: $color-tag_avatar_square_img-bg-default;
             }
@@ -73,10 +80,12 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle {
-        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
+        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight
+            $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
     }
 
-    &-avatar-square.#{$module}-default, &-avatar-square.#{$module}-small {
+    &-avatar-square.#{$module}-default,
+    &-avatar-square.#{$module}-small {
         .#{$prefix}-avatar {
             width: $height-tag_small;
             height: $height-tag_small;
@@ -179,4 +188,10 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
-@import "./rtl.scss";
+.#{$module}-solid {
+    .#{$module}-close {
+        color: $color-tag_close-icon_deep-default;
+    }
+}
+
+@import './rtl.scss';

package/lib/es/tag/variables.scss

@@ -7,12 +7,16 @@ $color-tag_white-border-default: rgba(var(--semi-grey-2), 0.7); // 白色标签
 $color-tag_white-text-default: var(--semi-color-text-0); // 白色标签文字颜色 - 默认
 $color-tag_white-icon-default: var(--semi-color-text-2); // 白色标签图标颜色 - 默认
 
+$color-tag-outline-focus: var(--semi-color-primary-light-active); // 标签轮廓 - 聚焦
+
 $width-tag_avatar_circle_small: 16px; // 头像标签圆角 - 小尺寸
 $width-tag_avatar_circle_large: 20px; // 头像标签圆角 - 大尺寸
 
 $width-tag-border: 1px; // 标签描边宽度
 $width-tag_avatar-border: $width-tag-border; // 头像标签描边宽度
 
+$width-tag-outline: 2px; // 标签轮廓宽度
+
 $height-tag_small: 20px; // 小尺寸标签高度
 $height-tag_large: 24px; // 大尺寸标签高度
 $radius-tag: var(--semi-border-radius-small); // 标签圆角大小
@@ -24,6 +28,7 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
 $spacing-tag_closable-paddingRight: $spacing-extra-tight; // 可删除的标签删除按钮右侧内边距

package/lib/es/utils/a11y.d.ts

@@ -0,0 +1 @@
+export declare function handlePrevent(event: any): void;

package/lib/es/utils/a11y.js

@@ -0,0 +1,4 @@
+export function handlePrevent(event) {
+  event.stopPropagation();
+  event.preventDefault();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.11.0",
+    "version": "2.12.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0",
+        "@douyinfe/semi-animation": "^2.12.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f7a5cae3d9190faff4a08c5a4da23927a1ab86e5",
+    "gitHead": "2a4f34115b9dd03fc3c40b1edcc421bf64a3024b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/tabs/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { noop } from 'lodash';
+import { get, noop } from 'lodash';
 
 export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     collectPane: () => void;
@@ -72,6 +72,95 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
     handleTabDelete(tabKey: string): void {
         this._adapter.notifyTabDelete(tabKey);
     }
+
+    handlePrevent = (event: any) => {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    handleKeyDown = (event: any, itemKey: string, closable: boolean) => {
+        const tabs = [...event.target.parentNode.childNodes].filter(item => {
+            return get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && item.ariaDisabled!=="true";
+        });
+
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "ArrowUp":
+            case "ArrowDown":
+                this.determineOrientation(event, tabs);
+                break;
+            case "Backspace":
+            case "Delete":
+                this.handleDeleteKeyDown(event, tabs, itemKey, closable);
+                break;
+            case "Enter":
+            case " ":
+                this.handleTabClick(itemKey, event);
+                this.handlePrevent(event);
+                break;
+            case "Home":
+                tabs[0].focus(); // focus first tab
+                this.handlePrevent(event);
+                break;
+            case "End":
+                tabs[tabs.length - 1].focus(); // focus last tab
+                this.handlePrevent(event);
+                break;
+        }
+    }
+
+    determineOrientation(event: any, tabs: HTMLElement[]): void {
+        const { tabPosition } = this.getProps();
+        const isVertical = tabPosition === 'left';
+
+        if (isVertical) {
+            if (event.key ===  "ArrowUp" || event.key ===  "ArrowDown") {
+                this.switchTabOnArrowPress(event, tabs);
+                this.handlePrevent(event);
+            }
+        } else {
+            if (event.key ===  "ArrowLeft" || event.key === "ArrowRight") {
+                this.switchTabOnArrowPress(event, tabs);
+                this.handlePrevent(event);
+            }
+        }
+    }
+
+    handleDeleteKeyDown(event:any, tabs: HTMLElement[], itemKey: string, closable: boolean): void {
+        if (closable) {
+            this.handleTabDelete(itemKey);
+            const index = tabs.indexOf(event.target);
+            // Move focus to next element after deletion
+            // If the element is the last removable tab, focus to its previous tab
+            if (tabs.length !== 1 ){
+                tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus();   
+            }
+        }
+    }
+
+    switchTabOnArrowPress(event: any, tabs: HTMLElement[]): void {
+        const index = tabs.indexOf(event.target);
+
+        const direction = {
+            "ArrowLeft": -1,
+            "ArrowUp": -1,
+            "ArrowRight": 1,
+            "ArrowDown": 1,
+        };
+
+        if (direction[event.key]) {
+            if (index !== undefined) {
+                if (tabs[index + direction[event.key]]) {
+                    tabs[index+ direction[event.key]].focus();
+                } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                    tabs[tabs.length - 1].focus(); // focus last tab
+                } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
+                    tabs[0].focus(); // focus first tab
+                }
+            }
+        }
+    }
 }
 
 export default TabsFoundation;

package/tabs/tabs.scss

@@ -124,6 +124,11 @@ $module: #{$prefix}-tabs;
                     width: 0;
                     height: 0;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
             }
         }
         
@@ -164,6 +169,11 @@ $module: #{$prefix}-tabs;
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
                 
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -202,6 +212,11 @@ $module: #{$prefix}-tabs;
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
                 
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
@@ -327,6 +342,11 @@ $module: #{$prefix}-tabs;
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background: $color-tabs_tab_card-bg-active;
@@ -365,6 +385,11 @@ $module: #{$prefix}-tabs;
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
             
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
@@ -393,13 +418,17 @@ $module: #{$prefix}-tabs;
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-    
+
     &-pane {
         width: 100%;
         overflow: hidden;
         // position: absolute;
         // flex-shrink: 0;
         // position: absolute;
+
+        &:focus-visible {
+            outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+        }
     }
     
     &-pane-inactive,

package/tabs/variables.scss

@@ -44,6 +44,8 @@ $color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 -
 $color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
 $color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
 
+$color-tabs_tab-outline-focus: var(--semi-color-primary-light-active); // 页签轮廓 - 聚焦
+
 
 $font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
 $font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
@@ -54,6 +56,9 @@ $width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部
 $width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
 
 $width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+$width-tabs-outline: 2px; // 聚焦轮廓宽度
+$width-tabs-outline-offset: -2px; // 聚焦轮廓偏移宽度
+$width-tabs_bar_line-outline-offset: -1px; // 线条式页签聚焦轮廓偏移宽度
 
 $height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
 $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高

package/tag/tag.scss

@@ -25,12 +25,18 @@ $types: "ghost", "solid", "light";
         @include font-size-small;
         height: $height-tag_small;
         padding: $spacing-tag_small-paddingY $spacing-tag_small-paddingX;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-large {
         @include font-size-small;
         padding: $spacing-tag_large-paddingY $spacing-tag_large-paddingX;
         height: $height-tag_large;
+        &:focus-visible {
+            outline: $width-tag-outline solid $color-tag-outline-focus;
+        }
     }
 
     &-invisible {
@@ -46,12 +52,13 @@ $types: "ghost", "solid", "light";
     &-close {
         @include all-center;
         color: $color-tag_close-icon-default;
-        padding-left: $spacing-tag_close-paddingLeft; 
+        padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
     }
 
     &-closable {
-        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingLeft;
+        padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingRight $spacing-tag_closable-paddingBottom
+            $spacing-tag_closable-paddingLeft;
     }
 
     &-avatar-square,
@@ -62,10 +69,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-square {
-        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
+        padding: $spacing-tag_avatar_square-paddingTop $spacing-tag_avatar_square-paddingRight
+            $spacing-tag_avatar_square-paddingBottom $spacing-tag_avatar_square-paddingLeft;
 
         .#{$prefix}-avatar {
-
             & > img {
                 background-color: $color-tag_avatar_square_img-bg-default;
             }
@@ -73,10 +80,12 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle {
-        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
+        padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingRight
+            $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingLeft;
     }
 
-    &-avatar-square.#{$module}-default, &-avatar-square.#{$module}-small {
+    &-avatar-square.#{$module}-default,
+    &-avatar-square.#{$module}-small {
         .#{$prefix}-avatar {
             width: $height-tag_small;
             height: $height-tag_small;
@@ -179,4 +188,10 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
-@import "./rtl.scss";
+.#{$module}-solid {
+    .#{$module}-close {
+        color: $color-tag_close-icon_deep-default;
+    }
+}
+
+@import './rtl.scss';

package/tag/variables.scss

@@ -7,12 +7,16 @@ $color-tag_white-border-default: rgba(var(--semi-grey-2), 0.7); // 白色标签
 $color-tag_white-text-default: var(--semi-color-text-0); // 白色标签文字颜色 - 默认
 $color-tag_white-icon-default: var(--semi-color-text-2); // 白色标签图标颜色 - 默认
 
+$color-tag-outline-focus: var(--semi-color-primary-light-active); // 标签轮廓 - 聚焦
+
 $width-tag_avatar_circle_small: 16px; // 头像标签圆角 - 小尺寸
 $width-tag_avatar_circle_large: 20px; // 头像标签圆角 - 大尺寸
 
 $width-tag-border: 1px; // 标签描边宽度
 $width-tag_avatar-border: $width-tag-border; // 头像标签描边宽度
 
+$width-tag-outline: 2px; // 标签轮廓宽度
+
 $height-tag_small: 20px; // 小尺寸标签高度
 $height-tag_large: 24px; // 大尺寸标签高度
 $radius-tag: var(--semi-border-radius-small); // 标签圆角大小
@@ -24,6 +28,7 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
 $spacing-tag_closable-paddingRight: $spacing-extra-tight; // 可删除的标签删除按钮右侧内边距

package/utils/a11y.ts

@@ -0,0 +1,4 @@
+export function handlePrevent(event: any)  {
+    event.stopPropagation();
+    event.preventDefault();
+}