Merge branch 'master' into guidelines

docs: create component guidelines template and overview documents
- Introduced spacing design tokens for consistent padding and margin values. - Added typography design tokens for font sizes, weights, and line heights. - Created a template for component guidelines to standardize documentation. - Developed an overview of components and icons, detailing usage and best practices.
2026-02-10 11:29:19 +08:00 · 2026-01-27 14:16:11 +08:00 · 2026-01-27 14:15:46 +08:00
162 changed files with 6570 additions and 1014 deletions
--- a/.dumi/global.less
+++ b/.dumi/global.less
@@ -1,15 +1,6 @@
 // FIXME: workaround for avoid searchbar styles be extracted to async chunk
@import 'dumi/theme-default/slots/SearchBar/index.less';

-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation: none;
-    transition: none;
-  }
-}
-
 .demo-logo {
  width: 120px;
  min-width: 120px;
--- 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 { createStyles, css, useTheme } from 'antd-style';
+import { createStaticStyles, 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 useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ cssVar }) => ({
  tableTitle: css`
    cursor: pointer;
    position: relative;
@@ -104,8 +104,6 @@ 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} calc(${cssVar.paddingMD} * 2);
+    padding: ${cssVar.paddingMD} ${cssVar.paddingLG} ${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: calc(${cssVar.marginMD} * 2);
+    margin-top: ${cssVar.marginMD * 2};
  `,
 }));

--- 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@v13
+        uses: dawidd6/action-download-artifact@v12
        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@v13
+        uses: dawidd6/action-download-artifact@v12
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -34,7 +34,6 @@ jobs:
        shard: [1/2, 2/2]
    env:
      REACT: ${{ matrix.react }}
-      SKIP_SEMANTIC: '1'
    runs-on: blacksmith-4vcpu-ubuntu-2404
    steps:
      - uses: actions/checkout@v6
@@ -53,6 +52,15 @@ 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@v13
+        uses: dawidd6/action-download-artifact@v12
        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@v13
+        uses: dawidd6/action-download-artifact@v12
        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@v13
+        uses: dawidd6/action-download-artifact@v12
        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@v13
+        uses: dawidd6/action-download-artifact@v12
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.jest.js
+++ b/.jest.js
@@ -34,10 +34,6 @@ 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',
@@ -58,7 +54,7 @@ module.exports = {
    'node',
    'image.test.js',
    'image.test.ts',
-    ...(shouldIgnoreSemantic ? ['demo-semantic.test'] : []),
+    'demo-semantic.test',
  ],
  transform: {
    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
--- a/.jest.semantic.js
+++ b/.jest.semantic.js
@@ -0,0 +1,30 @@
+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,166 +1,92 @@
 # AGENTS.md

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

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

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

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

 ### 开发环境要求

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

 ### 安装依赖

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

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

 ```bash
-# 启动开发服务器（访问 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
+npm start     # 启动开发服务器
+npm run build # 构建项目
+npm test      # 运行测试
+npm run lint  # 代码检查
 ```

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

 #### Props 命名

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

 #### 事件命名

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

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

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

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

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

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

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

-#### API 表格格式
-
-| Property  | Description     | Type                                                   | Default   |
-| --------- | --------------- | ------------------------------------------------------ | --------- |
-| htmlType  | Button 原生类型 | string                                                 | `button`  |
-| type      | 按钮类型        | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
-| disabled  | 是否禁用        | boolean                                                | false     |
-| minLength | 最小长度        | number                                                 | 0         |
-| style     | 自定义样式      | CSSProperties                                          | -         |
+| 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 文档要求

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

 ## TypeScript 规范

 ### 基本原则

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

 ### 组件类型定义

-```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) => {
-  // ...
-});
-```
+- 组件 props 应使用 interface 定义，便于扩展
+- 组件 props 接口命名应为 `ComponentNameProps`
+- 为组件状态定义专门的接口，如 `ComponentNameState`
+- 复杂的数据结构应拆分为多个接口定义
+- 组件的 ref 类型应该明确定义，使用 `React.ForwardRefRenderFunction`
+- 所有回调函数类型应明确定义参数和返回值

 ### 类型使用最佳实践

- ✅ 适当使用泛型增强类型灵活性
- ✅ 使用交叉类型（&）合并多个类型
- ✅ 使用字面量联合类型定义有限的选项集合
- ✅ 避免使用 `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',
-}
-```
-
---
+- 适当使用泛型增强类型灵活性
+- 使用交叉类型（&）合并多个类型
+- 使用字面量联合类型定义有限的选项集合
+- 避免使用 `enum`，优先使用联合类型和 `as const`
+- 尽可能依赖 TypeScript 的类型推断
+- 只在必要时使用类型断言（as）

 ## 样式规范

@@ -284,17 +165,17 @@ enum ButtonType {

 ### 响应式和主题支持

- ✅ 组件应支持在不同屏幕尺寸下良好展示
- ✅ 所有组件必须支持暗色模式
- ✅ 组件应支持从右到左（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）
 - 动画时长和缓动函数应保持一致性
 - 动画不应干扰用户的操作和阅读体验

@@ -307,108 +188,67 @@ enum ButtonType {
 - 支持用户放大页面至 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 run test:image          # UI 快照测试（需要 Docker）
+npm test -- --watch       # 监听模式
+npm run test:coverage     # 生成覆盖率报告
 ```

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

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

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

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

 - 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
 - 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
 - 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.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;
-```
-
-**规范要点**：
+### TSX 代码规范

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

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

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

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

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

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

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

 ```tsx
 import { useLocale } from '../locale';
@@ -416,7 +256,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 };

@@ -424,105 +264,162 @@ 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` 书写每个版本的变更
+### 🎯 核心原则

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

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

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

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

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

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

-1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
-   - 组件名**无需加粗**，后接英文冒号和空格
+### 💡 输出示例参考

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

-3. **文本细节**：
-   - **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
-   - **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
-
-#### 🏷️ Emoji 规范（严格执行）
-
-| Emoji  | 用途                   |
-| ------ | ---------------------- |
-| 🐞     | 修复 Bug               |
-| 💄     | 样式更新或 token 更新  |
-| 🆕     | 新增特性 / 新增属性    |
-| 🔥     | 极其值得关注的新增特性 |
-| 🇺🇸🇨🇳🇬🇧 | 国际化改动             |
-| 📖 📝  | 文档或网站改进         |
-| ✅     | 新增或更新测试用例     |
-| 🛎     | 更新警告/提示信息      |
-| ⌨️ ♿  | 可访问性增强           |
-| 🗑     | 废弃或移除             |
-| 🛠     | 重构或工具链优化       |
-| ⚡️     | 性能提升               |
-
-#### 💡 输出示例参考
-
-**中文版**：
-
-```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

-```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)
 ```

+### 提示词
+
+```md
+### 🤖 角色定义
+
+你是一位 Ant Design 核心维护者，负责编写 `CHANGELOG.zh-CN.md` 和 `CHANGELOG.en-US.md`。你需要将原始 PR 列表转化为专业、简洁、面向开发者的发布日志。
+
+### 🎯 核心原则
+
+1. **有效性过滤**：忽略用户无感知的改动（如文档网站改进、纯测试用例更新、内部重构、工具链优化等），除非其对开发者有直接影响。
+2. **开发者视角**：描述“用户的原始问题”和“对开发者的影响”，而非“具体的解决代码”。
+
+- ❌ 修复 Typography 的 DOM 结构问题。
+- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。
+
+3. **版本与命名**：
+
+- 新增属性必须符合 antd API 命名规则。
+- 新增属性建议在描述中暗示或明确声明可用版本号。
+
+### 🎨 格式与结构规范
+
+1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`。
+
+- 组件名**无需加粗**，后接英文冒号和空格。
+
+2. **分组逻辑**：
+
+- **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列。
+- **单项改动**：直接编写单行条目，不设分类标题。
+
+3. **文本细节**：
+
+- **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
+- **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**。
+
+### 🏷️ Emoji 规范 (严格执行)
+
+- 🐞 修复 Bug
+- 💄 样式更新或 token 更新
+- 🆕 新增特性 / 新增属性
+- 🔥 极其值得关注的新增特性
+- 🇺🇸🇨🇳🇬🇧 国际化改动
+- 📖 📝 文档或网站改进
+- ✅ 新增或更新测试用例
+- 🛎 更新警告/提示信息
+- ⌨️ ♿ 可访问性增强
+- 🗑 废弃或移除
+- 🛠 重构或工具链优化
+- ⚡️ 性能提升
+
 ---

+### 🏗️ 任务执行：请处理以下 PR 数据
+
+#### 💡 输出示例参考：
+
+**中文版：**
+
+- 🐞 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 Version:**
+
+- 🐞 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`：特性分支，用于开发新版本
@@ -538,20 +435,18 @@ export function TestComp(props) {

 ### 分支命名规范

-| 类型     | 格式                              | 示例                          |
-| -------- | --------------------------------- | ----------------------------- |
-| 功能开发 | `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`       |
+- 功能开发：`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`

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

 1. 使用小写字母
 2. 使用连字符（-）分隔单词
@@ -565,9 +460,8 @@ 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 内容

@@ -579,8 +473,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 提交注意事项

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

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

 - 🆕 新特性提交
 - 🐞 Bug 修复
@@ -614,35 +508,31 @@ 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+ 浏览器
- ✅ 支持服务端渲染（SSR）
- ✅ 保持向下兼容，避免 breaking change
- ✅ 支持 TypeScript 4.0+
-
---
+- 支持 React 18 ~ 19 版本
+- 兼容 Chrome 80+ 浏览器
+- 支持服务端渲染
+- 保持向下兼容，避免 breaking change
+- 支持 TypeScript 4.0+

 ## 工具链和环境

@@ -667,11 +557,12 @@ 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
- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)
+
+## 特别说明
+
+如果使用 AI 编程助手（如 Cursor）进行开发，请在提交 PR 时在末尾标注：`> Submitted by Cursor`
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,19 +15,6 @@ tag: vVERSION

 ---

-## 6.2.3
-
-`2026-02-01`
-
- 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,19 +15,6 @@ 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/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@@ -968,6 +968,18 @@ 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,6 +952,18 @@ 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
@@ -103,29 +103,6 @@ const App: React.FC = () => (
        </Button>
      </Flex>
    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            defaultBg: 'red',
-            defaultColor: 'blue',
-            defaultHoverColor: 'green',
-            defaultActiveColor: 'yellow',
-
-            textTextColor: 'purple',
-            textTextHoverColor: 'orange',
-            textTextActiveColor: 'pink',
-            textHoverBg: 'brown',
-          },
-        },
-      }}
-    >
-      <Flex gap="small" align="start">
-        <Button>Default Button</Button>
-        <Button type="dashed">Dashed Button</Button>
-        <Button type="text">Text Button</Button>
-      </Flex>
-    </ConfigProvider>
  </Flex>
 );

