@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/lib/cjs/navigation/navigation.scss

@@ -569,6 +569,7 @@ $module: #{$prefix}-navigation;
             & > .#{$prefix}-button {
                 padding-left: $spacing-navigation_footer_collapse_btn_inner-paddingX;
                 padding-right: $spacing-navigation_footer_collapse_btn_inner-paddingX;
+                color: $color-navigation_footer_icon-default;
             }
         }
 

package/lib/cjs/navigation/variables.scss

@@ -65,7 +65,7 @@ $spacing-navigation_sub_item_left_toggle_marginRight:$spacing-tight; // 顶部
 $color-navigation-bg-default: var(--semi-color-nav-bg); // 导航栏背景色
 $color-navigation_border-default: var(--semi-color-border); // 导航栏分割线色
 $color-navigation_header-text-default: var(--semi-color-text-0); // 导航栏 header 文字颜色
-$color-navigation_footer_icon-default: var(--semi-color-text-2); // 导航栏 footer 图标颜色
+$color-navigation_footer_icon-default: var(--semi-color-text-1); // 导航栏 footer 图标颜色
 $color-navigation_itemL1-bg-default: transparent; // 导航栏一级菜单项背景色
 $color-navigation_itemL1-text-default: var(--semi-color-text-0); // 导航栏一级菜单项文字颜色
 $color-navigation_itemL1_icon-default: var(--semi-color-text-2); // 导航栏一级菜单项图标颜色

package/lib/cjs/notification/notification.css

