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

package/cascader/index.tsx

@@ -122,7 +122,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             PropTypes.shape({
                 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
                 label: PropTypes.any,
-            }),
+            })
         ),
         treeNodeFilterProp: PropTypes.string,
         suffix: PropTypes.node,
@@ -199,7 +199,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: noop,
         onListScroll: noop,
         enableLeafClick: false,
-        'aria-label': 'Cascader'
+        'aria-label': 'Cascader',
     };
 
     options: any;
@@ -247,7 +247,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             /* Keys of loading item */
             loadingKeys: new Set(),
             /* Mark whether this rendering has triggered asynchronous loading of data */
-            loading: false
+            loading: false,
         };
         this.options = {};
         this.isEmpty = false;
@@ -274,10 +274,9 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 }
             },
         };
-        const cascaderAdapter: Pick<CascaderAdapter,
-        'registerClickOutsideHandler'
-        | 'unregisterClickOutsideHandler'
-        | 'rePositionDropdown'
+        const cascaderAdapter: Pick<
+            CascaderAdapter,
+            'registerClickOutsideHandler' | 'unregisterClickOutsideHandler' | 'rePositionDropdown'
         > = {
             registerClickOutsideHandler: cb => {
                 const clickOutsideHandler = (e: Event) => {
@@ -368,17 +367,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     }
 
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState) {
-        const {
-            multiple,
-            value,
-            defaultValue,
-            onChangeWithObject,
-            leafOnly,
-            autoMergeValue,
-        } = props;
+        const { multiple, value, defaultValue, onChangeWithObject, leafOnly, autoMergeValue } = props;
         const { prevProps } = prevState;
         let keyEntities = prevState.keyEntities || {};
-        const newState: Partial<CascaderState> = { };
+        const newState: Partial<CascaderState> = {};
         const needUpdate = (name: string) => {
             const firstInProps = isEmpty(prevProps) && name in props;
             const nameHasChange = prevProps && !isEqual(prevProps[name], props[name]);
@@ -408,18 +400,18 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     const realValue = needUpdate('value') ? value : defaultValue;
                     // eslint-disable-next-line max-depth
                     if (Array.isArray(realValue)) {
-                        normallizedValue = Array.isArray(realValue[0]) ?
-                            realValue as SimpleValueType[][] :
-                            [realValue] as SimpleValueType[][];
+                        normallizedValue = Array.isArray(realValue[0])
+                            ? (realValue as SimpleValueType[][])
+                            : ([realValue] as SimpleValueType[][]);
                     } else {
                         normallizedValue = [[realValue]];
                     }
                     // formatValuePath is used to save value of valuePath
                     const formatValuePath: (string | number)[][] = [];
                     normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject ?
-                            (valueItem as CascaderData[]).map(i => i.value) :
-                            valueItem as (string | number)[];
+                        const formatItem: (string | number)[] = onChangeWithObject
+                            ? (valueItem as CascaderData[]).map(i => i.value)
+                            : (valueItem as (string | number)[]);
                         formatValuePath.push(formatItem);
                     });
                     // formatKeys is used to save key of value
@@ -480,12 +472,9 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem = (value: string | Array<string>, idx: number, type: string) => {
         const { keyEntities, disabledKeys } = this.state;
         const { size, disabled, displayProp, displayRender, disableStrictly } = this.props;
-        const nodeKey = type === strings.IS_VALUE ?
-            findKeysForValues(value, keyEntities)[0] :
-            value;
-        const isDsiabled = disabled ||
-            keyEntities[nodeKey].data.disabled ||
-            (disableStrictly && disabledKeys.has(nodeKey));
+        const nodeKey = type === strings.IS_VALUE ? findKeysForValues(value, keyEntities)[0] : value;
+        const isDsiabled =
+            disabled || keyEntities[nodeKey].data.disabled || (disableStrictly && disabledKeys.has(nodeKey));
         if (!isEmpty(keyEntities) && !isEmpty(keyEntities[nodeKey])) {
             const tagCls = cls(`${prefixcls}-selection-tag`, {
                 [`${prefixcls}-selection-tag-disabled`]: isDsiabled,
@@ -493,7 +482,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             // custom render tags
             if (isFunction(displayRender)) {
                 return displayRender(keyEntities[nodeKey], idx);
-            // default render tags
+                // default render tags
             } else {
                 return (
                     <Tag
@@ -517,25 +506,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     renderTagInput() {
-        const {
-            size,
-            disabled,
-            placeholder,
-            maxTagCount,
-            showRestTagsPopover,
-            restTagsPopoverProps,
-        } = this.props;
-        const {
-            inputValue,
-            checkedKeys,
-            keyEntities,
-            resolvedCheckedKeys
-        } = this.state;
+        const { size, disabled, placeholder, maxTagCount, showRestTagsPopover, restTagsPopoverProps } = this.props;
+        const { inputValue, checkedKeys, keyEntities, resolvedCheckedKeys } = this.state;
         const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
         const tagValue: Array<Array<string>> = [];
-        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
-            ? checkedKeys
-            : resolvedCheckedKeys;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
         [...realKeys].forEach(checkedKey => {
             if (!isEmpty(keyEntities[checkedKey])) {
                 tagValue.push(keyEntities[checkedKey].valuePath);
@@ -548,7 +523,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 disabled={disabled}
                 size={size}
                 // TODO Modify logic, not modify type
-                value={tagValue as unknown as string[]}
+                value={(tagValue as unknown) as string[]}
                 showRestTagsPopover={showRestTagsPopover}
                 restTagsPopoverProps={restTagsPopoverProps}
                 maxTagCount={maxTagCount}
@@ -556,7 +531,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 inputValue={inputValue}
                 onInputChange={this.handleInputChange}
                 // TODO Modify logic, not modify type
-                onRemove={v => this.handleTagRemove(null, v as unknown as (string | number)[])}
+                onRemove={v => this.handleTagRemove(null, (v as unknown) as (string | number)[])}
                 placeholder={placeholder}
             />
         );
@@ -578,11 +553,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         });
         return (
             <div className={wrappercls}>
-                <Input
-                    ref={this.inputRef as any}
-                    size={size}
-                    {...inputProps}
-                />
+                <Input ref={this.inputRef as any} size={size} {...inputProps} />
             </div>
         );
     }
@@ -612,7 +583,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             checkedKeys,
             halfCheckedKeys,
             loadedKeys,
-            loadingKeys
+            loadingKeys,
         } = this.state;
         const {
             filterTreeNode,
@@ -624,7 +595,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             topSlot,
             bottomSlot,
             showNext,
-            multiple
+            multiple,
         } = this.props;
         const searchable = Boolean(filterTreeNode) && isSearching;
         const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
@@ -661,37 +632,29 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderPlusN = (hiddenTag: Array<ReactNode>) => {
         const { disabled, showRestTagsPopover, restTagsPopoverProps } = this.props;
         const plusNCls = cls(`${prefixcls}-selection-n`, {
-            [`${prefixcls}-selection-n-disabled`]: disabled
+            [`${prefixcls}-selection-n-disabled`]: disabled,
         });
-        const renderPlusNChildren = (
-            <span className={plusNCls}>
-                +{hiddenTag.length}
-            </span>
-        );
-        return (
-            showRestTagsPopover && !disabled ?
-                (
-                    <Popover
-                        content={hiddenTag}
-                        showArrow
-                        trigger="hover"
-                        position="top"
-                        autoAdjustOverflow
-                        {...restTagsPopoverProps}
-                    >
-                        {renderPlusNChildren}
-                    </Popover>
-                ) :
-                renderPlusNChildren
+        const renderPlusNChildren = <span className={plusNCls}>+{hiddenTag.length}</span>;
+        return showRestTagsPopover && !disabled ? (
+            <Popover
+                content={hiddenTag}
+                showArrow
+                trigger="hover"
+                position="top"
+                autoAdjustOverflow
+                {...restTagsPopoverProps}
+            >
+                {renderPlusNChildren}
+            </Popover>
+        ) : (
+            renderPlusNChildren
         );
     };
 
     renderMultipleTags = () => {
         const { autoMergeValue, maxTagCount } = this.props;
         const { checkedKeys, resolvedCheckedKeys } = this.state;
-        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
-            ? checkedKeys
-            : resolvedCheckedKeys;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
         const displayTag: Array<ReactNode> = [];
         const hiddenTag: Array<ReactNode> = [];
         [...realKeys].forEach((checkedKey, idx) => {
@@ -720,19 +683,22 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             if (displayRender && typeof displayRender === 'function') {
                 displayText = displayRender(displayPath);
             } else {
-                displayText = displayPath.map((path: ReactNode, index: number)=>(
+                displayText = displayPath.map((path: ReactNode, index: number) => (
                     <Fragment key={`${path}-${index}`}>
-                        {
-                            index<displayPath.length-1
-                                ? <>{path}{separator}</>
-                                : path
-                        }
+                        {index < displayPath.length - 1 ? (
+                            <>
+                                {path}
+                                {separator}
+                            </>
+                        ) : (
+                            path
+                        )}
                     </Fragment>
                 ));
             }
         }
         return displayText;
-    }
+    };
 
     renderSelectContent = () => {
         const { placeholder, filterTreeNode, multiple } = this.props;
@@ -763,7 +729,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return <div className={suffixWrapperCls}>{suffix}</div>;
+        return (
+            <div className={suffixWrapperCls} x-semi-prop="suffix">
+                {suffix}
+            </div>
+        );
     };
 
     renderPrefix = () => {
@@ -778,7 +748,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
+        return (
+            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
+                {labelNode}
+            </div>
+        );
     };
 
     renderCustomTrigger = () => {
@@ -847,7 +821,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     className={clearCls}
                     onClick={this.handleClear}
                     onKeyPress={this.handleClearEnterPress}
-                    role='button'
+                    role="button"
                     tabIndex={0}
                 >
                     <IconClear />
@@ -863,7 +837,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         if (showClearBtn) {
             return null;
         }
-        return arrowIcon ? <div className={cls(`${prefixcls}-arrow`)}>{arrowIcon}</div> : null;
+        return arrowIcon ? (
+            <div className={cls(`${prefixcls}-arrow`)} x-semi-prop="arrowIcon">
+                {arrowIcon}
+            </div>
+        ) : null;
     };
 
     renderSelection = () => {
@@ -885,40 +863,40 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const { isOpen, isFocus, isInput, checkedKeys } = this.state;
         const filterable = Boolean(filterTreeNode);
         const useCustomTrigger = typeof triggerRender === 'function';
-        const classNames = useCustomTrigger ?
-            cls(className) :
-            cls(prefixcls, className, {
-                [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
-                [`${prefixcls}-disabled`]: disabled,
-                [`${prefixcls}-single`]: true,
-                [`${prefixcls}-filterable`]: filterable,
-                [`${prefixcls}-error`]: validateStatus === 'error',
-                [`${prefixcls}-warning`]: validateStatus === 'warning',
-                [`${prefixcls}-small`]: size === 'small',
-                [`${prefixcls}-large`]: size === 'large',
-                [`${prefixcls}-with-prefix`]: prefix || insetLabel,
-                [`${prefixcls}-with-suffix`]: suffix,
-            });
-        const mouseEvent = showClear ?
-            {
-                onMouseEnter: () => this.handleMouseOver(),
-                onMouseLeave: () => this.handleMouseLeave(),
-            } :
-            {};
+        const classNames = useCustomTrigger
+            ? cls(className)
+            : cls(prefixcls, className, {
+                  [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
+                  [`${prefixcls}-disabled`]: disabled,
+                  [`${prefixcls}-single`]: true,
+                  [`${prefixcls}-filterable`]: filterable,
+                  [`${prefixcls}-error`]: validateStatus === 'error',
+                  [`${prefixcls}-warning`]: validateStatus === 'warning',
+                  [`${prefixcls}-small`]: size === 'small',
+                  [`${prefixcls}-large`]: size === 'large',
+                  [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+                  [`${prefixcls}-with-suffix`]: suffix,
+              });
+        const mouseEvent = showClear
+            ? {
+                  onMouseEnter: () => this.handleMouseOver(),
+                  onMouseLeave: () => this.handleMouseLeave(),
+              }
+            : {};
         const sectionCls = cls(`${prefixcls}-selection`, {
             [`${prefixcls}-selection-multiple`]: multiple && !isEmpty(checkedKeys),
         });
-        const inner = useCustomTrigger ?
-            this.renderCustomTrigger() :
-            [
-                <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
-                <Fragment key={'selection'}>
-                    <div className={sectionCls}>{this.renderSelectContent()}</div>
-                </Fragment>,
-                <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
-                <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
-                <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
-            ];
+        const inner = useCustomTrigger
+            ? this.renderCustomTrigger()
+            : [
+                  <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
+                  <Fragment key={'selection'}>
+                      <div className={sectionCls}>{this.renderSelectContent()}</div>
+                  </Fragment>,
+                  <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
+                  <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
+                  <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
+              ];
         /**
          * Reasons for disabling the a11y eslint rule:
          * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
@@ -934,12 +912,12 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 aria-errormessage={this.props['aria-errormessage']}
                 aria-label={this.props['aria-label']}
                 aria-labelledby={this.props['aria-labelledby']}
-                aria-describedby={this.props["aria-describedby"]}
+                aria-describedby={this.props['aria-describedby']}
                 aria-required={this.props['aria-required']}
                 id={id}
                 {...mouseEvent}
                 // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-                role='combobox'
+                role="combobox"
                 tabIndex={0}
             >
                 {inner}

package/cascader/item.tsx

@@ -291,7 +291,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
             <LocaleConsumer componentName="Cascader">
                 {(locale: Locale['Cascader']) => (
                     <ul className={`${prefixcls} ${prefixcls}-empty`} key={'empty-list'}>
-                        <span className={`${prefixcls}-label`}>
+                        <span className={`${prefixcls}-label`} x-semi-prop="emptyContent">
                             {emptyContent || locale.emptyText}
                         </span>
                     </ul>

package/checkbox/checkbox.tsx

@@ -203,10 +203,21 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
+        const name = inGroup && this.context.checkboxGroup.name;
+        const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
+
         const renderContent = () => (
             <>
-                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
+                {children ? (
+                    <span id={this.addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
+                        {children}
+                    </span>
+                ) : null}
+                {extra ? (
+                    <div id={this.extraId} className={extraCls} x-semi-prop="extra">
+                        {extra}
+                    </div>
+                ) : null}
             </>
         );
         return (

package/collapsible/index.tsx

@@ -92,7 +92,14 @@ const Collapsible = (props: CollapsibleProps) => {
         const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
         return (
             <div style={wrapperstyle} className={wrapperCls} ref={ref}>
-                <div ref={setHeight} style={{ overflow: 'hidden' }} id={id}>{children}</div>
+                <div
+                    ref={setHeight}
+                    style={{ overflow: 'hidden' }} 
+                    id={id}
+                    x-semi-prop="children"
+                >
+                    {children}
+                </div>
             </div>
         );
     };

package/datePicker/dateInput.tsx

@@ -172,6 +172,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             <div
                 className={`${prefixCls}-range-input-prefix`}
                 onClick={e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)}
+                x-semi-prop="prefix,insetLabel"
             >
                 {labelNode}
             </div>

package/datePicker/datePicker.tsx

@@ -653,13 +653,21 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
-                {topSlot && <div className={`${cssClasses.PREFIX}-topSlot`}>{topSlot}</div>}
+                {topSlot && (
+                    <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
+                        {topSlot}
+                    </div>
+                )}
                 {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
-                {this.adapter.typeIsYearOrMonth() ?
-                    this.renderYearMonthPanel(locale, localeCode) :
-                    this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
+                {this.adapter.typeIsYearOrMonth()
+                    ? this.renderYearMonthPanel(locale, localeCode)
+                    : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
                 {this.renderQuickControls()}
-                {bottomSlot && <div className={`${cssClasses.PREFIX}-bottomSlot`}>{bottomSlot}</div>}
+                {bottomSlot && (
+                    <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
+                        {bottomSlot}
+                    </div>
+                )}
                 {this.renderFooter(locale, localeCode)}
             </div>
         );

package/dist/css/semi.css

@@ -17270,6 +17270,10 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
 }
@@ -17299,6 +17303,10 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
 }
@@ -17325,6 +17333,10 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
@@ -17410,6 +17422,10 @@ body[theme-mode=dark], body .semi-always-dark {
 .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);
 }
@@ -17432,6 +17448,10 @@ body[theme-mode=dark], body .semi-always-dark {
   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);
 }
@@ -17452,6 +17472,9 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
 }
@@ -17564,6 +17587,9 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
@@ -17571,6 +17597,9 @@ body[theme-mode=dark], body .semi-always-dark {
   padding: 4px 8px;
   height: 24px;
 }
+.semi-tag-large:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-tag-invisible {
   display: none;
 }
@@ -17937,6 +17966,10 @@ body[theme-mode=dark], body .semi-always-dark {
   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;