--- a/components/button/demo/debug-color-variant.tsx
+++ b/components/button/demo/debug-color-variant.tsx
@@ -114,6 +114,22 @@ 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,67 +5,38 @@ 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 { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
-
-  const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
+  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
  const insetOffset = calc(lineWidth).mul(-1).equal();
-
-  const [varName, varRef] = genCssVar(antCls, 'btn');
-
-  const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
+  const getCompactBorderStyle = (vertical?: boolean) => {
    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]: {
-        [varName('compact-connect-border-color')]: varRef('bg-color-hover'),
-
-        [`&${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',
-          },
-        },
+        transition: `none`,
      },
+
+      [`${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,
    };
  };
-
-  // 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})`,
-      },
-    },
-  ];
+  // Special styles for Primary Button
+  return {
+    ...getCompactBorderStyle(),
+    ...getCompactBorderStyle(true),
+  };
 };

 // ============================== Export ==============================
--- a/components/button/style/variant.ts
+++ b/components/button/style/variant.ts
@@ -218,9 +218,9 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
          [varName('color-light-hover')]: token.colorFillSecondary,
          [varName('color-light-active')]: token.colorFill,

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

          [`&${componentCls}-variant-solid`]: {
@@ -235,11 +235,7 @@ 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-hover')]: token.defaultHoverBg,
            [varName('bg-color-active')]: token.defaultActiveBg,
          },

--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
@@ -15,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -430,6 +431,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -1553,6 +1555,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -1968,6 +1971,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -3090,6 +3094,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -3505,6 +3510,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -4621,6 +4627,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -5036,6 +5043,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -6219,6 +6227,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="2016"
            >
              2016
@@ -6674,6 +6683,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="Nov"
            >
              Nov
@@ -7762,6 +7772,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -8177,6 +8188,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -9710,6 +9722,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2017"
          >
            2017
@@ -10125,6 +10138,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Jan"
          >
            Jan
@@ -11250,6 +11264,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -11665,6 +11680,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -12781,6 +12797,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -13196,6 +13213,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -14318,6 +14336,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -14733,6 +14752,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -15910,6 +15930,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -16325,6 +16346,7 @@ 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,6 +24,7 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title="2016"
              >
                2016
@@ -73,6 +74,7 @@ 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,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="2016"
        >
          2016
@@ -64,6 +65,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -947,6 +949,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -996,6 +999,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -1878,6 +1882,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -1927,6 +1932,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -2805,6 +2811,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -2854,6 +2861,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -3797,6 +3805,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="2016"
            >
              2016
@@ -3846,6 +3855,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="Nov"
            >
              Nov
@@ -4678,6 +4688,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="2016"
        >
          2016
@@ -4727,6 +4738,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -6020,6 +6032,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2017"
          >
            2017
@@ -6069,6 +6082,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Jan"
          >
            Jan
@@ -6954,6 +6968,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7003,6 +7018,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -7881,6 +7897,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7930,6 +7947,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -8812,6 +8830,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -8861,6 +8880,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -9800,6 +9820,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -9849,6 +9870,7 @@ 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,6 +15,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2019"
        >
          2019
@@ -64,6 +65,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Jan"
        >
          Jan
@@ -944,6 +946,7 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2018年"
        >
          2018年
@@ -993,6 +996,7 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="10月"
        >
          10月
@@ -1873,6 +1877,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -1922,6 +1927,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Sep"
        >
          Sep
@@ -2802,6 +2808,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -2851,6 +2858,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Jan"
        >
          Jan
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@@ -601,6 +601,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
      >
        <span>
          Zhejiang / 
@@ -879,6 +880,7 @@ 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,6 +216,7 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility:visible"
    >
      <span>
        Zhejiang
@@ -319,6 +320,7 @@ 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,6 +1165,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility: visible;"
      title="Zhejiang / Hangzhou"
    >
      Zhejiang / Hangzhou
@@ -1453,6 +1454,7 @@ 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,6 +1102,7 @@ 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,6 +1090,7 @@ 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,6 +144,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -517,6 +518,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -895,6 +897,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1265,6 +1268,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1644,6 +1648,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -1995,6 +2000,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -2308,6 +2314,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -2693,6 +2700,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HSB"
                        >
                          HSB
@@ -3284,6 +3292,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="RGB"
                        >
                          RGB
@@ -3975,6 +3984,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4399,6 +4409,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4799,6 +4810,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
+                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -5755,6 +5767,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
+                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -6132,6 +6145,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -6934,6 +6948,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -7319,6 +7334,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -7689,6 +7705,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8059,6 +8076,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8442,6 +8460,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8817,6 +8836,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9192,6 +9212,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9569,6 +9590,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -9935,6 +9957,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -10327,6 +10350,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -10704,6 +10728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11098,6 +11123,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11469,6 +11495,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -11842,6 +11869,7 @@ 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,6 +148,7 @@ 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,6 +147,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -420,6 +421,7 @@ 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,15 +149,9 @@ 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('');
+    expect(input.getAttribute('value')).toEqual('xyz');

-    // 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
+    // onChange should not be called because the input is invalid
    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(/[^0-9a-f]/gi, '').slice(0, alpha ? 8 : 6) || '';
+  value?.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6) || '';

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

--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -1602,6 +1602,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -1651,6 +1652,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -2528,6 +2530,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -2871,6 +2874,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -2921,6 +2925,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -3801,6 +3806,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -4147,6 +4153,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -4196,6 +4203,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -5073,6 +5081,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -5416,6 +5425,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -5465,6 +5475,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -6342,6 +6353,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -6685,6 +6697,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -6734,6 +6747,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -7611,6 +7625,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -7954,6 +7969,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -8003,6 +8019,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -8880,6 +8897,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -9223,6 +9241,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -9272,6 +9291,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Sep"
          >
            Sep
@@ -10149,6 +10169,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2000"
          >
            2000
@@ -18374,6 +18395,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18506,6 +18528,7 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18643,6 +18666,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18776,6 +18800,7 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -18914,6 +18939,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19046,6 +19072,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19183,6 +19210,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19315,6 +19343,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19452,6 +19481,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19584,6 +19614,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
        >
          <div
            class="config-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19721,6 +19752,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19853,6 +19885,7 @@ exports[`ConfigProvider components Pagination normal 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -19990,6 +20023,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -20122,6 +20156,7 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -23716,6 +23751,7 @@ exports[`ConfigProvider components Select configProvider 1`] = `
  >
    <div
      class="config-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23771,6 +23807,7 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
  >
    <div
      class="config-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23824,6 +23861,7 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
  >
    <div
      class="config-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23879,6 +23917,7 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
  >
    <div
      class="config-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23934,6 +23973,7 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
  >
    <div
      class="config-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -23989,6 +24029,7 @@ exports[`ConfigProvider components Select normal 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility: visible;"
      title="Light"
    >
      Light
