diff --git a/components/alert/style/index.less b/components/alert/style/index.less
index 7223850443..9fa3fa367d 100644
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -9,7 +9,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 8px 15px;
+  padding: @alert-padding-vertical @alert-padding-horizontal;
   word-wrap: break-word;
   border-radius: @border-radius-base;
 
diff --git a/components/anchor/anchor.component.ts b/components/anchor/anchor.component.ts
index 75f69afd40..e565b6bd82 100644
--- a/components/anchor/anchor.component.ts
+++ b/components/anchor/anchor.component.ts
@@ -40,6 +40,7 @@ interface Section {
   top: number;
 }
 
+const VISIBLE_CLASSNAME = 'ant-anchor-ink-ball-visible';
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'anchor';
 const sharpMatcherRegx = /#([^#]+)$/;
 
@@ -244,13 +245,12 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
   }
 
   private setVisible(): void {
-    const visible = this.visible;
-    const visibleClassname = 'visible';
     if (this.ink) {
+      const visible = this.visible;
       if (visible) {
-        this.renderer.addClass(this.ink.nativeElement, visibleClassname);
+        this.renderer.addClass(this.ink.nativeElement, VISIBLE_CLASSNAME);
       } else {
-        this.renderer.removeClass(this.ink.nativeElement, visibleClassname);
+        this.renderer.removeClass(this.ink.nativeElement, VISIBLE_CLASSNAME);
       }
     }
   }
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
index 92d0042b20..3cdf42229c 100644
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@@ -44,7 +44,7 @@
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
 
-      &.visible {
+      &.@{ant-prefix}-anchor-ink-ball-visible {
         display: inline-block;
       }
     }
diff --git a/components/button/style/index.less b/components/button/style/index.less
index e4f2bf9355..d629d886ac 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -289,4 +289,5 @@ a.@{btn-prefix-cls} {
   }
 }
 
+@import './space-compact';
 @import './rtl';
diff --git a/components/button/style/space-compact.less b/components/button/style/space-compact.less
new file mode 100644
index 0000000000..0fac996dc9
--- /dev/null
+++ b/components/button/style/space-compact.less
@@ -0,0 +1,88 @@
+@import '../../style/mixins/index';
+
+@btn-prefix-cls: ~'@{ant-prefix}-btn';
+
+// Button in Space.Compact
+.@{btn-prefix-cls} {
+  .compact-item(@btn-prefix-cls);
+
+  // make `btn-icon-only` not too narrow
+  &-icon-only&-compact-item {
+    flex: none;
+  }
+
+  // Special styles for Primary Button
+  &-compact-item.@{btn-prefix-cls}-primary {
+    &:not([disabled]) + &:not([disabled]) {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        top: -@border-width-base;
+        left: -@border-width-base;
+        display: inline-block;
+        width: @border-width-base;
+        height: calc(100% + @border-width-base * 2);
+        background-color: @btn-group-border;
+        content: ' ';
+      }
+    }
+  }
+
+  // ----------RTL----------
+  &-compact-item-rtl {
+    &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.@{btn-prefix-cls}-sm {
+      &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    // ----------RTL Special styles for Primary Button----------
+    &.@{btn-prefix-cls}-primary {
+      &:not([disabled]) + &:not([disabled]) {
+        &::after {
+          right: -@border-width-base;
+        }
+      }
+    }
+  }
+
+  // Button in Space.Compact when direction=vertical
+  .compact-item-vertical(@btn-prefix-cls);
+
+  // Special styles for Primary Button
+  &-compact-vertical-item {
+    &.@{btn-prefix-cls}-primary {
+      &:not([disabled]) + &:not([disabled]) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: -@border-width-base;
+          left: -@border-width-base;
+          display: inline-block;
+          width: calc(100% + @border-width-base * 2);
+          height: @border-width-base;
+          background-color: @btn-group-border;
+          content: ' ';
+        }
+      }
+    }
+  }
+}
diff --git a/components/card/style/index.less b/components/card/style/index.less
index cc4995fc8f..c05691eb65 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -243,6 +243,7 @@
     }
 
     &-detail {
+      flex: 1;
       overflow: hidden;
 
       > div:not(:last-child) {
diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
index 031383b2b6..acc0ffe62f 100644
--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
+@carousel-dot-margin: 4px;
 
 .@{carousel-prefix-cls} {
   .reset-component();
@@ -180,6 +181,7 @@
     display: flex !important;
     justify-content: center;
     margin-right: 15%;
+    margin-bottom: 0;
     margin-left: 15%;
     padding-left: 0;
     list-style: none;
@@ -200,9 +202,7 @@
       box-sizing: content-box;
       width: @carousel-dot-width;
       height: @carousel-dot-height;
-      margin: 0 2px;
-      margin-right: 3px;
-      margin-left: 3px;
+      margin: 0 @carousel-dot-margin;
       padding: 0;
       text-align: center;
       text-indent: -999px;
@@ -210,6 +210,7 @@
       transition: all 0.5s;
 
       button {
+        position: relative;
         display: block;
         width: 100%;
         height: @carousel-dot-height;
@@ -228,6 +229,15 @@
         &:focus {
           opacity: 0.75;
         }
+
+        &::after {
+          position: absolute;
+          top: -@carousel-dot-margin;
+          right: -@carousel-dot-margin;
+          bottom: -@carousel-dot-margin;
+          left: -@carousel-dot-margin;
+          content: '';
+        }
       }
 
       &.slick-active {
@@ -270,7 +280,7 @@
     li {
       width: @carousel-dot-height;
       height: @carousel-dot-width;
-      margin: 4px 2px;
+      margin: @carousel-dot-margin 0;
       vertical-align: baseline;
 
       button {
diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
index 1e4822f3e0..9c266567fe 100644
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -100,6 +100,9 @@
       }
     }
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@cascader-prefix-cls);
 }
 
 @import './rtl';
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index 2cccb86fbb..93df869010 100644
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@@ -64,6 +64,13 @@
       }
     }
 
+    .@{collapse-prefix-cls}-icon-collapsible-only {
+      cursor: default;
+      .@{collapse-prefix-cls}-expand-icon {
+        cursor: pointer;
+      }
+    }
+
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
         padding-left: @padding-sm;
diff --git a/components/core/animation/fade.ts b/components/core/animation/fade.ts
index ec8c435117..c3dfd249bc 100644
--- a/components/core/animation/fade.ts
+++ b/components/core/animation/fade.ts
@@ -8,6 +8,6 @@ import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@
 import { AnimationDuration } from './animation-consts';
 
 export const fadeMotion: AnimationTriggerMetadata = trigger('fadeMotion', [
-  transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
-  transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
+  transition('* => enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
+  transition('* => leave, :leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
 ]);
diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
index f428f299d6..a8a4462f9d 100644
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@@ -318,7 +318,6 @@
   &-range-arrow {
     position: absolute;
     z-index: 1;
-    display: none;
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;
@@ -357,6 +356,9 @@
       }
     }
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@picker-prefix-cls, null, ~'@{picker-prefix-cls}-focused');
 }
 
 @import './panel';
diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
index 8d59a38af2..7edb73c18b 100644
--- a/components/date-picker/style/status.less
+++ b/components/date-picker/style/status.less
@@ -11,7 +11,7 @@
 ) {
   &.@{picker-prefix-cls} {
     &,
-    &:not([disabled]):hover {
+    &:not(.@{picker-prefix-cls}-disabled):hover {
       background-color: @background-color;
       border-color: @border-color;
     }
diff --git a/components/divider/style/index.less b/components/divider/style/index.less
index e0160642dd..42bca4c0a7 100644
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -29,6 +29,7 @@
 
   &-horizontal&-with-text {
     display: flex;
+    align-items: center;
     margin: 16px 0;
     color: @heading-color;
     font-weight: 500;
@@ -41,7 +42,6 @@
     &::before,
     &::after {
       position: relative;
-      top: 50%;
       width: 50%;
       border-top: @border-width-base solid transparent;
       // Chrome not accept `inherit` in `border-top`
@@ -54,24 +54,20 @@
 
   &-horizontal&-with-text-left {
     &::before {
-      top: 50%;
       width: @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
   }
 
   &-horizontal&-with-text-right {
     &::before {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: @divider-orientation-margin;
     }
   }
diff --git a/components/drawer/style/motion.less b/components/drawer/style/motion.less
index fc392b484a..9df86b75ba 100644
--- a/components/drawer/style/motion.less
+++ b/components/drawer/style/motion.less
@@ -53,7 +53,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(-100%);
+        &-start {
+          transform: translateX(-100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -75,7 +77,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(100%);
+        &-start {
+          transform: translateX(100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -97,7 +101,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(-100%);
+        &-start {
+          transform: translateY(-100%) !important;
+        }
 
         &-active {
           transform: translateY(0);
@@ -119,7 +125,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(100%);
+        &-start {
+          transform: translateY(100%) !important;
+        }
 
         &-active {
           transform: translateY(0);
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index 10f8b9db11..726539185a 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -221,7 +221,7 @@
         background-color: @item-hover-bg;
       }
 
-      &-disabled {
+      &&-disabled {
         color: @disabled-color;
         cursor: not-allowed;
 
diff --git a/components/image/image-config.ts b/components/image/image-config.ts
index 03c842d467..796fb2c61c 100644
--- a/components/image/image-config.ts
+++ b/components/image/image-config.ts
@@ -5,6 +5,7 @@
 
 import { NzConfigKey } from 'ng-zorro-antd/core/config';
 
+/** @deprecated Will be removed in v19. */
 export const FADE_CLASS_NAME_MAP = {
   enter: 'ant-fade-enter',
   enterActive: 'ant-fade-enter-active',
@@ -12,5 +13,6 @@ export const FADE_CLASS_NAME_MAP = {
   leaveActive: 'ant-fade-leave-active'
 };
 
+/** @deprecated Will be removed in v19. */
 export const IMAGE_PREVIEW_MASK_CLASS_NAME = 'ant-image-preview-mask';
 export const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'image';
diff --git a/components/image/image-preview-ref.ts b/components/image/image-preview-ref.ts
index d1644fd259..7f764513cf 100644
--- a/components/image/image-preview-ref.ts
+++ b/components/image/image-preview-ref.ts
@@ -6,7 +6,7 @@
 import { ESCAPE, hasModifierKey, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Subject } from 'rxjs';
-import { filter, take, takeUntil } from 'rxjs/operators';
+import { filter, switchMap, take, takeUntil } from 'rxjs/operators';
 
 import { NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewComponent } from './image-preview.component';
@@ -32,7 +32,7 @@ export class NzImagePreviewRef {
       .subscribe(event => {
         event.preventDefault();
         if (event.keyCode === ESCAPE) {
-          this.close();
+          previewInstance.onClose();
         }
         if (event.keyCode === LEFT_ARROW) {
           this.prev();
@@ -46,21 +46,15 @@ export class NzImagePreviewRef {
       this.overlayRef.dispose();
     });
 
-    previewInstance.containerClick.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
-      this.close();
-    });
-
-    previewInstance.closeClick.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
-      this.close();
-    });
-
-    previewInstance.animationStateChanged
+    previewInstance.closeClick
       .pipe(
-        filter(event => event.phaseName === 'done' && event.toState === 'leave'),
-        take(1)
+        take(1),
+        switchMap(() => previewInstance.animationStateChanged),
+        filter(event => event.phaseName === 'done'),
+        takeUntil(this.destroy$)
       )
       .subscribe(() => {
-        this.dispose();
+        this.close();
       });
   }
 
@@ -77,10 +71,6 @@ export class NzImagePreviewRef {
   }
 
   close(): void {
-    this.previewInstance.startLeaveAnimation();
-  }
-
-  private dispose(): void {
     this.destroy$.next();
     this.overlayRef.dispose();
   }
diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
index 93effd71d8..7a66eac07e 100644
--- a/components/image/image-preview.component.ts
+++ b/components/image/image-preview.component.ts
@@ -5,7 +5,6 @@
 
 import { AnimationEvent } from '@angular/animations';
 import { CdkDrag, CdkDragEnd, CdkDragHandle } from '@angular/cdk/drag-drop';
-import { OverlayRef } from '@angular/cdk/overlay';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -28,7 +27,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { FADE_CLASS_NAME_MAP, NZ_CONFIG_MODULE_NAME } from './image-config';
+import { NZ_CONFIG_MODULE_NAME } from './image-config';
 import { NzImage, NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewRef } from './image-preview-ref';
 import { NzImageScaleStep, NzImageUrl } from './image.directive';
@@ -56,87 +55,99 @@ const NZ_DEFAULT_ROTATE = 0;
   animations: [fadeMotion],
   standalone: true,
   template: `
-    <div class="ant-image-preview">
-      <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>
-      <div class="ant-image-preview-content">
-        <div class="ant-image-preview-body">
-          <ul class="ant-image-preview-operations">
-            @for (option of operations; track option) {
-              <li
-                class="ant-image-preview-operations-operation"
-                [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
-                (click)="option.onClick()"
-              >
-                <span
-                  class="ant-image-preview-operations-icon"
-                  nz-icon
-                  [nzType]="option.icon"
-                  [nzRotate]="option.rotate ?? 0"
-                  nzTheme="outline"
-                ></span>
-              </li>
-            }
-          </ul>
-          <div
-            class="ant-image-preview-img-wrapper"
-            #imagePreviewWrapper
-            cdkDrag
-            [style.transform]="previewImageWrapperTransform"
-            [cdkDragFreeDragPosition]="position"
-            (cdkDragEnded)="onDragEnd($event)"
+    <div class="ant-image-preview-mask"></div>
+
+    <div class="ant-image-preview-operations-wrapper">
+      @if (images.length > 1) {
+        <div
+          class="ant-image-preview-switch-left"
+          [class.ant-image-preview-switch-left-disabled]="index <= 0"
+          (click)="onSwitchLeft($event)"
+        >
+          <span nz-icon nzType="left" nzTheme="outline"></span>
+        </div>
+        <div
+          class="ant-image-preview-switch-right"
+          [class.ant-image-preview-switch-right-disabled]="index >= images.length - 1"
+          (click)="onSwitchRight($event)"
+        >
+          <span nz-icon nzType="right" nzTheme="outline"></span>
+        </div>
+      }
+
+      <ul class="ant-image-preview-operations">
+        @if (images.length > 1) {
+          <li class="ant-image-preview-operations-progress">{{ index + 1 }} / {{ images.length }}</li>
+        }
+
+        @for (option of operations; track option) {
+          <li
+            class="ant-image-preview-operations-operation"
+            [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
+            (click)="option.onClick()"
           >
-            @for (image of images; track image; let imageIndex = $index) {
-              @if (imageIndex === index) {
-                <img
-                  cdkDragHandle
-                  class="ant-image-preview-img"
-                  #imgRef
-                  [attr.src]="sanitizerResourceUrl(image.src)"
-                  [attr.srcset]="image.srcset"
-                  [attr.alt]="image.alt"
-                  [style.width]="image.width"
-                  [style.height]="image.height"
-                  [style.transform]="previewImageTransform"
-                />
+            <span
+              class="ant-image-preview-operations-icon"
+              nz-icon
+              [nzType]="option.icon"
+              [nzRotate]="option.rotate ?? 0"
+              nzTheme="outline"
+            ></span>
+          </li>
+        }
+      </ul>
+    </div>
+
+    <div
+      class="ant-image-preview-wrap"
+      tabindex="-1"
+      (click)="maskClosable && $event.target === $event.currentTarget && onClose()"
+    >
+      <div class="ant-image-preview" role="dialog" aria-modal="true">
+        <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>
+        <div class="ant-image-preview-content">
+          <div class="ant-image-preview-body">
+            <div
+              class="ant-image-preview-img-wrapper"
+              #imagePreviewWrapper
+              cdkDrag
+              [style.transform]="previewImageWrapperTransform"
+              [cdkDragFreeDragPosition]="position"
+              (cdkDragEnded)="onDragEnd($event)"
+            >
+              @for (image of images; track image; let imageIndex = $index) {
+                @if (imageIndex === index) {
+                  <img
+                    cdkDragHandle
+                    class="ant-image-preview-img"
+                    #imgRef
+                    [attr.src]="sanitizerResourceUrl(image.src)"
+                    [attr.srcset]="image.srcset"
+                    [attr.alt]="image.alt"
+                    [style.width]="image.width"
+                    [style.height]="image.height"
+                    [style.transform]="previewImageTransform"
+                  />
+                }
               }
-            }
+            </div>
           </div>
-          @if (images.length > 1) {
-            <ng-container>
-              <div
-                class="ant-image-preview-switch-left"
-                [class.ant-image-preview-switch-left-disabled]="index <= 0"
-                (click)="onSwitchLeft($event)"
-              >
-                <span nz-icon nzType="left" nzTheme="outline"></span>
-              </div>
-              <div
-                class="ant-image-preview-switch-right"
-                [class.ant-image-preview-switch-right-disabled]="index >= images.length - 1"
-                (click)="onSwitchRight($event)"
-              >
-                <span nz-icon nzType="right" nzTheme="outline"></span>
-              </div>
-            </ng-container>
-          }
         </div>
+        <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>
       </div>
-      <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>
     </div>
   `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
-    class: 'ant-image-preview-wrap',
+    class: 'ant-image-preview-root',
     '[class.ant-image-preview-moving]': 'isDragging',
     '[style.zIndex]': 'config.nzZIndex',
     '[@.disabled]': 'config.nzNoAnimation',
-    '[@fadeMotion]': 'animationState',
+    '[@fadeMotion]': `visible ? 'enter' : 'leave'`,
     '(@fadeMotion.start)': 'onAnimationStart($event)',
-    '(@fadeMotion.done)': 'onAnimationDone($event)',
-    tabindex: '-1',
-    role: 'document'
+    '(@fadeMotion.done)': 'onAnimationDone($event)'
   },
   imports: [NzIconModule, CdkDragHandle, CdkDrag],
   providers: [NzDestroyService]
@@ -150,7 +161,6 @@ export class NzImagePreviewComponent implements OnInit {
   index = 0;
   isDragging = false;
   visible = true;
-  animationState: 'void' | 'enter' | 'leave' = 'enter';
   animationStateChanged = new EventEmitter<AnimationEvent>();
   scaleStepMap: Map<NzImageUrl, NzImageScaleStep> = new Map<NzImageUrl, NzImageScaleStep>();
 
@@ -212,7 +222,6 @@ export class NzImagePreviewComponent implements OnInit {
   zoomOutDisabled = false;
   position = { ...initialPosition };
   previewRef!: NzImagePreviewRef;
-  containerClick = new EventEmitter<void>();
   closeClick = new EventEmitter<void>();
 
   @ViewChild('imgRef') imageRef!: ElementRef<HTMLImageElement>;
@@ -235,11 +244,9 @@ export class NzImagePreviewComponent implements OnInit {
 
   constructor(
     private ngZone: NgZone,
-    private host: ElementRef<HTMLElement>,
     private cdr: ChangeDetectorRef,
     public nzConfigService: NzConfigService,
     public config: NzImagePreviewOptions,
-    private overlayRef: OverlayRef,
     private destroy$: NzDestroyService,
     private sanitizer: DomSanitizer
   ) {
@@ -255,14 +262,6 @@ export class NzImagePreviewComponent implements OnInit {
 
   ngOnInit(): void {
     this.ngZone.runOutsideAngular(() => {
-      fromEvent(this.host.nativeElement, 'click')
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(event => {
-          if (event.target === event.currentTarget && this.maskClosable && this.containerClick.observers.length) {
-            this.ngZone.run(() => this.containerClick.emit());
-          }
-        });
-
       fromEvent(this.imagePreviewWrapper.nativeElement, 'mousedown')
         .pipe(takeUntil(this.destroy$))
         .subscribe(() => {
@@ -315,6 +314,7 @@ export class NzImagePreviewComponent implements OnInit {
   }
 
   onClose(): void {
+    this.visible = false;
     this.closeClick.emit();
   }
 
@@ -386,29 +386,13 @@ export class NzImagePreviewComponent implements OnInit {
   }
 
   onAnimationStart(event: AnimationEvent): void {
-    if (event.toState === 'enter') {
-      this.setEnterAnimationClass();
-    } else if (event.toState === 'leave') {
-      this.setLeaveAnimationClass();
-    }
-
     this.animationStateChanged.emit(event);
   }
 
   onAnimationDone(event: AnimationEvent): void {
-    if (event.toState === 'enter') {
-      this.setEnterAnimationClass();
-    } else if (event.toState === 'leave') {
-      this.setLeaveAnimationClass();
-    }
     this.animationStateChanged.emit(event);
   }
 
-  startLeaveAnimation(): void {
-    this.animationState = 'leave';
-    this.markForCheck();
-  }
-
   onDragEnd(event: CdkDragEnd): void {
     this.isDragging = false;
     const width = this.imageRef.nativeElement.offsetWidth * this.zoom;
@@ -453,28 +437,6 @@ export class NzImagePreviewComponent implements OnInit {
     this.zoomOutDisabled = this.zoom <= 1;
   }
 
-  private setEnterAnimationClass(): void {
-    if (this.animationDisabled) {
-      return;
-    }
-    const backdropElement = this.overlayRef.backdropElement;
-    if (backdropElement) {
-      backdropElement.classList.add(FADE_CLASS_NAME_MAP.enter);
-      backdropElement.classList.add(FADE_CLASS_NAME_MAP.enterActive);
-    }
-  }
-
-  private setLeaveAnimationClass(): void {
-    if (this.animationDisabled) {
-      return;
-    }
-    const backdropElement = this.overlayRef.backdropElement;
-    if (backdropElement) {
-      backdropElement.classList.add(FADE_CLASS_NAME_MAP.leave);
-      backdropElement.classList.add(FADE_CLASS_NAME_MAP.leaveActive);
-    }
-  }
-
   private handlerImageTransformationWhileZoomingWithMouse(event: WheelEvent, deltaY: number): void {
     let scaleValue: number;
     const imageElement = this.imageRef.nativeElement;
diff --git a/components/image/image.service.ts b/components/image/image.service.ts
index 8edc022a88..152302feba 100644
--- a/components/image/image.service.ts
+++ b/components/image/image.service.ts
@@ -10,7 +10,7 @@ import { Injectable, Injector, Optional } from '@angular/core';
 
 import { ImageConfig, NzConfigService } from 'ng-zorro-antd/core/config';
 
-import { IMAGE_PREVIEW_MASK_CLASS_NAME, NZ_CONFIG_MODULE_NAME } from './image-config';
+import { NZ_CONFIG_MODULE_NAME } from './image-config';
 import { NzImage, NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewRef } from './image-preview-ref';
 import { NzImagePreviewComponent } from './image-preview.component';
@@ -70,11 +70,9 @@ export class NzImageService {
   private createOverlay(config: NzImagePreviewOptions): OverlayRef {
     const globalConfig = (this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) as ImageConfig) || {};
     const overLayConfig = new OverlayConfig({
-      hasBackdrop: true,
       scrollStrategy: this.overlay.scrollStrategies.block(),
       positionStrategy: this.overlay.position().global(),
       disposeOnNavigation: config.nzCloseOnNavigation ?? globalConfig.nzCloseOnNavigation ?? true,
-      backdropClass: IMAGE_PREVIEW_MASK_CLASS_NAME,
       direction: config.nzDirection || globalConfig.nzDirection || this.directionality.value
     });
 
diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts
index 1d49dc36b2..eb9e996bbe 100644
--- a/components/image/image.spec.ts
+++ b/components/image/image.spec.ts
@@ -6,16 +6,7 @@
 import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement, NgModule, NgZone, ViewChild } from '@angular/core';
-import {
-  ComponentFixture,
-  discardPeriodicTasks,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  inject,
-  TestBed,
-  tick
-} from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import {
@@ -24,9 +15,9 @@ import {
   RightCircleOutline,
   RotateLeftOutline,
   RotateRightOutline,
+  SwapOutline,
   ZoomInOutline,
-  ZoomOutOutline,
-  SwapOutline
+  ZoomOutOutline
 } from '@ant-design/icons-angular/icons';
 
 import { NzConfigService } from 'ng-zorro-antd/core/config';
@@ -244,16 +235,12 @@ describe('Preview', () => {
     overlayContainer.ngOnDestroy();
   });
 
-  function getOverlayBackDropElement(): HTMLDivElement {
-    return overlayContainerElement.querySelector('.ant-image-preview-mask')! as HTMLDivElement;
-  }
-
   function getPreviewWrapElement(): HTMLElement {
     return overlayContainerElement.querySelector('.ant-image-preview-wrap')! as HTMLElement;
   }
 
-  function getPreviewElement(): HTMLDivElement {
-    return overlayContainerElement.querySelector('.ant-image-preview')! as HTMLDivElement;
+  function getPreviewRootElement(): HTMLDivElement {
+    return overlayContainerElement.querySelector('.ant-image-preview-root')! as HTMLDivElement;
   }
 
   function getPreviewImageElement(): HTMLImageElement {
@@ -273,13 +260,13 @@ describe('Preview', () => {
       fixture.detectChanges();
       context.nzImage.getElement().nativeElement.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).not.toBeTruthy();
       context.disablePreview = false;
       fixture.detectChanges();
       context.nzImage.getElement().nativeElement.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).toBeTruthy();
     }));
 
@@ -290,13 +277,13 @@ describe('Preview', () => {
       const image = debugElement.nativeElement.querySelector('img');
       image.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).not.toBeTruthy();
       context.disablePreview = false;
       fixture.detectChanges();
       image.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).toBeTruthy();
     }));
   });
@@ -308,7 +295,7 @@ describe('Preview', () => {
       const image = debugElement.nativeElement.querySelector('img');
       image.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       const imageElement = getPreviewImageElement();
       const operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       const close = operations[0];
@@ -338,7 +325,7 @@ describe('Preview', () => {
       tickChanges();
       dispatchFakeEvent(close, 'click');
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).not.toBeTruthy();
       discardPeriodicTasks();
       flush();
@@ -351,7 +338,7 @@ describe('Preview', () => {
       let image = debugElement.nativeElement.querySelectorAll('img');
       image[2].click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let imageElement = getPreviewImageElement();
       const operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       const zoomIn = operations[1];
@@ -373,7 +360,7 @@ describe('Preview', () => {
       let image = debugElement.nativeElement.querySelector('img');
       image.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let imageElement = getPreviewImageElement();
       const operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       const zoomIn = operations[1];
@@ -391,7 +378,7 @@ describe('Preview', () => {
       let image = debugElement.nativeElement.querySelectorAll('img');
       image[0].click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let imageElement = getPreviewImageElement();
       const operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       const zoomIn = operations[1];
@@ -410,7 +397,7 @@ describe('Preview', () => {
       let image = debugElement.nativeElement.querySelectorAll('img');
       image[2].click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let imageElement = getPreviewImageElement();
       let operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       let zoomIn = operations[1];
@@ -429,7 +416,7 @@ describe('Preview', () => {
       let image = debugElement.nativeElement.querySelectorAll('img');
       image[3].click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let imageElement = getPreviewImageElement();
       let operations = overlayContainerElement.querySelectorAll('.ant-image-preview-operations-operation');
       let zoomIn = operations[1];
@@ -483,7 +470,7 @@ describe('Preview', () => {
       const previewWrap = getPreviewWrapElement();
       previewWrap.click();
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       expect(previewElement).not.toBeTruthy();
       discardPeriodicTasks();
       flush();
@@ -498,7 +485,7 @@ describe('Preview', () => {
       fixture.detectChanges();
       tick(300);
       fixture.detectChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       const left = previewElement!.querySelector('.ant-image-preview-switch-left')!;
       const right = previewElement!.querySelector('.ant-image-preview-switch-right')!;
       expect(left).toBeTruthy();
@@ -540,7 +527,7 @@ describe('Preview', () => {
       context.createUsingService();
       context.previewRef?.switchTo(1);
       tickChanges();
-      previewElement = getPreviewElement();
+      previewElement = getPreviewRootElement();
       let previewImageElement = getPreviewImageElement();
       expect(previewImageElement.src).toContain(images[1].src);
       context.previewRef?.next();
@@ -571,28 +558,6 @@ describe('Preview', () => {
     }));
   });
 
-  describe('Animation', () => {
-    it('should animation work', fakeAsync(() => {
-      context.firstSrc = SRC;
-      context.secondSrc = QUICK_SRC;
-      tickChanges();
-      context.nzImageGroup.images[0].getElement().nativeElement.click();
-      fixture.detectChanges();
-      flushMicrotasks();
-      const backdropElement = getOverlayBackDropElement();
-      const previewWrapElement = getPreviewWrapElement();
-      expect(backdropElement.classList).toContain('ant-fade-enter');
-      expect(backdropElement.classList).toContain('ant-fade-enter-active');
-      tick(500);
-      previewWrapElement.click();
-      fixture.detectChanges();
-      flushMicrotasks();
-      expect(backdropElement.classList).toContain('ant-fade-leave');
-      expect(backdropElement.classList).toContain('ant-fade-leave-active');
-      flush();
-    }));
-  });
-
   describe('Drag', () => {
     it('should drag released work', fakeAsync(() => {
       context.images = [{ src: QUICK_SRC }];
diff --git a/components/image/style/index.less b/components/image/style/index.less
index 4a66e2e679..0cb27876f5 100644
--- a/components/image/style/index.less
+++ b/components/image/style/index.less
@@ -105,16 +105,19 @@
       z-index: @zindex-image;
     }
 
-    &-operations {
-      .reset-component();
-      position: absolute;
+    &-operations-wrapper {
+      position: fixed;
       top: 0;
       right: 0;
-      z-index: 1;
+      z-index: @zindex-image + 1;
+      width: 100%;
+    }
+
+    &-operations {
+      .reset-component();
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
-      width: 100%;
       color: @image-preview-operation-color;
       list-style: none;
       background: fade(@modal-mask-bg, 10%);
@@ -124,6 +127,11 @@
         margin-left: @control-padding-horizontal;
         padding: @control-padding-horizontal;
         cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          background: fade(@modal-mask-bg, 20%);
+        }
 
         &-disabled {
           color: @image-preview-operation-disabled-color;
@@ -148,40 +156,48 @@
 
     &-switch-left,
     &-switch-right {
-      position: absolute;
+      position: fixed;
       top: 50%;
-      right: 10px;
-      z-index: 1;
+      right: 8px;
+      z-index: @zindex-image + 1;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
-      margin-top: -22px;
       color: @image-preview-operation-color;
       background: fade(@modal-mask-bg, 10%);
       border-radius: 50%;
+      transform: translateY(-50%);
       cursor: pointer;
+      transition: all 0.3s;
       pointer-events: auto;
 
-      &-disabled {
+      &:hover {
+        background: fade(@modal-mask-bg, 20%);
+      }
+
+      &-disabled,
+      &-disabled:hover {
         color: @image-preview-operation-disabled-color;
+        background: fade(@modal-mask-bg, 10%);
         cursor: not-allowed;
         > .@{iconfont-css-prefix} {
           cursor: not-allowed;
         }
       }
+
       > .@{iconfont-css-prefix} {
         font-size: 18px;
       }
     }
 
     &-switch-left {
-      left: 10px;
+      left: 8px;
     }
 
     &-switch-right {
-      right: 10px;
+      right: 8px;
     }
   }
 }
diff --git a/components/input-number/style/affix.less b/components/input-number/style/affix.less
index 357ab94d30..55e4cabe95 100644
--- a/components/input-number/style/affix.less
+++ b/components/input-number/style/affix.less
@@ -45,6 +45,7 @@
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
index 6008890709..3072872517 100644
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@@ -235,6 +235,9 @@
       color: @error-color;
     }
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@input-number-prefix-cls, null, ~'@{input-number-prefix-cls}-focused');
 }
 
 @import './rtl';
diff --git a/components/input/style/affix.less b/components/input/style/affix.less
index d0c621e8fa..be45dbdb5f 100644
--- a/components/input/style/affix.less
+++ b/components/input/style/affix.less
@@ -24,12 +24,11 @@
 
     &-disabled {
       .@{ant-prefix}-input[disabled] {
-        background: transparent;
+        background: rgba(255, 255, 255, 0);
       }
     }
 
-    > input.@{ant-prefix}-input {
-      padding: 0;
+    > .@{ant-prefix}-input {
       font-size: inherit;
       border: none;
       outline: none;
@@ -37,9 +36,14 @@
       &:focus {
         box-shadow: none !important;
       }
+
+      &:not(textarea) {
+        padding: 0;
+      }
     }
 
     &::before {
+      display: inline-block;
       width: 0;
       visibility: hidden;
       content: '\a0';
diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less
index 946541ef4f..c4c3c7631e 100644
--- a/components/input/style/allow-clear.less
+++ b/components/input/style/allow-clear.less
@@ -2,8 +2,8 @@
 @input-prefix-cls: ~'@{ant-prefix}-input';
 
 // ========================= Input =========================
-.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon,
-.@{ant-prefix}-input-clear-icon {
+.@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
+.@{input-prefix-cls}-clear-icon {
   margin: 0;
   color: @disabled-color;
   font-size: @font-size-sm;
@@ -31,11 +31,10 @@
 }
 
 // ======================= TextArea ========================
-.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
-  padding: 0 !important;
-  border: 0 !important;
+.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
+  padding: 0;
 
-  .@{ant-prefix}-input-clear-icon {
+  .@{input-prefix-cls}-clear-icon {
     position: absolute;
     top: 8px;
     right: 8px;
diff --git a/components/input/style/index.less b/components/input/style/index.less
index 36e1c92661..167b300849 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -4,7 +4,6 @@
 @import './affix';
 @import './allow-clear';
 @import './status';
-
 @input-prefix-cls: ~'@{ant-prefix}-input';
 
 // Input styles
@@ -79,6 +78,9 @@
     align-items: center;
     margin: auto;
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@input-prefix-cls);
 }
 
 @import './search-input';
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index fd5f994834..09fc76d9c3 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -336,10 +336,8 @@
       border-radius: 0;
     }
 
-    & > .@{inputClass}-affix-wrapper {
-      display: inline-flex;
-    }
-
+    & > .@{inputClass}-affix-wrapper,
+    & > .@{inputClass}-number-affix-wrapper,
     & > .@{ant-prefix}-picker-range {
       display: inline-flex;
     }
diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
index 06d52022f9..3fd9d6c522 100644
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -68,4 +68,50 @@
   &-small &-button {
     height: @input-height-sm;
   }
+
+  // ===================== Compact Item Customized Styles =====================
+  &.@{input-prefix-cls}-compact-item {
+    &:not(.@{input-prefix-cls}-compact-item-rtl) {
+      &:not(.@{input-prefix-cls}-compact-last-item) {
+        .@{input-prefix-cls}-group-addon {
+          .@{input-prefix-cls}-search-button {
+            margin-right: -@border-width-base;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+
+    &:not(.@{input-prefix-cls}-compact-first-item) {
+      .@{input-prefix-cls},
+      .@{input-prefix-cls}-affix-wrapper {
+        border-radius: 0;
+      }
+    }
+
+    > .@{input-prefix-cls}-group-addon .@{input-prefix-cls}-search-button,
+    > .@{input-prefix-cls},
+    .@{input-prefix-cls}-affix-wrapper {
+      &:hover,
+      &:focus,
+      &:active {
+        z-index: 2;
+      }
+    }
+
+    > .@{input-prefix-cls}-affix-wrapper-focused {
+      z-index: 2;
+    }
+  }
+  // ===================== For RTL Compact Item Customized Styles =====================
+  &.@{input-prefix-cls}-compact-item-rtl {
+    &:not(.@{input-prefix-cls}-compact-last-item) {
+      .@{input-prefix-cls}-group-addon:last-child {
+        .@{input-prefix-cls}-search-button {
+          margin-left: -@border-width-base;
+          border-radius: 0;
+        }
+      }
+    }
+  }
 }
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index a089b545f9..07bf0eaa20 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -667,6 +667,7 @@
       color: @disabled-color !important;
       pointer-events: none;
     }
+
     > .@{menu-prefix-cls}-submenu-title {
       color: @disabled-color !important;
       cursor: not-allowed;
diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less
index dc750b2deb..ef66859950 100644
--- a/components/modal/style/confirm.less
+++ b/components/modal/style/confirm.less
@@ -71,4 +71,9 @@
   &-success &-body > .@{iconfont-css-prefix} {
     color: @success-color;
   }
+
+  // https://github.com/ant-design/ant-design/issues/37329
+  .@{ant-prefix}-zoom-leave .@{confirm-prefix-cls}-btns {
+    pointer-events: none;
+  }
 }
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
index 5954e48855..6020ea4050 100644
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@@ -15,6 +15,7 @@
   top: 0;
   left: 0;
   z-index: @zindex-popover;
+  max-width: 100vw;
   font-weight: normal;
   white-space: normal;
   text-align: left;
@@ -85,27 +86,24 @@
   }
 
   &-inner-content {
+    width: max-content;
+    max-width: 100%;
     padding: @padding-sm @popover-padding-horizontal;
     color: @popover-color;
   }
 
   &-message {
-    position: relative;
+    display: flex;
     padding: 4px 0 12px;
     color: @popover-color;
     font-size: @font-size-base;
-    > .@{iconfont-css-prefix} {
-      position: absolute;
-      top: (
-        4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
-      ); // 4px for padding-top, 4px for vertical middle
+
+    &-icon {
+      display: inline-block;
+      margin-right: 8px;
       color: @warning-color;
       font-size: @font-size-base;
     }
-
-    &-title {
-      padding-left: @font-size-base + 8px;
-    }
   }
 
   &-buttons {
diff --git a/components/popover/style/rtl.less b/components/popover/style/rtl.less
index dece824b82..923309b413 100644
--- a/components/popover/style/rtl.less
+++ b/components/popover/style/rtl.less
@@ -10,9 +10,15 @@
   }
 
   &-message {
+    &-icon {
+      .@{popover-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+
     &-title {
       .@{popover-prefix-cls}-rtl & {
-        padding-right: @font-size-base + 8px;
         padding-left: @padding-md;
       }
     }
diff --git a/components/select/style/index.less b/components/select/style/index.less
index 474101f26c..3fe16e4890 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -325,6 +325,9 @@
   &&-in-form-item {
     width: 100%;
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@select-prefix-cls, ~'@{select-prefix-cls}-selector', ~'@{select-prefix-cls}-focused');
 }
 
 @import './rtl';
diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less
index e9f2fc2fe2..558209c221 100644
--- a/components/select/style/multiple.less
+++ b/components/select/style/multiple.less
@@ -54,6 +54,7 @@
         width: 0;
         margin: @select-multiple-item-spacing-half 0;
         line-height: @select-multiple-item-height;
+        visibility: hidden;
         content: '\a0';
       }
     }
@@ -102,7 +103,8 @@
 
       &-remove {
         .iconfont-mixin();
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         color: @text-color-secondary;
         font-weight: bold;
         font-size: 10px;
@@ -208,12 +210,6 @@
         margin-inline-start: 3px;
       }
     }
-    &.@{select-prefix-cls}-lg {
-      .@{select-prefix-cls}-selection-item {
-        height: @select-multiple-item-height-lg;
-        line-height: @select-multiple-item-height-lg;
-      }
-    }
   }
 
   &-disabled .@{select-prefix-cls}-selection-item-remove {
diff --git a/components/select/style/single.less b/components/select/style/single.less
index 7bf6b36aa1..3b8cbf5cdb 100644
--- a/components/select/style/single.less
+++ b/components/select/style/single.less
@@ -24,7 +24,7 @@
     .@{select-prefix-cls}-selection-placeholder {
       padding: 0;
       line-height: @select-height-without-border;
-      transition: all 0.3s;
+      transition: all .3s, visibility 0s;
     }
 
     .@{select-prefix-cls}-selection-item {
diff --git a/components/space/style/compact.less b/components/space/style/compact.less
new file mode 100644
index 0000000000..4c760f39a0
--- /dev/null
+++ b/components/space/style/compact.less
@@ -0,0 +1,17 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-compact-prefix-cls: ~'@{ant-prefix}-space-compact';
+
+.@{space-compact-prefix-cls} {
+  display: inline-flex;
+
+  &-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &-vertical {
+    flex-direction: column;
+  }
+}
diff --git a/components/space/style/index.less b/components/space/style/index.less
index 842554ca27..fa952a809f 100644
--- a/components/space/style/index.less
+++ b/components/space/style/index.less
@@ -36,4 +36,5 @@
   }
 }
 
+@import './compact';
 @import './rtl';
diff --git a/components/space/style/rtl.less b/components/space/style/rtl.less
index 75aa411b7a..5a2a9fe221 100644
--- a/components/space/style/rtl.less
+++ b/components/space/style/rtl.less
@@ -7,4 +7,8 @@
   &-rtl {
     direction: rtl;
   }
+
+  &-compact-rtl {
+    direction: rtl;
+  }
 }
diff --git a/components/spin/style/index.less b/components/spin/style/index.less
index 2dee02e28e..03db824380 100644
--- a/components/spin/style/index.less
+++ b/components/spin/style/index.less
@@ -10,6 +10,7 @@
   position: absolute;
   display: none;
   color: @primary-color;
+  font-size: 0;
   text-align: center;
   vertical-align: middle;
   opacity: 0;
@@ -43,6 +44,7 @@
         top: 50%;
         width: 100%;
         padding-top: ((@spin-dot-size - @font-size-base) / 2) + 2px;
+        font-size: @font-size-base;
         text-shadow: 0 1px 2px @shadow-color-inverse;
       }
       &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less
index 8d0a487a87..98cc430e63 100644
--- a/components/steps/style/progress.less
+++ b/components/steps/style/progress.less
@@ -4,18 +4,31 @@
   .@{steps-prefix-cls}-item {
     padding-top: 4px;
 
-    .@{steps-prefix-cls}-item-tail {
-      top: 4px !important;
+    & > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      top: 4px;
+      left: @steps-vertical-tail-width + 3;
     }
   }
 
-  &.@{steps-prefix-cls}-horizontal {
-    .@{steps-prefix-cls}-item:first-child {
+  &,
+  &.@{steps-prefix-cls}-small {
+    &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
       padding-bottom: 4px;
       padding-left: 4px;
     }
   }
 
+  &.@{steps-prefix-cls}-small
+    > .@{steps-prefix-cls}-item
+    > .@{steps-prefix-cls}-item-container
+    > .@{steps-prefix-cls}-item-tail {
+    left: @steps-vertical-tail-width-sm + 3;
+  }
+
+  &.@{steps-prefix-cls}-vertical .@{steps-prefix-cls}-item {
+    padding-left: 4px;
+  }
+
   &.@{steps-prefix-cls}-label-vertical {
     .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-tail {
       top: 14px !important;
diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less
index 53a66e71d1..7d92d83cce 100644
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -260,12 +260,28 @@
 }
 
 // RTL Steps with progress
-.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
-  .@{steps-prefix-cls}-item:first-child {
+.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress {
+  &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
     padding-right: 4px;
-    padding-left: 0;
-    &.@{steps-prefix-cls}-item-active {
+    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      right: @steps-vertical-tail-width + 3;
+    }
+  }
+
+  &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item {
+    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      right: @steps-vertical-tail-width-sm + 3;
+    }
+  }
+
+  &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+    .@{steps-prefix-cls}-item:first-child {
       padding-right: 4px;
+      padding-left: 0;
+
+      &.@{steps-prefix-cls}-item-active {
+        padding-right: 4px;
+      }
     }
   }
 }
diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less
index 690169b6f1..8c7d21a1cd 100644
--- a/components/steps/style/vertical.less
+++ b/components/steps/style/vertical.less
@@ -33,7 +33,7 @@
     > .@{steps-prefix-cls}-item-tail {
     position: absolute;
     top: 0;
-    left: @steps-vertical-tail-width;
+    left: @steps-vertical-tail-width - 1; // line width
     width: 1px;
     height: 100%;
     padding: @steps-icon-size + 6px 0 6px;
@@ -63,7 +63,7 @@
     .@{steps-prefix-cls}-item-tail {
       position: absolute;
       top: 0;
-      left: @steps-vertical-tail-width-sm;
+      left: @steps-vertical-tail-width-sm - 1; // line width
       padding: @steps-small-icon-size + 6px 0 6px;
     }
     .@{steps-prefix-cls}-item-title {
diff --git a/components/style/core/motion/slide.less b/components/style/core/motion/slide.less
index 17de58c2c5..7831b4baca 100644
--- a/components/style/core/motion/slide.less
+++ b/components/style/core/motion/slide.less
@@ -3,6 +3,8 @@
   .make-motion(@name, @keyframeName);
   .@{name}-enter,
   .@{name}-appear {
+    transform: scale(0);
+    transform-origin: 0% 0%;
     opacity: 0;
     animation-timing-function: @ease-out-quint;
   }
diff --git a/components/style/mixins/compact-item-vertical.less b/components/style/mixins/compact-item-vertical.less
new file mode 100644
index 0000000000..503b1f061f
--- /dev/null
+++ b/components/style/mixins/compact-item-vertical.less
@@ -0,0 +1,41 @@
+.compact-item-vertical-border-radius(@prefix-cls) {
+  &-item:not(&-first-item):not(&-last-item) {
+    border-radius: 0;
+  }
+
+  &-item&-first-item:not(&-last-item) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-item&-last-item:not(&-first-item) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.compact-item-vertical-border(@prefix-cls) {
+  // border collapse
+  &-item:not(&-last-item) {
+    margin-bottom: -@border-width-base;
+  }
+
+  &-item {
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+
+    &[disabled] {
+      z-index: 0;
+    }
+  }
+}
+
+.compact-item-vertical(@prefix-cls) {
+  &-compact-vertical {
+    .compact-item-vertical-border(@prefix-cls);
+    .compact-item-vertical-border-radius(@prefix-cls);
+  }
+}
diff --git a/components/style/mixins/compact-item.less b/components/style/mixins/compact-item.less
new file mode 100644
index 0000000000..cb49027643
--- /dev/null
+++ b/components/style/mixins/compact-item.less
@@ -0,0 +1,133 @@
+.compact-item-border-radius(@prefix-cls, @bordered-item-cls: null) {
+  & when (@bordered-item-cls = null) {
+    // border-radius
+    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} {
+      border-radius: 0;
+    }
+
+    &-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for first item----------
+    &-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for last item----------
+    &-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  & when (not (@bordered-item-cls = null)) {
+    // border-radius
+    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} > .@{bordered-item-cls} {
+      border-radius: 0;
+    }
+
+    &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for first item----------
+    &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for last item----------
+    &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.compact-item-border(@prefix-cls, @bordered-item-cls: null, @special-open-cls) {
+  & when (@bordered-item-cls = null) {
+    // border collapse
+    &-item:not(&-last-item):not(&-item-rtl) {
+      margin-right: -@border-width-base;
+    }
+
+    // rtl border collapse
+    &-item:not(&-last-item)&-item-rtl {
+      margin-left: -@border-width-base;
+    }
+
+    &-item {
+      &:hover,
+      &:focus,
+      &:active {
+        z-index: 2;
+      }
+
+      // Select has an extra focus className
+      & when (not (@special-item-cls = null)) {
+        &.@{special-item-cls} {
+          z-index: 2;
+        }
+      }
+
+      &[disabled] {
+        z-index: 0;
+      }
+    }
+  }
+
+  & when (not (@bordered-item-cls = null)) {
+    // border collapse
+    &-item:not(&-last-item) {
+      margin-right: -@border-width-base;
+
+      &.@{prefix-cls}-compact-item-rtl {
+        margin-right: 0;
+        margin-left: -@border-width-base;
+      }
+    }
+
+    &-item {
+      &:hover,
+      &:focus,
+      &:active {
+        > * {
+          z-index: 2;
+        }
+      }
+
+      // Select has an special focus-item
+      & when (not (@special-item-cls = null)) {
+        &.@{special-item-cls} > * {
+          z-index: 2;
+        }
+      }
+
+      &[disabled] > * {
+        z-index: 0;
+      }
+    }
+  }
+}
+
+.compact-item(@prefix-cls, @bordered-item-cls: null, @special-item-cls: null) {
+  &-compact {
+    .compact-item-border(@prefix-cls, @bordered-item-cls, @special-item-cls);
+
+    .compact-item-border-radius(@prefix-cls, @bordered-item-cls);
+  }
+}
diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less
index dd32dd73ac..aeb4e9672a 100644
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@@ -1,5 +1,6 @@
 .iconfont-mixin() {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   color: @icon-color;
   font-style: normal;
   line-height: 0;
diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less
index 1da375ec4c..5438846d17 100644
--- a/components/style/mixins/index.less
+++ b/components/style/mixins/index.less
@@ -12,3 +12,5 @@
 @import 'reset';
 @import 'operation-unit';
 @import 'rounded-arrow';
+@import 'compact-item';
+@import 'compact-item-vertical';
diff --git a/components/style/themes/compact.less b/components/style/themes/compact.less
index c650b9ec52..bd0b01de48 100644
--- a/components/style/themes/compact.less
+++ b/components/style/themes/compact.less
@@ -53,7 +53,7 @@
 @dropdown-line-height: 18px;
 
 // Menu
-@menu-item-padding: 0 12px;
+@menu-item-padding-horizontal: 12px;
 @menu-horizontal-line-height: 38px;
 @menu-inline-toplevel-item-height: 32px;
 @menu-item-height: 32px;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index ecbdcbfb40..5c5b47f7d9 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -270,7 +270,7 @@
 @checkbox-check-color: #fff;
 @checkbox-check-bg: @checkbox-check-color;
 @checkbox-border-width: @border-width-base;
-@checkbox-border-radius: @border-radius-base;
+@checkbox-border-radius: @border-radius-sm;
 @checkbox-group-item-margin-right: 8px;
 
 // Descriptions
@@ -966,6 +966,8 @@
 @alert-text-color: @text-color;
 @alert-close-color: @text-color-secondary;
 @alert-close-hover-color: @icon-color-hover;
+@alert-padding-vertical: @padding-xs;
+@alert-padding-horizontal: @padding-md - 1px;
 @alert-no-icon-padding-vertical: @padding-xs;
 @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
 @alert-with-description-padding-vertical: @padding-md - 1px;
diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
index 4f437e6006..3a8e45e528 100644
--- a/components/style/themes/variable.less
+++ b/components/style/themes/variable.less
@@ -325,7 +325,7 @@
 @checkbox-check-color: #fff;
 @checkbox-check-bg: @checkbox-check-color;
 @checkbox-border-width: @border-width-base;
-@checkbox-border-radius: @border-radius-base;
+@checkbox-border-radius: @border-radius-sm;
 @checkbox-group-item-margin-right: 8px;
 
 // Descriptions
@@ -1021,6 +1021,8 @@
 @alert-text-color: @text-color;
 @alert-close-color: @text-color-secondary;
 @alert-close-hover-color: @icon-color-hover;
+@alert-padding-vertical: @padding-xs;
+@alert-padding-horizontal: @padding-md - 1px;
 @alert-no-icon-padding-vertical: @padding-xs;
 @alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
 @alert-with-description-padding-vertical: @padding-md - 1px;
diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less
index 1f31893d89..88acbfcc4c 100644
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@@ -4,7 +4,9 @@
 @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
 @tree-motion: ~'@{ant-prefix}-motion-collapse';
 @tree-node-padding: (@padding-xs / 2);
+// @deprecated: kept for customization usages, recommend using @tree-node-highlight-color instead.
 @tree-node-hightlight-color: inherit;
+@tree-node-highlight-color: @tree-node-hightlight-color;
 
 .antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
   .@{tree-prefix-cls}-switcher-icon,
@@ -114,7 +116,7 @@
     }
 
     &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
-      color: @tree-node-hightlight-color;
+      color: @tree-node-highlight-color;
       font-weight: 500;
     }
 
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 4469781712..679e8b0a0f 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -6,7 +6,7 @@
 // =============== Basic ===============
 .@{typography-prefix-cls} {
   color: @text-color;
-  overflow-wrap: break-word;
+  word-break: break-word;
 
   &&-secondary {
     color: @text-color-secondary;
diff --git a/scripts/site/_site/doc/style/patch.less b/scripts/site/_site/doc/style/patch.less
index aeaf9f4a53..c376093d50 100644
--- a/scripts/site/_site/doc/style/patch.less
+++ b/scripts/site/_site/doc/style/patch.less
@@ -48,7 +48,7 @@
       border-left: 2px solid @primary-color;
     }
 
-    .ant-anchor-ink-ball.visible {
+    .ant-anchor-ink-ball-visible {
       display: none;
     }