@@ -59,7 +59,7 @@
   width: 24px;
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -101,7 +101,7 @@
 .semi-notification-notice-title {
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
@@ -121,7 +121,7 @@
 .semi-notification-notice-content {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: var(--semi-color-text-1);
   word-wrap: break-word;
@@ -137,7 +137,7 @@
   display: flex;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: pointer;
 }
 .semi-notification-notice-detail {

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

@@ -10,6 +10,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     previousY: any;
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
+    private _syncScrollOverflowCache;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
     getReversedItems: () => any;
     handleCollapseOverflow(): void;

package/lib/cjs/overflowList/foundation.js

@@ -34,11 +34,21 @@ class OverflowListFoundation extends _foundation.default {
     } = this.getProps();
     const {
       visibleState,
-      overflow
+      overflow,
+      scrollOverflow
     } = this.getStates();
     if (!this.isScrollMode()) {
       return overflow;
     }
+    // Scroll mode relies on IntersectionObserver to compute visibility.
+    // During recalculation (e.g. items changed, or before observer fires),
+    // keep last computed overflow to avoid UI flicker (tabs arrows/menu state).
+    if (!visibleState || visibleState.size === 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -47,11 +57,49 @@ class OverflowListFoundation extends _foundation.default {
     });
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // If no item is visible (e.g. initial layout not ready or list out of viewport),
+    // treat it as "unknown" and keep last computed overflow to avoid wrong enabling.
+    if (visibleStart < 0 || visibleEnd < 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const overflowList = [];
     overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
     overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
     return overflowList;
   }
+  _syncScrollOverflowCache(nextVisibleState) {
+    if (!this.isScrollMode()) {
+      return;
+    }
+    const {
+      items
+    } = this.getProps();
+    const visibleStateArr = items.map(_ref2 => {
+      let {
+        key
+      } = _ref2;
+      return Boolean(nextVisibleState.get(key));
+    });
+    const visibleStart = visibleStateArr.indexOf(true);
+    const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // No visible items means the result is not reliable; keep cache and stay "calculating"
+    if (visibleStart < 0 || visibleEnd < 0) {
+      this._adapter.updateStates({
+        isScrollOverflowCalculating: true
+      });
+      return;
+    }
+    const overflowList = [];
+    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+    this._adapter.updateStates({
+      scrollOverflow: overflowList,
+      isScrollOverflowCalculating: false
+    });
+  }
   handleIntersect(entries) {
     const visibleState = (0, _fastCopy.default)(this.getState('visibleState'));
     const res = {};
@@ -80,6 +128,8 @@ class OverflowListFoundation extends _foundation.default {
     }
     this.previousY = currentY;
     this._adapter.updateVisibleState(visibleState);
+    // Keep scroll overflow cache in sync for stable UI
+    this._syncScrollOverflowCache(visibleState);
     this._adapter.notifyIntersect(res);
   }
   handleCollapseOverflow() {

package/lib/cjs/pagination/pagination.css

@@ -6,14 +6,14 @@
   list-style: none;
   padding: 0;
   align-items: center;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin-block-start: 0;
   margin-block-end: 0;
 }
 .semi-page-small {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   color: var(--semi-color-text-2);
   padding: 0 0;
@@ -27,7 +27,7 @@
 .semi-page-item {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-width: 32px;
   border: 0px solid transparent;
   cursor: pointer;
@@ -104,7 +104,7 @@
 .semi-page-total {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
 }
 .semi-page-prev, .semi-page-next {
@@ -119,7 +119,7 @@
   margin-left: 24px;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/cjs/popconfirm/popconfirm.css

@@ -18,7 +18,7 @@
 .semi-popconfirm-header-title {
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
   margin-bottom: 8px;
   color: var(--semi-color-text-0);

package/lib/cjs/popover/popover.css

@@ -31,7 +31,7 @@
   border-radius: var(--semi-border-radius-medium);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   opacity: 0;
 }
 .semi-popover-wrapper-show {

package/lib/cjs/radio/radio.css

@@ -5,7 +5,7 @@
   box-sizing: border-box;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   display: inline-flex;
   column-gap: 8px;
@@ -291,7 +291,7 @@
 .semi-radioGroup {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-radioGroup-vertical {
   display: flex;

package/lib/cjs/scrollList/itemFoundation.js

@@ -81,6 +81,12 @@ class ItemFoundation extends _foundation.default {
         const scrollRect = scrollWrapper.getBoundingClientRect();
         const lastRect = lastNode.getBoundingClientRect();
         const listHeight = lastRect.height * list.length;
+        // Guard against environments where layout is not computed
+        // (e.g. jsdom returns all-zero rects), which would otherwise
+        // make `baseTop += listHeight` a no-op and loop forever.
+        if (listHeight <= 0) {
+          return 0;
+        }
         let baseTop = lastRect.top;
         let count = 0;
         while (baseTop <= scrollRect.top + scrollRect.height * ratio) {
@@ -113,6 +119,12 @@ class ItemFoundation extends _foundation.default {
         const scrollRect = scrollWrapper.getBoundingClientRect();
         const firstRect = firstNode.getBoundingClientRect();
         const listHeight = firstRect.height * list.length;
+        // Guard against environments where layout is not computed
+        // (e.g. jsdom returns all-zero rects), which would otherwise
+        // make `baseTop -= listHeight` a no-op and loop forever.
+        if (listHeight <= 0) {
+          return 0;
+        }
         let baseTop = firstRect.top;
         let count = 0;
         while (baseTop + firstRect.height >= scrollRect.top - scrollRect.height * ratio) {

package/lib/cjs/scrollList/scrollList.css

@@ -10,7 +10,7 @@
   overflow: hidden;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   user-select: none;
   display: flex;
   flex-direction: column;
@@ -26,7 +26,7 @@
   color: var(--semi-color-text-0);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-scrolllist-body {
   display: flex;

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

@@ -54,7 +54,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     constructor(adapter: SelectAdapter);
     _keydownHandler: (...arg: any[]) => void | null;
     init(): void;
-    focus(optionsForOpen?: BasicOptionProps[]): void;
+    focus(optionsForOpen?: BasicOptionProps[], openDropdown?: boolean): void;
     _focusTrigger(): void;
     destroy(): void;
     _setDropdownWidth(): void;

package/lib/cjs/select/foundation.js

@@ -46,15 +46,40 @@ class SelectFoundation extends _foundation.default {
       this.focus(originalOptions);
     }
   }
-  focus(optionsForOpen) {
+  focus(optionsForOpen, openDropdown) {
     const isFilterable = this._isFilterable();
     const isMultiple = this._isMultiple();
     const {
       isOpen
     } = this.getStates();
+    const {
+      searchPosition
+    } = this.getProps();
+    // Default to true if not specified (backward compatibility)
+    const shouldOpenDropdown = openDropdown !== false;
     this._adapter.updateFocusState(true);
     this._adapter.setIsFocusInContainer(false);
     if (isFilterable) {
+      /**
+       * When openDropdown is false, we only want to "refocus" the Select
+       * without changing dropdown visibility.
+       *
+       * NOTE: For searchPosition='dropdown', the search input is rendered in dropdown,
+       * so we should NOT toggle trigger input(showInput) here, otherwise it may affect
+       * tabIndex / focusability unexpectedly.
+       */
+      if (!shouldOpenDropdown) {
+        if (searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER) {
+          if (isMultiple) {
+            this.focusInput();
+          } else {
+            this.toggle2SearchInput(true);
+          }
+        } else {
+          this._focusTrigger();
+        }
+        return;
+      }
       if (isMultiple) {
         // when filter and multiple, focus input and open dropdown
         this.focusInput();
@@ -1092,7 +1117,8 @@ class SelectFoundation extends _foundation.default {
       this.clearInput(e);
     }
     // after click showClear button, the select need to be focused
-    this.focus();
+    // but don't open dropdown to avoid focus state confusion
+    this.focus(undefined, false);
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();

package/lib/cjs/select/select.css

@@ -4,7 +4,7 @@
 .semi-select-option {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-all;
   padding-left: 12px;
   padding-right: 12px;
@@ -110,7 +110,7 @@
 .semi-select-large .semi-select-selection {
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-select-open, .semi-select-focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -184,7 +184,7 @@
 .semi-select-selection {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 100%;
   display: flex;
   align-items: center;
@@ -309,7 +309,7 @@
   color: var(--semi-color-text-2);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
@@ -340,7 +340,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
   flex-shrink: 0;
   white-space: nowrap;
@@ -454,7 +454,7 @@
   padding-right: 16px;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: default;
 }
 .semi-select-group:not(:nth-of-type(1)) {

package/lib/cjs/sideSheet/sideSheet.css

@@ -4,7 +4,7 @@
 .semi-sidesheet {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: fixed;
   margin: 0;
   top: 0;
@@ -59,7 +59,7 @@
   margin: 0;
   font-size: 18px;
   line-height: 24px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 18px;
   color: var(--semi-color-text-0);

package/lib/cjs/sidebar/sidebar.css

@@ -34,7 +34,7 @@
   flex: 1;
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
 }
 .semi-sidebar-container-header-closeBtn {
@@ -86,7 +86,7 @@
 .semi-sidebar-mcp-configure-content-header-count {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   vertical-align: middle;
   color: var(--semi-color-text-2);
 }
@@ -124,14 +124,14 @@
 .semi-sidebar-mcp-configure-content-item-content-label {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
 .semi-sidebar-mcp-configure-content-item-content-desc {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-0);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -176,7 +176,7 @@
   -webkit-box-orient: vertical;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-0);
   font-weight: 600;
 }
@@ -193,7 +193,7 @@
 .semi-sidebar-annotation-item-footer-text {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-0);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -212,7 +212,7 @@
   justify-content: center;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
 }
 .semi-sidebar-annotation-item-text {
@@ -233,7 +233,7 @@
   -webkit-box-orient: vertical;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
 }
 .semi-sidebar-annotation-item-video {
@@ -288,13 +288,13 @@
   border-radius: 4px;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-bg-0);
 }
 .semi-sidebar-annotation-item-video-title {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-0);
 }
 .semi-sidebar-code-content {
@@ -522,7 +522,7 @@
 .semi-sidebar-detail-header-title {
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
 }
 .semi-sidebar-detail-header-right {

package/lib/cjs/slider/foundation.js

@@ -27,6 +27,8 @@ class SliderFoundation extends _foundation.default {
         min,
         max
       } = this._adapter.getProps();
+      // Percent always increases with value, independent of visual direction.
+      // UI layer decides whether to use `left` or `right` to place elements.
       const minPercent = range ? (value[0] - min) / (max - min) : (value - min) / (max - min);
       const maxPercent = range ? (value[1] - min) / (max - min) : 1;
       return {
@@ -140,6 +142,8 @@ class SliderFoundation extends _foundation.default {
         verticalReverse,
         range
       } = this._adapter.getProps();
+      const direction = this._adapter.getContext('direction');
+      const isRTL = direction === 'rtl' && !vertical;
       const value = this._adapter.getState('currentValue');
       const currentPos = this.transValueToPos(value);
       const {
@@ -156,6 +160,9 @@ class SliderFoundation extends _foundation.default {
       let startPos;
       if (vertical && verticalReverse) {
         startPos = sliderY + len;
+      } else if (isRTL) {
+        // In RTL mode, start from right (sliderX + sliderWidth)
+        startPos = sliderX + len;
       } else {
         startPos = vertical ? sliderY : sliderX;
       }
@@ -163,11 +170,14 @@ class SliderFoundation extends _foundation.default {
       let endPos;
       if (vertical && verticalReverse) {
         endPos = sliderY;
+      } else if (isRTL) {
+        // In RTL mode, end at left (sliderX)
+        endPos = sliderX;
       } else {
         endPos = vertical ? sliderY + sliderHeight : sliderX + sliderWidth;
       }
       //   endPos = chooseMovePos === 'min' && isDrag && range ? currentPos[1] : endPos;
-      if (vertical && verticalReverse) {
+      if (vertical && verticalReverse || isRTL) {
         if (position >= startPos) {
           position = startPos;
         } else if (position <= endPos) {
@@ -200,6 +210,8 @@ class SliderFoundation extends _foundation.default {
         step,
         verticalReverse
       } = this._adapter.getProps();
+      const direction = this._adapter.getContext('direction');
+      const isRTL = direction === 'rtl' && !vertical;
       const {
         sliderX,
         sliderY,
@@ -212,6 +224,9 @@ class SliderFoundation extends _foundation.default {
       if (vertical && verticalReverse) {
         //isMin = !isMin;
         stepValue = (startPos + len - pos) / len * (max - min) + min;
+      } else if (isRTL) {
+        // In RTL mode, position is calculated from right to left
+        stepValue = (startPos + len - pos) / len * (max - min) + min;
       } else {
         stepValue = (pos - startPos) / len * (max - min) + min;
       }
@@ -248,6 +263,8 @@ class SliderFoundation extends _foundation.default {
         range,
         verticalReverse
       } = this._adapter.getProps();
+      const direction = this._adapter.getContext('direction');
+      const isRTL = direction === 'rtl' && !vertical;
       const {
         sliderX,
         sliderY,
@@ -256,10 +273,22 @@ class SliderFoundation extends _foundation.default {
       } = this._adapter.getSliderLengths();
       const startPos = vertical ? sliderY : sliderX;
       const len = vertical ? sliderHeight : sliderWidth;
+      const transSingle = val => {
+        const percent = (val - min) / (max - min);
+        if (vertical && verticalReverse) {
+          // Reverse direction in vertical mode
+          return startPos + len - percent * len;
+        }
+        if (isRTL) {
+          // Reverse direction in horizontal RTL
+          return startPos + len - percent * len;
+        }
+        return startPos + percent * len;
+      };
       if (range) {
-        return [(value[0] - min) * len / (max - min) + startPos, (value[1] - min) * len / (max - min) + startPos];
+        return [transSingle(value[0]), transSingle(value[1])];
       } else {
-        return (value - min) * len / (max - min) + startPos;
+        return transSingle(value);
       }
     };
     /**
@@ -582,23 +611,28 @@ class SliderFoundation extends _foundation.default {
       } = this.getStates();
       const {
         step,
-        range
+        range,
+        vertical
       } = this.getProps();
+      const direction = this._adapter.getContext('direction');
+      const isRTL = direction === 'rtl' && !vertical;
       let outputValue;
       switch (event.key) {
         case "ArrowLeft":
         case "ArrowDown":
-          outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+          // In RTL mode, ArrowLeft and ArrowDown should increase value
+          outputValue = isRTL ? this._handleValueIncreaseWithKeyBoard(step, handler) : this._handleValueDecreaseWithKeyBoard(step, handler);
           break;
         case "ArrowRight":
         case "ArrowUp":
-          outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+          // In RTL mode, ArrowRight and ArrowUp should decrease value
+          outputValue = isRTL ? this._handleValueDecreaseWithKeyBoard(step, handler) : this._handleValueIncreaseWithKeyBoard(step, handler);
           break;
         case "PageUp":
-          outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+          outputValue = isRTL ? this._handleValueDecreaseWithKeyBoard(10 * step, handler) : this._handleValueIncreaseWithKeyBoard(10 * step, handler);
           break;
         case "PageDown":
-          outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+          outputValue = isRTL ? this._handleValueIncreaseWithKeyBoard(10 * step, handler) : this._handleValueDecreaseWithKeyBoard(10 * step, handler);
           break;
         case "Home":
           outputValue = this._handleHomeKey(handler);
@@ -719,10 +753,10 @@ class SliderFoundation extends _foundation.default {
       const currentPos = this.transValueToPos(currentValue);
       let isMin = true;
       if (Array.isArray(currentPos)) {
-        // Slide on both sides
-        if (pagePos > currentPos[1] || Math.abs(pagePos - currentPos[0]) > Math.abs(pagePos - currentPos[1])) {
-          isMin = false;
-        }
+        // Choose the nearest handle regardless of ordering (LTR/RTL/verticalReverse)
+        const distToFirst = Math.abs(pagePos - currentPos[0]);
+        const distToSecond = Math.abs(pagePos - currentPos[1]);
+        isMin = distToFirst <= distToSecond;
       }
       if (vertical && verticalReverse) {
         isMin = !isMin;