@douyinfe/semi-foundation 2.96.0 → 2.97.0

package/lib/cjs/datePicker/datePicker.css

@@ -765,10 +765,38 @@
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
+  display: inline-block;
+  max-width: calc(100vw - 32px);
+}
+.semi-datepicker-compact:not(.semi-datepicker-compact-insetInput) {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-container {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month-grid-left,
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month-grid-right {
+  min-width: 216px;
+  max-width: calc(100vw - 32px);
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month {
+  margin-left: auto;
+  margin-right: auto;
 }
 .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam {
   height: calc(100% - 32px);
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  max-height: 256px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
 .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left {
   border-right: 1px solid var(--semi-color-border);
 }
@@ -786,6 +814,16 @@
   box-sizing: border-box;
   height: 48px;
   padding: 12px;
+  width: 100%;
+  max-width: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header button,
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header .semi-button {
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
   display: flex;
@@ -847,9 +885,12 @@
   height: calc(100% - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-navigation {
+  box-sizing: border-box;
   height: 24px;
   padding: 12px;
   padding-bottom: 0;
+  width: 100%;
+  max-width: 100%;
 }
 .semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right {
   width: 24px;
@@ -859,11 +900,22 @@
   min-width: 24px;
   min-height: 24px;
 }
+.semi-datepicker-compact .semi-datepicker-navigation-month {
+  min-width: 0;
+  overflow: hidden;
+}
 .semi-datepicker-compact .semi-datepicker-navigation-month .semi-button {
   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;
   line-height: 20px;
+  max-width: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-navigation-month .semi-button > span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .semi-datepicker-compact .semi-datepicker-month {
   width: 216px;
@@ -1008,7 +1060,9 @@
   color: var(--semi-color-primary);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-month {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1019,7 +1073,9 @@
   max-height: 218px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-date {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1030,7 +1086,9 @@
   max-height: 208px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1041,7 +1099,9 @@
   max-height: 240px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange {
-  max-width: 432px;
+  min-width: min(432px, calc(100vw - 32px));
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1052,7 +1112,9 @@
   max-height: 208px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange {
-  max-width: 432px;
+  min-width: min(432px, calc(100vw - 32px));
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {

package/lib/cjs/datePicker/datePicker.scss

@@ -1129,7 +1129,44 @@ $module-list: #{$prefix}-scrolllist;
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
 
+    // Max width constraint for compact panels
+    $compact-max-width: calc(100vw - 32px);
+
+    // Make the compact panel shrink-to-fit its contents.
+    // This ensures the popover background/container expands together with
+    // long locale texts instead of letting inner buttons visually overflow.
+    display: inline-block;
+    max-width: $compact-max-width;
+
+    // Ensure the popover expands to fit this compact datepicker
+    &:not(&-insetInput) {
+        width: max-content;
+    }
+
+    .#{$module}-container {
+        // Keep flex layout but allow the container to size by content.
+        width: max-content;
+    }
+
     .#{$module}-month-grid {
+        // Let the month grid contribute its intrinsic width to the popover.
+        width: max-content;
+
+        .#{$module}-month-grid-left,
+        .#{$module}-month-grid-right {
+            min-width: $width-datepicker_month_compact;
+            // Keep the current compact width as the baseline,
+            // but allow the panel to grow to fit long locale texts.
+            // When reaching viewport limit, month title will ellipsis.
+            max-width: $compact-max-width;
+        }
+
+        // Keep calendar body centered when panel grows
+        // without breaking navigation layout in range mode.
+        .#{$module}-month {
+            margin-left: auto;
+            margin-right: auto;
+        }
 
         &[x-type="dateTime"],
         &[x-type="dateTimeRange"] {
@@ -1139,6 +1176,18 @@ $module-list: #{$prefix}-scrolllist;
             }
         }
 
+        // Allow yam (year-month scrolllist) panel to expand with content in compact mode
+        .#{$module}-yam {
+            // Use relative positioning so parent can expand to fit content width
+            // Height is constrained to prevent scrolllist from expanding too much
+            position: relative;
+            width: 100%;
+            max-width: 100%;
+            max-height: $height-datepicker_yam_panel_compact;
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1169,6 +1218,18 @@ $module-list: #{$prefix}-scrolllist;
             box-sizing: border-box;
             height: $height-datepicker_yam_panel_header_compact;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
+            width: 100%;
+            max-width: 100%;
+
+            // Constrain the back button to prevent overflow
+            button,
+            .#{$prefix}-button {
+                width: 100%;
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
 
         .#{$module}-yearmonth-body {
@@ -1265,9 +1326,14 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     .#{$module}-navigation {
+        box-sizing: border-box;
         height: $width-datepicker_nav_compact;
         padding: $spacing-datepicker_nav_compact-padding;
         padding-bottom: 0;
+        // In compact mode, keep navigation constrained within each panel
+        // (especially important for dateRange two-column layout).
+        width: 100%;
+        max-width: 100%;
 
         &-left,
         &-right {
@@ -1281,10 +1347,21 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
+            min-width: 0;
+            overflow: hidden;
+
             .#{$prefix}-button {
                 // 覆盖样式，否则会从button继承
                 @include font-size-small;
                 line-height: $lineHeight-datepicker_compact;
+                max-width: 100%;
+
+                > span {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
         }
     }
@@ -1498,7 +1575,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1514,7 +1594,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-date {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1530,7 +1613,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTime {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1546,7 +1632,12 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            // Keep the 2-panel baseline when possible, but cap it to the compact viewport limit.
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1562,7 +1653,11 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTimeRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,

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

@@ -23,7 +23,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     updateArrayField(arrayField: string, updateValue: any): void;
     validate(fieldPaths?: Array<string> | ValidateOptions): Promise<unknown>;
     _formValidate(silent?: boolean): Promise<unknown>;
-    _fieldsValidate(fieldPaths: Array<string>, silent?: boolean): Promise<unknown>;
+    _fieldsValidate(fieldPaths?: Array<string>, silent?: boolean): Promise<unknown>;
     submit(e?: any): void;
     /**
      * Case A：

package/lib/cjs/form/foundation.js

@@ -135,9 +135,9 @@ class FormFoundation extends _foundation.default {
     this.registeredArrayField.set(arrayField, mergeVal);
   }
   validate(fieldPaths) {
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     // Parse options
     let fields;
     let silent = false;
@@ -162,9 +162,9 @@ class FormFoundation extends _foundation.default {
     const {
       values
     } = this.data;
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     return new Promise((resolve, reject) => {
       let maybePromisedErrors;
       try {

package/lib/cjs/form/utils.js

@@ -142,6 +142,7 @@ function mergeProps(props) {
       wrapperCol,
       initValue,
       validate,
+      validator,
       /**
        * error、warning、default、success
        */
@@ -173,7 +174,7 @@ function mergeProps(props) {
       pure,
       id
     } = _a,
-    rest = __rest(_a, ["field", "label", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "initValue", "validate", "validateStatus", "trigger", "allowEmptyString", "allowEmpty", "emptyValue", "rules", "onChange", "keepState", "transform", "name", "fieldClassName", "fieldStyle", "noLabel", "noErrorMessage", "isInInputGroup", "stopValidateWithError", "convert", "showValidateIcon", "helpText", "extraText", "extraTextPosition", "pure", "id"]);
+    rest = __rest(_a, ["field", "label", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "initValue", "validate", "validator", "validateStatus", "trigger", "allowEmptyString", "allowEmpty", "emptyValue", "rules", "onChange", "keepState", "transform", "name", "fieldClassName", "fieldStyle", "noLabel", "noErrorMessage", "isInInputGroup", "stopValidateWithError", "convert", "showValidateIcon", "helpText", "extraText", "extraTextPosition", "pure", "id"]);
   // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
   // For any type of field component in Form, the initial value is uniformly passed in through the initValue field.
   // At the same time, the props that may cause component behavior errors are extracted to prevent transparent transmission to the component.
@@ -185,6 +186,8 @@ function mergeProps(props) {
   }
   const required = isRequired(rules);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
+  // `validator` is the recommended name; `validate` is kept as a deprecated alias.
+  const finalValidate = validator || validate;
   return {
     field,
     label,
@@ -197,7 +200,7 @@ function mergeProps(props) {
     noErrorMessage,
     isInInputGroup,
     initValue,
-    validate,
+    validate: finalValidate,
     validateStatus,
     trigger,
     allowEmptyString,

package/lib/cjs/image/previewImageFoundation.d.ts

@@ -41,6 +41,10 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     originImageHeight: any;
     containerWidth: number;
     containerHeight: number;
+    private _initialZoomApplied;
+    private _initialZoomAppliedSrc;
+    private _syncInitialZoomFlagWithSrc;
+    private _clampZoom;
     init(): void;
     _isImageVertical: () => boolean;
     _getContainerBoundingRectSize: () => void;

package/lib/cjs/image/previewImageFoundation.js

@@ -19,6 +19,28 @@ class PreviewImageFoundation extends _foundation.default {
     this.originImageHeight = null;
     this.containerWidth = 0;
     this.containerHeight = 0;
+    // initialZoom should only be applied once per image src (first initialization)
+    this._initialZoomApplied = false;
+    this._initialZoomAppliedSrc = undefined;
+    this._syncInitialZoomFlagWithSrc = () => {
+      const src = this.getProp("src");
+      if (src !== this._initialZoomAppliedSrc) {
+        this._initialZoomAppliedSrc = src;
+        this._initialZoomApplied = false;
+      }
+    };
+    this._clampZoom = zoom => {
+      const {
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const max = typeof maxZoom === 'number' ? maxZoom : 5;
+      const min = typeof minZoom === 'number' ? minZoom : 0.1;
+      if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+        return min;
+      }
+      return Math.min(max, Math.max(min, zoom));
+    };
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
     this._getContainerBoundingRectSize = () => {
       const containerDOM = this._adapter.getContainer();
@@ -46,13 +68,20 @@ class PreviewImageFoundation extends _foundation.default {
     };
     this._getInitialZoom = () => {
       const {
-        ratio
+        ratio,
+        initialZoom
       } = this.getProps();
       let _zoom = 1;
+      // initialZoom is only used for the first initialization of each src
+      this._syncInitialZoomFlagWithSrc();
+      if (!this._initialZoomApplied && typeof initialZoom === 'number' && Number.isFinite(initialZoom) && initialZoom > 0) {
+        this._initialZoomApplied = true;
+        return this._clampZoom(initialZoom);
+      }
       if (ratio === 'adaptation') {
         _zoom = this._getAdaptationZoom();
       }
-      return _zoom;
+      return this._clampZoom(_zoom);
     };
     this.setLoading = loading => {
       this._adapter.setLoading(loading);
@@ -69,6 +98,8 @@ class PreviewImageFoundation extends _foundation.default {
         } = e.target;
         this.originImageHeight = h;
         this.originImageWidth = w;
+        // New image is loaded; allow initialZoom to be applied once for this src
+        this._syncInitialZoomFlagWithSrc();
         this.setState({
           loading: false
         });

package/lib/cjs/image/previewInnerFoundation.d.ts

@@ -48,4 +48,5 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     preloadSingleImage: () => void;
     setLoadSuccessStatus: (src: string) => void;
     onImageLoad: (src: string) => void;
+    private _clampZoom;
 }

package/lib/cjs/image/previewInnerFoundation.js

@@ -204,11 +204,12 @@ class PreviewInnerFoundation extends _foundation.default {
       const {
         zoom
       } = _this.getStates();
-      if (zoom !== newZoom) {
-        notify && _this._adapter.notifyZoom(newZoom, newZoom > zoom);
-        _this._adapter.changeImageZoom(newZoom, e);
+      const nextZoom = _this._clampZoom(newZoom);
+      if (zoom !== nextZoom) {
+        notify && _this._adapter.notifyZoom(nextZoom, nextZoom > zoom);
+        _this._adapter.changeImageZoom(nextZoom, e);
         _this.setState({
-          zoom: newZoom
+          zoom: nextZoom
         });
       }
     };
@@ -327,6 +328,18 @@ class PreviewInnerFoundation extends _foundation.default {
         this.preloadSingleImage();
       }
     };
+    this._clampZoom = zoom => {
+      const {
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const max = typeof maxZoom === 'number' ? maxZoom : 5;
+      const min = typeof minZoom === 'number' ? minZoom : 0.1;
+      if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+        return min;
+      }
+      return Math.min(max, Math.max(min, zoom));
+    };
   }
   beforeShow() {
     this._adapter.registerKeyDownListener();

package/lib/cjs/input/textarea.css

@@ -12,6 +12,11 @@
   background-color: var(--semi-color-fill-0);
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
+.semi-input-textarea-wrapper-resizeX {
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+}
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);
 }
@@ -32,6 +37,9 @@
   color: var(--semi-color-text-2);
   right: 4px;
   height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .semi-input-textarea-wrapper .semi-input-clearbtn > svg {
   pointer-events: none;
@@ -134,6 +142,7 @@
 }
 .semi-input-textarea-autosize {
   overflow: hidden;
+  resize: none;
 }
 .semi-input-textarea-counter {
   font-size: 12px;
@@ -176,6 +185,14 @@
   padding: 0;
   align-items: flex-start;
 }
+.semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+}
+.semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX .semi-input-textarea-content {
+  flex: 0 0 auto;
+}
 .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber {
   flex-shrink: 0;
   padding: 5px 12px;

package/lib/cjs/input/textarea.scss

@@ -16,6 +16,21 @@ $module: #{$prefix}-input;
     transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
+    // When native resize changes textarea width, wrapper (border/clear/counter) should follow.
+    // Default wrapper is `width: 100%`, so it won't grow with textarea. Enable shrink-to-fit.
+    &-resizeX {
+        // Keep original textarea wrapper formatting (stacking counter, etc.),
+        // only shrink-to-fit width so border follows horizontal resize.
+        // Using inline-flex here may change internal layout and cause clear/counter misalignment.
+        display: inline-block;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    &-resizeY {
+        // Keep default width behavior; vertical resize doesn't require wrapper width change.
+    }
+
     &:hover {
         background-color: $color-input_default-bg-hover;
     }
@@ -40,6 +55,10 @@ $module: #{$prefix}-input;
         color: $color-textarea-icon-default;
         right: $spacing-textarea-icon-right;
         height: $height-textarea-default;
+        // Center the icon within the clearbtn area
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         & > svg {
             pointer-events: none;
@@ -130,6 +149,7 @@ $module: #{$prefix}-input;
 
 .#{$module}-textarea {
     position: relative;
+    // resize is now controlled by resize prop, default to none for backward compatibility
     resize: none;
     // min-height: $height-input_default;
     padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
@@ -177,6 +197,8 @@ $module: #{$prefix}-input;
 
     &-autosize {
         overflow: hidden;
+        // When autosize is enabled, force resize to none to avoid conflicts
+        resize: none;
     }
 
     &-counter {
@@ -235,6 +257,19 @@ $module: #{$prefix}-input;
     padding: 0;
     align-items: flex-start;
 
+    &.#{$module}-textarea-wrapper-resizeX {
+        // Keep line number + textarea layout, but let width shrink-to-fit
+        display: inline-flex;
+        width: fit-content;
+        max-width: 100%;
+
+        .#{$module}-textarea-content {
+            flex: 0 0 auto;
+        }
+
+        // Do not force a minimum width here; allow the control to fit narrow containers.
+    }
+
     .#{$module}-textarea-lineNumber {
         flex-shrink: 0;
         padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;

package/lib/cjs/navigation/navigation.css

@@ -544,7 +544,7 @@
   transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
 }
 .semi-navigation-vertical .semi-navigation-footer {
-  color: var(--semi-color-text-2);
+  color: var(--semi-color-text-1);
   padding-left: 8px;
   padding-right: 8px;
 }
@@ -556,6 +556,7 @@
 .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn > .semi-button {
   padding-left: 8px;
   padding-right: 8px;
+  color: var(--semi-color-text-1);
 }
 .semi-navigation-vertical .semi-navigation-footer-collapsed {
   justify-content: center;

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/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;