@@ -24044,6 +24085,7 @@ 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,10 +309,7 @@ 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,6 +88094,7 @@ 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,6 +7670,7 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Time"
        >
          Time
--- 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 ant-typography-link css-var-test-id"
+                class="ant-typography css-var-test-id"
              >
                Footer
              </a>
--- 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-typography-link ant-dropdown-trigger css-var-test-id"
+    class="ant-typography 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-typography-link ant-dropdown-trigger css-var-test-id"
+  class="ant-typography 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, vertical: mergedVertical }),
+    createFlexClassNames(prefixCls, props),
    {
      [`${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,6 +93,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -345,6 +346,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -2156,6 +2158,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="RMB"
                  >
                    RMB
@@ -5301,6 +5304,7 @@ Array [
                            >
                              <div
                                class="ant-select-content-value"
+                                style="visibility: visible;"
                                title="HEX"
                              >
                                HEX
@@ -11350,6 +11354,7 @@ 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
@@ -11549,6 +11554,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="+86"
                  >
                    +86
@@ -11790,6 +11796,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="$"
                  >
                    $
@@ -12070,6 +12077,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility: visible;"
                  title="Male"
                >
                  Male
@@ -24523,6 +24531,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                          >
                            <div
                              class="ant-select-content-value"
+                              style="visibility: visible;"
                              title="HEX"
                            >
                              HEX
@@ -29156,6 +29165,7 @@ 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,6 +93,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility:visible"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -267,6 +268,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility:visible"
                        title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                      >
                        longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -1664,6 +1666,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility:visible"
                    title="RMB"
                  >
                    RMB
@@ -7656,6 +7659,7 @@ 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
@@ -7767,6 +7771,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility:visible"
                    title="+86"
                  >
                    +86
@@ -7930,6 +7935,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility:visible"
                    title="$"
                  >
                    $
@@ -8120,6 +8126,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility:visible"
                  title="Male"
                >
                  Male
@@ -12875,6 +12882,7 @@ 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,7 +28,6 @@ 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';
@@ -1379,20 +1378,6 @@ 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,10 +578,6 @@ 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,10 +577,6 @@ 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/input-number/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo-extend.test.ts.snap
@@ -110,6 +110,7 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="+"
            >
              +
@@ -312,6 +313,7 @@ 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,6 +110,7 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="+"
            >
              +
@@ -234,6 +235,7 @@ 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,7 +23,6 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {

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

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

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

 const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
@@ -135,7 +134,6 @@ 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,6 +51,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title="http://"
              >
                http://
@@ -187,6 +188,7 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title=".com"
              >
                .com
@@ -3030,6 +3032,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="Jack"
      >
        Jack
@@ -3158,6 +3161,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title=""
      />
      <input
@@ -3517,6 +3521,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
@@ -5773,6 +5778,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Zhejiang"
          >
            Zhejiang
@@ -6714,6 +6720,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Zhejiang"
        >
          Zhejiang
@@ -7017,6 +7024,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Option1"
        >
          Option1
@@ -9062,6 +9070,7 @@ 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
@@ -9189,6 +9198,7 @@ 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
@@ -9321,6 +9331,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Between"
        >
          Between
@@ -9476,6 +9487,7 @@ 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
@@ -9704,6 +9716,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Home"
        >
          Home
@@ -12160,33 +12173,6 @@ 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,6 +51,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="http://"
              >
                http://
@@ -109,6 +110,7 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title=".com"
              >
                .com
@@ -646,6 +648,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title="Jack"
      >
        Jack
@@ -696,6 +699,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title=""
      />
      <input
@@ -839,6 +843,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
@@ -1664,6 +1669,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Zhejiang"
          >
            Zhejiang
@@ -2489,6 +2495,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Zhejiang"
        >
          Zhejiang
@@ -2698,6 +2705,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Option1"
        >
          Option1
@@ -2977,6 +2985,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Option1-1"
        >
          Option1-1
@@ -3026,6 +3035,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Option2-2"
        >
          Option2-2
@@ -3080,6 +3090,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Between"
        >
          Between
@@ -3157,6 +3168,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Sign Up"
        >
          Sign Up
@@ -3238,6 +3250,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Home"
        >
          Home
@@ -5477,12 +5490,6 @@ 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,18 +605,4 @@ 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,6 +1,5 @@
-import React, { useRef, useState } from 'react';
-import { Button, Input, Tooltip } from 'antd';
-import type { TextAreaRef } from 'antd/es/input/TextArea';
+import React, { useState } from 'react';
+import { Button, Input } from 'antd';

 const { TextArea } = Input;

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

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

  return (
    <>
@@ -25,15 +23,6 @@ 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,6 +317,7 @@ 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/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 ant-typography-link css-var-test-id"
+            class="ant-typography 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 ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="https://github.com/ant-design/ant-design/pull/44318"
          >
            Feature #44318
--- a/components/pagination/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/pagination/tests/snapshots/demo-extend.test.ts.snap
@@ -566,6 +566,7 @@ 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
@@ -1038,6 +1039,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -1366,6 +1368,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -1662,6 +1665,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -2001,6 +2005,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -2420,6 +2425,7 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="10 / page"
        >
          10 / page
@@ -2753,6 +2759,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -3092,6 +3099,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -3531,6 +3539,7 @@ 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
@@ -3953,6 +3962,7 @@ 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
@@ -4383,6 +4393,7 @@ 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
@@ -4805,6 +4816,7 @@ 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
@@ -5200,6 +5212,7 @@ 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
@@ -5803,6 +5816,7 @@ 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
@@ -6138,6 +6152,7 @@ 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
@@ -6428,6 +6443,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="20 / page"
          >
            20 / page
@@ -6712,6 +6728,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="20 / page"
          >
            20 / page
@@ -7046,6 +7063,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -7374,6 +7392,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -7703,6 +7722,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="10 / page"
          >
            10 / page
@@ -8031,6 +8051,7 @@ 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,6 +564,7 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -930,6 +931,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1156,6 +1158,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1348,6 +1351,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1585,6 +1589,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -1898,6 +1903,7 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -2127,6 +2133,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -2364,6 +2371,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -2699,6 +2707,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3019,6 +3028,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3347,6 +3357,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3667,6 +3678,7 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -3958,6 +3970,7 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="10 / page"
        >
          10 / page
@@ -4455,6 +4468,7 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -4688,6 +4702,7 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -4874,6 +4889,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="20 / page"
          >
            20 / page
@@ -5056,6 +5072,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="20 / page"
          >
            20 / page
@@ -5286,6 +5303,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5512,6 +5530,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5739,6 +5758,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="10 / page"
          >
            10 / page
@@ -5965,6 +5985,7 @@ 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,6 +260,7 @@ 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/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@@ -1781,6 +1781,7 @@ 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,6 +1696,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@@ -388,6 +388,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -552,6 +553,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -661,6 +663,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -769,6 +772,7 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -911,6 +915,7 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Zhejiang"
        >
          Zhejiang
@@ -1043,6 +1048,7 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Hangzhou"
        >
          Hangzhou
@@ -1388,6 +1394,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
      >
        <span>
          No option match
@@ -4133,6 +4140,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -4450,6 +4458,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -4792,6 +4801,7 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -5269,6 +5279,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="Lucy (101)"
      >
        Lucy (101)
@@ -6638,6 +6649,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="lucy"
      >
        lucy
@@ -6835,6 +6847,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="long, long, long piece of text"
          >
            long, long, long piece of text
@@ -7165,6 +7178,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
          >
            <div>
              normal
@@ -8620,6 +8634,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Bamboo"
          >
            Bamboo
@@ -8801,6 +8816,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Bamboo"
          >
            Bamboo
@@ -9007,6 +9023,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="Bamboo"
                      >
                        Bamboo
@@ -9567,6 +9584,7 @@ Array [
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Bamboo"
        >
          Bamboo
@@ -10837,6 +10855,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="HangZhou #310000"
      >
        HangZhou #310000
@@ -13549,6 +13568,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="a1"
          >
            a1
@@ -15620,6 +15640,7 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -15807,6 +15828,7 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Lucy"
        >
          Lucy
@@ -15971,6 +15993,7 @@ 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,6 +77,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -131,6 +132,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -186,6 +188,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -240,6 +243,7 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -443,6 +447,7 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Zhejiang"
        >
          Zhejiang
@@ -497,6 +502,7 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Hangzhou"
        >
          Hangzhou
@@ -605,6 +611,7 @@ exports[`renders components/select/demo/custom-label-render.tsx correctly 1`] =
  >
    <div
      class="ant-select-content-value"
+      style="visibility:visible"
    >
      <span>
        No option match
@@ -1119,6 +1126,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1239,6 +1247,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1384,6 +1393,7 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -1566,6 +1576,7 @@ 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)
@@ -1970,6 +1981,7 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility:visible"
      title="lucy"
    >
      lucy
@@ -2031,6 +2043,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="long, long, long piece of text"
          >
            long, long, long piece of text
@@ -2163,6 +2176,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
          >
            <div>
              normal
@@ -2788,6 +2802,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Bamboo"
          >
            Bamboo
@@ -2870,6 +2885,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Bamboo"
          >
            Bamboo
@@ -2977,6 +2993,7 @@ Array [
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility:visible"
                        title="Bamboo"
                      >
                        Bamboo
@@ -3247,6 +3264,7 @@ Array [
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Bamboo"
        >
          Bamboo
@@ -3867,6 +3885,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title="HangZhou #310000"
      >
        HangZhou #310000
@@ -4702,6 +4721,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="a1"
          >
            a1
@@ -5309,6 +5329,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -5386,6 +5407,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
@@ -5440,6 +5462,7 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Lucy"
        >
          Lucy
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@@ -468,6 +468,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Zhejiang"
          >
            Zhejiang
@@ -1010,6 +1011,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Option1"
          >
            Option1
@@ -4279,6 +4281,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Option1-1"
          >
            Option1-1
@@ -4406,6 +4409,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Option2-2"
          >
            Option2-2
@@ -4541,6 +4545,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Between"
          >
            Between
@@ -4699,6 +4704,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Sign Up"
          >
            Sign Up
@@ -8234,6 +8240,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="leaf1"
          >
            leaf1
@@ -8905,6 +8912,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -9270,38 +9278,6 @@ exports[`renders components/space/demo/compact-button-vertical.tsx extend contex
      </button>
    </div>
  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div
-      class="ant-space-compact ant-space-compact-vertical"
-    >
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
-        type="button"
-      >
-        <span>
-          Button 1
-        </span>
-      </button>
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
-        type="button"
-      >
-        <span>
-          Button 2
-        </span>
-      </button>
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
-        type="button"
-      >
-        <span>
-          Button 3
-        </span>
-      </button>
-    </div>
-  </div>
 </div>
 `;

@@ -10407,6 +10383,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility: visible;"
                  title="http://"
                >
                  http://
@@ -10543,6 +10520,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility: visible;"
                  title=".com"
                >
                  .com
@@ -12397,6 +12375,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Sign Up"
          >
            Sign Up
@@ -13977,9 +13956,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
 `;

 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 1`] = `
-<div
-  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
->
+Array [
  <div
    class="ant-space-compact ant-space-compact-block"
  >
@@ -14106,6 +14083,7 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="Opt1"
            >
              Opt1
@@ -14327,7 +14305,8 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
        </button>
      </div>
    </div>
-  </div>
+  </div>,
+  <br />,
  <div
    class="ant-space-compact ant-space-compact-block"
  >
@@ -15900,22 +15879,6 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
        </span>
      </button>
    </div>
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        ~
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        ~
-      </span>
-    </button>
    <div
      class="ant-space-compact"
    >
@@ -16065,44 +16028,8 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
        </span>
      </button>
    </div>
-  </div>
-  <div
-    class="ant-space-compact"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
-      type="button"
-    >
-      <span>
-        Button 1
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        Button 2
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        Button 3
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
-      type="button"
-    >
-      <span>
-        Button 4
-      </span>
-    </button>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
@@ -16413,7 +16340,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
@@ -16430,7 +16357,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
@@ -16447,7 +16374,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
--- a/components/space/tests/snapshots/demo.test.tsx.snap
+++ b/components/space/tests/snapshots/demo.test.tsx.snap
@@ -359,6 +359,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Zhejiang"
          >
            Zhejiang
@@ -730,6 +731,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Option1"
          >
            Option1
@@ -1120,6 +1122,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Option1-1"
          >
            Option1-1
@@ -1169,6 +1172,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Option2-2"
          >
            Option2-2
@@ -1226,6 +1230,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Between"
          >
            Between
@@ -1306,6 +1311,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Sign Up"
          >
            Sign Up
@@ -1576,6 +1582,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="leaf1"
          >
            leaf1
@@ -1967,38 +1974,6 @@ exports[`renders components/space/demo/compact-button-vertical.tsx correctly 1`]
      </button>
    </div>
  </div>
-  <div
-    class="ant-space-item"
-  >
-    <div
-      class="ant-space-compact ant-space-compact-vertical"
-    >
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
-        type="button"
-      >
-        <span>
-          Button 1
-        </span>
-      </button>
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
-        type="button"
-      >
-        <span>
-          Button 2
-        </span>
-      </button>
-      <button
-        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
-        type="button"
-      >
-        <span>
-          Button 3
-        </span>
-      </button>
-    </div>
-  </div>
 </div>
 `;

@@ -2594,6 +2569,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility:visible"
                  title="http://"
                >
                  http://
@@ -2652,6 +2628,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility:visible"
                  title=".com"
                >
                  .com
@@ -3404,6 +3381,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Sign Up"
          >
            Sign Up
@@ -3695,9 +3673,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
 `;

 exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
-<div
-  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
->
+Array [
  <div
    class="ant-space-compact ant-space-compact-block"
  >
@@ -3824,6 +3800,7 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="Opt1"
            >
              Opt1
@@ -3967,7 +3944,8 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
        </button>
      </div>
    </div>
-  </div>
+  </div>,
+  <br />,
  <div
    class="ant-space-compact ant-space-compact-block"
  >
@@ -4024,22 +4002,6 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
        </span>
      </button>
    </div>
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        ~
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        ~
-      </span>
-    </button>
    <div
      class="ant-space-compact"
    >
@@ -4101,44 +4063,8 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
        </span>
      </button>
    </div>
-  </div>
-  <div
-    class="ant-space-compact"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
-      type="button"
-    >
-      <span>
-        Button 1
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        Button 2
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
-      type="button"
-    >
-      <span>
-        Button 3
-      </span>
-    </button>
-    <button
-      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
-      type="button"
-    >
-      <span>
-        Button 4
-      </span>
-    </button>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders components/space/demo/debug.tsx correctly 1`] = `
@@ -4275,7 +4201,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
@@ -4292,7 +4218,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
@@ -4309,7 +4235,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
    >
      Link
    </a>
--- a/components/space/demo/compact-button-vertical.tsx
+++ b/components/space/demo/compact-button-vertical.tsx
@@ -18,11 +18,6 @@ const App: React.FC = () => (
      <Button type="primary">Button 2</Button>
      <Button type="primary">Button 3</Button>
    </Space.Compact>
-    <Space.Compact orientation="vertical">
-      <Button variant="outlined">Button 1</Button>
-      <Button variant="outlined">Button 2</Button>
-      <Button variant="outlined">Button 3</Button>
-    </Space.Compact>
  </Space>
 );

--- a/components/space/demo/compact-nested.tsx
+++ b/components/space/demo/compact-nested.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { CopyOutlined, SearchOutlined } from '@ant-design/icons';
-import { Button, Cascader, Flex, Input, InputNumber, Select, Space, TimePicker } from 'antd';
+import { Button, Cascader, Input, InputNumber, Select, Space, TimePicker } from 'antd';

 const App: React.FC = () => (
-  <Flex vertical gap="middle">
+  <>
    <Space.Compact block>
      <Space.Compact>
        <Space.Compact>
@@ -33,14 +33,12 @@ const App: React.FC = () => (
        </Space.Compact>
      </Space.Compact>
    </Space.Compact>
-
+    <br />
    <Space.Compact block>
      <Space.Compact>
        <TimePicker />
        <Button type="primary">Submit</Button>
      </Space.Compact>
-      <Button type="primary">~</Button>
-      <Button type="primary">~</Button>
      <Space.Compact>
        <Cascader
          options={[
@@ -82,22 +80,7 @@ const App: React.FC = () => (
        <Button type="primary">Submit</Button>
      </Space.Compact>
    </Space.Compact>
-
-    <Space.Compact>
-      <Button color="default" variant="solid">
-        Button 1
-      </Button>
-      <Button color="default" variant="solid">
-        Button 2
-      </Button>
-      <Button color="danger" variant="solid">
-        Button 3
-      </Button>
-      <Button color="danger" variant="solid">
-        Button 4
-      </Button>
-    </Space.Compact>
-  </Flex>
+  </>
 );

 export default App;
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@@ -8550,7 +8550,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8579,7 +8579,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8608,7 +8608,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8637,7 +8637,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8666,7 +8666,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8695,7 +8695,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8724,7 +8724,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8753,7 +8753,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8782,7 +8782,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -8811,7 +8811,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -9004,6 +9004,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title="10 / page"
              >
                10 / page
@@ -13634,6 +13635,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title="50 / page"
              >
                50 / page
@@ -15058,6 +15060,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
            >
              <div
                class="ant-select-content-value"
+                style="visibility: visible;"
                title="10 / page"
              >
                10 / page
@@ -18864,6 +18867,7 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 1`] =
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility: visible;"
                  title="10 / page"
                >
                  10 / page
--- a/components/table/tests/snapshots/demo.test.ts.snap
+++ b/components/table/tests/snapshots/demo.test.ts.snap
@@ -7504,7 +7504,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7533,7 +7533,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7562,7 +7562,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7591,7 +7591,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7620,7 +7620,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7649,7 +7649,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7678,7 +7678,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7707,7 +7707,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7736,7 +7736,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7765,7 +7765,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
                    class="ant-table-cell"
                  >
                    <a
-                      class="ant-typography ant-typography-link css-var-test-id"
+                      class="ant-typography css-var-test-id"
                    >
                      Edit
                    </a>
@@ -7958,6 +7958,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="10 / page"
              >
                10 / page
@@ -12651,6 +12652,7 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="10 / page"
              >
                10 / page
@@ -14656,6 +14658,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="50 / page"
              >
                50 / page
@@ -15797,6 +15800,7 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="10 / page"
              >
                10 / page
@@ -17956,6 +17960,7 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
              >
                <div
                  class="ant-select-content-value"
+                  style="visibility:visible"
                  title="10 / page"
                >
                  10 / page
@@ -28328,6 +28333,7 @@ exports[`renders components/table/demo/sticky.tsx correctly 1`] = `
            >
              <div
                class="ant-select-content-value"
+                style="visibility:visible"
                title="10 / page"
              >
                10 / page
--- a/components/tour/index.en-US.md
+++ b/components/tour/index.en-US.md
@@ -39,7 +39,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | closeIcon | Customize close icon | `React.ReactNode` | `true` | 5.9.0 |
 | disabledInteraction | Disable interaction on highlighted area. | `boolean` | `false` | 5.13.0 |
 | gap | Control the radius of the highlighted area and the offset between highlighted area and the element. | `{ offset?: number \| [number, number]; radius?: number }` | `{ offset?: 6 ; radius?: 2 }` | 5.0.0 (array type `offset`: 5.9.0) |
-| keyboard | Whether to enable keyboard shortcuts | boolean | true | 6.2.0 |
+| keyboard | Whether to enable keyboard shortcuts | boolean | true |  6.2.0 |
 | placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | Callback function on shutdown | `Function` | - |  |
 | mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
--- a/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree-select/tests/snapshots/demo-extend.test.ts.snap
@@ -2250,6 +2250,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="lucy"
      >
        lucy
--- a/components/tree-select/tests/snapshots/demo.test.tsx.snap
+++ b/components/tree-select/tests/snapshots/demo.test.tsx.snap
@@ -594,6 +594,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx correctly 1`] = `
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title="lucy"
      >
        lucy
--- a/components/tree/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tree/tests/snapshots/demo-extend.test.ts.snap
@@ -3545,6 +3545,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="True"
        >
          True
--- a/components/tree/tests/snapshots/demo.test.ts.snap
+++ b/components/tree/tests/snapshots/demo.test.ts.snap
@@ -3530,6 +3530,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="True"
        >
          True
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -440,7 +440,6 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
                [`${prefixCls}-ellipsis`]: enableEllipsis,
                [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
                [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
-                [`${prefixCls}-link`]: component === 'a',
              },
              className,
            )}
--- a/components/typography/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/typography/tests/snapshots/demo-extend.test.ts.snap
@@ -59,7 +59,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
    <ul>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/proximity"
        >
          Principles
@@ -67,7 +67,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/overview"
        >
          Patterns
@@ -75,7 +75,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/resources"
        >
          Resource Download
@@ -163,7 +163,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
    <ul>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/proximity-cn"
        >
          设计原则
@@ -171,7 +171,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/overview-cn"
        >
          设计模式
@@ -179,7 +179,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/resources-cn"
        >
          设计资源
@@ -272,7 +272,7 @@ Array [
      <ul>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/proximity"
          >
            Principles
@@ -280,7 +280,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/overview"
          >
            Patterns
@@ -288,7 +288,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/resources"
          >
            Resource Download
@@ -371,7 +371,7 @@ Array [
      <ul>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/proximity-cn"
          >
            设计原则
@@ -379,7 +379,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/overview-cn"
          >
            设计模式
@@ -387,7 +387,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/resources-cn"
          >
            设计资源
@@ -2233,47 +2233,6 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx extend context c

 exports[`renders components/typography/demo/ellipsis-middle.tsx extend context correctly 2`] = `[]`;

-exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 1`] = `
-<article
-  class="ant-typography css-var-test-id"
->
-  <span
-    class="ant-typography css-var-test-id"
-  >
-    Typography.Link 的 type="danger" 颜色应为 error 文本色。
-  </span>
-  <br />
-  <a
-    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
-    href="https://ant.design"
-  >
-    Danger Link
-  </a>
-  <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
-    role="separator"
-  />
-  <span
-    class="ant-typography css-var-test-id"
-  >
-    Button 以 a 标签渲染时，不应被 Typography 链接样式影响。
-  </span>
-  <br />
-  <a
-    aria-disabled="false"
-    class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
-    href="https://ant.design"
-    tabindex="0"
-  >
-    <span>
-      Button Link
-    </span>
-  </a>
-</article>
-`;
-
-exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/typography/demo/paragraph-debug.tsx extend context correctly 1`] = `
 Array [
  <h1
@@ -2676,7 +2635,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
      href="https://ant.design"
      rel="noopener noreferrer"
      target="_blank"
--- a/components/typography/tests/snapshots/demo.test.tsx.snap
+++ b/components/typography/tests/snapshots/demo.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
    <ul>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/proximity"
        >
          Principles
@@ -68,7 +68,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/overview"
        >
          Patterns
@@ -76,7 +76,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/resources"
        >
          Resource Download
@@ -164,7 +164,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
    <ul>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/proximity-cn"
        >
          设计原则
@@ -172,7 +172,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/spec/overview-cn"
        >
          设计模式
@@ -180,7 +180,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
      </li>
      <li>
        <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id"
          href="/docs/resources-cn"
        >
          设计资源
@@ -272,7 +272,7 @@ Array [
      <ul>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/proximity"
          >
            Principles
@@ -280,7 +280,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/overview"
          >
            Patterns
@@ -288,7 +288,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/resources"
          >
            Resource Download
@@ -371,7 +371,7 @@ Array [
      <ul>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/proximity-cn"
          >
            设计原则
@@ -379,7 +379,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/spec/overview-cn"
          >
            设计模式
@@ -387,7 +387,7 @@ Array [
        </li>
        <li>
          <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id"
            href="/docs/resources-cn"
          >
            设计资源
@@ -1586,45 +1586,6 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] =
 </span>
 `;

-exports[`renders components/typography/demo/link-danger-debug.tsx correctly 1`] = `
-<article
-  class="ant-typography css-var-test-id"
->
-  <span
-    class="ant-typography css-var-test-id"
-  >
-    Typography.Link 的 type="danger" 颜色应为 error 文本色。
-  </span>
-  <br />
-  <a
-    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
-    href="https://ant.design"
-  >
-    Danger Link
-  </a>
-  <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
-    role="separator"
-  />
-  <span
-    class="ant-typography css-var-test-id"
-  >
-    Button 以 a 标签渲染时，不应被 Typography 链接样式影响。
-  </span>
-  <br />
-  <a
-    aria-disabled="false"
-    class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
-    href="https://ant.design"
-    tabindex="0"
-  >
-    <span>
-      Button Link
-    </span>
-  </a>
-</article>
-`;
-
 exports[`renders components/typography/demo/paragraph-debug.tsx correctly 1`] = `
 Array [
  <h1
@@ -2003,7 +1964,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
    class="ant-space-item"
  >
    <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id"
      href="https://ant.design"
      rel="noopener noreferrer"
      target="_blank"
--- a/components/typography/tests/snapshots/index.test.tsx.snap
+++ b/components/typography/tests/snapshots/index.test.tsx.snap
@@ -20,6 +20,6 @@ exports[`Typography rtl render component should be rendered correctly in RTL dir

 exports[`Typography rtl render component should be rendered correctly in RTL direction 4`] = `
 <a
-  class="ant-typography ant-typography-rtl ant-typography-link css-var-root"
+  class="ant-typography ant-typography-rtl css-var-root"
 />
 `;
--- a/components/typography/demo/link-danger-debug.md
+++ b/components/typography/demo/link-danger-debug.md
@@ -1,7 +0,0 @@
-## zh-CN
-
-Typography.Link 的 danger 颜色与 Button Link 的样式隔离。
-
-## en-US
-
-Typography.Link danger color and isolation from Button link styles.
--- a/components/typography/demo/link-danger-debug.tsx
+++ b/components/typography/demo/link-danger-debug.tsx
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Button, Divider, Typography } from 'antd';
-
-const { Text, Link } = Typography;
-
-const App: React.FC = () => (
-  <Typography>
-    <Text>Typography.Link 的 type="danger" 颜色应为 error 文本色。</Text>
-    <br />
-    <Link href="https://ant.design" type="danger">
-      Danger Link
-    </Link>
-    <Divider />
-    <Text>Button 以 a 标签渲染时，不应被 Typography 链接样式影响。</Text>
-    <br />
-    <Button type="link" href="https://ant.design">
-      Button Link
-    </Button>
-  </Typography>
-);
-
-export default App;
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -27,7 +27,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code>
 <code src="./demo/suffix.tsx">suffix</code>
 <code src="./demo/componentToken-debug.tsx" debug>Component Token</code>
-<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>

 ## API

--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -28,7 +28,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>
 <code src="./demo/suffix.tsx">后缀</code>
 <code src="./demo/componentToken-debug.tsx" debug>组件 Token</code>
-<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>

 ## API

--- a/components/typography/style/index.ts
+++ b/components/typography/style/index.ts
@@ -34,24 +34,24 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
      color: token.colorText,
      wordBreak: 'break-word',
      lineHeight: token.lineHeight,
-      [`&${componentCls}-secondary, &${componentCls}-link${componentCls}-secondary`]: {
+      [`&${componentCls}-secondary`]: {
        color: token.colorTextDescription,
      },

-      [`&${componentCls}-success, &${componentCls}-link${componentCls}-success`]: {
+      [`&${componentCls}-success`]: {
        color: token.colorSuccessText,
      },

-      [`&${componentCls}-warning, &${componentCls}-link${componentCls}-warning`]: {
+      [`&${componentCls}-warning`]: {
        color: token.colorWarningText,
      },

-      [`&${componentCls}-danger, &${componentCls}-link${componentCls}-danger`]: {
+      [`&${componentCls}-danger`]: {
        color: token.colorErrorText,
-        [`&${componentCls}-link:active, &${componentCls}-link:focus`]: {
+        'a&:active, a&:focus': {
          color: token.colorErrorTextActive,
        },
-        [`&${componentCls}-link:hover`]: {
+        'a&:hover': {
          color: token.colorErrorTextHover,
        },
      },
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -54,13 +54,14 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
 };

 export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
-  const { componentCls } = token;
-  const linkCls = `${componentCls}-link`;
+  const { componentCls, antCls } = token;
+  const btnCls = `${antCls}-btn`;

  return {
-    [`&${linkCls}`]: {
+    // fix issue: https://github.com/ant-design/ant-design/issues/56606
+    // exclude ant-btn to avoid style conflicts with Button component when it renders as <a></a> tag (variant='link' with href)
+    [`a&:not(${btnCls}), a:not(${btnCls})`]: {
      ...operationUnit(token),
-      userSelect: 'text',

      [`&[disabled], &${componentCls}-disabled`]: {
        color: token.colorTextDisabled,
--- a/components/watermark/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/watermark/tests/snapshots/demo-extend.test.ts.snap
@@ -257,6 +257,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                            >
                              <div
                                class="ant-select-content-value"
+                                style="visibility: visible;"
                                title="HEX"
                              >
                                HEX
--- a/docs/resources.en-US.md
+++ b/docs/resources.en-US.md
@@ -45,6 +45,7 @@ Please find below some of the design resources and tools about Ant Design that w
  - https://www.antuikit.com/antuikit.svg
  - Figma Design System, Blocks, Flows & Templates
  - https://www.antuikit.com
+  - Community
 - Figma Resources
  - https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
  - Always up-to-date Ant Design Figma resources
--- a/docs/resources.zh-CN.md
+++ b/docs/resources.zh-CN.md
@@ -45,6 +45,7 @@ description: 这里汇总了与 Ant Design 相关的所有资源。
  - https://www.antuikit.com/antuikit.svg
  - Figma 设计系统、模块、流程和模板
  - https://www.antuikit.com
+  - 社区
 - Figma 组件包
  - https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
  - 在 Figma 使用 Ant Design 进行设计
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -85,7 +85,6 @@ export default antfu(
      'react-hooks/immutability': 'off',
      'test/prefer-lowercase-title': 'off',
      'react/no-create-ref': 'off',
-      'react/no-nested-component-definitions': 'off',
      'react/no-nested-components': 'off',
      'react/no-useless-fragment': 'off',
      'no-console': 'off',
--- a/guidelines/Guidelines.md
+++ b/guidelines/Guidelines.md
@@ -0,0 +1,115 @@
+# Ant Design Guidelines for Figma Make
+
+This project uses **Ant Design (antd)**, a comprehensive React UI component library and design system. Files in the `guidelines` directory show how to use Ant Design components and design tokens correctly.
+
+## Always Read First
+
+Before writing any code, you MUST read these files in order:
+
+1. **All files with names starting with `overview-`** in the guidelines directory:
+   - `overview-components.md` - Component overview and usage patterns
+   - `overview-icons.md` - Icon system and usage
+
+2. **All files in the `design-tokens/` folder**:
+   - `design-tokens/colors.md` - Color token system
+   - `design-tokens/typography.md` - Typography tokens
+   - `design-tokens/spacing.md` - Spacing and size tokens
+
+## Component Usage Guidelines - READ THIS FIRST
+
+**IMPORTANT**: Always prefer to use components from Ant Design if they exist. For example, prefer to use a `Button` component from `antd`, rather than regular HTML button elements.
+
+**IMPORTANT**: Follow these steps IN ORDER before writing any code:
+
+### Step 1: Read Overview Files (REQUIRED)
+
+Read ALL files with a name that starts with "overview-" in the guidelines directory:
+
+- `overview-components.md`
+- `overview-icons.md` (And any other `overview-*.md` files)
+
+### Step 2: Read Design Tokens (REQUIRED)
+
+Read ALL files in the `design-tokens/` folder. Do NOT skip this step. Design tokens are essential for creating consistent, themeable UI.
+
+### Step 3: Plan What Components You Need to Use (REQUIRED)
+
+Before using ANY component, check if Ant Design provides it. Common components include:
+
+- Form controls: Button, Input, Select, Checkbox, Radio, Switch, etc.
+- Data display: Table, List, Card, Tag, Badge, etc.
+- Feedback: Modal, Message, Notification, Alert, etc.
+- Navigation: Menu, Tabs, Breadcrumb, Pagination, etc.
+- Layout: Layout, Grid, Space, Divider, etc.
+
+### Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
+
+BEFORE using ANY component, you MUST read its guidelines file first:
+
+- Using Button? → Read `guidelines/components/button.md` FIRST
+- Using Input? → Read `guidelines/components/input.md` FIRST
+- Using Form? → Read `guidelines/components/form.md` FIRST
+- Using Table? → Read `guidelines/components/table.md` FIRST
+
+If a component guideline file doesn't exist, check the component's documentation in `components/[component-name]/index.en-US.md` or `components/[component-name]/index.zh-CN.md`.
+
+### Step 5: Plan What Icons You Need to Use (REQUIRED)
+
+Before using ANY icon, you must check if that icon exists in the `@ant-design/icons` package. If it doesn't, pick a different icon and verify the new icon exists.
+
+**DO NOT write code using a component until you have read its specific guidelines.**
+
+## Import Pattern
+
+Always import components from `antd`:
+
+```typescript
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Table } from 'antd';
+```
+
+## Design Token Usage
+
+**NEVER hardcode colors, sizes, spacing, or typography values.** Always use design tokens from Ant Design's theme system. Access tokens through:
+
+1. **Theme configuration** via `ConfigProvider`:
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#1890ff',
+      borderRadius: 6,
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+2. **CSS Variables** (when enabled):
+
+```css
+.my-component {
+  color: var(--ant-color-primary);
+  padding: var(--ant-padding-md);
+}
+```
+
+3. **useToken hook** in component styles:
+
+```typescript
+import { theme } from 'antd';
+
+const { token } = theme.useToken();
+// Use token.colorPrimary, token.paddingMD, etc.
+```
+
+## Additional Resources
+
+- Component source code: `components/[component-name]/`
+- Component documentation: `components/[component-name]/index.en-US.md`
+- Design tokens interface: `components/theme/interface/`
+- Design specifications: `docs/spec/`
--- a/guidelines/components/affix.md
+++ b/guidelines/components/affix.md
@@ -0,0 +1,33 @@
+# Affix Component
+
+**Purpose**: Make elements stick to viewport when scrolling.
+
+## When to Use
+
+- Sticky navigation
+- Fixed elements during scroll
+- Keep important elements visible
+
+## Basic Usage
+
+```typescript
+import { Affix } from 'antd';
+
+<Affix offsetTop={10}>
+  <Button type="primary">Affix top</Button>
+</Affix>
+```
+
+## Common Props
+
+| Property       | Description        | Type              | Default      |
+| -------------- | ------------------ | ----------------- | ------------ |
+| `offsetTop`    | Offset from top    | number            | -            |
+| `offsetBottom` | Offset from bottom | number            | -            |
+| `target`       | Target container   | () => HTMLElement | () => window |
+
+## Best Practices
+
+1. **Navigation** - Use for sticky navigation
+2. **Important elements** - Keep important elements visible
+3. **Appropriate offset** - Set appropriate offset values
--- a/guidelines/components/alert.md
+++ b/guidelines/components/alert.md
@@ -0,0 +1,84 @@
+# Alert Component
+
+**Purpose**: Display warning messages that require attention. Used for inline important messages.
+
+## When to Use
+
+- Show alert messages to users
+- Display persistent static containers that are closable
+- Show important information, warnings, or errors
+- Display banner messages at the top of pages
+
+## Basic Usage
+
+```typescript
+import { Alert } from 'antd';
+
+<Alert message="Success Text" type="success" />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `message` | Alert content | ReactNode | - |
+| `description` | Additional content | ReactNode | - |
+| `type` | Alert type | `'success'` \| `'info'` \| `'warning'` \| `'error'` | `'info'` |
+| `closable` | Show close button | boolean | false |
+| `showIcon` | Show icon | boolean | false |
+| `icon` | Custom icon | ReactNode | - |
+| `banner` | Show as banner | boolean | false |
+| `action` | Custom action | ReactNode | - |
+| `onClose` | Close handler | (e: MouseEvent) => void | - |
+
+## Examples
+
+### Different Types
+
+```typescript
+<Alert message="Success" type="success" />
+<Alert message="Info" type="info" />
+<Alert message="Warning" type="warning" />
+<Alert message="Error" type="error" />
+```
+
+### With Description
+
+```typescript
+<Alert
+  message="Success"
+  description="Detailed description and advice about successful copywriting."
+  type="success"
+  showIcon
+/>
+```
+
+### Closable
+
+```typescript
+<Alert
+  message="Alert"
+  type="info"
+  closable
+  onClose={() => console.log('Closed')}
+/>
+```
+
+### Banner
+
+```typescript
+<Alert
+  message="Banner Alert"
+  type="warning"
+  banner
+  closable
+/>
+```
+
+## Best Practices
+
+1. **Appropriate type** - Use correct type for message severity
+2. **Clear messages** - Provide clear, actionable messages
+3. **Descriptions** - Use description for additional context
+4. **Closable for dismissible** - Make alerts closable when users can dismiss them
+5. **Banner for important** - Use banner mode for important page-level messages
--- a/guidelines/components/anchor.md
+++ b/guidelines/components/anchor.md
@@ -0,0 +1,36 @@
+# Anchor Component
+
+**Purpose**: Anchor navigation for jumping to different sections on the same page.
+
+## When to Use
+
+- Navigate to different sections on a long page
+- Create table of contents
+- Quick navigation within a page
+
+## Basic Usage
+
+```typescript
+import { Anchor } from 'antd';
+
+<Anchor
+  items={[
+    { key: 'part-1', href: '#part-1', title: 'Part 1' },
+    { key: 'part-2', href: '#part-2', title: 'Part 2' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property    | Description     | Type         | Default |
+| ----------- | --------------- | ------------ | ------- |
+| `items`     | Anchor items    | AnchorItem[] | -       |
+| `affix`     | Fixed position  | boolean      | true    |
+| `offsetTop` | Offset from top | number       | 0       |
+
+## Best Practices
+
+1. **Long pages** - Use for pages with multiple sections
+2. **Fixed position** - Use affix for always-visible navigation
+3. **Smooth scrolling** - Ensure smooth scroll behavior
--- a/guidelines/components/app.md
+++ b/guidelines/components/app.md
@@ -0,0 +1,29 @@
+# App Component
+
+**Purpose**: App-level container for message, notification, and modal context.
+
+## When to Use
+
+- Use message, notification, or modal hooks
+- Need context for static methods
+- App-level container
+
+## Basic Usage
+
+```typescript
+import { App } from 'antd';
+
+function MyApp() {
+  return (
+    <App>
+      <YourComponent />
+    </App>
+  );
+}
+```
+
+## Best Practices
+
+1. **Wrap app** - Wrap app when using hooks like useModal, useMessage
+2. **Context provider** - Provides context for static methods
+3. **Single instance** - Usually one App component per application
--- a/guidelines/components/avatar.md
+++ b/guidelines/components/avatar.md
@@ -0,0 +1,34 @@
+# Avatar Component
+
+**Purpose**: Avatar display for users or entities.
+
+## When to Use
+
+- Display user avatars
+- Show entity images
+- Fallback to initials or icons
+
+## Basic Usage
+
+```typescript
+import { Avatar } from 'antd';
+
+<Avatar src="image.jpg" />
+<Avatar>U</Avatar>
+<Avatar icon={<UserOutlined />} />
+```
+
+## Common Props
+
+| Property | Description  | Type                                            | Default     |
+| -------- | ------------ | ----------------------------------------------- | ----------- |
+| `src`    | Image source | string                                          | -           |
+| `icon`   | Icon         | ReactNode                                       | -           |
+| `size`   | Avatar size  | number \| `'large'` \| `'small'` \| `'default'` | `'default'` |
+| `shape`  | Avatar shape | `'circle'` \| `'square'`                        | `'circle'`  |
+
+## Best Practices
+
+1. **Fallback** - Provide fallback (initials or icon)
+2. **Consistent sizing** - Use consistent sizes
+3. **Accessible** - Include alt text or aria-label
--- a/guidelines/components/back-top.md
+++ b/guidelines/components/back-top.md
@@ -0,0 +1,30 @@
+# BackTop Component
+
+**Purpose**: Back to top button for long pages.
+
+## When to Use
+
+- Long pages that need quick scroll to top
+- Improve navigation on long content
+- Quick return to top
+
+## Basic Usage
+
+```typescript
+import { BackTop } from 'antd';
+
+<BackTop />
+```
+
+## Common Props
+
+| Property           | Description                 | Type              | Default      |
+| ------------------ | --------------------------- | ----------------- | ------------ |
+| `visibilityHeight` | Show button after scrolling | number            | 400          |
+| `target`           | Target element to listen    | () => HTMLElement | () => window |
+
+## Best Practices
+
+1. **Long pages** - Use for pages with long content
+2. **Visibility height** - Set appropriate visibility height
+3. **Smooth scroll** - Provides smooth scroll to top
--- a/guidelines/components/badge.md
+++ b/guidelines/components/badge.md
@@ -0,0 +1,64 @@
+# Badge Component
+
+**Purpose**: Small numerical value or status descriptor for UI elements. Typically displays unread messages count.
+
+## When to Use
+
+- Display notification count on icons or avatars
+- Show status indicators
+- Display small numerical values
+- Show unread message counts
+
+## Basic Usage
+
+```typescript
+import { Badge } from 'antd';
+
+<Badge count={5}>
+  <Avatar shape="square" size="large" />
+</Badge>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `count` | Number to show | ReactNode | - |
+| `dot` | Show red dot instead of count | boolean | false |
+| `overflowCount` | Max count to show | number | 99 |
+| `showZero` | Show when count is zero | boolean | false |
+| `offset` | Badge offset | [number, number] | - |
+| `color` | Custom badge color | string | - |
+| `status` | Status badge | `'success'` \| `'processing'` \| `'default'` \| `'error'` \| `'warning'` | - |
+
+## Examples
+
+### Dot Badge
+
+```typescript
+<Badge dot>
+  <NotificationOutlined />
+</Badge>
+```
+
+### Status Badge
+
+```typescript
+<Badge status="success" text="Success" />
+<Badge status="error" text="Error" />
+```
+
+### Overflow Count
+
+```typescript
+<Badge count={1000} overflowCount={999}>
+  <Avatar />
+</Badge>
+```
+
+## Best Practices
+
+1. **Use for notifications** - Use badges for unread counts and notifications
+2. **Overflow handling** - Set appropriate overflowCount
+3. **Status indicators** - Use status prop for status badges
+4. **Don't overuse** - Use badges sparingly to maintain visual hierarchy
--- a/guidelines/components/breadcrumb.md
+++ b/guidelines/components/breadcrumb.md
@@ -0,0 +1,36 @@
+# Breadcrumb Component
+
+**Purpose**: Breadcrumb navigation to show the current page location and path.
+
+## When to Use
+
+- Show the current page location within a website hierarchy
+- Navigate back to parent pages
+- Display the navigation path
+
+## Basic Usage
+
+```typescript
+import { Breadcrumb } from 'antd';
+
+<Breadcrumb
+  items={[
+    { title: 'Home' },
+    { title: 'Application' },
+    { title: 'An Application' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property    | Description      | Type             | Default |
+| ----------- | ---------------- | ---------------- | ------- |
+| `items`     | Breadcrumb items | BreadcrumbItem[] | -       |
+| `separator` | Custom separator | ReactNode        | `/`     |
+
+## Best Practices
+
+1. **Show hierarchy** - Display the full path from home to current page
+2. **Clickable items** - Make parent items clickable for navigation
+3. **Current page** - Don't make the current page clickable
--- a/guidelines/components/button.md
+++ b/guidelines/components/button.md
@@ -0,0 +1,206 @@
+# Button Component
+
+**Purpose**: Trigger operations and actions. Buttons are the primary way users interact with the interface.
+
+## When to Use
+
+- **Primary Button**: Use for the main action in a section. There should be at most one primary button per section.
+- **Default Button**: Use for a series of actions without priority.
+- **Dashed Button**: Commonly used for adding more actions.
+- **Text Button**: Use for the most secondary actions.
+- **Link Button**: Use for external links or navigation.
+
+## Basic Usage
+
+```typescript
+import { Button } from 'antd';
+
+// Primary button (main action)
+<Button type="primary">Primary</Button>
+
+// Default button
+<Button>Default</Button>
+
+// Dashed button
+<Button type="dashed">Dashed</Button>
+
+// Text button
+<Button type="text">Text</Button>
+
+// Link button
+<Button type="link">Link</Button>
+```
+
+## Button Types and Variants
+
+### Type vs Variant & Color
+
+In Ant Design 5.21.0+, you can use either `type` (syntactic sugar) or `variant` + `color`:
+
+```typescript
+// These are equivalent:
+<Button type="primary">Click</Button>
+<Button color="primary" variant="solid">Click</Button>
+```
+
+**IMPORTANT**: If both `type` and `variant`/`color` are provided, `variant` and `color` take precedence.
+
+### Variants
+
+- **`solid`**: Solid filled button (default for primary)
+- **`outlined`**: Outlined button with transparent background
+- **`dashed`**: Dashed border button
+- **`filled`**: Filled button with background
+- **`text`**: Text-only button
+- **`link`**: Link-style button
+
+### Colors
+
+- **`default`**: Default button color
+- **`primary`**: Primary brand color
+- **`danger`**: Danger/destructive action color
+- **Preset colors**: `'blue'`, `'purple'`, `'cyan'`, `'green'`, `'magenta'`, `'pink'`, `'red'`, `'orange'`, `'yellow'`, `'volcano'`, `'geekblue'`, `'lime'`, `'gold'`
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `type` | Button type (syntactic sugar) | `'primary'` \| `'default'` \| `'dashed'` \| `'text'` \| `'link'` | `'default'` |
+| `variant` | Button variant | `'solid'` \| `'outlined'` \| `'dashed'` \| `'filled'` \| `'text'` \| `'link'` | - |
+| `color` | Button color | `'default'` \| `'primary'` \| `'danger'` \| PresetColors | - |
+| `size` | Button size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
+| `shape` | Button shape | `'default'` \| `'circle'` \| `'round'` | `'default'` |
+| `icon` | Icon component | ReactNode | - |
+| `iconPosition` | Icon position | `'start'` \| `'end'` | `'start'` |
+| `loading` | Loading state | boolean \| { delay: number, icon: ReactNode } | false |
+| `disabled` | Disabled state | boolean | false |
+| `danger` | Danger status | boolean | false |
+| `ghost` | Ghost button (transparent background) | boolean | false |
+| `block` | Block button (full width) | boolean | false |
+| `htmlType` | HTML button type | `'button'` \| `'submit'` \| `'reset'` | `'button'` |
+| `onClick` | Click handler | (event) => void | - |
+
+## Examples
+
+### With Icons
+
+```typescript
+import { Button } from 'antd';
+import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
+
+<Button icon={<SearchOutlined />}>Search</Button>
+<Button icon={<DownloadOutlined />} iconPosition="end">Download</Button>
+<Button icon={<SearchOutlined />} />  // Icon-only button
+```
+
+### Sizes
+
+```typescript
+<Button size="small">Small</Button>
+<Button size="middle">Middle</Button>
+<Button size="large">Large</Button>
+```
+
+### Shapes
+
+```typescript
+<Button shape="default">Default</Button>
+<Button shape="round">Round</Button>
+<Button shape="circle" icon={<SearchOutlined />} />  // Circle button (icon only)
+```
+
+### Loading State
+
+```typescript
+<Button loading>Loading</Button>
+<Button loading={{ delay: 1000 }}>Delayed Loading</Button>
+```
+
+### Danger Buttons
+
+```typescript
+<Button danger>Danger</Button>
+<Button type="primary" danger>Danger Primary</Button>
+```
+
+### Block Button
+
+```typescript
+<Button block>Full Width Button</Button>
+```
+
+### Ghost Button
+
+```typescript
+<Button ghost>Ghost Button</Button>
+<Button type="primary" ghost>Ghost Primary</Button>
+```
+
+## Best Practices
+
+1. **One primary action per section** - Use primary button for the main action only
+2. **Clear hierarchy** - Use button types to establish visual hierarchy
+3. **Appropriate sizing** - Use `middle` (default) for most cases, `large` for prominent actions, `small` for compact UI
+4. **Loading states** - Show loading state during async operations to prevent multiple submissions
+5. **Disabled states** - Disable buttons when actions are not available
+6. **Icon placement** - Icons should be on the left (start) by default, use `iconPosition="end"` only when appropriate
+7. **Danger actions** - Use `danger` prop for destructive actions like delete
+8. **Don't override styles** - Use component props instead of custom CSS when possible
+
+## Common Patterns
+
+### Button Groups
+
+```typescript
+import { Button, Space } from 'antd';
+
+<Space>
+  <Button>Cancel</Button>
+  <Button type="primary">Submit</Button>
+</Space>
+```
+
+### Form Actions
+
+```typescript
+<Form onFinish={handleSubmit}>
+  {/* Form fields */}
+  <Form.Item>
+    <Space>
+      <Button onClick={handleCancel}>Cancel</Button>
+      <Button type="primary" htmlType="submit" loading={loading}>
+        Submit
+      </Button>
+    </Space>
+  </Form.Item>
+</Form>
+```
+
+### Icon-Only Buttons
+
+```typescript
+<Button shape="circle" icon={<SearchOutlined />} aria-label="Search" />
+```
+
+## Accessibility
+
+- Buttons are keyboard accessible by default
+- Use `aria-label` for icon-only buttons
+- Ensure sufficient color contrast
+- Don't rely solely on color to convey meaning
+
+## Styling
+
+**IMPORTANT**: Do not override button styles with `className` unless absolutely necessary. Instead:
+
+- Use `variant` and `color` props for styling
+- Use `ConfigProvider` theme customization for global changes
+- Use design tokens for custom styling
+
+```typescript
+// ✅ CORRECT - Using props
+<Button variant="outlined" color="primary">Button</Button>
+
+// ❌ WRONG - Overriding with className
+<Button className="custom-button">Button</Button>
+```
--- a/guidelines/components/card.md
+++ b/guidelines/components/card.md
@@ -0,0 +1,74 @@
+# Card Component
+
+**Purpose**: A container for displaying information. Used to display content related to a single subject.
+
+## When to Use
+
+- Display content related to a single subject
+- Group related information together
+- Create visual containers for content sections
+- Display cards in grids or lists
+
+## Basic Usage
+
+```typescript
+import { Card } from 'antd';
+
+<Card title="Card Title">
+  Card content
+</Card>
+```
+
+## Common Props
+
+| Property    | Description                 | Type                     | Default     |
+| ----------- | --------------------------- | ------------------------ | ----------- |
+| `title`     | Card title                  | ReactNode                | -           |
+| `extra`     | Content in top-right corner | ReactNode                | -           |
+| `actions`   | Action list at bottom       | ReactNode[]              | -           |
+| `cover`     | Card cover image            | ReactNode                | -           |
+| `loading`   | Loading state               | boolean                  | false       |
+| `hoverable` | Lift up when hovering       | boolean                  | false       |
+| `bordered`  | Show border                 | boolean                  | true        |
+| `size`      | Card size                   | `'default'` \| `'small'` | `'default'` |
+
+## Examples
+
+### With Cover
+
+```typescript
+<Card
+  cover={<img alt="example" src="..." />}
+  actions={[<SettingOutlined />, <EditOutlined />]}
+>
+  <Card.Meta title="Card Title" description="Card description" />
+</Card>
+```
+
+### Loading Card
+
+```typescript
+<Card loading={loading} title="Card Title">
+  Content
+</Card>
+```
+
+### Grid Cards
+
+```typescript
+<Row gutter={16}>
+  <Col span={8}>
+    <Card title="Card 1">Content</Card>
+  </Col>
+  <Col span={8}>
+    <Card title="Card 2">Content</Card>
+  </Col>
+</Row>
+```
+
+## Best Practices
+
+1. **Single subject** - Each card should focus on a single subject
+2. **Clear hierarchy** - Use title, description, and actions appropriately
+3. **Loading states** - Show loading state while fetching data
+4. **Hoverable for interaction** - Use hoverable for clickable cards
--- a/Show More
+++ b/Show More