demo: fix Radio demo style (#56903 )

* demo: fix Radio demo style * update snap
fix: add drawer styles.content / classNames.content warning (#56898 )
2026-02-09 02:49:18 +08:00 · 2026-02-08 20:23:52 +08:00 · 2026-02-08 15:44:06 +08:00 · 2026-02-08 14:27:13 +08:00 · 2026-02-08 13:33:32 +08:00 · 2026-02-08 13:32:54 +08:00
170 changed files with 1943 additions and 1768 deletions
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { LinkOutlined, QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { ConfigProvider, Flex, Popover, Table, Typography } from 'antd';
-import { createStaticStyles, css, useTheme } from 'antd-style';
+import { createStyles, css, useTheme } from 'antd-style';
 import { getDesignToken } from 'antd-token-previewer';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import tokenData from 'antd/es/version/token.json';
@@ -53,7 +53,7 @@ const locales = {
  },
 };

-const styles = createStaticStyles(({ cssVar }) => ({
+const useStyle = createStyles(({ cssVar }) => ({
  tableTitle: css`
    cursor: pointer;
    position: relative;
@@ -104,6 +104,8 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {

  const [open, setOpen] = useState<boolean>(defaultOpen ?? process.env.NODE_ENV !== 'production');

+  const { styles } = useStyle();
+
  if (!tokens.length) {
    return null;
  }
--- a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@@ -27,7 +27,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
    position: relative;
    border: 1px solid ${cssVar.colorBorderSecondary};
    border-radius: ${cssVar.borderRadius};
-    padding: ${cssVar.paddingMD} ${cssVar.paddingLG} ${cssVar.paddingMD * 2};
+    padding: ${cssVar.paddingMD} ${cssVar.paddingLG} calc(${cssVar.paddingMD} * 2);
    margin-bottom: ${cssVar.marginLG};
  `,
  title: css`
@@ -67,7 +67,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
  `,
  tip: css`
    color: ${cssVar.colorTextTertiary};
-    margin-top: ${cssVar.marginMD * 2};
+    margin-top: calc(${cssVar.marginMD} * 2);
  `,
 }));

--- a/.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx
+++ b/.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx
@@ -1,5 +1,4 @@
 import React, { useRef, useState } from 'react';
-import { StyleProvider } from '@ant-design/cssinjs';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Sender } from '@ant-design/x';
 import type { SenderRef } from '@ant-design/x/es/sender';
@@ -100,21 +99,16 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
      afterOpenChange={handleAfterOpenChange}
    >
      <Flex vertical style={{ height: '100%' }}>
-        {/* Workaround for layer incompat between site `StyleProvider layer` and `@ant-design/x`.
-         * See: https://github.com/ant-design/x/issues/1588
-         */}
-        <StyleProvider layer={false}>
-          <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
-          <Sender
-            ref={senderRef}
-            style={{ flex: 0 }}
-            value={inputValue}
-            onChange={setInputValue}
-            onSubmit={handleSubmit}
-            loading={loading}
-            onCancel={cancelRequest}
-          />
-        </StyleProvider>
+        <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
+        <Sender
+          ref={senderRef}
+          style={{ flex: 0 }}
+          value={inputValue}
+          onChange={setInputValue}
+          onSubmit={handleSubmit}
+          loading={loading}
+          onCancel={cancelRequest}
+        />
      </Flex>
    </Drawer>
  );
--- a/.github/workflows/preview-deploy.yml
+++ b/.github/workflows/preview-deploy.yml
@@ -63,7 +63,7 @@ jobs:
    steps:
      # We need get PR id first
      - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -83,7 +83,7 @@ jobs:
      # Download site artifact
      - name: download site artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -17,12 +17,12 @@ jobs:

    steps:
      - uses: actions/checkout@v6
-      - uses: oven-sh/setup-bun@v2
+      - uses: utooland/setup-utoo@v1
      - name: size-limit
        uses: ant-design/size-limit-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
-          package_manager: bun
+          package_manager: ut
          build_script: dist
        env:
          NODE_OPTIONS: --max_old_space_size=4096
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -34,6 +34,7 @@ jobs:
        shard: [1/2, 2/2]
    env:
      REACT: ${{ matrix.react }}
+      SKIP_SEMANTIC: '1'
    runs-on: blacksmith-4vcpu-ubuntu-2404
    steps:
      - uses: actions/checkout@v6
@@ -52,15 +53,6 @@ jobs:
      - run: ut
      - run: ut test:node

-  test-semantic:
-    name: test-semantic
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-      - run: ut test:semantic
-
  test-react-latest:
    name: test-react-latest
    strategy:
--- a/.github/workflows/visual-regression-diff-finish.yml
+++ b/.github/workflows/visual-regression-diff-finish.yml
@@ -70,7 +70,7 @@ jobs:

      # We need get persist-index first
      - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -92,7 +92,7 @@ jobs:
      - name: download report artifact
        id: download_report
        if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/visual-regression-persist-finish.yml
+++ b/.github/workflows/visual-regression-persist-finish.yml
@@ -67,7 +67,7 @@ jobs:

      # We need get persist key first
      - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -81,7 +81,7 @@ jobs:

      - name: Download Visual-Regression Artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.jest.image.js
+++ b/.jest.image.js
@@ -1,13 +1,11 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');

-// jest config for image snapshots
 module.exports = {
  setupFiles: ['./tests/setup.ts'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
  moduleNameMapper,
  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
  },
--- a/.jest.js
+++ b/.jest.js
@@ -11,6 +11,7 @@ const compileModules = [
  'parse5',
  '@exodus',
  'jsdom',
+  '@csstools',
 ];

 // cnpm use `_` as prefix
@@ -34,6 +35,10 @@ function getTestRegex(libDir) {
  return '.*\\.test\\.(j|t)sx?$';
 }

+const shouldIgnoreSemantic =
+  ['dist', 'lib', 'es', 'dist-min'].includes(process.env.LIB_DIR) ||
+  ['1', 'true'].includes(process.env.SKIP_SEMANTIC);
+
 module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
@@ -54,11 +59,11 @@ module.exports = {
    'node',
    'image.test.js',
    'image.test.ts',
-    'demo-semantic.test',
+    ...(shouldIgnoreSemantic ? ['demo-semantic.test'] : []),
  ],
  transform: {
    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '\\.(m?)js(m)?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
  },
--- a/.jest.node.js
+++ b/.jest.node.js
@@ -1,14 +1,12 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');

-// jest config for server render environment
 module.exports = {
  setupFiles: ['./tests/setup.ts'],
  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
  moduleNameMapper,
  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
  },
--- a/.jest.semantic.js
+++ b/.jest.semantic.js
@@ -1,30 +0,0 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for semantic demo snapshots
-// Semantic tests don't need to run in React 18, 19, lib, es, dist repeatedly
-module.exports = {
-  verbose: true,
-  testEnvironment: 'jsdom',
-  setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],
-  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
-  modulePathIgnorePatterns: ['/_site/'],
-  moduleNameMapper,
-  testPathIgnorePatterns: ['/node_modules/'],
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-  },
-  testRegex: 'demo-semantic\\.test\\.(j|t)sx?$',
-  transformIgnorePatterns,
-  globals: {
-    'ts-jest': {
-      tsConfig: './tsconfig.test.json',
-    },
-  },
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  testTimeout: 10000,
-};
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,92 +1,166 @@
 # AGENTS.md

+> Ant Design 项目开发指南 - 为 AI 编程助手提供项目上下文和开发规范
+
+## 📑 目录
+
+- [项目背景](#项目背景)
+- [快速开始](#快速开始)
+- [代码规范](#代码规范)
+  - [基本编码规范](#基本编码规范)
+  - [命名规范](#命名规范)
+  - [TypeScript 规范](#typescript-规范)
+  - [样式规范](#样式规范)
+- [开发指南](#开发指南)
+  - [测试指南](#测试指南)
+  - [演示代码规范](#演示代码规范)
+  - [国际化规范](#国际化规范)
+- [文档和 Changelog](#文档和-changelog-规范)
+- [Git 和 Pull Request](#git-和-pull-request-规范)
+- [质量保证](#质量保证)
+- [工具链和环境](#工具链和环境)
+
+---
+
 ## 项目背景

-这是 ant-design/ant-design（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 antd。
+这是 [ant-design/ant-design](https://github.com/ant-design/ant-design)（antd）的源代码仓库，是一个 React 组件库，发布为 npm 包 `antd`。
+
+### 核心特性

 - 使用 TypeScript 和 React 开发
 - 兼容 React 18 ~ 19 版本
 - 组件库设计精美，功能完善，广泛应用于企业级中后台产品
 - 遵循 Ant Design 设计规范
- 支持国际化
+- 支持国际化（i18n）
+- 支持主题定制和暗色模式
+- 支持 RTL（从右到左）布局

-## 安装和设置
+---
+
+## 快速开始

 ### 开发环境要求

- Node.js 版本 >= 16
- 推荐使用 npm 或 yarn
- Chrome 80+ 浏览器兼容性
+- **Node.js**: >= 16
+- **包管理器**: npm 或 utoo
+- **浏览器兼容性**: Chrome 80+
+- **编辑器**: VS Code（推荐）或其他支持 TypeScript 的编辑器

 ### 安装依赖

 ```bash
 npm install
 # 或
-yarn install
+utoo install
 ```

-### 开发命令
+### 常用开发命令

 ```bash
-npm start     # 启动开发服务器
-npm run build # 构建项目
-npm test      # 运行测试
-npm run lint  # 代码检查
+# 启动开发服务器（访问 http://127.0.0.1:8001）
+npm start
+
+# 编译 TypeScript 代码到 lib 和 es 目录
+npm run compile
+
+# 构建 UMD 格式的构建产物
+npm run build
+
+# 运行所有测试
+npm test
+
+# 监听模式运行测试
+npm test -- --watch
+
+# 生成测试覆盖率报告
+npm run test:coverage
+
+# 代码检查（包括 TypeScript、ESLint、Biome、Markdown、Changelog）
+npm run lint
+
+# 格式化代码
+npm run format
+
+# 生成 Changelog（交互式）
+npm run changelog
+
+# 清理构建产物
+npm run clean
 ```

-## 代码风格指南
+### 项目结构
+
+```
+ant-design/
+├── components/          # 组件源代码
+│   └── [component]/     # 单个组件目录
+│       ├── demo/        # 演示代码
+│       ├── style/       # 样式文件
+│       ├── index.tsx     # 组件入口
+│       └── index.zh-CN.md # 组件文档
+├── scripts/             # 构建和工具脚本
+├── tests/               # 测试文件
+├── CHANGELOG.zh-CN.md   # 中文更新日志
+├── CHANGELOG.en-US.md   # 英文更新日志
+└── package.json         # 项目配置
+```
+
+---
+
+## 代码规范

 ### 基本编码规范

- 使用 TypeScript 和 React 书写
- 使用函数式组件和 hooks，避免类组件
- 使用提前返回（early returns）提高代码可读性
- 避免引入新依赖，严控打包体积
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染
- 保持向下兼容，避免 breaking change
- 组件名使用大驼峰（PascalCase）
- 属性名使用小驼峰（camelCase）
- 合理使用 React.memo、useMemo 和 useCallback 优化性能
-
-### 命名规范
-
-Antd 命名要求使用**完整名称**而非缩写。
+- ✅ 使用 TypeScript 和 React 书写
+- ✅ 使用函数式组件和 Hooks，**避免类组件**
+- ✅ 使用提前返回（early returns）提高代码可读性
+- ✅ 避免引入新依赖，严控打包体积
+- ✅ 兼容 Chrome 80+ 浏览器
+- ✅ 支持服务端渲染（SSR）
+- ✅ 保持向下兼容，避免 breaking change
+- ✅ 组件名使用大驼峰（PascalCase），如 `Button`、`DatePicker`
+- ✅ 属性名使用小驼峰（camelCase），如 `onClick`、`defaultValue`
+- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback` 优化性能

 #### Props 命名

- 初始化属性：`default` + `PropName`
- 强制渲染：`forceRender`
- 子组件强制渲染：`force` + `Sub Component Name` + `Render`
- 子组件渲染：`Sub Component Name` + `Render`
- 数据源：`dataSource`
- 面板开启：使用 `open`，避免使用 `visible`
- 显示相关：`show` + `PropName`
- 功能性：`PropName` + `able`
- 禁用：`disabled`
- 额外内容：`extra`
- 图标：`icon`
- 触发器：`trigger`
- 类名：`className`
+| 用途           | 命名规则                                | 示例                          |
+| -------------- | --------------------------------------- | ----------------------------- |
+| 初始化属性     | `default` + `PropName`                  | `defaultValue`、`defaultOpen` |
+| 强制渲染       | `forceRender`                           | `forceRender`                 |
+| 子组件强制渲染 | `force` + `SubComponentName` + `Render` | `forcePanelRender`            |
+| 子组件渲染     | `SubComponentName` + `Render`           | `titleRender`、`footerRender` |
+| 数据源         | `dataSource`                            | `dataSource`                  |
+| 面板开启       | 使用 `open`，避免使用 `visible`         | `open`、`defaultOpen`         |
+| 显示相关       | `show` + `PropName`                     | `showSearch`、`showHeader`    |
+| 功能性         | `PropName` + `able`                     | `disabled`、`readable`        |
+| 禁用           | `disabled`                              | `disabled`                    |
+| 额外内容       | `extra`                                 | `extra`                       |
+| 图标           | `icon`                                  | `icon`、`prefixIcon`          |
+| 触发器         | `trigger`                               | `trigger`                     |
+| 类名           | `className`                             | `className`                   |

 #### 事件命名

- 触发事件：`on` + `EventName`
- 子组件事件：`on` + `SubComponentName` + `EventName`
- 前置事件：`before` + `EventName`
- 后置事件：`after` + `EventName`
- 连续动作完成：`on` + `EventName` + `Complete`
+| 类型         | 命名规则                                | 示例                  |
+| ------------ | --------------------------------------- | --------------------- |
+| 触发事件     | `on` + `EventName`                      | `onClick`、`onChange` |
+| 子组件事件   | `on` + `SubComponentName` + `EventName` | `onPanelChange`       |
+| 前置事件     | `before` + `EventName`                  | `beforeUpload`        |
+| 后置事件     | `after` + `EventName`                   | `afterClose`          |
+| 连续动作完成 | `on` + `EventName` + `Complete`         | `onUploadComplete`    |

-#### 组件引用
+#### 组件引用（Ref）

 组件应提供 `ref` 属性，结构如下：

 ```tsx
-ComponentRef {
+interface ComponentRef {
  nativeElement: HTMLElement;
  focus: VoidFunction;
-  // 其他函数
+  blur: VoidFunction;
+  // 其他方法...
 }
 ```

@@ -94,54 +168,99 @@ ComponentRef {

 格式：`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`

+示例：
+
+- `buttonPrimaryColor` - Button 主色
+- `inputPaddingBlock` - Input 垂直内边距
+- `menuItemActiveBg` - Menu 激活项背景色
+
 ### API 文档规范

-| Property  | Description | Type                         | Default      |
-| --------- | ----------- | ---------------------------- | ------------ |
-| htmlType  | xxx         | string                       | `button `    |
-| type      | xxx         | `horizontal ` \| `vertical ` | `horizontal` |
-| disabled  | xxx         | boolean                      | false        |
-| minLength | xxx         | number                       | 0            |
-| style     | xxx         | CSSProperties                | -            |
+#### API 表格格式
+
+| Property  | Description     | Type                                                   | Default   |
+| --------- | --------------- | ------------------------------------------------------ | --------- |
+| htmlType  | Button 原生类型 | string                                                 | `button`  |
+| type      | 按钮类型        | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
+| disabled  | 是否禁用        | boolean                                                | false     |
+| minLength | 最小长度        | number                                                 | 0         |
+| style     | 自定义样式      | CSSProperties                                          | -         |

 #### API 文档要求

- 字符串类型的默认值使用反引号
- 布尔类型直接使用 true 或 false
- 数字类型直接使用数字
- 函数类型使用箭头函数表达式
- 无默认值使用 `-`
- 描述首字母大写，结尾无句号
- API 按字母顺序排列
+- ✅ 字符串类型的默认值使用反引号包裹，如 `` `button` ``
+- ✅ 布尔类型直接使用 `true` 或 `false`
+- ✅ 数字类型直接使用数字，如 `0`、`100`
+- ✅ 函数类型使用箭头函数表达式，如 `(e: Event) => void`
+- ✅ 无默认值使用 `-`
+- ✅ 描述首字母大写，结尾无句号
+- ✅ API 按字母顺序排列
+
+---

 ## TypeScript 规范

 ### 基本原则

- 所有组件和函数必须提供准确的类型定义
- 避免使用 `any` 类型，尽可能精确地定义类型
- 使用接口而非类型别名定义对象结构
- 导出所有公共接口类型，方便用户使用
- 严格遵循 TypeScript 类型设计原则，确保类型安全
- 确保编译无任何类型错误或警告
+- ✅ 所有组件和函数必须提供准确的类型定义
+- ✅ 避免使用 `any` 类型，尽可能精确地定义类型
+- ✅ 使用接口（interface）而非类型别名（type）定义对象结构
+- ✅ 导出所有公共接口类型，方便用户使用
+- ✅ 严格遵循 TypeScript 类型设计原则，确保类型安全
+- ✅ 确保编译无任何类型错误或警告

 ### 组件类型定义

- 组件 props 应使用 interface 定义，便于扩展
- 组件 props 接口命名应为 `ComponentNameProps`
- 为组件状态定义专门的接口，如 `ComponentNameState`
- 复杂的数据结构应拆分为多个接口定义
- 组件的 ref 类型应该明确定义，使用 `React.ForwardRefRenderFunction`
- 所有回调函数类型应明确定义参数和返回值
+```tsx
+// ✅ 正确：使用 interface 定义 Props
+interface ButtonProps {
+  type?: 'primary' | 'default' | 'dashed';
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+// ❌ 错误：避免使用 type 定义对象结构
+type ButtonProps = {
+  type?: 'primary' | 'default';
+};
+
+// ✅ 正确：组件 Props 接口命名
+interface ComponentNameProps {
+  // ...
+}
+
+// ✅ 正确：组件状态接口命名
+interface ComponentNameState {
+  // ...
+}
+
+// ✅ 正确：使用 ForwardRefRenderFunction 定义 ref
+const Component = React.forwardRef<ComponentRef, ComponentProps>((props, ref) => {
+  // ...
+});
+```

 ### 类型使用最佳实践

- 适当使用泛型增强类型灵活性
- 使用交叉类型（&）合并多个类型
- 使用字面量联合类型定义有限的选项集合
- 避免使用 `enum`，优先使用联合类型和 `as const`
- 尽可能依赖 TypeScript 的类型推断
- 只在必要时使用类型断言（as）
+- ✅ 适当使用泛型增强类型灵活性
+- ✅ 使用交叉类型（&）合并多个类型
+- ✅ 使用字面量联合类型定义有限的选项集合
+- ✅ 避免使用 `enum`，优先使用联合类型和 `as const`
+- ✅ 尽可能依赖 TypeScript 的类型推断
+- ✅ 只在必要时使用类型断言（`as`）
+
+```tsx
+// ✅ 推荐：使用联合类型和 as const
+const ButtonTypes = ['primary', 'default', 'dashed'] as const;
+type ButtonType = (typeof ButtonTypes)[number];
+
+// ❌ 不推荐：使用 enum
+enum ButtonType {
+  Primary = 'primary',
+  Default = 'default',
+}
+```
+
+---

 ## 样式规范

@@ -165,17 +284,17 @@ ComponentRef {

 ### 响应式和主题支持

- 组件应支持在不同屏幕尺寸下良好展示
- 所有组件必须支持暗色模式
- 组件应支持从右到左（RTL）的阅读方向
- 使用 CSS 逻辑属性（如 margin-inline-start）替代方向性属性（如 margin-left）
- 支持通过 ConfigProvider 进行主题定制
+- ✅ 组件应支持在不同屏幕尺寸下良好展示
+- ✅ 所有组件必须支持暗色模式
+- ✅ 组件应支持从右到左（RTL）的阅读方向
+- ✅ 使用 CSS 逻辑属性（如 `margin-inline-start`）替代方向性属性（如 `margin-left`）
+- ✅ 支持通过 `ConfigProvider` 进行主题定制

 ### 动画效果

 - 使用 CSS 过渡实现简单动画
- 复杂动画使用 @rc-component/motion 实现
- 尊重用户的减少动画设置（prefers-reduced-motion）
+- 复杂动画使用 `@rc-component/motion` 实现
+- 尊重用户的减少动画设置（`prefers-reduced-motion`）
 - 动画时长和缓动函数应保持一致性
 - 动画不应干扰用户的操作和阅读体验

@@ -188,67 +307,108 @@ ComponentRef {
 - 支持用户放大页面至 200% 时的正常布局
 - 避免使用会导致闪烁的动画

-## 测试指南
+---

-### 测试框架和工具
+## 开发指南
+
+### 测试指南
+
+#### 测试框架和工具

 - 使用 Jest 和 React Testing Library 编写单元测试
- 对 UI 组件使用快照测试 (Snapshot Testing)
- 测试覆盖率要求 100%
- 测试文件放在 **tests** 目录，命名格式为：index.test.tsx 或 xxx.test.tsx
+- 对 UI 组件使用快照测试（Snapshot Testing）
+- 测试覆盖率要求 **100%**
+- 测试文件放在 `tests/` 目录，命名格式为：`index.test.tsx` 或 `xxx.test.tsx`

-### 运行测试
+#### 运行测试

 ```bash
 npm test                    # 运行所有测试
-npm test -- --watch       # 监听模式
-npm run test:coverage     # 生成覆盖率报告
+npm test -- --watch        # 监听模式
+npm run test:coverage       # 生成覆盖率报告
+npm run test:image          # UI 快照测试（需要 Docker）
 ```

-## 演示代码规范
+#### 测试最佳实践

-### Demo 基本要求
+- ✅ 测试用户行为而非实现细节
+- ✅ 使用有意义的测试描述
+- ✅ 每个测试用例应该独立，不依赖其他测试
+- ✅ 测试边界情况和错误处理

- demo 代码尽可能简洁
- 避免冗余代码，方便用户复制到项目直接使用
- 每个 demo 聚焦展示一个功能点
- 提供中英文两个版本的说明
- 遵循展示优先原则，确保视觉效果良好
- 展示组件的主要使用场景
- 按照由简到繁的顺序排列 demo
+### 演示代码规范

-### 文件组织
+#### Demo 基本要求
+
+- ✅ demo 代码尽可能简洁
+- ✅ 避免冗余代码，方便用户复制到项目直接使用
+- ✅ 每个 demo 聚焦展示一个功能点
+- ✅ 提供中英文两个版本的说明
+- ✅ 遵循展示优先原则，确保视觉效果良好
+- ✅ 展示组件的主要使用场景
+- ✅ 按照由简到繁的顺序排列 demo
+
+#### 文件组织

 - 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
 - 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
 - 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.tsx`
 - 文件名应简洁地描述示例内容

-### TSX 代码规范
+#### TSX 代码规范
+
+```tsx
+// ✅ 正确的导入顺序
+import React, { useState } from 'react';
+import { Button, Space } from 'antd';
+import type { ButtonProps } from 'antd';
+
+import './custom.css';
+
+// ✅ 使用函数式组件和 Hooks
+const Demo: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    // ...
+  };
+
+  return (
+    <Space>
+      <Button loading={loading} onClick={handleClick}>
+        Click me
+      </Button>
+    </Space>
+  );
+};
+
+export default Demo;
+```
+
+**规范要点**：

 - 导入顺序：React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
 - 类型：为复杂数据定义清晰接口，避免 `any`
 - 使用函数式组件和 Hooks
- 2空格缩进，箭头函数，驼峰命名
+- 2 空格缩进，箭头函数，驼峰命名
 - 优先使用 antd 内置组件，减少外部依赖
 - 性能优化：适当使用 `useMemo`/`useCallback`，清理副作用

-## 国际化规范
+### 国际化规范

-### 类型定义
+#### 类型定义

 antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`，当需要添加新的本地化配置时，需要检查对应组件或全局配置的类型是否存在，如果不存在，则需要增加相应的类型描述。

-### 本地化配置
+#### 本地化配置

- 本地化配置文件命名规则：`*_*.ts`，如：`zh_CN.ts`
- 通常在为 antd 添加后修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置
+- 本地化配置文件命名规则：`*_*.ts`，如：`zh_CN.ts`、`en_US.ts`
+- 通常在为 antd 添加或修改某一项本地化配置时，如无特殊说明，需要同时修改所有语言的本地化配置
 - 本地化配置的内容通常是纯字符串
 - 带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容

-### 使用本地化
-
-使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化：
+#### 使用本地化

 ```tsx
 import { useLocale } from '../locale';
@@ -256,7 +416,7 @@ import enUS from '../locale/en_US';

 export function TestComp(props) {
  const { locale: propLocale } = props;
-  const [contextLocale] = useLocale('TestComp', enUs);
+  const [contextLocale] = useLocale('TestComp', enUS);

  const locale = { ...contextLocale, ...propLocale };

@@ -264,162 +424,105 @@ export function TestComp(props) {
 }
 ```

+---
+
 ## 文档和 Changelog 规范

 ### 基本要求

- 提供中英文两个版本
- 新的属性需要声明可用的版本号
- 属性命名符合 antd 的 API 命名规则
+- ✅ 提供中英文两个版本
+- ✅ 新的属性需要声明可用的版本号
+- ✅ 属性命名符合 antd 的 API 命名规则

 ### 文档锚点 ID 规范

 - 针对 Markdown 文件中的标题（# 到 ######）自动生成锚点 ID
-  - 所有中文标题（H1-H6）必须手动指定一个简洁、有意义的英文锚点。
-  - 格式: ## 中文标题 {#english-anchor-id}
-  - 英文标题通常不需要手动指定锚点，但如果需要，可以使用相同的格式。
- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`, 且长度不应超过 32 个字符。
- 用于演示（demo）且包含 `-demo-` 的 id 不受前面的长度限制。
- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀。
- 为确保在不同语言间切换时锚点依然有效，同一问题的中英文锚点应保持完全一致。
-  - 例如：
-    - 中文标题：`### 如何使用组件 {#how-to-use-component}`
-    - 英文标题：`### How to Use the Component {#how-to-use-component}`
+  - 所有中文标题（H1-H6）必须手动指定一个简洁、有意义的英文锚点
+  - 格式: `## 中文标题 {#english-anchor-id}`
+  - 英文标题通常不需要手动指定锚点，但如果需要，可以使用相同的格式
+- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`，且长度不应超过 32 个字符
+- 用于演示（demo）且包含 `-demo-` 的 id 不受前面的长度限制
+- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀
+- 为确保在不同语言间切换时锚点依然有效，同一问题的中英文锚点应保持完全一致
+
+**示例**：
+
+- 中文标题：`### 如何使用组件 {#how-to-use-component}`
+- 英文标题：`### How to Use the Component {#how-to-use-component}`

 ### Changelog 规范

- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
- 对用户使用上无感知的改动建议不要提及，保持 CHANGELOG 的内容有效性
- 用面向开发者的角度和叙述方式撰写 CHANGELOG
- 描述用户的原始问题，而非解决方式
- 尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接
+#### 🎯 核心原则

-### 🎯 核心原则
+1. **文件位置**：在 `CHANGELOG.en-US.md` 和 `CHANGELOG.zh-CN.md` 书写每个版本的变更

- 有效性过滤：忽略用户无感知的改动（如文档网站改进、纯测试用例更新、内部重构、工具链优化等），除非其对开发者有直接影响。
- 开发者视角：描述“用户的原始问题”和“对开发者的影响”，而非“具体的解决代码”。
-  - ❌ 修复 Typography 的 DOM 结构问题。
-  - ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。
- 版本与命名：
-  - 新增属性必须符合 antd API 命名规则。
-  - 新增属性建议在描述中暗示或明确声明可用版本号。
- 双语输出：每次处理必须同时提供 **中文版** 和 **英文版**。
+2. **有效性过滤**：忽略用户无感知的改动（如文档网站改进、纯测试用例更新、内部重构、工具链优化等），除非其对开发者有直接影响。保持 CHANGELOG 的内容有效性。

-### 🎨 格式与结构规范
+3. **开发者视角**：用面向开发者的角度和叙述方式撰写 CHANGELOG，描述"用户的原始问题"和"对开发者的影响"，而非"具体的解决代码"。
+   - ❌ 修复 Typography 的 DOM 结构问题。
+   - ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。

- 单条条目结构：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`。
- 组件名\*需加粗，后接英文冒号和空格。
- 分组逻辑：
-  - 多项改动：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列。
-  - 单项改动：直接编写单行条目，不设分类标题。
- 文本细节：
-  - 代码包裹：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
-  - 中英空格：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**。
+4. **版本与命名**：
+   - 新增属性必须符合 antd API 命名规则
+   - 新增属性建议在描述中暗示或明确声明可用版本号

-### 🏷️ Emoji 规范 (严格执行)
+5. **双语输出**：每次处理必须同时提供 **中文版** 和 **英文版**

- 🐞 修复 Bug
- 💄 样式更新或 token 更新
- 🆕 新增特性 / 新增属性
- 🔥 极其值得关注的新增特性
- 🇺🇸🇨🇳🇬🇧 国际化改动
- 📖 📝 文档或网站改进
- ✅ 新增或更新测试用例
- 🛎 更新警告/提示信息
- ⌨️ ♿ 可访问性增强
- 🗑 废弃或移除
- 🛠 重构或工具链优化
- ⚡️ 性能提升
+6. **PR 链接**：尽量给出原始的 PR 链接，社区提交的 PR 改动加上提交者的链接

---
+#### 🎨 格式与结构规范

-### 💡 输出示例参考
-
-```md
-#### 中文
-
- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: 修复 Select options 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
-
-#### English
-
- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
-```
-
-### 提示词
-
-```md
-### 🤖 角色定义
-
-你是一位 Ant Design 核心维护者，负责编写 `CHANGELOG.zh-CN.md` 和 `CHANGELOG.en-US.md`。你需要将原始 PR 列表转化为专业、简洁、面向开发者的发布日志。
-
-### 🎯 核心原则
-
-1. **有效性过滤**：忽略用户无感知的改动（如文档网站改进、纯测试用例更新、内部重构、工具链优化等），除非其对开发者有直接影响。
-2. **开发者视角**：描述“用户的原始问题”和“对开发者的影响”，而非“具体的解决代码”。
-
- ❌ 修复 Typography 的 DOM 结构问题。
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。
-
-3. **版本与命名**：
-
- 新增属性必须符合 antd API 命名规则。
- 新增属性建议在描述中暗示或明确声明可用版本号。
-
-### 🎨 格式与结构规范
-
-1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`。
-
- 组件名**无需加粗**，后接英文冒号和空格。
+1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
+   - 组件名**无需加粗**，后接英文冒号和空格

 2. **分组逻辑**：
-
- **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列。
- **单项改动**：直接编写单行条目，不设分类标题。
+   - **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列
+   - **单项改动**：直接编写单行条目，不设分类标题

 3. **文本细节**：
+   - **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
+   - **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**

- **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
- **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**。
+#### 🏷️ Emoji 规范（严格执行）

-### 🏷️ Emoji 规范 (严格执行)
+| Emoji  | 用途                   |
+| ------ | ---------------------- |
+| 🐞     | 修复 Bug               |
+| 💄     | 样式更新或 token 更新  |
+| 🆕     | 新增特性 / 新增属性    |
+| 🔥     | 极其值得关注的新增特性 |
+| 🇺🇸🇨🇳🇬🇧 | 国际化改动             |
+| 📖 📝  | 文档或网站改进         |
+| ✅     | 新增或更新测试用例     |
+| 🛎     | 更新警告/提示信息      |
+| ⌨️ ♿  | 可访问性增强           |
+| 🗑     | 废弃或移除             |
+| 🛠     | 重构或工具链优化       |
+| ⚡️     | 性能提升               |

- 🐞 修复 Bug
- 💄 样式更新或 token 更新
- 🆕 新增特性 / 新增属性
- 🔥 极其值得关注的新增特性
- 🇺🇸🇨🇳🇬🇧 国际化改动
- 📖 📝 文档或网站改进
- ✅ 新增或更新测试用例
- 🛎 更新警告/提示信息
- ⌨️ ♿ 可访问性增强
- 🗑 废弃或移除
- 🛠 重构或工具链优化
- ⚡️ 性能提升
+#### 💡 输出示例参考

---
-
-### 🏗️ 任务执行：请处理以下 PR 数据
-
-#### 💡 输出示例参考：
-
-**中文版：**
+**中文版**：

+```markdown
 - 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: 修复 Select options 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
+```

-**English Version:**
+**English Version**：

+```markdown
 - 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
 - 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
 ```

+---
+
 ## Git 和 Pull Request 规范

 ### 分支管理

-禁止直接提交到以下保护分支：
+**禁止直接提交到以下保护分支**：

 - `master`：主分支，用于发布
 - `feature`：特性分支，用于开发新版本
@@ -435,18 +538,20 @@ export function TestComp(props) {

 ### 分支命名规范

- 功能开发：`feat/description-of-feature`
- 问题修复：`fix/issue-number-or-description`
- 文档更新：`docs/what-is-changed`
- 代码重构：`refactor/what-is-changed`
- 样式修改：`style/what-is-changed`
- 测试相关：`test/what-is-changed`
- 构建相关：`build/what-is-changed`
- 持续集成：`ci/what-is-changed`
- 性能优化：`perf/what-is-changed`
- 依赖升级：`deps/package-name-version`
+| 类型     | 格式                              | 示例                          |
+| -------- | --------------------------------- | ----------------------------- |
+| 功能开发 | `feat/description-of-feature`     | `feat/add-dark-mode`          |
+| 问题修复 | `fix/issue-number-or-description` | `fix/button-style-issue`      |
+| 文档更新 | `docs/what-is-changed`            | `docs/update-api-docs`        |
+| 代码重构 | `refactor/what-is-changed`        | `refactor/button-component`   |
+| 样式修改 | `style/what-is-changed`           | `style/fix-button-padding`    |
+| 测试相关 | `test/what-is-changed`            | `test/add-button-tests`       |
+| 构建相关 | `build/what-is-changed`           | `build/update-webpack-config` |
+| 持续集成 | `ci/what-is-changed`              | `ci/add-github-actions`       |
+| 性能优化 | `perf/what-is-changed`            | `perf/optimize-render`        |
+| 依赖升级 | `deps/package-name-version`       | `deps/upgrade-react-19`       |

-### 分支命名注意事项
+**分支命名注意事项**：

 1. 使用小写字母
 2. 使用连字符（-）分隔单词
@@ -460,8 +565,9 @@ export function TestComp(props) {

 - PR 标题始终使用英文
 - 遵循格式：`类型: 简短描述`
- 例如：`fix: fix button style issues in Safari browser`
- 例如：`feat: add dark mode support`
+- 示例：
+  - `fix: fix button style issues in Safari browser`
+  - `feat: add dark mode support`

 #### PR 内容

@@ -473,8 +579,8 @@ export function TestComp(props) {

 提交 PR 时请使用项目中提供的模板：

- 英文模板（推荐）：PULL_REQUEST_TEMPLATE.md
- 中文模板：PULL_REQUEST_TEMPLATE_CN.md
+- 英文模板（推荐）：`PULL_REQUEST_TEMPLATE.md`
+- 中文模板：`PULL_REQUEST_TEMPLATE_CN.md`

 #### PR 提交注意事项

@@ -496,7 +602,7 @@ export function TestComp(props) {
 4. **工具标注**：
   - 如果是用 Cursor 提交的代码，请在 PR body 末尾进行标注：`> Submitted by Cursor`

-### PR 改动类型
+#### PR 改动类型

 - 🆕 新特性提交
 - 🐞 Bug 修复
@@ -508,31 +614,35 @@ export function TestComp(props) {
 - ⚡️ 性能优化
 - 🌐 国际化改进

+---
+
 ## 质量保证

 ### 代码质量要求

- 确保代码运行正常，无控制台错误
- 适配常见浏览器
- 避免过时 API，及时更新到新推荐用法
- 测试覆盖率达到 100%
- 通过所有 ESLint 和 TypeScript 检查
+- ✅ 确保代码运行正常，无控制台错误
+- ✅ 适配常见浏览器
+- ✅ 避免过时 API，及时更新到新推荐用法
+- ✅ 测试覆盖率达到 100%
+- ✅ 通过所有 ESLint 和 TypeScript 检查

 ### 性能要求

- 避免不必要的重新渲染
- 合理使用 React.memo、useMemo 和 useCallback
- 样式计算应当高效，避免重复计算
- 图片和资源应当优化
- 支持 Tree Shaking
+- ✅ 避免不必要的重新渲染
+- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback`
+- ✅ 样式计算应当高效，避免重复计算
+- ✅ 图片和资源应当优化
+- ✅ 支持 Tree Shaking

 ### 兼容性要求

- 支持 React 18 ~ 19 版本
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染
- 保持向下兼容，避免 breaking change
- 支持 TypeScript 4.0+
+- ✅ 支持 React 18 ~ 19 版本
+- ✅ 兼容 Chrome 80+ 浏览器
+- ✅ 支持服务端渲染（SSR）
+- ✅ 保持向下兼容，避免 breaking change
+- ✅ 支持 TypeScript 4.0+
+
+---

 ## 工具链和环境

@@ -557,12 +667,11 @@ export function TestComp(props) {
 - 自动化发布流程
 - 支持多环境部署

+---
+
 ## 参考资料

 - [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules)
 - [#16048](https://github.com/ant-design/ant-design/issues/16048) - Current listing api & Chinese version
 - [#25066](https://github.com/ant-design/ant-design/issues/25066) - API standard in the document
-
-## 特别说明
-
-如果使用 AI 编程助手（如 Cursor）进行开发，请在提交 PR 时在末尾标注：`> Submitted by Cursor`
+- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,19 @@ tag: vVERSION

 ---

+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 Fix Button `defaultBg`, `defaultColor`, `defaultHoverColor` and `defaultActiveColor` tokens not taking effect. [#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 Fix Button default tokens not taking effect. [#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 Fix Button `variant="solid"` borders displaying incorrectly inside Space.Compact. [#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 Fix Input.TextArea ref missing `nativeElement` property. [#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 Fix Flex default `align` not taking effect when using `orientation`. [#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 Fix Typography link selector specificity being too low causing styles to be overridden. [#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix ColorPicker HEX input allowing invalid characters. [#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
 ## 6.2.2

 `2026-01-26`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,19 @@ tag: vVERSION

 ---

+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 修复 Button `defaultBg`、`defaultColor`、`defaultHoverColor` 和 `defaultActiveColor` token 不生效的问题。[#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 修复 Button 默认 token 不生效的问题。[#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 修复 Button `variant="solid"` 在 Space.Compact 中边框显示异常的问题。[#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 修复 Input.TextArea ref 缺少 `nativeElement` 属性的问题。[#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 修复 Flex 使用 `orientation` 时默认 `align` 不生效的问题。[#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 修复 Typography 链接选择器特异性过低导致样式被覆盖的问题。[#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 ColorPicker HEX 输入框可以输入无效字符的问题。[#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
 ## 6.2.2

 `2026-01-26`
--- a/components/_util/tests/useZIndex.test.tsx
+++ b/components/_util/tests/useZIndex.test.tsx
@@ -26,7 +26,7 @@ import {
 import type { ZIndexConsumer, ZIndexContainer } from '../hooks/useZIndex';
 import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '../hooks/useZIndex';
 import { resetWarned } from '../warning';
-import zIndexContext from '../zindexContext';
+import ZIndexContext from '../zindexContext';

 // TODO: Remove this. Mock for React 19
 jest.mock('react-dom', () => {
@@ -45,7 +45,7 @@ const WrapWithProvider: React.FC<PropsWithChildren<{ container: ZIndexContainer
  container,
 }) => {
  const [, contextZIndex] = useZIndex(container);
-  return <zIndexContext.Provider value={contextZIndex}>{children}</zIndexContext.Provider>;
+  return <ZIndexContext.Provider value={contextZIndex}>{children}</ZIndexContext.Provider>;
 };

 const containerComponent: Partial<
--- a/components/_util/hooks/useZIndex.ts
+++ b/components/_util/hooks/useZIndex.ts
@@ -2,7 +2,7 @@ import React from 'react';

 import useToken from '../../theme/useToken';
 import { devUseWarning } from '../warning';
-import zIndexContext from '../zindexContext';
+import ZIndexContext from '../zindexContext';

 export type ZIndexContainer =
  | 'Modal'
@@ -61,7 +61,7 @@ export const useZIndex = (
  customZIndex?: number,
 ): ReturnResult => {
  const [, token] = useToken();
-  const parentZIndex = React.useContext(zIndexContext);
+  const parentZIndex = React.useContext(ZIndexContext);
  const isContainer = isContainerType(componentType);

  let result: ReturnResult;
--- a/components/_util/wave/style.ts
+++ b/components/_util/wave/style.ts
@@ -8,7 +8,14 @@ export interface ComponentToken {}
 export interface WaveToken extends FullToken<'Wave'> {}

 const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
-  const { componentCls, colorPrimary, antCls } = token;
+  const {
+    componentCls,
+    colorPrimary,
+    motionDurationSlow,
+    motionEaseInOut,
+    motionEaseOutCirc,
+    antCls,
+  } = token;
  const [, varRef] = genCssVar(antCls, 'wave');
  return {
    [componentCls]: {
@@ -22,20 +29,18 @@ const genWaveStyle: GenerateStyle<WaveToken> = (token) => {

      // =================== Motion ===================
      '&.wave-motion-appear': {
-        transition: [
-          `box-shadow 0.4s ${token.motionEaseOutCirc}`,
-          `opacity 2s ${token.motionEaseOutCirc}`,
-        ].join(','),
+        transition: [`box-shadow 0.4s`, `opacity 2s`]
+          .map((prop) => `${prop} ${motionEaseOutCirc}`)
+          .join(','),

        '&-active': {
          boxShadow: `0 0 0 6px currentcolor`,
          opacity: 0,
        },
        '&.wave-quick': {
-          transition: [
-            `box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-            `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-          ].join(','),
+          transition: [`box-shadow`, `opacity`]
+            .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+            .join(','),
        },
      },
    },
--- a/components/_util/zindexContext.ts
+++ b/components/_util/zindexContext.ts
@@ -1,9 +1,9 @@
 import React from 'react';

-const zIndexContext = React.createContext<number | undefined>(undefined);
+const ZIndexContext = React.createContext<number | undefined>(undefined);

 if (process.env.NODE_ENV !== 'production') {
-  zIndexContext.displayName = 'zIndexContext';
+  ZIndexContext.displayName = 'ZIndexContext';
 }

-export default zIndexContext;
+export default ZIndexContext;
--- a/components/alert/style/index.ts
+++ b/components/alert/style/index.ts
@@ -98,9 +98,9 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
      [`&${componentCls}-motion-leave`]: {
        overflow: 'hidden',
        opacity: 1,
-        transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
-        padding-top ${duration} ${motionEaseInOutCirc}, padding-bottom ${duration} ${motionEaseInOutCirc},
-        margin-bottom ${duration} ${motionEaseInOutCirc}`,
+        transition: [`max-height`, `opacity`, `padding-top`, `padding-bottom`, `margin-bottom`]
+          .map((prop) => `${prop} ${duration} ${motionEaseInOutCirc}`)
+          .join(', '),
      },

      [`&${componentCls}-motion-leave-active`]: {
--- a/components/anchor/style/index.ts
+++ b/components/anchor/style/index.ts
@@ -170,7 +170,9 @@ const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token) => {
        [`${componentCls}-ink`]: {
          position: 'absolute',
          bottom: 0,
-          transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
+          transition: [`left`, `width`]
+            .map((prop) => `${prop} ${motionDurationSlow} ease-in-out`)
+            .join(', '),
          height: lineWidthBold,
          backgroundColor: colorPrimary,
        },
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@@ -968,18 +968,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
      </span>
    </button>
  </div>
-  <div
-    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
-      type="button"
-    >
-      <span>
-        type="text" (Default)
-      </span>
-    </button>
-  </div>
 </div>
 `;

--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@@ -952,18 +952,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
      </span>
    </button>
  </div>
-  <div
-    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
-      type="button"
-    >
-      <span>
-        type="text" (Default)
-      </span>
-    </button>
-  </div>
 </div>
 `;

--- a/components/button/demo/component-token.tsx
+++ b/components/button/demo/component-token.tsx
@@ -1,8 +1,222 @@
 import React from 'react';
+import { SearchOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Flex } from 'antd';

 const App: React.FC = () => (
  <Flex gap="small" vertical>
+    <div>Component Token</div>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            fontWeight: '900',
+            contentFontSizeSM: 20,
+            contentFontSize: 30,
+            contentFontSizeLG: 40,
+            paddingInlineSM: 20,
+            paddingInline: 30,
+            paddingInlineLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small">Small</Button>
+        <Button>Default</Button>
+        <Button size="large">Large</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dangerColor: 'green',
+            dangerShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button danger>Default</Button>
+        <Button danger type="primary">
+          Primary
+        </Button>
+        <Button danger type="dashed">
+          Dashed
+        </Button>
+        <Button danger type="text">
+          Text
+        </Button>
+        <Button danger type="link">
+          Link
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dashedBgDisabled: 'red',
+          },
+        },
+      }}
+    >
+      <Button type="dashed" disabled>
+        Dashed Disabled
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultColor: 'red',
+            defaultBg: 'blue',
+            defaultBorderColor: 'green',
+            defaultShadow: 'yellow',
+            defaultBgDisabled: 'pink',
+
+            defaultHoverColor: 'brown',
+            defaultHoverBg: 'orange',
+            defaultHoverBorderColor: 'purple',
+
+            defaultActiveColor: 'fuchsia',
+            defaultActiveBg: 'aqua',
+            defaultActiveBorderColor: 'lime',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button>Default</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <Button disabled>Disabled</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            ghostBg: 'red',
+            defaultGhostColor: 'yellow',
+            defaultGhostBorderColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button ghost>Default</Button>
+        <Button ghost type="dashed">
+          Dashed
+        </Button>
+        <Button ghost type="text">
+          Text
+        </Button>
+        <Button ghost type="link">
+          Link
+        </Button>
+        <Button ghost type="primary">
+          Primary
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            iconGap: 40,
+          },
+        },
+      }}
+    >
+      <Button icon={<SearchOutlined />}>icon gap 40</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            linkHoverBg: 'red',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button type="link" href="https://ant.design">
+          Link
+        </Button>
+        <Button disabled type="link" href="https://ant.design">
+          Link(disabled)
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            onlyIconSizeSM: 20,
+            onlyIconSize: 30,
+            onlyIconSizeLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small" icon={<SearchOutlined />} />
+        <Button icon={<SearchOutlined />} />
+        <Button size="large" icon={<SearchOutlined />} />
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            primaryColor: 'red',
+            primaryShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Button type="primary">Primary</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            solidTextColor: 'red',
+          },
+        },
+      }}
+    >
+      <Button variant="solid" color="default">
+        Solid
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            textTextColor: 'red',
+            textHoverBg: 'yellow',
+            textTextHoverColor: 'blue',
+            textTextActiveColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button type="text">Text</Button>
+        <Button variant="text" color="default">
+          Default Text
+        </Button>
+        <Button variant="text" color="primary">
+          Primary Text
+        </Button>
+        <Button variant="text" color="danger">
+          Danger Text
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <div>Global Token</div>
    <ConfigProvider
      theme={{
        components: {
@@ -85,24 +299,6 @@ const App: React.FC = () => (
        </Button>
      </Flex>
    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: { Button: { paddingInline: 100, paddingInlineLG: 150, paddingInlineSM: 50 } },
-      }}
-    >
-      <Flex gap="small" vertical align="start">
-        <Button>Default Button</Button>
-        <Button shape="round">Default Button</Button>
-        <Button size="large">Default Button</Button>
-        <Button shape="round" size="large">
-          Default Button
-        </Button>
-        <Button size="small">Default Button</Button>
-        <Button shape="round" size="small">
-          Default Button
-        </Button>
-      </Flex>
-    </ConfigProvider>
  </Flex>
 );

--- a/components/button/demo/debug-color-variant.tsx
+++ b/components/button/demo/debug-color-variant.tsx
@@ -114,22 +114,6 @@ const App: React.FC = () => {
          <Button type="dashed">Dashed</Button>
        </ConfigProvider>
      </Flex>
-      <Flex gap="small" wrap>
-        <ConfigProvider
-          theme={{
-            components: {
-              Button: {
-                textTextColor: '#f60',
-                textTextHoverColor: '#722ed1',
-                textTextActiveColor: '#0f0',
-                textHoverBg: '#000',
-              },
-            },
-          }}
-        >
-          <Button type="text">type="text" (Default)</Button>
-        </ConfigProvider>
-      </Flex>
    </Flex>
  );
 };
--- a/components/button/style/compact.ts
+++ b/components/button/style/compact.ts
@@ -5,38 +5,67 @@ import { genCompactItemStyle } from '../../style/compact-item';
 import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import type { GenerateStyle } from '../../theme/internal';
 import { genSubStyleComponent } from '../../theme/internal';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 import { prepareComponentToken, prepareToken } from './token';

 const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
+  const { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
+
+  const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
  const insetOffset = calc(lineWidth).mul(-1).equal();
-  const getCompactBorderStyle = (vertical?: boolean) => {
+
+  const [varName, varRef] = genCssVar(antCls, 'btn');
+
+  const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
    const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
-    const selector = `${itemCls}${componentCls}-primary:not([disabled])`;

    return {
      // TODO: Border color transition should be not cover when has color.
      [itemCls]: {
-        transition: `none`,
-      },
+        [varName('compact-connect-border-color')]: varRef('bg-color-hover'),

-      [`${selector} + ${selector}::before`]: {
-        position: 'absolute',
-        top: vertical ? insetOffset : 0,
-        insetInlineStart: vertical ? 0 : insetOffset,
-        backgroundColor: colorPrimaryHover,
-        content: '""',
-        width: vertical ? '100%' : lineWidth,
-        height: vertical ? lineWidth : '100%',
-      } as CSSObject,
+        [`&${solidSelector}`]: {
+          transition: `none`,
+
+          [`& + ${solidSelector}:before`]: [
+            {
+              position: 'absolute',
+              backgroundColor: varRef('compact-connect-border-color'),
+              content: '""',
+            },
+            vertical
+              ? {
+                  top: insetOffset,
+                  insetInline: insetOffset,
+                  height: lineWidth,
+                }
+              : {
+                  insetBlock: insetOffset,
+                  insetInlineStart: insetOffset,
+                  width: lineWidth,
+                },
+          ],
+
+          '&:hover:before': {
+            display: 'none',
+          },
+        },
+      },
    };
  };
-  // Special styles for Primary Button
-  return {
-    ...getCompactBorderStyle(),
-    ...getCompactBorderStyle(true),
-  };
+
+  // Special styles for solid Button
+  return [
+    getCompactBorderStyle(),
+    getCompactBorderStyle(true),
+    {
+      [`${solidSelector}${componentCls}-color-default`]: {
+        [varName('compact-connect-border-color')]:
+          `color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`,
+      },
+    },
+  ];
 };

 // ============================== Export ==============================
--- a/components/button/style/token.ts
+++ b/components/button/style/token.ts
@@ -4,9 +4,9 @@ import { unit } from '@ant-design/cssinjs';

 import { AggregationColor } from '../../color-picker/color';
 import { isBright } from '../../color-picker/components/ColorPresets';
+import { PresetColors } from '../../theme/interface';
 import type { FullToken, GenStyleFn, GetDefaultToken, PresetColorKey } from '../../theme/internal';
 import { getLineHeight, mergeToken } from '../../theme/internal';
-import { PresetColors } from '../../theme/interface';
 import getAlphaColor from '../../theme/util/getAlphaColor';

 /** Component only token. Which will handle additional calculation of alias token */
@@ -154,16 +154,19 @@ export interface ComponentToken {
  /**
   * @desc 按钮纵向内间距
   * @descEN Vertical padding of button
+   * @deprecated not used
   */
  paddingBlock: CSSProperties['paddingBlock'];
  /**
   * @desc 大号按钮纵向内间距
   * @descEN Vertical padding of large button
+   * @deprecated not used
   */
  paddingBlockLG: CSSProperties['paddingBlock'];
  /**
   * @desc 小号按钮纵向内间距
   * @descEN Vertical padding of small button
+   * @deprecated not used
   */
  paddingBlockSM: CSSProperties['paddingBlock'];
  /**
@@ -209,16 +212,19 @@ export interface ComponentToken {
  /**
   * @desc 按钮内容字体行高
   * @descEN Line height of button content
+   * @deprecated not used
   */
  contentLineHeight: number;
  /**
   * @desc 大号按钮内容字体行高
   * @descEN Line height of large button content
+   * @deprecated not used
   */
  contentLineHeightLG: number;
  /**
   * @desc 小号按钮内容字体行高
   * @descEN Line height of small button content
+   * @deprecated not used
   */
  contentLineHeightSM: number;
  /**
@@ -241,6 +247,10 @@ type ShadowColorMap = {
  [Key in `${PresetColorKey}ShadowColor`]: string;
 };

+type PresetColorHoverActiveMap = {
+  [Key in `${PresetColorKey}Hover` | `${PresetColorKey}Active`]: string;
+};
+
 type GroupToken = {
  /**
   * @desc 按钮组边框颜色
@@ -251,7 +261,11 @@ type GroupToken = {
  groupBorderColor: string;
 };

-export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap, GroupToken {
+export interface ButtonToken
+  extends FullToken<'Button'>,
+    ShadowColorMap,
+    PresetColorHoverActiveMap,
+    GroupToken {
  /**
   * @desc 按钮横向内边距
   * @descEN Horizontal padding of button
--- a/components/button/style/variant.ts
+++ b/components/button/style/variant.ts
@@ -165,6 +165,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
          [varName('color-base')]: token.colorLink,
          [varName('color-hover')]: token.colorLinkHover,
          [varName('color-active')]: token.colorLinkActive,
+          [varName('bg-color-hover')]: token.linkHoverBg,
        },

        // ======================== Compatible ========================
@@ -218,11 +219,15 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
          [varName('color-light-hover')]: token.colorFillSecondary,
          [varName('color-light-active')]: token.colorFill,

-          [varName('text-color')]: token.colorText,
-          [varName('text-color-hover')]: token.defaultHoverBorderColor,
-          [varName('text-color-active')]: token.defaultActiveBorderColor,
+          [varName('text-color')]: token.defaultColor,
+          [varName('text-color-hover')]: token.defaultHoverColor,
+          [varName('text-color-active')]: token.defaultActiveColor,
          [varName('shadow')]: token.defaultShadow,

+          [`&${componentCls}-variant-outlined`]: {
+            [varName('bg-color-disabled')]: token.defaultBgDisabled,
+          },
+
          [`&${componentCls}-variant-solid`]: {
            [varName('text-color')]: token.solidTextColor,
            [varName('text-color-hover')]: varRef('text-color'),
@@ -235,6 +240,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
          },

          [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+            [varName('text-color')]: token.defaultColor,
+            [varName('text-color-hover')]: token.defaultHoverColor,
+            [varName('text-color-active')]: token.defaultActiveColor,
+            [varName('bg-color-container')]: token.defaultBg,
            [varName('bg-color-hover')]: token.defaultHoverBg,
            [varName('bg-color-active')]: token.defaultActiveBg,
          },
@@ -259,10 +268,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
      PresetColors.map((colorKey) => {
        const darkColor = token[`${colorKey}6`];
        const lightColor = token[`${colorKey}1`];
-        const hoverColor = token[`${colorKey}5`];
+        const hoverColor = token[`${colorKey}Hover`];
        const lightHoverColor = token[`${colorKey}2`];
        const lightActiveColor = token[`${colorKey}3`];
-        const activeColor = token[`${colorKey}7`];
+        const activeColor = token[`${colorKey}Active`];

        const shadowColor = token[`${colorKey}ShadowColor`];

@@ -299,8 +308,15 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
      {
        // Ghost
        [`&${componentCls}-background-ghost`]: {
-          [varName('bg-color')]: 'transparent',
+          [varName('bg-color')]: token.ghostBg,
+          [varName('bg-color-hover')]: token.ghostBg,
+          [varName('bg-color-active')]: token.ghostBg,
          [varName('shadow')]: 'none',
+
+          [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+            [varName('bg-color-hover')]: token.ghostBg,
+            [varName('bg-color-active')]: token.ghostBg,
+          },
        },
      },
    ],
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -72,7 +72,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {

        onChange(newDate);
      }}
-      getPopupContainer={() => divRef!.current!}
+      getPopupContainer={() => divRef.current}
    />
  );
 }
@@ -114,7 +114,7 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
      onChange={(newMonth) => {
        onChange(generateConfig.setMonth(value, newMonth));
      }}
-      getPopupContainer={() => divRef!.current!}
+      getPopupContainer={() => divRef.current}
    />
  );
 }
--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
@@ -15,7 +15,6 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -431,7 +430,6 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -1555,7 +1553,6 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -1971,7 +1968,6 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -3094,7 +3090,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -3510,7 +3505,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -4627,7 +4621,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -5043,7 +5036,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -6227,7 +6219,6 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
-              style="visibility: visible;"
              title="2016"
            >
              2016
@@ -6683,7 +6674,6 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
-              style="visibility: visible;"
              title="Nov"
            >
              Nov
@@ -7772,7 +7762,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -8188,7 +8177,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -9722,7 +9710,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2017"
          >
            2017
@@ -10138,7 +10125,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Jan"
          >
            Jan
@@ -11264,7 +11250,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -11680,7 +11665,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -12797,7 +12781,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -13213,7 +13196,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -14336,7 +14318,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -14752,7 +14733,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -15930,7 +15910,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -16346,7 +16325,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Nov"
          >
            Nov
--- a/components/calendar/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/calendar/tests/snapshots/demo-semantic.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
-                style="visibility: visible;"
                title="2016"
              >
                2016
@@ -74,7 +73,6 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
-                style="visibility: visible;"
                title="Nov"
              >
                Nov
--- a/components/calendar/tests/snapshots/demo.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo.test.ts.snap
@@ -15,7 +15,6 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="2016"
        >
          2016
@@ -65,7 +64,6 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -949,7 +947,6 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -999,7 +996,6 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -1882,7 +1878,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -1932,7 +1927,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -2811,7 +2805,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -2861,7 +2854,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -3805,7 +3797,6 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
-              style="visibility:visible"
              title="2016"
            >
              2016
@@ -3855,7 +3846,6 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
-              style="visibility:visible"
              title="Nov"
            >
              Nov
@@ -4688,7 +4678,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="2016"
        >
          2016
@@ -4738,7 +4727,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -6032,7 +6020,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2017"
          >
            2017
@@ -6082,7 +6069,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Jan"
          >
            Jan
@@ -6968,7 +6954,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7018,7 +7003,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -7897,7 +7881,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7947,7 +7930,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -8830,7 +8812,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -8880,7 +8861,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -9820,7 +9800,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="2016"
          >
            2016
@@ -9870,7 +9849,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Nov"
          >
            Nov
--- a/components/calendar/tests/snapshots/index.test.tsx.snap
+++ b/components/calendar/tests/snapshots/index.test.tsx.snap
@@ -15,7 +15,6 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2019"
        >
          2019
@@ -65,7 +64,6 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Jan"
        >
          Jan
@@ -946,7 +944,6 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2018年"
        >
          2018年
@@ -996,7 +993,6 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="10月"
        >
          10月
@@ -1877,7 +1873,6 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -1927,7 +1922,6 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Sep"
        >
          Sep
@@ -2808,7 +2802,6 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -2858,7 +2851,6 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Jan"
        >
          Jan
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@@ -315,6 +315,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
    boxShadowTertiary,
    bodyPadding,
    extraColor,
+    motionDurationMid,
  } = token;

  return {
@@ -379,7 +380,9 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {

    [`${componentCls}-hoverable`]: {
      cursor: 'pointer',
-      transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
+      transition: [`box-shadow`, `border-color`]
+        .map((prop) => `${prop} ${motionDurationMid}`)
+        .join(', '),

      '&:hover': {
        borderColor: 'transparent',
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@@ -601,7 +601,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
      >
        <span>
          Zhejiang / 
@@ -880,7 +879,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
--- a/components/cascader/tests/snapshots/demo.test.tsx.snap
+++ b/components/cascader/tests/snapshots/demo.test.tsx.snap
@@ -216,7 +216,6 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility:visible"
    >
      <span>
        Zhejiang
@@ -320,7 +319,6 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility:visible"
      title="Zhejiang / Hangzhou / West Lake"
    >
      Zhejiang / Hangzhou / West Lake
--- a/components/cascader/tests/snapshots/index.test.tsx.snap
+++ b/components/cascader/tests/snapshots/index.test.tsx.snap
@@ -1165,7 +1165,6 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility: visible;"
      title="Zhejiang / Hangzhou"
    >
      Zhejiang / Hangzhou
@@ -1454,7 +1453,6 @@ exports[`Cascader support controlled mode 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility: visible;"
      title="Zhejiang / Hangzhou / West Lake"
    >
      Zhejiang / Hangzhou / West Lake
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@@ -1102,7 +1102,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="start"
      >
        start
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@@ -1090,7 +1090,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility:visible"
        title="start"
      >
        start
--- a/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
@@ -144,7 +144,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -518,7 +517,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -897,7 +895,6 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1268,7 +1265,6 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1648,7 +1644,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -2000,7 +1995,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -2314,7 +2308,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -2700,7 +2693,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HSB"
                        >
                          HSB
@@ -3292,7 +3284,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="RGB"
                        >
                          RGB
@@ -3984,7 +3975,6 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4409,7 +4399,6 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4810,7 +4799,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
-                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -5767,7 +5755,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
-                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -6145,7 +6132,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -6948,7 +6934,6 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -7334,7 +7319,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -7705,7 +7689,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8076,7 +8059,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8460,7 +8442,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8836,7 +8817,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9212,7 +9192,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9590,7 +9569,6 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -9957,7 +9935,6 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -10350,7 +10327,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -10728,7 +10704,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11123,7 +11098,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11495,7 +11469,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -11869,7 +11842,6 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
--- a/components/color-picker/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/demo-semantic.test.tsx.snap
@@ -148,7 +148,6 @@ exports[`renders components/color-picker/demo/_semantic.tsx correctly 1`] = `
                      >
                        <div
                          class="ant-select-content-value"
-                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
--- a/components/color-picker/tests/snapshots/index.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/index.test.tsx.snap
@@ -147,7 +147,6 @@ exports[`ColorPicker Should panelRender work 1`] = `
                  >
                    <div
                      class="ant-select-content-value"
-                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -421,7 +420,6 @@ exports[`ColorPicker Should panelRender work 2`] = `
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
--- a/components/color-picker/tests/components.test.tsx
+++ b/components/color-picker/tests/components.test.tsx
@@ -149,9 +149,15 @@ describe('ColorPicker Components test', () => {
    fireEvent.change(input, { target: { value: 'xyz' } });

    // Verify input value has been updated but formatted as valid hex format
-    expect(input.getAttribute('value')).toEqual('xyz');
+    expect(input.getAttribute('value')).toEqual('');

-    // onChange should not be called because the input is invalid
+    // Simulate another invalid input
+    fireEvent.change(input, { target: { value: 'ff_00_gg' } });
+
+    // Verify input value is filtered
+    expect(input.getAttribute('value')).toEqual('ff00');
+
+    // onChange should not be called for invalid inputs
    expect(onChange).toHaveBeenCalledTimes(1);
  });
 });
--- a/components/color-picker/color.ts
+++ b/components/color-picker/color.ts
@@ -3,7 +3,7 @@ import { Color as RcColor } from '@rc-component/color-picker';
 import type { ColorGenInput, Colors } from './interface';

 export const toHexFormat = (value?: string, alpha?: boolean) =>
-  value?.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6) || '';
+  value?.replace(/[^0-9a-f]/gi, '').slice(0, alpha ? 8 : 6) || '';

 export const getHex = (value?: string, alpha?: boolean) => (value ? toHexFormat(value, alpha) : '');

--- a/components/color-picker/demo/_semantic.tsx
+++ b/components/color-picker/demo/_semantic.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import type { ColorPickerProps } from 'antd';
 import { ColorPicker } from 'antd';

-import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
+import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';

 const locales = {
  cn: {
@@ -25,7 +25,7 @@ const Block: React.FC<Readonly<ColorPickerProps>> = (props) => {
        defaultValue="#1677ff"
        open
        {...props}
-        getPopupContainer={() => divRef!.current!}
+        getPopupContainer={() => divRef.current || document.body}
        styles={{
          popup: {
            root: { zIndex: 1 },
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -1602,7 +1602,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -1652,7 +1651,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -2530,7 +2528,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -2874,7 +2871,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -2925,7 +2921,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -3806,7 +3801,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -4153,7 +4147,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -4203,7 +4196,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -5081,7 +5073,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -5425,7 +5416,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -5475,7 +5465,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -6353,7 +6342,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -6697,7 +6685,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -6747,7 +6734,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -7625,7 +7611,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -7969,7 +7954,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -8019,7 +8003,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -8897,7 +8880,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -9241,7 +9223,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -9291,7 +9272,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -10169,7 +10149,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -18395,7 +18374,6 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18528,7 +18506,6 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18666,7 +18643,6 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18800,7 +18776,6 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18939,7 +18914,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19072,7 +19046,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19210,7 +19183,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19343,7 +19315,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19481,7 +19452,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19614,7 +19584,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
        >
          <div
            class="config-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19752,7 +19721,6 @@ exports[`ConfigProvider components Pagination normal 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19885,7 +19853,6 @@ exports[`ConfigProvider components Pagination normal 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -20023,7 +19990,6 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -20156,7 +20122,6 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -23751,7 +23716,6 @@ exports[`ConfigProvider components Select configProvider 1`] = `
  >
    <div
      class="config-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23807,7 +23771,6 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
  >
    <div
      class="config-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23861,7 +23824,6 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
  >
    <div
      class="config-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23917,7 +23879,6 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
  >
    <div
      class="config-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23973,7 +23934,6 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
  >
    <div
      class="config-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -24029,7 +23989,6 @@ exports[`ConfigProvider components Select normal 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -24085,7 +24044,6 @@ exports[`ConfigProvider components Select prefixCls 1`] = `
  >
    <div
      class="prefix-Select-content-value"
-      style="visibility: visible;"
      title="Light"
    >
      Light
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -309,7 +309,10 @@ export type FloatButtonGroupConfig = ComponentStyleConfig &
  Pick<FloatButtonGroupProps, 'closeIcon' | 'classNames' | 'styles'>;

 export type PaginationConfig = ComponentStyleConfig &
-  Pick<PaginationProps, 'showSizeChanger' | 'totalBoundaryShowSizeChanger' | 'classNames' | 'styles'>;
+  Pick<
+    PaginationProps,
+    'showSizeChanger' | 'totalBoundaryShowSizeChanger' | 'classNames' | 'styles'
+  >;

 export type ProgressConfig = ComponentStyleConfig & Pick<ProgressProps, 'classNames' | 'styles'>;

--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
@@ -88094,7 +88094,6 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Time"
        >
          Time
--- a/components/date-picker/tests/snapshots/demo.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/demo.test.tsx.snap
@@ -7670,7 +7670,6 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Time"
        >
          Time
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@@ -101,7 +101,9 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
        alignItems: 'center',
        lineHeight: 1,
        borderRadius,
-        transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
+        transition: [`border`, `box-shadow`, `background-color`]
+          .map((prop) => `${prop} ${motionDurationMid}`)
+          .join(', '),

        [`${componentCls}-prefix`]: {
          flex: '0 0 auto',
@@ -180,7 +182,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          color: colorTextQuaternary,
          lineHeight: 1,
          pointerEvents: 'none',
-          transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
+          transition: ['opacity', 'color'].map((prop) => `${prop} ${motionDurationMid}`).join(', '),

          '> *': {
            verticalAlign: 'top',
@@ -200,7 +202,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          transform: 'translateY(-50%)',
          cursor: 'pointer',
          opacity: 0,
-          transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
+          transition: ['opacity', 'color'].map((prop) => `${prop} ${motionDurationMid}`).join(', '),

          '> *': {
            verticalAlign: 'top',
--- a/components/date-picker/style/util.ts
+++ b/components/date-picker/style/util.ts
@@ -116,7 +116,9 @@ export const genOverflowStyle = (
        marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
        borderRadius: borderRadiusSM,
        cursor: 'default',
-        transition: `font-size ${motionDurationSlow}, line-height ${motionDurationSlow}, height ${motionDurationSlow}`,
+        transition: [`font-size`, `line-height`, `height`]
+          .map((prop) => `${prop} ${motionDurationSlow}`)
+          .join(', '),
        marginInlineEnd: token.calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
        paddingInlineStart: paddingXS,
        paddingInlineEnd: token.calc(paddingXS).div(2).equal(),
--- a/components/drawer/Drawer.tsx
+++ b/components/drawer/Drawer.tsx
@@ -127,32 +127,6 @@ const Drawer: React.FC<DrawerProps> & {
      ? () => getPopupContainer(document.body)
      : customizeGetContainer;

-  // ========================== Warning ===========================
-  if (process.env.NODE_ENV !== 'production') {
-    const warning = devUseWarning('Drawer');
-    [
-      ['headerStyle', 'styles.header'],
-      ['bodyStyle', 'styles.body'],
-      ['footerStyle', 'styles.footer'],
-      ['contentWrapperStyle', 'styles.wrapper'],
-      ['maskStyle', 'styles.mask'],
-      ['drawerStyle', 'styles.section'],
-      ['destroyInactivePanel', 'destroyOnHidden'],
-      ['width', 'size'],
-      ['height', 'size'],
-    ].forEach(([deprecatedName, newName]) => {
-      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
-    });
-
-    if (getContainer !== undefined && props.style?.position === 'absolute') {
-      warning(
-        false,
-        'breaking',
-        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
-      );
-    }
-  }
-
  // ============================ Size ============================
  const drawerSize = React.useMemo<string | number | undefined>(() => {
    if (typeof size === 'number') {
@@ -231,6 +205,38 @@ const Drawer: React.FC<DrawerProps> & {
    props: mergedProps,
  });

+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Drawer');
+    [
+      ['headerStyle', 'styles.header'],
+      ['bodyStyle', 'styles.body'],
+      ['footerStyle', 'styles.footer'],
+      ['contentWrapperStyle', 'styles.wrapper'],
+      ['maskStyle', 'styles.mask'],
+      ['drawerStyle', 'styles.section'],
+      ['destroyInactivePanel', 'destroyOnHidden'],
+      ['width', 'size'],
+      ['height', 'size'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+
+    if (getContainer !== undefined && props.style?.position === 'absolute') {
+      warning(
+        false,
+        'breaking',
+        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
+      );
+    }
+
+    warning.deprecated(
+      !(mergedClassNames?.content || mergedStyles?.content),
+      'classNames.content and styles.content',
+      'classNames.section and styles.section',
+    );
+  }
+
  const drawerClassName = clsx(
    {
      'no-mask': !mergedMask,
--- a/components/drawer/DrawerPanel.tsx
+++ b/components/drawer/DrawerPanel.tsx
@@ -22,6 +22,10 @@ export type DrawerSemanticClassNames = {
  wrapper?: string;
  dragger?: string;
  close?: string;
+  /**
+   * @deprecated please use `classNames.section` instead.
+   */
+  content?: string;
 };

 export type DrawerSemanticStyles = {
@@ -36,6 +40,10 @@ export type DrawerSemanticStyles = {
  wrapper?: React.CSSProperties;
  dragger?: React.CSSProperties;
  close?: React.CSSProperties;
+  /**
+   * @deprecated please use `styles.section` instead.
+   */
+  content?: React.CSSProperties;
 };

 export type DrawerClassNamesType = SemanticClassNamesType<DrawerProps, DrawerSemanticClassNames>;
--- a/components/drawer/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-semantic.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`renders components/drawer/demo/_semantic.tsx correctly 1`] = `
              class="ant-drawer-footer semantic-mark-footer"
            >
              <a
-                class="ant-typography css-var-test-id"
+                class="ant-typography ant-typography-link css-var-test-id"
              >
                Footer
              </a>
--- a/components/drawer/tests/semantic.test.tsx
+++ b/components/drawer/tests/semantic.test.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import { warning } from '@rc-component/util';

 import Drawer from '..';
 import type { DrawerProps } from '..';
 import { render } from '../../../tests/utils';

+const { resetWarned } = warning;
+
 describe('Drawer.Semantic', () => {
  it('should apply custom classnames & styles to Drawer', () => {
    const customClassNames: DrawerProps['classNames'] = {
@@ -217,4 +220,24 @@ describe('Drawer.Semantic', () => {
    expect(footerElement).toHaveStyle({ color: 'rgb(255, 255, 0)' });
    expect(closeElement).toHaveStyle({ color: 'rgb(90, 0, 0)' });
  });
+
+  it('warning with both deprecated classNames.content and styles.content props', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    resetWarned();
+
+    render(
+      <Drawer
+        open
+        classNames={{ content: 'custom-content' }}
+        styles={{ content: { color: 'red' } }}
+      >
+        Here is content of Drawer
+      </Drawer>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Drawer] `classNames.content and styles.content` is deprecated. Please use `classNames.section and styles.section` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
 });
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
@@ -7118,7 +7118,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx extend context correc
 exports[`renders components/dropdown/demo/selectable.tsx extend context correctly 1`] = `
 Array [
  <a
-    class="ant-typography ant-dropdown-trigger css-var-test-id"
+    class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
--- a/components/dropdown/tests/snapshots/demo.test.tsx.snap
+++ b/components/dropdown/tests/snapshots/demo.test.tsx.snap
@@ -1262,7 +1262,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx correctly 1`] = `

 exports[`renders components/dropdown/demo/selectable.tsx correctly 1`] = `
 <a
-  class="ant-typography ant-dropdown-trigger css-var-test-id"
+  class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
 >
  <div
    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
--- a/components/flex/index.tsx
+++ b/components/flex/index.tsx
@@ -45,7 +45,7 @@ const Flex = React.forwardRef<HTMLElement, React.PropsWithChildren<FlexProps>>((
    prefixCls,
    hashId,
    cssVarCls,
-    createFlexClassNames(prefixCls, props),
+    createFlexClassNames(prefixCls, { ...props, vertical: mergedVertical }),
    {
      [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
      [`${prefixCls}-gap-${gap}`]: isPresetSize(gap),
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@@ -93,7 +93,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility: visible;"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -346,7 +345,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility: visible;"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -2158,7 +2156,6 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="RMB"
                  >
                    RMB
@@ -5304,7 +5301,6 @@ Array [
                            >
                              <div
                                class="ant-select-content-value"
-                                style="visibility: visible;"
                                title="HEX"
                              >
                                HEX
@@ -11354,7 +11350,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility: visible;"
                  title="Zhejiang / Hangzhou / West Lake"
                >
                  Zhejiang / Hangzhou / West Lake
@@ -11554,7 +11549,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="+86"
                  >
                    +86
@@ -11796,7 +11790,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility: visible;"
                    title="$"
                  >
                    $
@@ -12077,7 +12070,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility: visible;"
                  title="Male"
                >
                  Male
@@ -24531,7 +24523,6 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                          >
                            <div
                              class="ant-select-content-value"
-                              style="visibility: visible;"
                              title="HEX"
                            >
                              HEX
@@ -29165,7 +29156,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility: visible;"
                  title="Option 1"
                >
                  Option 1
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@@ -93,7 +93,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility:visible"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -268,7 +267,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility:visible"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -1666,7 +1664,6 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility:visible"
                    title="RMB"
                  >
                    RMB
@@ -7659,7 +7656,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility:visible"
                  title="Zhejiang / Hangzhou / West Lake"
                >
                  Zhejiang / Hangzhou / West Lake
@@ -7771,7 +7767,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility:visible"
                    title="+86"
                  >
                    +86
@@ -7935,7 +7930,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                >
                  <div
                    class="ant-select-content-value"
-                    style="visibility:visible"
                    title="$"
                  >
                    $
@@ -8126,7 +8120,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility:visible"
                  title="Male"
                >
                  Male
@@ -12882,7 +12875,6 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
-                  style="visibility:visible"
                  title="Option 1"
                >
                  Option 1
--- a/components/form/tests/index.test.tsx
+++ b/components/form/tests/index.test.tsx
@@ -28,6 +28,7 @@ import Select from '../../select';
 import Slider from '../../slider';
 import Switch from '../../switch';
 import Popover from '../../popover';
+import Segmented from '../../segmented';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
 import type { NamePath } from '../interface';
@@ -1378,6 +1379,20 @@ describe('Form', () => {
    expect(container.firstChild).toMatchSnapshot();
  });

+  // https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096
+  it('Segmented should not be disabled even Form is disabled', () => {
+    const { container } = render(
+      <Form disabled>
+        <Form.Item name="segmented">
+          <Segmented options={['Daily', 'Weekly', 'Monthly']} />
+        </Form.Item>
+      </Form>,
+    );
+    expect(container.querySelector('.ant-segmented')).not.toHaveClass(
+      'ant-segmented-disabled',
+    );
+  });
+
  it('form.item should support layout', () => {
    const App: React.FC = () => (
      <Form layout="horizontal">
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -578,6 +578,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);

 ## FAQ

+### Why can't Segmented be disabled by Form `disabled`? {#faq-segmented-cannot-disabled}
+
+Segmented is designed as a data display component, not a form control component. Although it can be used as a form control similar to Radio, it was not designed for this purpose. Therefore, its behavior is more similar to the Tabs component and will not be disabled by Form's `disabled` prop. For related discussions, see [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096).
+
 ### Why can't Switch, Checkbox bind data? {#faq-switch-checkbox-binding}

 Form.Item default bind value to `value` prop, but Switch or Checkbox value prop is `checked`. You can use `valuePropName` to change bind value prop.
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -577,6 +577,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);

 ## FAQ

+### Segmented 为什么不能被 Form `disabled` 禁用? {#faq-segmented-cannot-disabled}
+
+Segmented 设计上为数据展示类组件，而非表单控件组件。虽然它可以作为类似 Radio 的表单控件使用，但并非为此设计。因而行为上更类似于 Tabs 组件，不会被 Form 的 `disabled` 所禁用。相关讨论参考 [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096)。
+
 ### Switch、Checkbox 为什么不能绑定数据？ {#faq-switch-checkbox-binding}

 Form.Item 默认绑定值属性到 `value` 上，而 Switch、Checkbox 等组件的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。
--- a/components/form/style/explain.ts
+++ b/components/form/style/explain.ts
@@ -2,7 +2,7 @@ import type { FormToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';

 const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, motionDurationFast, motionEaseInOut } = token;

  const helpCls = `${componentCls}-show-help`;
  const helpItemCls = `${componentCls}-show-help-item`;
@@ -10,7 +10,7 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
  return {
    [helpCls]: {
      // Explain holder
-      transition: `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
+      transition: `opacity ${motionDurationFast} ${motionEaseInOut}`,

      '&-appear, &-enter': {
        opacity: 0,
@@ -31,9 +31,9 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
      // Explain
      [helpItemCls]: {
        overflow: 'hidden',
-        transition: `height ${token.motionDurationFast} ${token.motionEaseInOut},
-                     opacity ${token.motionDurationFast} ${token.motionEaseInOut},
-                     transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`,
+        transition: `${['height', 'opacity', 'transform']
+          .map((prop) => `${prop} ${motionDurationFast} ${motionEaseInOut}`)
+          .join(', ')} !important`,

        [`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
          transform: `translateY(-5px)`,
--- a/components/input-number/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo-extend.test.ts.snap
@@ -110,7 +110,6 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
          >
            <div
              class="ant-select-content-value"
-              style="visibility: visible;"
              title="+"
            >
              +
@@ -313,7 +312,6 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
          >
            <div
              class="ant-select-content-value"
-              style="visibility: visible;"
              title="$"
            >
              $
--- a/components/input-number/tests/snapshots/demo.test.tsx.snap
+++ b/components/input-number/tests/snapshots/demo.test.tsx.snap
@@ -110,7 +110,6 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
-              style="visibility:visible"
              title="+"
            >
              +
@@ -235,7 +234,6 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
-              style="visibility:visible"
              title="$"
            >
              $
--- a/components/input/OTP/OTPInput.tsx
+++ b/components/input/OTP/OTPInput.tsx
@@ -23,6 +23,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {

  // ========================== Ref ===========================
  const inputRef = React.useRef<InputRef>(null);
+
  React.useImperativeHandle(ref, () => inputRef.current!);

  // ========================= Input ==========================
@@ -40,7 +41,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
    });
  };

-  const onInternalFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+  const onInternalFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
    onFocus?.(e);
    syncSelection();
  };
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -67,6 +67,7 @@ export interface TextAreaRef {
  focus: (options?: InputFocusOptions) => void;
  blur: () => void;
  resizableTextArea?: RcTextAreaRef['resizableTextArea'];
+  nativeElement: HTMLElement | null;
 }

 const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
@@ -134,6 +135,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
      triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
    },
    blur: () => innerRef.current?.blur(),
+    nativeElement: innerRef.current?.nativeElement || null,
  }));

  const prefixCls = getPrefixCls('input', customizePrefixCls);
--- a/components/input/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input/tests/snapshots/demo-extend.test.ts.snap
@@ -51,7 +51,6 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
            >
              <div
                class="ant-select-content-value"
-                style="visibility: visible;"
                title="http://"
              >
                http://
@@ -188,7 +187,6 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
            >
              <div
                class="ant-select-content-value"
-                style="visibility: visible;"
                title=".com"
              >
                .com
@@ -3032,7 +3030,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="Jack"
      >
        Jack
@@ -3161,7 +3158,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title=""
      />
      <input
@@ -3521,7 +3517,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
@@ -5778,7 +5773,6 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Zhejiang"
          >
            Zhejiang
@@ -6720,7 +6714,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Zhejiang"
        >
          Zhejiang
@@ -7024,7 +7017,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Option1"
        >
          Option1
@@ -9070,7 +9062,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Option1-1"
        >
          Option1-1
@@ -9198,7 +9189,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Option2-2"
        >
          Option2-2
@@ -9331,7 +9321,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Between"
        >
          Between
@@ -9487,7 +9476,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Sign Up"
        >
          Sign Up
@@ -9716,7 +9704,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Home"
        >
          Home
@@ -12173,6 +12160,33 @@ Array [
      </span>
    </span>
  </span>,
+  <br />,
+  <textarea
+    aria-describedby="test-id"
+    class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
+    placeholder="TextArea wrapped in Tooltip for debugging"
+    style="margin-top: 16px;"
+  />,
+  <div
+    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-test-id ant-tooltip-placement-top"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+  >
+    <div
+      class="ant-tooltip-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    >
+      <span
+        class="ant-tooltip-arrow-content"
+      />
+    </div>
+    <div
+      class="ant-tooltip-container"
+      id="test-id"
+      role="tooltip"
+    >
+      Debug TextArea with Tooltip
+    </div>
+  </div>,
 ]
 `;

--- a/components/input/tests/snapshots/demo.test.tsx.snap
+++ b/components/input/tests/snapshots/demo.test.tsx.snap
@@ -51,7 +51,6 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
-                style="visibility:visible"
                title="http://"
              >
                http://
@@ -110,7 +109,6 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
-                style="visibility:visible"
                title=".com"
              >
                .com
@@ -648,7 +646,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility:visible"
        title="Jack"
      >
        Jack
@@ -699,7 +696,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility:visible"
        title=""
      />
      <input
@@ -843,7 +839,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility:visible"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
@@ -1669,7 +1664,6 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Zhejiang"
          >
            Zhejiang
@@ -2495,7 +2489,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Zhejiang"
        >
          Zhejiang
@@ -2705,7 +2698,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Option1"
        >
          Option1
@@ -2985,7 +2977,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Option1-1"
        >
          Option1-1
@@ -3035,7 +3026,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Option2-2"
        >
          Option2-2
@@ -3090,7 +3080,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Between"
        >
          Between
@@ -3168,7 +3157,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Sign Up"
        >
          Sign Up
@@ -3250,7 +3238,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Home"
        >
          Home
@@ -5490,6 +5477,12 @@ Array [
      </span>
    </span>
  </span>,
+  <br />,
+  <textarea
+    class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
+    placeholder="TextArea wrapped in Tooltip for debugging"
+    style="margin-top:16px"
+  />,
 ]
 `;

--- a/components/input/tests/textarea.test.tsx
+++ b/components/input/tests/textarea.test.tsx
@@ -605,4 +605,18 @@ describe('TextArea allowClear', () => {
    fireEvent.mouseUp(container.querySelector('textarea')!);
    expect(container.querySelector('.ant-input-mouse-active')).toBeFalsy();
  });
+
+  describe('ref.nativeElement should be the root div', () => {
+    it('basic', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(<TextArea ref={ref} />);
+      expect(ref.current?.nativeElement).toBe(container.firstChild);
+    });
+
+    it('with showCount', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(<TextArea ref={ref} showCount />);
+      expect(ref.current?.nativeElement).toBe(container.firstChild);
+    });
+  });
 });
--- a/components/input/demo/textarea-resize.tsx
+++ b/components/input/demo/textarea-resize.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { Button, Input } from 'antd';
+import React, { useRef, useState } from 'react';
+import { Button, Input, Tooltip } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';

 const { TextArea } = Input;

@@ -8,6 +9,7 @@ const defaultValue =

 const App: React.FC = () => {
  const [autoResize, setAutoResize] = useState(false);
+  const textAreaRef = useRef<TextAreaRef>(null);

  return (
    <>
@@ -23,6 +25,15 @@ const App: React.FC = () => {
        }}
        showCount
      />
+      <br />
+      <Tooltip title="Debug TextArea with Tooltip">
+        <TextArea
+          ref={textAreaRef}
+          placeholder="TextArea wrapped in Tooltip for debugging"
+          style={{ marginTop: 16 }}
+          onFocus={() => console.log('nativeElement:', textAreaRef.current?.nativeElement)}
+        />
+      </Tooltip>
    </>
  );
 };
--- a/components/list/tests/snapshots/pagination.test.tsx.snap
+++ b/components/list/tests/snapshots/pagination.test.tsx.snap
@@ -317,7 +317,6 @@ exports[`List.pagination should default work 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="3 / page"
        >
          3 / page
--- a/components/locale/tests/snapshots/index.test.tsx.snap
+++ b/components/locale/tests/snapshots/index.test.tsx.snap
--- a/components/menu/style/horizontal.ts
+++ b/components/menu/style/horizontal.ts
@@ -43,10 +43,9 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
      },

      [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-        transition: [
-          `border-color ${motionDurationSlow}`,
-          `background-color ${motionDurationSlow}`,
-        ].join(','),
+        transition: [`border-color`, `background-color`]
+          .map((prop) => `${prop} ${motionDurationSlow}`)
+          .join(','),
      },

      // ===================== Sub Menu =====================
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@@ -505,7 +505,9 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
        width: menuArrowSize,
        color: 'currentcolor',
        transform: 'translateY(-50%)',
-        transition: `transform ${motionDurationSlow} ${motionEaseInOut}, opacity ${motionDurationSlow}`,
+        transition: ['transform', 'opacity']
+          .map((prop) => `${prop} ${motionDurationSlow}`)
+          .join(','),
      },

      '&-arrow': {
@@ -516,12 +518,9 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
          height: token.calc(menuArrowSize).mul(0.15).equal(),
          backgroundColor: 'currentcolor',
          borderRadius,
-          transition: [
-            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `transform ${motionDurationSlow} ${motionEaseInOut}`,
-            `top ${motionDurationSlow} ${motionEaseInOut}`,
-            `color ${motionDurationSlow} ${motionEaseInOut}`,
-          ].join(','),
+          transition: [`background-color`, `transform`, `top`, `color`]
+            .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+            .join(','),
          content: '""',
        },

@@ -619,26 +618,26 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
        },

        [`&-horizontal ${componentCls}-submenu`]: {
-          transition: [
-            `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
-          ].join(','),
+          transition: [`border-color`, `background-color`]
+            .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+            .join(','),
        },

        [`${componentCls}-submenu, ${componentCls}-submenu-inline`]: {
          transition: [
-            `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `padding ${motionDurationMid} ${motionEaseInOut}`,
-          ].join(','),
+            `border-color ${motionDurationSlow}`,
+            `background-color ${motionDurationSlow}`,
+            `padding ${motionDurationMid}`,
+          ]
+            .map((prop) => `${prop} ${motionEaseInOut}`)
+            .join(','),
        },

        [`${componentCls}-submenu ${componentCls}-sub`]: {
          cursor: 'initial',
-          transition: [
-            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `padding ${motionDurationSlow} ${motionEaseInOut}`,
-          ].join(','),
+          transition: [`background-color`, `padding`]
+            .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+            .join(','),
        },

        [`${componentCls}-title-content`]: {
--- a/components/menu/style/theme.ts
+++ b/components/menu/style/theme.ts
@@ -239,10 +239,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
            borderInlineEnd: `${unit(activeBarWidth)} solid ${itemSelectedColor}`,
            transform: 'scaleY(0.0001)',
            opacity: 0,
-            transition: [
-              `transform ${motionDurationMid} ${motionEaseOut}`,
-              `opacity ${motionDurationMid} ${motionEaseOut}`,
-            ].join(','),
+            transition: [`transform`, `opacity`]
+              .map((prop) => `${prop} ${motionDurationMid} ${motionEaseOut}`)
+              .join(','),
            content: '""',
          },

@@ -258,10 +257,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
          '&::after': {
            transform: 'scaleY(1)',
            opacity: 1,
-            transition: [
-              `transform ${motionDurationMid} ${motionEaseInOut}`,
-              `opacity ${motionDurationMid} ${motionEaseInOut}`,
-            ].join(','),
+            transition: [`transform`, `opacity`]
+              .map((prop) => `${prop} ${motionDurationMid} ${motionEaseInOut}`)
+              .join(','),
          },
        },
      },
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -16,7 +16,7 @@ import { getTransitionName } from '../_util/motion';
 import type { Breakpoint } from '../_util/responsiveObserver';
 import { canUseDocElement } from '../_util/styleChecker';
 import { devUseWarning } from '../_util/warning';
-import zIndexContext from '../_util/zindexContext';
+import ZIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import { useComponentConfig } from '../config-provider/context';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
@@ -241,7 +241,7 @@ const Modal: React.FC<ModalProps> = (props) => {
  // =========================== Render ===========================
  return (
    <ContextIsolator form space>
-      <zIndexContext.Provider value={contextZIndex}>
+      <ZIndexContext.Provider value={contextZIndex}>
        <Dialog
          width={numWidth}
          {...restProps}
@@ -284,7 +284,7 @@ const Modal: React.FC<ModalProps> = (props) => {
            children
          )}
        </Dialog>
-      </zIndexContext.Provider>
+      </ZIndexContext.Provider>
    </ContextIsolator>
  );
 };
--- a/components/modal/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/modal/tests/snapshots/demo-extend.test.ts.snap
@@ -1052,7 +1052,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
          class="ant-typography css-var-test-id"
        >
          <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
            href="https://github.com/ant-design/ant-design/pull/44318"
          >
            Feature #44318
--- a/components/modal/tests/snapshots/demo.test.tsx.snap
+++ b/components/modal/tests/snapshots/demo.test.tsx.snap
@@ -1014,7 +1014,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
          class="ant-typography css-var-test-id"
        >
          <a
-            class="ant-typography css-var-test-id"
+            class="ant-typography ant-typography-link css-var-test-id"
            href="https://github.com/ant-design/ant-design/pull/44318"
          >
            Feature #44318
--- a/components/modal/tests/confirm.test.tsx
+++ b/components/modal/tests/confirm.test.tsx
@@ -678,6 +678,8 @@ describe('Modal.confirm triggers callbacks correctly', () => {
  describe('the callback close should be a method when onCancel has a close parameter', () => {
    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => {
      it(`click the close icon to trigger ${type} onCancel`, async () => {
+        jest.useFakeTimers();
+
        const mock = jest.fn();

        Modal[type]?.({
@@ -688,17 +690,21 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        await waitFakeTimer();

        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-        $$('.ant-modal-close')[0].click();
+        fireEvent.click($$('.ant-modal-close')[0]);

        await waitFakeTimer();

        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
        expect(mock).toHaveBeenCalledWith(expect.any(Function));
+
+        jest.useRealTimers();
      });
    });

    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => {
      it(`press ESC to trigger ${type} onCancel`, async () => {
+        jest.useFakeTimers();
+
        const mock = jest.fn();

        Modal[type]?.({
@@ -709,17 +715,21 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        await waitFakeTimer();

        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-        fireEvent.keyDown(window, { key: 'Escape' });
+        fireEvent.keyDown($$(`.ant-modal-confirm-${type}`)[0], { key: 'Escape' });

        await waitFakeTimer(0);

        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
        expect(mock).toHaveBeenCalledWith(expect.any(Function));
+
+        jest.useRealTimers();
      });
    });

    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => {
      it(`click the mask to trigger ${type} onCancel`, async () => {
+        jest.useFakeTimers();
+
        const mock = jest.fn();

        Modal[type]?.({
@@ -732,17 +742,22 @@ describe('Modal.confirm triggers callbacks correctly', () => {
        expect($$('.ant-modal-mask')).toHaveLength(1);
        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);

-        $$('.ant-modal-wrap')[0].click();
+        fireEvent.mouseDown($$('.ant-modal-wrap')[0]);
+        fireEvent.click($$('.ant-modal-wrap')[0]);

        await waitFakeTimer();

        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
        expect(mock).toHaveBeenCalledWith(expect.any(Function));
+
+        jest.useRealTimers();
      });
    });
  });

  it('confirm modal click Cancel button close callback is a function', async () => {
+    jest.useFakeTimers();
+
    const mock = jest.fn();

    Modal.confirm({
@@ -751,13 +766,17 @@ describe('Modal.confirm triggers callbacks correctly', () => {

    await waitFakeTimer();

-    $$('.ant-modal-confirm-btns > .ant-btn')[0].click();
+    fireEvent.click($$('.ant-modal-confirm-btns > .ant-btn')[0]);
    await waitFakeTimer();

    expect(mock).toHaveBeenCalledWith(expect.any(Function));
+
+    jest.useRealTimers();
  });

  it('close can close modal when onCancel has a close parameter', async () => {
+    jest.useFakeTimers();
+
    Modal.confirm({
      onCancel: (close) => close(),
    });
@@ -766,10 +785,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {

    expect($$('.ant-modal-confirm-confirm')).toHaveLength(1);

-    $$('.ant-modal-confirm-btns > .ant-btn')[0].click();
+    fireEvent.click($$('.ant-modal-confirm-btns > .ant-btn')[0]);
    await waitFakeTimer();

    expect($$('.ant-modal-confirm-confirm')).toHaveLength(0);
+
+    jest.useRealTimers();
  });

  // https://github.com/ant-design/ant-design/issues/37461
--- a/components/modal/tests/hook.test.tsx
+++ b/components/modal/tests/hook.test.tsx
@@ -186,6 +186,7 @@ describe('Modal.hook', () => {
    expect(cancelCount).toEqual(1); // click cancel btn, trigger onCancel

    fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
+    fireEvent.mouseDown(document.body.querySelectorAll('.ant-modal-wrap')[0]);
    fireEvent.click(document.body.querySelectorAll('.ant-modal-wrap')[0]);
    expect(cancelCount).toEqual(2); // click modal wrapper, trigger onCancel
  });
@@ -322,6 +323,7 @@ describe('Modal.hook', () => {

    expect(document.body.querySelectorAll('.ant-modal-confirm-confirm')).toHaveLength(1);
    // Click mask to close
+    fireEvent.mouseDown(document.body.querySelectorAll('.ant-modal-wrap')[0]);
    fireEvent.click(document.body.querySelectorAll('.ant-modal-wrap')[0]);

    await waitFakeTimer();
--- a/components/modal/style/index.ts
+++ b/components/modal/style/index.ts
@@ -184,7 +184,7 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
 };

 const genModalStyle: GenerateStyle<ModalToken> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, motionDurationMid } = token;

  return [
    // ======================== Root =========================
@@ -284,8 +284,9 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
          border: 0,
          outline: 0,
          cursor: 'pointer',
-          transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
-
+          transition: ['color', 'background-color']
+            .map((prop) => `${prop} ${motionDurationMid}`)
+            .join(', '),
          '&-x': {
            display: 'flex',
            fontSize: token.fontSizeLG,
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@@ -136,6 +136,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
    colorErrorBg,
    colorInfoBg,
    colorWarningBg,
+    motionDurationMid,
  } = token;

  const noticeCls = `${componentCls}-notice`;
@@ -223,7 +224,10 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
      width: token.notificationCloseButtonSize,
      height: token.notificationCloseButtonSize,
      borderRadius: token.borderRadiusSM,
-      transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
+
+      transition: ['color', 'background-color']
+        .map((prop) => `${prop} ${motionDurationMid}`)
+        .join(', '),
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
--- a/components/pagination/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/pagination/tests/snapshots/demo-extend.test.ts.snap
@@ -566,7 +566,6 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="10 / page"
        >
          10 / page
@@ -1039,7 +1038,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -1368,7 +1366,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -1665,7 +1662,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -2005,7 +2001,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -2425,7 +2420,6 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="10 / page"
        >
          10 / page
@@ -2759,7 +2753,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -3099,7 +3092,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -3539,7 +3531,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -3962,7 +3953,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -4393,7 +4383,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -4816,7 +4805,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -5212,7 +5200,6 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="10 / page"
        >
          10 / page
@@ -5816,7 +5803,6 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -6152,7 +6138,6 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -6443,7 +6428,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="20 / page"
          >
            20 / page
@@ -6728,7 +6712,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="20 / page"
          >
            20 / page
@@ -7063,7 +7046,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -7392,7 +7374,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -7722,7 +7703,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -8051,7 +8031,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
--- a/components/pagination/tests/snapshots/demo.test.ts.snap
+++ b/components/pagination/tests/snapshots/demo.test.ts.snap
@@ -564,7 +564,6 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -931,7 +930,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1158,7 +1156,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1351,7 +1348,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1589,7 +1585,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1903,7 +1898,6 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -2133,7 +2127,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -2371,7 +2364,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -2707,7 +2699,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3028,7 +3019,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3357,7 +3347,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3678,7 +3667,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3970,7 +3958,6 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -4468,7 +4455,6 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -4702,7 +4688,6 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -4889,7 +4874,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="20 / page"
          >
            20 / page
@@ -5072,7 +5056,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="20 / page"
          >
            20 / page
@@ -5303,7 +5286,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5530,7 +5512,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5758,7 +5739,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5985,7 +5965,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="10 / page"
          >
            10 / page
--- a/components/pagination/tests/snapshots/index.test.tsx.snap
+++ b/components/pagination/tests/snapshots/index.test.tsx.snap
@@ -260,7 +260,6 @@ exports[`Pagination ConfigProvider should be rendered correctly when componentSi
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="10 / page"
        >
          10 / page
--- a/components/popover/style/index.ts
+++ b/components/popover/style/index.ts
@@ -108,7 +108,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
        userSelect: 'text',

        // When use `autoArrow`, origin will follow the arrow position
-        [varName('valid-offset-x')]: varRef('arrow-offset-horizontal', 'var(--arrow-x)'),
+        [varName('valid-offset-x')]: varRef('arrow-offset-x', 'var(--arrow-x)'),
        transformOrigin: [
          varRef('valid-offset-x', FALL_BACK_ORIGIN),
          `var(--arrow-y, ${FALL_BACK_ORIGIN})`,
--- a/components/radio/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/radio/tests/snapshots/demo-extend.test.ts.snap
@@ -1561,6 +1561,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
 >
  <label
    class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
+    style="height: 32px; line-height: 32px;"
  >
    <span
      class="ant-radio ant-wave-target ant-radio-checked"
@@ -1584,6 +1585,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height: 32px; line-height: 32px;"
  >
    <span
      class="ant-radio ant-wave-target"
@@ -1606,6 +1608,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height: 32px; line-height: 32px;"
  >
    <span
      class="ant-radio ant-wave-target"
@@ -1628,6 +1631,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height: 32px; line-height: 32px;"
  >
    <span
      class="ant-radio ant-wave-target"
--- a/components/radio/tests/snapshots/demo.test.tsx.snap
+++ b/components/radio/tests/snapshots/demo.test.tsx.snap
@@ -1543,6 +1543,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
 >
  <label
    class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
+    style="height:32px;line-height:32px"
  >
    <span
      class="ant-radio ant-wave-target ant-radio-checked"
@@ -1566,6 +1567,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height:32px;line-height:32px"
  >
    <span
      class="ant-radio ant-wave-target"
@@ -1588,6 +1590,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height:32px;line-height:32px"
  >
    <span
      class="ant-radio ant-wave-target"
@@ -1610,6 +1613,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
  </label>
  <label
    class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
+    style="height:32px;line-height:32px"
  >
    <span
      class="ant-radio ant-wave-target"
--- a/components/radio/demo/radiogroup-more.tsx
+++ b/components/radio/demo/radiogroup-more.tsx
@@ -2,6 +2,11 @@ import React, { useState } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import { Input, Radio } from 'antd';

+const labelStyle: React.CSSProperties = {
+  height: 32,
+  lineHeight: '32px',
+};
+
 const App: React.FC = () => {
  const [value, setValue] = useState(1);

@@ -15,11 +20,12 @@ const App: React.FC = () => {
      onChange={onChange}
      value={value}
      options={[
-        { value: 1, label: 'Option A' },
-        { value: 2, label: 'Option B' },
-        { value: 3, label: 'Option C' },
+        { value: 1, style: labelStyle, label: 'Option A' },
+        { value: 2, style: labelStyle, label: 'Option B' },
+        { value: 3, style: labelStyle, label: 'Option C' },
        {
          value: 4,
+          style: labelStyle,
          label: (
            <>
              More...
--- a/components/radio/style/index.ts
+++ b/components/radio/style/index.ts
@@ -388,11 +388,9 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
      borderBlockStartWidth: calc(lineWidth).add(0.02).equal(),
      borderInlineEndWidth: lineWidth,
      cursor: 'pointer',
-      transition: [
-        `color ${motionDurationMid}`,
-        `background-color ${motionDurationMid}`,
-        `box-shadow ${motionDurationMid}`,
-      ].join(','),
+      transition: [`color`, `background-color`, `box-shadow`]
+        .map((prop) => `${prop} ${motionDurationMid}`)
+        .join(','),

      a: {
        color: buttonColor,
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@@ -1781,7 +1781,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
--- a/components/segmented/tests/snapshots/demo.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo.test.ts.snap
@@ -1696,7 +1696,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
--- a/components/segmented/style/index.ts
+++ b/components/segmented/style/index.ts
@@ -78,7 +78,7 @@ const segmentedTextEllipsisCss: CSSObject = {

 // ============================== Styles ==============================
 const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
-  const { componentCls } = token;
+  const { componentCls, motionDurationSlow, motionEaseInOut, motionDurationMid } = token;

  const labelHeight = token
    .calc(token.controlHeight)
@@ -102,7 +102,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      color: token.itemColor,
      background: token.trackBg,
      borderRadius: token.borderRadius,
-      transition: `all ${token.motionDurationMid}`,
+      transition: `all ${motionDurationMid}`,
      ...genFocusStyle(token),

      [`${componentCls}-group`]: {
@@ -146,7 +146,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
        position: 'relative',
        textAlign: 'center',
        cursor: 'pointer',
-        transition: `color ${token.motionDurationMid}`,
+        transition: `color ${motionDurationMid}`,
        borderRadius: token.borderRadiusSM,
        // Fix Safari render bug
        // https://github.com/ant-design/ant-design/issues/45250
@@ -169,10 +169,12 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
          insetInlineStart: 0,
          borderRadius: 'inherit',
          opacity: 0,
-          transition: `opacity ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
          // This is mandatory to make it not clickable or hoverable
          // Ref: https://github.com/ant-design/ant-design/issues/40888
          pointerEvents: 'none',
+          transition: ['opacity', 'background-color']
+            .map((prop) => `${prop} ${motionDurationMid}`)
+            .join(', '),
        },

        [`&:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
@@ -262,8 +264,10 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)

      // transition effect when `appear-active`
      [`${componentCls}-thumb-motion-appear-active`]: {
-        transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, width ${token.motionDurationSlow} ${token.motionEaseInOut}`,
        willChange: 'transform, width',
+        transition: [`transform`, `width`]
+          .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+          .join(', '),
      },

      [`&${componentCls}-shape-round`]: {
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@@ -388,7 +388,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -553,7 +552,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -663,7 +661,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -772,7 +769,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -915,7 +911,6 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Zhejiang"
        >
          Zhejiang
@@ -1048,7 +1043,6 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Hangzhou"
        >
          Hangzhou
@@ -1394,7 +1388,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
      >
        <span>
          No option match
@@ -4140,7 +4133,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -4458,7 +4450,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -4801,7 +4792,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -5279,7 +5269,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="Lucy (101)"
      >
        Lucy (101)
@@ -6649,7 +6638,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="lucy"
      >
        lucy
@@ -6847,7 +6835,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="long, long, long piece of text"
          >
            long, long, long piece of text
@@ -7178,7 +7165,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
          >
            <div>
              normal
@@ -8634,7 +8620,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Bamboo"
          >
            Bamboo
@@ -8816,7 +8801,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="Bamboo"
          >
            Bamboo
@@ -9023,7 +9007,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility: visible;"
                        title="Bamboo"
                      >
                        Bamboo
@@ -9584,7 +9567,6 @@ Array [
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Bamboo"
        >
          Bamboo
@@ -10855,7 +10837,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility: visible;"
        title="HangZhou #310000"
      >
        HangZhou #310000
@@ -13568,7 +13549,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility: visible;"
            title="a1"
          >
            a1
@@ -15640,7 +15620,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -15828,7 +15807,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -15993,7 +15971,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
-          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/components/select/tests/snapshots/demo.test.tsx.snap
@@ -77,7 +77,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -132,7 +131,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -188,7 +186,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -243,7 +240,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -447,7 +443,6 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Zhejiang"
        >
          Zhejiang
@@ -502,7 +497,6 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Hangzhou"
        >
          Hangzhou
@@ -611,7 +605,6 @@ exports[`renders components/select/demo/custom-label-render.tsx correctly 1`] =
  >
    <div
      class="ant-select-content-value"
-      style="visibility:visible"
    >
      <span>
        No option match
@@ -1126,7 +1119,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1247,7 +1239,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1393,7 +1384,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1576,7 +1566,6 @@ exports[`renders components/select/demo/label-in-value.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility:visible"
      title="Lucy (101)"
    >
      Lucy (101)
@@ -1981,7 +1970,6 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
-      style="visibility:visible"
      title="lucy"
    >
      lucy
@@ -2043,7 +2031,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="long, long, long piece of text"
          >
            long, long, long piece of text
@@ -2176,7 +2163,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
          >
            <div>
              normal
@@ -2802,7 +2788,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Bamboo"
          >
            Bamboo
@@ -2885,7 +2870,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="Bamboo"
          >
            Bamboo
@@ -2993,7 +2977,6 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
-                        style="visibility:visible"
                        title="Bamboo"
                      >
                        Bamboo
@@ -3264,7 +3247,6 @@ Array [
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Bamboo"
        >
          Bamboo
@@ -3885,7 +3867,6 @@ Array [
    >
      <div
        class="ant-select-content-value"
-        style="visibility:visible"
        title="HangZhou #310000"
      >
        HangZhou #310000
@@ -4721,7 +4702,6 @@ Array [
        >
          <div
            class="ant-select-content-value"
-            style="visibility:visible"
            title="a1"
          >
            a1
@@ -5329,7 +5309,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -5407,7 +5386,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -5462,7 +5440,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
-          style="visibility:visible"
          title="Lucy"
        >
          Lucy
--- a/components/select/demo/search-box.tsx
+++ b/components/select/demo/search-box.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable compat/compat */
 import React, { useState } from 'react';
 import { Select } from 'antd';
 import type { SelectProps } from 'antd';
--- a/components/select/style/index.ts
+++ b/components/select/style/index.ts
@@ -13,7 +13,7 @@ export type { ComponentToken };

 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
-  const { antCls, componentCls, inputPaddingHorizontalBase } = token;
+  const { antCls, componentCls, motionDurationMid, inputPaddingHorizontalBase } = token;

  const hoverShowClearStyle: CSSObject = {
    [`${componentCls}-clear`]: {
@@ -66,7 +66,9 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
        textTransform: 'none',
        cursor: 'pointer',
        opacity: 0,
-        transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
+        transition: ['color', 'opacity']
+          .map((prop) => `${prop} ${motionDurationMid} ease`)
+          .join(', '),
        textRendering: 'auto',
        // https://github.com/ant-design/ant-design/issues/54205
        // Force GPU compositing on Safari to prevent flickering on opacity/transform transitions
--- a/components/slider/style/index.ts
+++ b/components/slider/style/index.ts
@@ -228,14 +228,16 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
          outline: `0px solid transparent`,
          borderRadius: '50%',
          cursor: 'pointer',
-          transition: `
-            inset-inline-start ${motionDurationMid},
-            inset-block-start ${motionDurationMid},
-            width ${motionDurationMid},
-            height ${motionDurationMid},
-            box-shadow ${motionDurationMid},
-            outline ${motionDurationMid}
-          `,
+          transition: [
+            'inset-inline-start',
+            'inset-block-start',
+            'width',
+            'height',
+            'box-shadow',
+            'outline',
+          ]
+            .map((prop) => `${prop} ${motionDurationMid}`)
+            .join(', '),
        },

        '&:hover, &:active, &:focus': {
--- a/Show More
+++ b/Show More