Feat css var (#5327)

* style: affix & util * feat(alert): add customIcon slot * feat(anchor): ts type * style: auto-complete * feat: avatar add crossOrigin & maxPopoverTrigger * style(backTop): v-show instead v-if * style: badge * style: breadcrumb * feat: button add global size * feat: update i18n * feat: picker add disabledTime * test: update snap * doc: update img url * style: fix Card tabs of left position * doc: update cascader doc * feat: collapse * style: comment * style: configprovider * feat: date-picker add soem icon slot * style: update descriptions style * feat: add divider orientationMargin * doc: update drawer * feat: dropdown add destroyPopupOnHide & loading * style: update empty * feat: form add labelWrap * style: update grid * test: update grid snap * fix: image ts error * fix: mentions cannot select, close #5233 * doc: update pagination change info, close #5293 * fix: table dynamic expand error, close #5295 * style: remove not use * release 3.0.0-beta.11 * doc: update typo * feat: input add showCount * feat: inputNumber add prefix slot * style: update layout * style: update list * feat: add locale i18 * style: update locale ts * style: update mentions * feat: menu divider add dashed * perf: menu * perf: menu animate * feat: modal method add wrapClassName * style: update pageheader * feat: update pagination ts * feat: confirm add showCancel & promise * doc: update popover * style: update progress * style: radio * style: update rate、result、row * feat: select add fieldNames * feat: add skeleton button & input * feat: spin tip support slot * style: slider & space * stype: update steps ts type * style: update switch * feat: table add tree filter * test: update input sanp * feat: table add filterMode... * fix: tree autoExpandParent bug * test: update input snap * doc: tabs add destroyInactiveTabPane * style: update tag * style: update timeline & time-picker * fix: Tooltip arrowPointAtCenter 1px shift bug * feat: typography add enterEnterIcon triggerType * doc: update tree-select * fix: deps and TypeScript types * style: udpate transfer * style: update style * doc: add colorScheme * chore: add css var builg * doc: sort api * style: lint code * doc: add css var * test: update snap * chore: add pre script * chore: update lint * perf: collapse animate * perf: collapse tree * perf: typography shaking when edit * doc: update auto-complete demo * fix: table tree not have animate * feat: deprecated dropdown center placement * feat: deprecated dropdown center placement * test: update snap
2024-12-01 19:48:38 +08:00 · 2022-03-12 09:56:32 +08:00 · 2022-03-12 09:56:32 +08:00 · 2ee3d43534
commit 2ee3d43534
parent fdf7857f89
594 changed files with 11092 additions and 4173 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@ -0,0 +1,195 @@
+const fs = require('fs');
+const path = require('path');
+const defaultVars = require('./scripts/default-vars');
+const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
+
+function generateThemeFileContent(theme) {
+  return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
+module.exports = {
+  ...defaultTheme,
+  ...${theme}ThemeSingle
+}`;
+}
+
+// We need compile additional content for antd user
+function finalizeCompile() {
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    // Build a entry less file to dist/antd.less
+    const componentsPath = path.join(process.cwd(), 'components');
+    let componentsLessContent = '';
+    // Build components in one file: lib/style/components.less
+    fs.readdir(componentsPath, (err, files) => {
+      files.forEach(file => {
+        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
+          componentsLessContent += `@import "../${path.posix.join(
+            file,
+            'style',
+            'index-pure.less',
+          )}";\n`;
+        }
+      });
+      fs.writeFileSync(
+        path.join(process.cwd(), 'lib', 'style', 'components.less'),
+        componentsLessContent,
+      );
+    });
+  }
+}
+
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  if (theme !== 'default') {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+      `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+    );
+    // eslint-disable-next-line no-console
+    console.log(`Built a entry less file to dist/antd.${theme}.less`);
+  } else {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `default-theme.js`),
+      `module.exports = ${JSON.stringify(vars, null, 2)};\n`,
+    );
+    return;
+  }
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `theme.js`),
+    `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
+    {
+      flag: 'a',
+    },
+  );
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    generateThemeFileContent(theme),
+  );
+
+  // eslint-disable-next-line no-console
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
+function finalizeDist() {
+  if (fs.existsSync(path.join(__dirname, './dist'))) {
+    // Build less entry file: dist/antd.less
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'antd.less'),
+      '@import "../lib/style/default.less";\n@import "../lib/style/components.less";',
+    );
+    // eslint-disable-next-line no-console
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'theme.js'),
+      `const defaultTheme = require('./default-theme.js');\n`,
+    );
+    // eslint-disable-next-line no-console
+    console.log('Built a entry less file to dist/antd.less');
+    buildThemeFile('default', defaultVars);
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
+    buildThemeFile('variable', {});
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `theme.js`),
+      `
+function getThemeVariables(options = {}) {
+  let themeVar = {
+    'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
+    ...defaultTheme
+  };
+  if(options.dark) {
+    themeVar = {
+      ...themeVar,
+      ...darkThemeSingle
+    }
+  }
+  if(options.compact){
+    themeVar = {
+      ...themeVar,
+      ...compactThemeSingle
+    }
+  }
+  return themeVar;
+}
+
+module.exports = {
+  darkThemeSingle,
+  compactThemeSingle,
+  getThemeVariables
+}`,
+      {
+        flag: 'a',
+      },
+    );
+  }
+}
+
+function isComponentStyleEntry(file) {
+  return file.path.match(/style(\/|\\)index\.tsx/);
+}
+
+function needTransformStyle(content) {
+  return content.includes('../../style/index.less') || content.includes('./index.less');
+}
+
+module.exports = {
+  compile: {
+    includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/],
+    transformTSFile(file) {
+      if (isComponentStyleEntry(file)) {
+        let content = file.contents.toString();
+
+        if (needTransformStyle(content)) {
+          const cloneFile = file.clone();
+
+          // Origin
+          content = content.replace('../../style/index.less', '../../style/default.less');
+          cloneFile.contents = Buffer.from(content);
+
+          return cloneFile;
+        }
+      }
+    },
+    transformFile(file) {
+      if (isComponentStyleEntry(file)) {
+        const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
+
+        if (fs.existsSync(indexLessFilePath)) {
+          // We put origin `index.less` file to `index-pure.less`
+          const pureFile = file.clone();
+          pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
+          pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
+
+          // Rewrite `index.less` file with `root-entry-name`
+          const indexLessFile = file.clone();
+          indexLessFile.contents = Buffer.from(
+            [
+              // Inject variable
+              '@root-entry-name: default;',
+              // Point to origin file
+              "@import './index-pure.less';",
+            ].join('\n\n'),
+          );
+          indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
+
+          return [indexLessFile, pureFile];
+        }
+      }
+
+      return [];
+    },
+    lessConfig: {
+      modifyVars: {
+        'root-entry-name': 'default',
+      },
+    },
+    finalize: finalizeCompile,
+  },
+  dist: {
+    finalize: finalizeDist,
+  },
+  generateThemeFileContent,
+  bail: true,
+};
--- a/.eslintignore
+++ b/.eslintignore
@ -7,3 +7,4 @@ es/
 lib/
 _site/
 dist/
+components/version/version.tsx
--- a/.gitignore
+++ b/.gitignore
@ -76,3 +76,6 @@ vetur/
 report.html

 site/src/router/demoRoutes.js
+
+components/version/version.tsx
+~component-api.json
--- a/antd-tools/apiCollection.js
+++ b/antd-tools/apiCollection.js
@ -0,0 +1,68 @@
+// Read all the api from current documents
+
+const glob = require('glob');
+const fs = require('fs');
+
+const COMPONENT_NAME = /components\/([^/]*)/;
+const PROP_NAME = /^\s*\|\s*([^\s|]*)/;
+
+const components = {};
+
+function mappingPropLine(component, line) {
+  const propMatch = line.match(PROP_NAME);
+  if (!propMatch) return;
+
+  const propName = propMatch[1];
+  if (!/^[a-z]/.test(propName)) return;
+
+  components[component] = Array.from(new Set([...(components[component] || []), propName]));
+}
+
+function apiReport(entities) {
+  const apis = {};
+  Object.keys(entities).forEach(component => {
+    const apiList = entities[component];
+    apiList.forEach(api => {
+      if (typeof apis[api] === 'function') {
+        apis[api] = [];
+      }
+      apis[api] = [...(apis[api] || []), component];
+    });
+  });
+
+  return apis;
+}
+
+function printReport(apis) {
+  const apiList = Object.keys(apis).map(api => ({
+    name: api,
+    componentList: apis[api],
+  }));
+  apiList.sort((a, b) => b.componentList.length - a.componentList.length);
+  // eslint-disable-next-line no-console
+  console.log('| name | components | comments |');
+  // eslint-disable-next-line no-console
+  console.log('| ---- | ---------- | -------- |');
+  apiList.forEach(({ name, componentList }) => {
+    // eslint-disable-next-line no-console
+    console.log('|', name, '|', componentList.join(', '), '| |');
+  });
+}
+
+module.exports = () => {
+  glob('components/*/*.md', (error, files) => {
+    files.forEach(filePath => {
+      // Read md file to parse content
+      const content = fs.readFileSync(filePath, 'utf8');
+      const component = filePath.match(COMPONENT_NAME)[1];
+
+      // Parse lines to get API
+      const lines = content.split(/[\r\n]+/);
+      lines.forEach(line => {
+        mappingPropLine(component, line);
+      });
+    });
+
+    printReport(apiReport(components));
+  });
+};
--- a/antd-tools/cli/run.js
+++ b/antd-tools/cli/run.js
@ -4,7 +4,6 @@
 'use strict';

 require('colorful').colorful();
-require('colorful').isatty = true;
 const gulp = require('gulp');
 const program = require('commander');

--- a/antd-tools/getNpm.js
+++ b/antd-tools/getNpm.js
@ -0,0 +1,17 @@
+'use strict';
+
+const runCmd = require('./runCmd');
+
+module.exports = function (done) {
+  if (process.env.NPM_CLI) {
+    done(process.env.NPM_CLI);
+    return;
+  }
+  runCmd('which', ['tnpm'], code => {
+    let npm = 'npm';
+    if (!code) {
+      npm = 'tnpm';
+    }
+    done(npm);
+  });
+};
--- a/antd-tools/gulpfile.js
+++ b/antd-tools/gulpfile.js
@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const { getProjectPath } = require('./utils/projectHelper');
+const { getProjectPath, getConfig } = require('./utils/projectHelper');
 const runCmd = require('./runCmd');
 const getBabelCommonConfig = require('./getBabelCommonConfig');
 const merge2 = require('merge2');
@ -26,6 +26,7 @@ const stripCode = require('gulp-strip-code');
 const compareVersions = require('compare-versions');
 const getTSCommonConfig = require('./getTSCommonConfig');
 const replaceLib = require('./replaceLib');
+const sortApiTable = require('./sortApiTable');

 const packageJson = require(getProjectPath('package.json'));
 const tsDefaultReporter = ts.reporter.defaultReporter();
@ -49,11 +50,17 @@ function dist(done) {
    }

    const info = stats.toJson();
+    const { dist: { finalize } = {}, bail } = getConfig();

    if (stats.hasErrors()) {
-      console.error(info.errors);
+      (info.errors || []).forEach(error => {
+        console.error(error);
+      });
+      // https://github.com/ant-design/ant-design/pull/31662
+      if (bail) {
+        process.exit(1);
+      }
    }
-
    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }
@ -68,6 +75,11 @@ function dist(done) {
      version: false,
    });
    console.log(buildInfo);
+    // Additional process of dist finalize
+    if (finalize) {
+      console.log('[Dist] Finalization...');
+      finalize();
+    }
    done(0);
  });
 }
@ -103,7 +115,7 @@ function babelify(js, modules) {
  if (modules === false) {
    babelConfig.plugins.push(replaceLib);
  }
-  let stream = js.pipe(babel(babelConfig)).pipe(
+  const stream = js.pipe(babel(babelConfig)).pipe(
    through2.obj(function z(file, encoding, next) {
      this.push(file.clone());
      if (file.path.match(/\/style\/index\.(js|jsx|ts|tsx)$/)) {
@ -128,33 +140,40 @@ function babelify(js, modules) {
      next();
    }),
  );
-  if (modules === false) {
-    stream = stream.pipe(
-      stripCode({
-        start_comment: '@remove-on-es-build-begin',
-        end_comment: '@remove-on-es-build-end',
-      }),
-    );
-  }
  return stream.pipe(gulp.dest(modules === false ? esDir : libDir));
 }

 function compile(modules) {
+  const { compile: { transformTSFile, transformFile, includeLessFile = [] } = {} } = getConfig();
  rimraf.sync(modules !== false ? libDir : esDir);
+
+  // =============================== LESS ===============================
  const less = gulp
    .src(['components/**/*.less'])
    .pipe(
      through2.obj(function (file, encoding, next) {
-        this.push(file.clone());
+        // Replace content
+        const cloneFile = file.clone();
+        const content = file.contents.toString().replace(/^\uFEFF/, '');
+
+        cloneFile.contents = Buffer.from(content);
+
+        // Clone for css here since `this.push` will modify file.path
+        const cloneCssFile = cloneFile.clone();
+
+        this.push(cloneFile);
+
+        // Transform less file
        if (
-          file.path.match(/\/style\/index\.less$/) ||
-          file.path.match(/\/style\/v2-compatible-reset\.less$/)
+          file.path.match(/(\/|\\)style(\/|\\)index\.less$/) ||
+          file.path.match(/(\/|\\)style(\/|\\)v2-compatible-reset\.less$/) ||
+          includeLessFile.some(regex => file.path.match(regex))
        ) {
-          transformLess(file.path)
+          transformLess(cloneCssFile.contents.toString(), cloneCssFile.path)
            .then(css => {
-              file.contents = Buffer.from(css);
-              file.path = file.path.replace(/\.less$/, '.css');
-              this.push(file);
+              cloneCssFile.contents = Buffer.from(css);
+              cloneCssFile.path = cloneCssFile.path.replace(/\.less$/, '.css');
+              this.push(cloneCssFile);
              next();
            })
            .catch(e => {
@ -170,6 +189,25 @@ function compile(modules) {
    .src(['components/**/*.@(png|svg)'])
    .pipe(gulp.dest(modules === false ? esDir : libDir));
  let error = 0;
+
+  // =============================== FILE ===============================
+  let transformFileStream;
+
+  if (transformFile) {
+    transformFileStream = gulp
+      .src(['components/**/*.tsx'])
+      .pipe(
+        through2.obj(function (file, encoding, next) {
+          let nextFile = transformFile(file) || file;
+          nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
+          nextFile.forEach(f => this.push(f));
+          next();
+        }),
+      )
+      .pipe(gulp.dest(modules === false ? esDir : libDir));
+  }
+
+  // ================================ TS ================================
  const source = [
    'components/**/*.js',
    'components/**/*.jsx',
@ -179,7 +217,29 @@ function compile(modules) {
    '!components/*/__tests__/*',
  ];

-  const tsResult = gulp.src(source).pipe(
+  // Strip content if needed
+  let sourceStream = gulp.src(source);
+  if (modules === false) {
+    sourceStream = sourceStream.pipe(
+      stripCode({
+        start_comment: '@remove-on-es-build-begin',
+        end_comment: '@remove-on-es-build-end',
+      }),
+    );
+  }
+
+  if (transformTSFile) {
+    sourceStream = sourceStream.pipe(
+      through2.obj(function (file, encoding, next) {
+        let nextFile = transformTSFile(file) || file;
+        nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
+        nextFile.forEach(f => this.push(f));
+        next();
+      }),
+    );
+  }
+
+  const tsResult = sourceStream.pipe(
    ts(tsConfig, {
      error(e) {
        tsDefaultReporter.error(e);
@ -199,7 +259,7 @@ function compile(modules) {
  tsResult.on('end', check);
  const tsFilesStream = babelify(tsResult.js, modules);
  const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : libDir));
-  return merge2([less, tsFilesStream, tsd, assets]);
+  return merge2([less, tsFilesStream, tsd, assets, transformFileStream].filter(s => s));
 }

 function tag() {
@ -420,7 +480,11 @@ gulp.task(
    const npmArgs = getNpmArgs();
    if (npmArgs) {
      for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
-        if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
+        if (
+          /^pu(b(l(i(sh?)?)?)?)?$/.test(arg) &&
+          npmArgs.indexOf('--with-antd-tools') < 0 &&
+          !process.env.npm_config_with_antd_tools
+        ) {
          reportError();
          done(1);
          return;
@ -430,3 +494,11 @@ gulp.task(
    done();
  }),
 );
+
+gulp.task(
+  'sort-api-table',
+  gulp.series(done => {
+    sortApiTable();
+    done();
+  }),
+);
--- a/antd-tools/replaceLib.js
+++ b/antd-tools/replaceLib.js
@ -12,6 +12,19 @@ function replacePath(path) {
      path.node.source.value = esModule;
    }
  }
+
+  // @ant-design/icons-vue/xxx => @ant-design/icons-vue/es/icons/xxx
+  const antdIconMatcher = /@ant-design\/icons-vue\/([^/]*)$/;
+  if (path.node.source && antdIconMatcher.test(path.node.source.value)) {
+    const esModule = path.node.source.value.replace(
+      antdIconMatcher,
+      (_, iconName) => `@ant-design/icons-vue/es/icons/${iconName}`,
+    );
+    const esPath = dirname(getProjectPath('node_modules', esModule));
+    if (fs.existsSync(esPath)) {
+      path.node.source.value = esModule;
+    }
+  }
 }

 function replaceLib() {
--- a/antd-tools/runCmd.js
+++ b/antd-tools/runCmd.js
@ -1,9 +1,17 @@
 'use strict';

+const isWindows = require('is-windows');
 const getRunCmdEnv = require('./utils/getRunCmdEnv');

 function runCmd(cmd, _args, fn) {
  const args = _args || [];
+
+  if (isWindows()) {
+    args.unshift(cmd);
+    args.unshift('/c');
+    cmd = process.env.ComSpec;
+  }
+
  const runner = require('child_process').spawn(cmd, args, {
    // keep color
    stdio: 'inherit',
--- a/antd-tools/sortApiTable.js
+++ b/antd-tools/sortApiTable.js
@ -0,0 +1,165 @@
+const program = require('commander');
+const majo = require('majo');
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const unified = require('unified');
+const parse = require('remark-parse');
+const stringify = require('remark-stringify');
+
+const yamlConfig = require('remark-yaml-config');
+const frontmatter = require('remark-frontmatter');
+
+let fileAPIs = {};
+const remarkWithYaml = unified()
+  .use(parse)
+  .use(stringify, {
+    paddedTable: false,
+    listItemIndent: 1,
+    stringLength: () => 3,
+  })
+  .use(frontmatter)
+  .use(yamlConfig);
+
+const stream = majo.majo();
+
+function getCellValue(node) {
+  return node.children[0].children[0].value;
+}
+
+// from small to large
+const sizeBreakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+const whiteMethodList = ['afterChange', 'beforeChange'];
+
+const groups = {
+  isDynamic: val => /^on[A-Z]/.test(val) || whiteMethodList.indexOf(val) > -1,
+  isSize: val => sizeBreakPoints.indexOf(val) > -1,
+};
+
+function asciiSort(prev, next) {
+  if (prev > next) {
+    return 1;
+  }
+
+  if (prev < next) {
+    return -1;
+  }
+
+  return 0;
+}
+
+// follow the alphabet order
+function alphabetSort(nodes) {
+  // use toLowerCase to keep `case insensitive`
+  return nodes.sort((...comparison) =>
+    asciiSort(...comparison.map(val => getCellValue(val).toLowerCase())),
+  );
+}
+
+function sizeSort(nodes) {
+  return nodes.sort((...comparison) =>
+    asciiSort(...comparison.map(val => sizeBreakPoints.indexOf(getCellValue(val).toLowerCase()))),
+  );
+}
+
+function sort(ast, filename) {
+  const nameMatch = filename.match(/^components\/([^/]*)\//);
+  const componentName = nameMatch[1];
+  fileAPIs[componentName] = fileAPIs[componentName] || {
+    static: new Set(),
+    size: new Set(),
+    dynamic: new Set(),
+  };
+
+  ast.children.forEach(child => {
+    const staticProps = [];
+    // prefix with `on`
+    const dynamicProps = [];
+    // one of ['xs', 'sm', 'md', 'lg', 'xl']
+    const sizeProps = [];
+
+    // find table markdown type
+    if (child.type === 'table') {
+      // slice will create new array, so sort can affect the original array.
+      // slice(1) cut down the thead
+      child.children.slice(1).forEach(node => {
+        const value = getCellValue(node);
+        if (groups.isDynamic(value)) {
+          dynamicProps.push(node);
+          fileAPIs[componentName].dynamic.add(value);
+        } else if (groups.isSize(value)) {
+          sizeProps.push(node);
+          fileAPIs[componentName].size.add(value);
+        } else {
+          staticProps.push(node);
+          fileAPIs[componentName].static.add(value);
+        }
+      });
+
+      // eslint-disable-next-line
+      child.children = [
+        child.children[0],
+        ...alphabetSort(staticProps),
+        ...sizeSort(sizeProps),
+        ...alphabetSort(dynamicProps),
+      ];
+    }
+  });
+
+  return ast;
+}
+
+function sortAPI(md, filename) {
+  return remarkWithYaml.stringify(sort(remarkWithYaml.parse(md), filename));
+}
+
+function sortMiddleware(ctx) {
+  Object.keys(ctx.files).forEach(filename => {
+    const content = ctx.fileContents(filename);
+    ctx.writeContents(filename, sortAPI(content, filename));
+  });
+}
+
+module.exports = () => {
+  fileAPIs = {};
+
+  program
+    .version('0.1.0')
+    .option(
+      '-f, --file [file]',
+      'Specify which file to be transformed',
+      // default value
+      'components/**/index.+(zh-CN|en-US).md',
+    )
+    .option('-o, --output [output]', 'Specify component api output path', '~component-api.json')
+    .parse(process.argv);
+  // Get the markdown file all need to be transformed
+
+  /* eslint-disable no-console */
+  stream
+    .source(program.file)
+    .use(sortMiddleware)
+    .dest('.')
+    .then(() => {
+      if (program.output) {
+        const data = {};
+        Object.keys(fileAPIs).forEach(componentName => {
+          data[componentName] = {
+            static: [...fileAPIs[componentName].static],
+            size: [...fileAPIs[componentName].size],
+            dynamic: [...fileAPIs[componentName].dynamic],
+          };
+        });
+
+        const reportPath = path.resolve(program.output);
+        fs.writeFileSync(reportPath, JSON.stringify(data, null, 2), 'utf8');
+        console.log(chalk.cyan(`API list file: ${reportPath}`));
+      }
+    })
+    .then(() => {
+      console.log(chalk.green(`sort ant-design-vue api successfully!`));
+    });
+  /* eslint-enable no-console */
+};
--- a/antd-tools/transformLess.js
+++ b/antd-tools/transformLess.js
@ -1,16 +1,14 @@
 const less = require('less');
-const { readFileSync } = require('fs');
 const path = require('path');
 const postcss = require('postcss');
-const NpmImportPlugin = require('less-plugin-npm-import');
 const autoprefixer = require('autoprefixer');
+const NpmImportPlugin = require('less-plugin-npm-import');
+const { getConfig } = require('./utils/projectHelper');

-function transformLess(lessFile, config = {}) {
+function transformLess(lessContent, lessFilePath, config = {}) {
  const { cwd = process.cwd() } = config;
-  const resolvedLessFile = path.resolve(cwd, lessFile);
-
-  let data = readFileSync(resolvedLessFile, 'utf-8');
-  data = data.replace(/^\uFEFF/, '');
+  const { compile: { lessConfig } = {} } = getConfig();
+  const resolvedLessFile = path.resolve(cwd, lessFilePath);

  // Do less compile
  const lessOpts = {
@ -18,13 +16,12 @@ function transformLess(lessFile, config = {}) {
    filename: resolvedLessFile,
    plugins: [new NpmImportPlugin({ prefix: '~' })],
    javascriptEnabled: true,
+    ...lessConfig,
  };
  return less
-    .render(data, lessOpts)
+    .render(lessContent, lessOpts)
    .then(result => postcss([autoprefixer]).process(result.css, { from: undefined }))
-    .then(r => {
-      return r.css;
-    });
+    .then(r => r.css);
 }

 module.exports = transformLess;
--- a/antd-tools/utils/CleanUpStatsPlugin.js
+++ b/antd-tools/utils/CleanUpStatsPlugin.js
@ -24,13 +24,13 @@ class CleanUpStatsPlugin {

  apply(compiler) {
    compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
-      const { children } = stats.compilation;
+      const { children, warnings } = stats.compilation;
      if (Array.isArray(children)) {
        stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
      }
-      // if (Array.isArray(warnings)) {
-      //   stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
-      // }
+      if (Array.isArray(warnings)) {
+        stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
+      }
    });
  }
 }
--- a/antd-tools/utils/get-npm-args.js
+++ b/antd-tools/utils/get-npm-args.js
@ -2,6 +2,11 @@

 // NOTE: the following code was partially adopted from https://github.com/iarna/in-publish
 module.exports = function getNpmArgs() {
+  // https://github.com/iarna/in-publish/pull/14
+  if (process.env.npm_command) {
+    return [process.env.npm_command];
+  }
+
  let npmArgv = null;

  try {
--- a/antd-tools/utils/getRunCmdEnv.js
+++ b/antd-tools/utils/getRunCmdEnv.js
@ -1,6 +1,7 @@
 'use strict';

 const path = require('path');
+const isWindows = require('is-windows');

 module.exports = function getRunCmdEnv() {
  const env = {};
@ -14,7 +15,9 @@ module.exports = function getRunCmdEnv() {
    .filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
    .forEach(v => {
      const key = v.slice(0, 1).pop();
-      env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;
+      env[key] = env[key]
+        ? `${nodeModulesBinDir}${isWindows() ? ';' : ':'}${env[key]}`
+        : nodeModulesBinDir;
    });
  return env;
 };
--- a/antd-tools/utils/projectHelper.js
+++ b/antd-tools/utils/projectHelper.js
@ -13,6 +13,7 @@ function resolve(moduleName) {

 // We need hack the require to ensure use package module first
 // For example, `typescript` is required by `gulp-typescript` but provided by `antd`
+// we do not need for ant-design-vue
 let injected = false;
 function injectRequire() {
  if (injected) return;
@ -45,9 +46,35 @@ function getConfig() {
  return {};
 }

+/**
+ * 是否存在可用的browserslist config
+ * https://github.com/browserslist/browserslist#queries
+ * @returns
+ */
+function isThereHaveBrowserslistConfig() {
+  try {
+    const packageJson = require(getProjectPath('package.json'));
+    if (packageJson.browserslist) {
+      return true;
+    }
+  } catch (e) {
+    //
+  }
+  if (fs.existsSync(getProjectPath('.browserslistrc'))) {
+    return true;
+  }
+  if (fs.existsSync(getProjectPath('browserslist'))) {
+    return true;
+  }
+  // parent项目的配置支持，需要再补充
+  // ROWSERSLIST ROWSERSLIST_ENV 变量的形式，需要再补充。
+  return false;
+}
+
 module.exports = {
  getProjectPath,
  resolve,
  injectRequire,
  getConfig,
+  isThereHaveBrowserslistConfig,
 };
--- a/antd-tools/utils/styleUtil.js
+++ b/antd-tools/utils/styleUtil.js
@ -0,0 +1,11 @@
+// We convert less import in es/lib to css file path
+function cssInjection(content) {
+  return content
+    .replace(/\/style\/?'/g, "/style/css'")
+    .replace(/\/style\/?"/g, '/style/css"')
+    .replace(/\.less/g, '.css');
+}
+
+module.exports = {
+  cssInjection,
+};
--- a/components/_util/ActionButton.tsx
+++ b/components/_util/ActionButton.tsx
@ -4,6 +4,7 @@ import Button from '../button';
 import type { ButtonProps } from '../button';
 import type { LegacyButtonType } from '../button/buttonTypes';
 import { convertLegacyProps } from '../button/buttonTypes';
+import useDestroyed from './hooks/useDestroyed';

 const actionButtonProps = {
  type: {
@ -32,6 +33,7 @@ export default defineComponent({
    const buttonRef = ref();
    const loading = ref(false);
    let timeoutId: any;
+    const isDestroyed = useDestroyed();
    onMounted(() => {
      if (props.autofocus) {
        timeoutId = setTimeout(() => buttonRef.value.$el?.focus());
@ -49,7 +51,9 @@ export default defineComponent({
      loading.value = true;
      returnValueOfOnOk!.then(
        (...args: any[]) => {
-          loading.value = false;
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
          close(...args);
          clickedRef.value = false;
        },
@ -58,7 +62,9 @@ export default defineComponent({
          // eslint-disable-next-line no-console
          console.error(e);
          // See: https://github.com/ant-design/ant-design/issues/6183
-          loading.value = false;
+          if (!isDestroyed.value) {
+            loading.value = false;
+          }
          clickedRef.value = false;
        },
      );
--- a/components/_util/EventInterface.ts
+++ b/components/_util/EventInterface.ts
@ -6,5 +6,10 @@ export type ChangeEvent = Event & {
    value?: string | undefined;
  };
 };
+export type CheckboxChangeEvent = Event & {
+  target: {
+    checked?: boolean;
+  };
+};

 export type EventHandler = (...args: any[]) => void;
--- a/components/_util/tests/unreachableException.test.js
+++ b/components/_util/tests/unreachableException.test.js
@ -0,0 +1,8 @@
+import UnreachableException from '../unreachableException';
+
+describe('UnreachableException', () => {
+  it('error thrown matches snapshot', () => {
+    const exception = new UnreachableException('some value');
+    expect(exception.error.message).toMatchInlineSnapshot(`"unreachable case: \\"some value\\""`);
+  });
+});
--- a/components/upload/UploadList/listAnimation.ts
+++ b/components/upload/UploadList/listAnimation.ts
@ -1,11 +1,11 @@
-import { addClass, removeClass } from '../../vc-util/Dom/class';
 import { nextTick } from 'vue';
-import type { CSSMotionProps } from '../../_util/transition';
+import { addClass, removeClass } from '../vc-util/Dom/class';
+import type { CSSMotionProps } from './transition';

-const listAnimation = (name = 'ant-motion-collapse'): CSSMotionProps => {
+const collapseMotion = (name = 'ant-motion-collapse', appear = true): CSSMotionProps => {
  return {
    name,
-    appear: true,
+    appear,
    css: true,
    onBeforeEnter: (node: HTMLDivElement) => {
      node.style.height = '0px';
@ -47,4 +47,4 @@ const listAnimation = (name = 'ant-motion-collapse'): CSSMotionProps => {
    },
  };
 };
-export default listAnimation;
+export default collapseMotion;
--- a/components/_util/hooks/useConfigInject.ts
+++ b/components/_util/hooks/useConfigInject.ts
@ -19,6 +19,7 @@ export default (
  pageHeader: ComputedRef<{ ghost: boolean }>;
  form?: ComputedRef<{
    requiredMark?: RequiredMark;
+    colon?: boolean;
  }>;
  autoInsertSpaceInButton: ComputedRef<boolean>;
  renderEmpty?: ComputedRef<(componentName?: string) => VueNode>;
--- a/components/_util/hooks/useDestroyed.ts
+++ b/components/_util/hooks/useDestroyed.ts
@ -0,0 +1,12 @@
+import { onBeforeUnmount, ref } from 'vue';
+
+const useDestroyed = () => {
+  const mounted = ref(true);
+  onBeforeUnmount(() => {
+    mounted.value = false;
+  });
+
+  return mounted;
+};
+
+export default useDestroyed;
--- a/components/_util/hooks/usePrefixCls.ts
+++ b/components/_util/hooks/usePrefixCls.ts
@ -1,9 +0,0 @@
-import type { ComputedRef } from 'vue';
-import { computed, inject } from 'vue';
-import { defaultConfigProvider } from '../../config-provider';
-
-export default (name: string, props: Record<any, any>): ComputedRef<string> => {
-  const configProvider = inject('configProvider', defaultConfigProvider);
-  const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
-  return prefixCls;
-};
--- a/components/_util/openAnimation.js
+++ b/components/_util/openAnimation.js
@ -1,67 +0,0 @@
-import cssAnimation from './css-animation';
-import { nextTick } from 'vue';
-import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
-
-function animate(node, show, done) {
-  let height;
-  let requestAnimationFrameId;
-  let appearRequestAnimationFrameId;
-  return cssAnimation(node, 'ant-motion-collapse-legacy', {
-    start() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (!show) {
-        node.style.height = `${node.offsetHeight}px`;
-        node.style.opacity = '1';
-      } else {
-        height = node.offsetHeight;
-        // not get offsetHeight when appear
-        // set it into raf get correct offsetHeight
-        if (height === 0) {
-          appearRequestAnimationFrameId = requestAnimationTimeout(() => {
-            height = node.offsetHeight;
-            node.style.height = '0px';
-            node.style.opacity = '0';
-          });
-        } else {
-          node.style.height = '0px';
-          node.style.opacity = '0';
-        }
-      }
-    },
-    active() {
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      requestAnimationFrameId = requestAnimationTimeout(() => {
-        node.style.height = `${show ? height : 0}px`;
-        node.style.opacity = show ? '1' : '0';
-      });
-    },
-    end() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      node.style.height = '';
-      node.style.opacity = '';
-      done && done();
-    },
-  });
-}
-
-const animation = {
-  onEnter(node, done) {
-    nextTick(() => {
-      animate(node, true, done);
-    });
-  },
-  onLeave(node, done) {
-    return animate(node, false, done);
-  },
-};
-
-export default animation;
--- a/components/_util/styleChecker.ts
+++ b/components/_util/styleChecker.ts
@ -2,8 +2,8 @@ import canUseDom from './canUseDom';

 export const canUseDocElement = () => canUseDom() && window.document.documentElement;

-export const isStyleSupport = (styleName: string | Array<string>): boolean => {
-  if (canUseDocElement()) {
+const isStyleNameSupport = (styleName: string | string[]): boolean => {
+  if (canUseDom() && window.document.documentElement) {
    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
    const { documentElement } = window.document;

@ -12,6 +12,25 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
  return false;
 };

+const isStyleValueSupport = (styleName: string, value: any) => {
+  if (!isStyleNameSupport(styleName)) {
+    return false;
+  }
+
+  const ele = document.createElement('div');
+  const origin = ele.style[styleName];
+  ele.style[styleName] = value;
+  return ele.style[styleName] !== origin;
+};
+
+export function isStyleSupport(styleName: string | string[], styleValue?: any) {
+  if (!Array.isArray(styleName) && styleValue !== undefined) {
+    return isStyleValueSupport(styleName, styleValue);
+  }
+
+  return isStyleNameSupport(styleName);
+}
+
 let flexGapSupported: boolean | undefined;
 export const detectFlexGapSupported = () => {
  if (!canUseDocElement()) {
--- a/components/_util/transition.tsx
+++ b/components/_util/transition.tsx
@ -129,13 +129,17 @@ export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
  css?: boolean;
 }

-const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSMotionProps => {
+const collapseMotion = (
+  name = 'ant-motion-collapse',
+  style: Ref<CSSProperties>,
+  className: Ref<string>,
+): CSSMotionProps => {
  return {
-    name: 'ant-motion-collapse',
+    name,
    appear: true,
    css: true,
    onBeforeEnter: node => {
-      className.value = 'ant-motion-collapse';
+      className.value = name;
      style.value = getCollapsedHeight(node);
    },
    onEnter: node => {
@ -148,7 +152,7 @@ const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSM
      style.value = {};
    },
    onBeforeLeave: node => {
-      className.value = 'ant-motion-collapse';
+      className.value = name;
      style.value = getCurrentHeight(node);
    },
    onLeave: node => {
--- a/components/_util/unreachableException.ts
+++ b/components/_util/unreachableException.ts
@ -0,0 +1,7 @@
+export default class UnreachableException {
+  error: Error;
+
+  constructor(value: any) {
+    this.error = new Error(`unreachable case: ${JSON.stringify(value)}`);
+  }
+}
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@ -24,6 +24,7 @@ export default defineComponent({
  name: 'Wave',
  props: {
    insertExtraNode: Boolean,
+    disabled: Boolean,
  },
  setup(props, { slots, expose }) {
    const instance = getCurrentInstance();
@ -60,10 +61,11 @@ export default defineComponent({
      return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
    };
    const onClick = (node: HTMLElement, waveColor: string) => {
-      if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
+      const { insertExtraNode, disabled } = props;
+      if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
        return;
      }
-      const { insertExtraNode } = props;
+
      extraNode = document.createElement('div');
      extraNode.className = 'ant-click-animating-node';
      const attributeName = getAttributeName();
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -23,9 +23,9 @@ Please note that Affix should not cover other content on the page, especially wh

 ### events

-| Events Name | Description                              | Arguments         | Version |
-| ----------- | ---------------------------------------- | ----------------- | ------- |
-| change      | Callback for when Affix state is changed | Function(affixed) |
+| Events Name | Description                              | Arguments                   | Version |
+| ----------- | ---------------------------------------- | --------------------------- | ------- |
+| change      | Callback for when Affix state is changed | (affixed?: boolean) => void |         |

 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:

@ -35,8 +35,12 @@ Please note that Affix should not cover other content on the page, especially wh

 ## FAQ

-### Affix bind container with `target`, sometime move out of container.
+### When binding container with `target` in Affix, elements sometimes move out of the container.

-We don't listen window scroll for performance consideration.
+We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to, like react demo <https://codesandbox.io/s/2xyj5zr85p>

 Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
+
+### When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect.
+
+Affix is generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@ -179,10 +179,7 @@ const Affix = defineComponent({
    watch(
      () => props.target,
      val => {
-        let newTarget = null;
-        if (val) {
-          newTarget = val() || null;
-        }
+        const newTarget = val?.() || null;
        if (state.prevTarget !== newTarget) {
          removeObserveTarget(currentInstance);
          if (newTarget) {
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 |  |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |

 ### 事件

-| 事件名称 | 说明                         | 回调参数          | 版本 |
-| -------- | ---------------------------- | ----------------- | ---- | --- |
-| change   | 固定状态改变时触发的回调函数 | Function(affixed) | 无   |     |
+| 事件名称 | 说明                         | 回调参数                    | 版本 |     |
+| -------- | ---------------------------- | --------------------------- | ---- | --- |
+| change   | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | -    |     |

 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

@ -38,6 +38,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg

 ### Affix 使用 `target` 绑定容器时，元素会跑到容器外。

-从性能角度考虑，我们只监听容器滚动事件。
+从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听, 参考 react 版本示例 <https://codesandbox.io/s/2xyj5zr85p>

 相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
+
+### Affix 在水平滚动容器中使用时， 元素 `left` 位置不正确。
+
+Affix 一般只适用于单向滚动的区域，只支持在垂直滚动容器中使用。如果希望在水平容器中使用，你可以考虑使用 原生 `position: sticky` 实现。
+
+相关 issue: [#29108](https://github.com/ant-design/ant-design/issues/29108)
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@ -3,19 +3,14 @@ import type { ComponentPublicInstance } from 'vue';
 import supportsPassive from '../_util/supportsPassive';

 export type BindElement = HTMLElement | Window | null | undefined;
-export type Rect = ClientRect | DOMRect;

-export function getTargetRect(target: BindElement): ClientRect {
+export function getTargetRect(target: BindElement): DOMRect {
  return target !== window
    ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
+    : ({ top: 0, bottom: window.innerHeight } as DOMRect);
 }

-export function getFixedTop(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetTop: number | undefined,
-) {
+export function getFixedTop(placeholderReact: DOMRect, targetRect: DOMRect, offsetTop: number) {
  if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
    return `${offsetTop + targetRect.top}px`;
  }
@ -23,9 +18,9 @@ export function getFixedTop(
 }

 export function getFixedBottom(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetBottom: number | undefined,
+  placeholderReact: DOMRect,
+  targetRect: DOMRect,
+  offsetBottom: number,
 ) {
  if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
    const targetBottomOffset = window.innerHeight - targetRect.bottom;
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@ -1,68 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./components/alert/demo/banner.vue correctly 1`] = `
-<div class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div><br>
-<div class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Very long warning text warning text text text text text text text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div><br>
-<div class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning text without icon</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div><br>
-<div class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-banner" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
 `;

 exports[`renders ./components/alert/demo/basic.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
 `;

 exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
-<div class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error Text</div>
@ -72,86 +60,74 @@ exports[`renders ./components/alert/demo/closable.vue correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/close-text.vue correctly 1`] = `
-<div class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Info Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span class="ant-alert-close-text">Close Now</span></button>
 </div>
 `;

 exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">showIcon = false</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Tips</div>
    <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Informational Notes</div>
    <div class="ant-alert-description">Additional description and informations about copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning</div>
    <div class="ant-alert-description">This is a warning notice about copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error</div>
    <div class="ant-alert-description">This is an error message about copywriting.</div>
@ -161,7 +137,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Text</div>
@ -171,7 +147,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Info Text</div>
@ -179,7 +155,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning Text</div>
@ -187,7 +163,7 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error Text</div>
@ -198,64 +174,56 @@ exports[`renders ./components/alert/demo/description.vue correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Tips</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Informational Notes</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle ant-alert-icon"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Tips</div>
    <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="info-circle" class="anticon anticon-info-circle ant-alert-icon"><svg focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Informational Notes</div>
    <div class="ant-alert-description">Additional description and informations about copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle ant-alert-icon"><svg focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning</div>
    <div class="ant-alert-description">This is a warning notice about copywriting.</div>
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
+<div role="alert" class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-alert-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span>
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error</div>
    <div class="ant-alert-description">This is an error message about copywriting.</div>
@ -265,55 +233,45 @@ exports[`renders ./components/alert/demo/icon.vue correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/smooth-closed.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Alert Message Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div><button type="button" class="ant-alert-close-icon" tabindex="0"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
 </div>
 `;

 exports[`renders ./components/alert/demo/style.vue correctly 1`] = `
-<div class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-success ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Success Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Info Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-warning ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Warning Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-error ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">Error Text</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -19,6 +19,7 @@ Alert component for feedback.
 | afterClose | Called when close animation is finished | () => void | - |  |
 | banner | Whether to show as banner | boolean | false |  |
 | closable | Whether Alert can be closed | boolean |  |  |
+| closeIcon | Custom close icon | slot | <CloseOutlined /> | 3.0 |
 | closeText | Close text to show | string\|slot | - |  |
 | description | Additional content of Alert | string\|slot | - |  |
 | icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - |  |
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@ -1,5 +1,5 @@
-import type { ExtractPropTypes } from 'vue';
-import { inject, defineComponent, ref } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import { defineComponent, ref } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@ -13,9 +13,10 @@ import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { isValidElement, getPropsSlot } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
 import { tuple, withInstall } from '../_util/type';
 import { cloneElement } from '../_util/vnode';
+import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
+import useConfigInject from '../_util/hooks/useConfigInject';

 function noop() {}

@ -37,7 +38,7 @@ const AlertTypes = tuple('success', 'info', 'warning', 'error');

 export type AlertType = typeof AlertTypes[number];

-const alertProps = {
+export const alertProps = () => ({
  /**
   * Type of Alert styles, options: `success`, `info`, `warning`, `error`
   */
@ -57,18 +58,18 @@ const alertProps = {
  prefixCls: PropTypes.string,
  banner: PropTypes.looseBool,
  icon: PropTypes.any,
-  onClose: PropTypes.any,
-};
+  closeIcon: PropTypes.any,
+  onClose: Function as PropType<NodeMouseEventHandler>,
+});

-export type AlertProps = Partial<ExtractPropTypes<typeof alertProps>>;
+export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;

 const Alert = defineComponent({
  name: 'AAlert',
  inheritAttrs: false,
-  props: alertProps,
-  emits: ['close'],
+  props: alertProps(),
  setup(props, { slots, emit, attrs, expose }) {
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { prefixCls, direction } = useConfigInject('alert', props);
    const closing = ref(false);
    const closed = ref(false);
    const alertNode = ref();
@ -94,11 +95,9 @@ const Alert = defineComponent({
    };

    expose({ animationEnd });
-
+    const motionStyle = ref<CSSProperties>({});
    return () => {
-      const { prefixCls: customizePrefixCls, banner } = props;
-      const { getPrefixCls } = configProvider;
-      const prefixCls = getPrefixCls('alert', customizePrefixCls);
+      const { banner, closeIcon: customCloseIcon = slots.closeIcon?.() } = props;

      let { closable, type, showIcon } = props;

@ -118,22 +117,30 @@ const Alert = defineComponent({
      if (closeText) {
        closable = true;
      }
-
-      const alertCls = classNames(prefixCls, {
-        [`${prefixCls}-${type}`]: true,
-        [`${prefixCls}-closing`]: closing.value,
-        [`${prefixCls}-with-description`]: !!description,
-        [`${prefixCls}-no-icon`]: !showIcon,
-        [`${prefixCls}-banner`]: !!banner,
-        [`${prefixCls}-closable`]: closable,
+      const prefixClsValue = prefixCls.value;
+      const alertCls = classNames(prefixClsValue, {
+        [`${prefixClsValue}-${type}`]: true,
+        [`${prefixClsValue}-closing`]: closing.value,
+        [`${prefixClsValue}-with-description`]: !!description,
+        [`${prefixClsValue}-no-icon`]: !showIcon,
+        [`${prefixClsValue}-banner`]: !!banner,
+        [`${prefixClsValue}-closable`]: closable,
+        [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
      });

      const closeIcon = closable ? (
-        <button type="button" onClick={handleClose} class={`${prefixCls}-close-icon`} tabindex={0}>
+        <button
+          type="button"
+          onClick={handleClose}
+          class={`${prefixClsValue}-close-icon`}
+          tabindex={0}
+        >
          {closeText ? (
-            <span class={`${prefixCls}-close-text`}>{closeText}</span>
-          ) : (
+            <span class={`${prefixClsValue}-close-text`}>{closeText}</span>
+          ) : customCloseIcon === undefined ? (
            <CloseOutlined />
+          ) : (
+            customCloseIcon
          )}
        </button>
      ) : null;
@ -141,29 +148,40 @@ const Alert = defineComponent({
      const iconNode = (icon &&
        (isValidElement(icon) ? (
          cloneElement(icon, {
-            class: `${prefixCls}-icon`,
+            class: `${prefixClsValue}-icon`,
          })
        ) : (
-          <span class={`${prefixCls}-icon`}>{icon}</span>
-        ))) || <IconType class={`${prefixCls}-icon`} />;
+          <span class={`${prefixClsValue}-icon`}>{icon}</span>
+        ))) || <IconType class={`${prefixClsValue}-icon`} />;

-      const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
+      const transitionProps = getTransitionProps(`${prefixClsValue}-motion`, {
        appear: false,
+        css: true,
        onAfterLeave: animationEnd,
+        onBeforeLeave: (node: HTMLDivElement) => {
+          node.style.maxHeight = `${node.offsetHeight}px`;
+        },
+        onLeave: (node: HTMLDivElement) => {
+          node.style.maxHeight = '0px';
+        },
      });
      return closed.value ? null : (
        <Transition {...transitionProps}>
          <div
+            role="alert"
            {...attrs}
+            style={{ ...(attrs.style as Object), ...motionStyle.value }}
            v-show={!closing.value}
            class={[attrs.class, alertCls]}
            data-show={!closing.value}
            ref={alertNode}
          >
            {showIcon ? iconNode : null}
-            <div class={`${prefixCls}-content`}>
-              <div class={`${prefixCls}-message`}>{message}</div>
-              <div class={`${prefixCls}-description`}>{description}</div>
+            <div class={`${prefixClsValue}-content`}>
+              {message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
+              {description ? (
+                <div class={`${prefixClsValue}-description`}>{description}</div>
+              ) : null}
            </div>
            {closeIcon}
          </div>
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 | afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
 | banner | 是否用作顶部公告 | boolean | false |  |
 | closable | 默认不显示关闭按钮 | boolean | 无 |  |
+| closeIcon | 自定义关闭 Icon | slot | <CloseOutlined /> | 3.0 |
 | closeText | 自定义关闭按钮 | string\|slot | 无 |  |
 | description | 警告提示的辅助性文字介绍 | string\|slot | 无 |  |
 | icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode\|slot | - |  |
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -3,16 +3,6 @@

@alert-prefix-cls: ~'@{ant-prefix}-alert';

-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: @icon-color-hover;
-
-@alert-with-description-icon-size: 24px;
-@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
-@alert-with-description-padding-vertical: @padding-md - 1px;
-@alert-with-description-padding: @alert-with-description-padding-vertical 15px;
-
 .@{alert-prefix-cls} {
  .reset-component();

@ -65,9 +55,19 @@
  &-error {
    background-color: @alert-error-bg-color;
    border: @border-width-base @border-style-base @alert-error-border-color;
+
    .@{alert-prefix-cls}-icon {
      color: @alert-error-icon-color;
    }
+
+    .@{alert-prefix-cls}-description > pre {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &-action {
+    margin-left: @margin-xs;
  }

  &-close-icon {
@ -84,6 +84,7 @@
    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
      transition: color 0.3s;
+
      &:hover {
        color: @alert-close-hover-color;
      }
@ -93,6 +94,7 @@
  &-close-text {
    color: @alert-close-color;
    transition: color 0.3s;
+
    &:hover {
      color: @alert-close-hover-color;
    }
@ -127,18 +129,20 @@
    display: block;
  }

-  &&-closing {
-    height: 0 !important;
-    margin: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    transform-origin: 50% 0;
-    transition: all 0.3s @ease-in-out-circ;
+  &&-motion-leave {
+    overflow: hidden;
+    opacity: 1;
+    transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
+      padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
+      margin-bottom 0.3s @ease-in-out-circ;
  }

-  &-slide-up-leave {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
-    animation-fill-mode: both;
+  &&-motion-leave-active {
+    max-height: 0;
+    margin-bottom: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
  }

  &-banner {
@ -148,28 +152,4 @@
  }
 }

-@keyframes antAlertSlideUpIn {
-  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
+@import './rtl';
--- a/components/alert/style/rtl.less
+++ b/components/alert/style/rtl.less
@ -0,0 +1,40 @@
+.@{alert-prefix-cls} {
+  &&-rtl {
+    direction: rtl;
+  }
+
+  &-icon {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: auto;
+      margin-left: @margin-xs;
+    }
+  }
+
+  &-action {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: @margin-xs;
+      margin-left: auto;
+    }
+  }
+
+  &-close-icon {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: @margin-xs;
+      margin-left: auto;
+    }
+  }
+
+  &-with-description {
+    .@{alert-prefix-cls}-rtl& {
+      padding-right: @alert-with-description-icon-size;
+      padding-left: @alert-with-description-padding-vertical;
+    }
+
+    .@{alert-prefix-cls}-icon {
+      .@{alert-prefix-cls}-rtl& {
+        margin-right: auto;
+        margin-left: @alert-with-description-padding-vertical;
+      }
+    }
+  }
+}
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import {
  defineComponent,
  nextTick,
@ -9,7 +9,6 @@ import {
  ref,
  computed,
 } from 'vue';
-import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import Affix from '../affix';
@ -40,7 +39,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
  return rect.top;
 }

-const sharpMatcherRegx = /#(\S+)$/;
+const sharpMatcherRegx = /#([\S ]+)$/;

 type Section = {
  link: string;
@ -49,22 +48,22 @@ type Section = {

 export type AnchorContainer = HTMLElement | Window;

-const anchorProps = {
-  prefixCls: PropTypes.string,
-  offsetTop: PropTypes.number,
-  bounds: PropTypes.number,
-  affix: PropTypes.looseBool.def(true),
-  showInkInFixed: PropTypes.looseBool.def(false),
-  getContainer: PropTypes.func.def(getDefaultContainer),
-  wrapperClass: PropTypes.string,
-  wrapperStyle: PropTypes.style,
-  getCurrentAnchor: PropTypes.func,
-  targetOffset: PropTypes.number,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-};
+export const anchorProps = () => ({
+  prefixCls: String,
+  offsetTop: Number,
+  bounds: Number,
+  affix: { type: Boolean, default: true },
+  showInkInFixed: { type: Boolean, default: false },
+  getContainer: Function as PropType<() => AnchorContainer>,
+  wrapperClass: String,
+  wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+  getCurrentAnchor: Function as PropType<() => string>,
+  targetOffset: Number,
+  onChange: Function as PropType<(currentActiveLink: string) => void>,
+  onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>,
+});

-export type AnchorProps = Partial<ExtractPropTypes<typeof anchorProps>>;
+export type AnchorProps = Partial<ExtractPropTypes<ReturnType<typeof anchorProps>>>;

 export interface AnchorState {
  scrollContainer: HTMLElement | Window;
@ -76,8 +75,7 @@ export interface AnchorState {
 export default defineComponent({
  name: 'AAnchor',
  inheritAttrs: false,
-  props: anchorProps,
-  emits: ['change', 'click'],
+  props: anchorProps(),
  setup(props, { emit, attrs, slots, expose }) {
    const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props);
    const inkNodeRef = ref();
@ -129,10 +127,10 @@ export default defineComponent({
      emit('change', link);
    };
    const handleScrollTo = (link: string) => {
-      const { offsetTop, getContainer, targetOffset } = props;
+      const { offsetTop, targetOffset } = props;

      setCurrentActiveLink(link);
-      const container = getContainer();
+      const container = getContainer.value();
      const scrollTop = getScroll(container, true);
      const sharpLinkMatch = sharpMatcherRegx.exec(link);
      if (!sharpLinkMatch) {
@ -152,7 +150,7 @@ export default defineComponent({
        callback: () => {
          state.animating = false;
        },
-        getContainer,
+        getContainer: getContainer.value,
      });
    };
    expose({
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -21,25 +21,25 @@ For displaying anchor hyperlinks on page and jumping between them.
 | affix | Fixed mode of Anchor | boolean | true |  |
 | bounds | Bounding distance of anchor area | number | 5(px) |  |
 | getContainer | Scrolling container | () => HTMLElement | () => window |  |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-balls when `：affix="false"` | boolean | false |  |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 | wrapperClass | The class name of the container | string | - |  |
 | wrapperStyle | The style of the container | object | - |  |
-| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
-| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |

 ### Events

-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
-| click | set the handler to handle `click` event | Function(e: Event, link: Object) |  |
 | change | Listening for anchor link change | (currentActiveLink: string) => void |  | 1.5.0 |
+| click | set the handler to handle `click` event | Function(e: Event, link: Object) |  |  |

 ### Link Props

 | Property | Description                               | Type         | Default | Version |
 | -------- | ----------------------------------------- | ------------ | ------- | ------- |
 | href     | target of hyperlink                       | string       |         |         |
-| title    | content of hyperlink                      | string\|slot |         |         |
 | target   | Specifies where to display the linked URL | string       |         | 1.5.0   |
+| title    | content of hyperlink                      | string\|slot |         |         |
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -22,25 +22,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 | affix | 固定模式 | boolean | true |  |
 | bounds | 锚点区域边界 | number | 5(px) |  |
 | getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | `:affix="false"` 时是否显示小圆点 | boolean | false |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
 | wrapperClass | 容器的类名 | string | - |  |
 | wrapperStyle | 容器样式 | object | - |  |
-| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |

 ### 事件

-| 事件名称 | 说明                   | 回调参数                            | 版本 |
+| 事件名称 | 说明                   | 回调参数                            | 版本 |       |
 | -------- | ---------------------- | ----------------------------------- | ---- | ----- |
-| click    | `click` 事件的 handler | Function(e: Event, link: Object)    |      |
 | change   | 监听锚点链接改变       | (currentActiveLink: string) => void |      | 1.5.0 |
+| click    | `click` 事件的 handler | Function(e: Event, link: Object)    |      |       |

 ### Link Props

 | 成员   | 说明                             | 类型         | 默认值 | 版本  |
 | ------ | -------------------------------- | ------------ | ------ | ----- |
 | href   | 锚点链接                         | string       |        |       |
-| title  | 文字内容                         | string\|slot |        |       |
 | target | 该属性指定在何处显示链接的资源。 | string       |        | 1.5.0 |
+| title  | 文字内容                         | string\|slot |        |       |
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -21,6 +21,7 @@
    top: 0;
    left: 0;
    height: 100%;
+
    &::before {
      position: relative;
      display: block;
@ -30,6 +31,7 @@
      background-color: @anchor-border-color;
      content: ' ';
    }
+
    &-ball {
      position: absolute;
      left: 50%;
@ -41,6 +43,7 @@
      border-radius: 8px;
      transform: translateX(-50%);
      transition: top 0.3s ease-in-out;
+
      &.visible {
        display: inline-block;
      }
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@ -14,10 +14,10 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `

 exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
-  <div class="ant-select ant-select-lg certain-category-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">
    <!---->
    <!---->
-    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-affix-wrapper ant-select-selection-search-input"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-suffix"><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span></span>
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
      <!----><span class="ant-select-selection-placeholder"><!----></span>
    </div>
    <!---->
@ -64,7 +64,7 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `

 exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctly 1`] = `
 <div class="global-search-wrapper" style="width: 300px;">
-  <div class="ant-select ant-select-lg global-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div style="width: 300px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
    <!---->
    <!---->
    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
--- a/components/auto-complete/demo/certain-category.vue
+++ b/components/auto-complete/demo/certain-category.vue
@ -21,11 +21,8 @@ Lookup-Patterns - Certain Category.
      v-model:value="value"
      class="certain-category-search"
      dropdown-class-name="certain-category-search-dropdown"
-      :dropdown-match-select-width="false"
-      :dropdown-style="{ width: '300px' }"
-      size="large"
-      style="width: 100%"
-      option-label-prop="value"
+      :dropdown-match-select-width="500"
+      style="width: 250px"
      :options="dataSource"
    >
      <template #option="item">
@ -52,30 +49,33 @@ Lookup-Patterns - Certain Category.
          </a>
        </template>
        <template v-else>
-          {{ item.title }}
-          <span class="certain-search-item-count">{{ item.count }} people</span>
+          <div style="display: flex; justify-content: space-between">
+            {{ item.value }}
+            <span>
+              <UserOutlined />
+              {{ item.count }}
+            </span>
+          </div>
        </template>
      </template>
-      <a-input placeholder="input here">
-        <template #suffix><search-outlined class="certain-category-icon" /></template>
-      </a-input>
+      <a-input-search placeholder="input here" size="large"></a-input-search>
    </a-auto-complete>
  </div>
 </template>

 <script lang="ts">
-import { SearchOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
 const dataSource = [
  {
    value: 'Libraries',
    options: [
      {
-        value: 'AntDesign',
+        value: 'AntDesignVue',
        count: 10000,
      },
      {
-        value: 'AntDesign UI',
+        value: 'AntDesignVue UI',
        count: 10600,
      },
    ],
@ -84,11 +84,11 @@ const dataSource = [
    value: 'Solutions',
    options: [
      {
-        value: 'AntDesign UI FAQ',
+        value: 'AntDesignVue UI FAQ',
        count: 60100,
      },
      {
-        value: 'AntDesign FAQ',
+        value: 'AntDesignVue FAQ',
        count: 30010,
      },
    ],
@ -97,7 +97,7 @@ const dataSource = [
    value: 'Articles',
    options: [
      {
-        value: 'AntDesign design language',
+        value: 'AntDesignVue design language',
        count: 100000,
      },
    ],
@ -108,7 +108,7 @@ const dataSource = [
 ];
 export default defineComponent({
  components: {
-    SearchOutlined,
+    UserOutlined,
  },
  setup() {
    return {
@ -142,27 +142,3 @@ export default defineComponent({
  max-height: 300px;
 }
 </style>
-
-<style scoped>
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-auto-complete)
-  .ant-input-affix-wrapper
-  .ant-input-suffix {
-  right: 12px;
-}
-.certain-category-search-wrapper :deep(.certain-search-item-count) {
-  position: absolute;
-  color: #999;
-  right: 16px;
-}
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-focused)
-  .certain-category-icon {
-  color: #108ee9;
-}
-.certain-category-search-wrapper :deep(.certain-category-icon) {
-  color: #6e6e6e;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
-</style>
--- a/components/auto-complete/demo/uncertain-category.vue
+++ b/components/auto-complete/demo/uncertain-category.vue
@ -14,29 +14,30 @@ title:

 Lookup-Patterns - Uncertain Category.
 </docs>
-
 <template>
  <div class="global-search-wrapper" style="width: 300px">
    <a-auto-complete
      v-model:value="value"
-      class="global-search"
-      size="large"
-      style="width: 100%"
-      option-label-prop="title"
+      :dropdown-match-select-width="252"
+      style="width: 300px"
      :options="dataSource"
      @select="onSelect"
      @search="handleSearch"
    >
      <template #option="item">
-        Found {{ item.query }} on
-        <a
-          :href="`https://s.taobao.com/search?q=${item.query}`"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {{ item.category }}
-        </a>
-        <span class="global-search-item-count">{{ item.count }} results</span>
+        <div style="display: flex; justify-content: space-between">
+          <span>
+            Found {{ item.query }} on
+            <a
+              :href="`https://s.taobao.com/search?q=${item.query}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ item.category }}
+            </a>
+          </span>
+          <span>{{ item.count }} results</span>
+        </div>
      </template>
      <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
    </a-auto-complete>
@ -86,40 +87,3 @@ export default defineComponent({
  },
 });
 </script>
-
-<style>
-.global-search-wrapper {
-  padding-right: 50px;
-}
-
-.global-search {
-  width: 100%;
-}
-
-.global-search.ant-select-auto-complete .ant-select-selection--single {
-  margin-right: -46px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
-  padding-right: 62px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.global-search-item {
-  display: flex;
-}
-
-.global-search-item-desc {
-  flex: auto;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.global-search-item-count {
-  flex: none;
-}
-</style>
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -10,7 +10,13 @@ Autocomplete function of input field.

 ## When To Use

-When there is a need for autocomplete functionality.
+- When you need an input box instead of a selector.
+- When you need input suggestions or helping text.
+
+The differences with Select are:
+
+- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
+- Select is selecting among given choices. The keyword is **select**.

 ## API

@ -23,29 +29,29 @@ When there is a need for autocomplete functionality.
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
 | autofocus | get focus when component mounted | boolean | false |  |
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
-| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
-| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
-| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
-| dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
+| default (for customize input element) | customize input element | slot | `<Input />` |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
+| dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |  |
+| open | Controlled open state of dropdown | boolean | - |  |
+| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
+| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | placeholder of input | string | - |  |
 | v-model:value | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |  |
-| defaultOpen | Initial open state of dropdown | boolean | - |  |
-| open | Controlled open state of dropdown | boolean | - |  |

 ### events

-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
-| change | Called when select an option or input value change, or value of input is changed | function(value) |  |
-| blur | Called when leaving the component. | function() |  |
-| focus | Called when entering the component | function() |  |
+| blur | Called when leaving the component. | function() |  |  |
+| change | Called when select an option or input value change, or value of input is changed | function(value) |  |  |
+| dropdownVisibleChange | Call when dropdown open | function(open) |  |  |
+| focus | Called when entering the component | function() |  |  |
 | search | Called when searching items. | function(value) | - |  |
-| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |
-| dropdownVisibleChange | Call when dropdown open | function(open) |  |
+| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |  |

 ## Methods

@ -58,7 +64,7 @@ When there is a need for autocomplete functionality.

 ### Part of the api in v2 are not available in v3?

-AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v2, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v3 not longer support `label` as the value input.
+AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v3, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v4 not longer support `label` as the value input.

 Besides, to unify the API, `dataSource` is replaced with `options`. You can migrate with the following change:

--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@ -1,4 +1,4 @@
-import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
+import type { App, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, ref } from 'vue';
 import Select, { selectProps } from '../select';
 import PropTypes from '../_util/vue-types';
@ -44,8 +44,6 @@ const AutoComplete = defineComponent({
  },
  emits: ['change', 'select', 'focus', 'blur'],
  slots: ['option'],
-  Option,
-  OptGroup,
  setup(props, { slots, attrs, expose }) {
    warning(
      !('dataSource' in slots),
@ -145,15 +143,13 @@ const AutoComplete = defineComponent({
 });

 /* istanbul ignore next */
-AutoComplete.install = function (app: App) {
-  app.component(AutoComplete.name, AutoComplete);
-  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
-  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
-  return app;
-};
-
-export default AutoComplete as typeof AutoComplete &
-  Plugin & {
-    readonly Option: typeof Option;
-    readonly OptGroup: typeof OptGroup;
-  };
+export default Object.assign(AutoComplete, {
+  Option,
+  OptGroup,
+  install(app: App) {
+    app.component(AutoComplete.name, AutoComplete);
+    app.component(Option.displayName, Option);
+    app.component(OptGroup.displayName, OptGroup);
+    return app;
+  },
+});
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -30,36 +30,36 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
 | autofocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
-| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
-| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
-| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
-| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
+| default (自定义输入框) | 自定义输入框 | slot | `<Input />` |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
+| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
+| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
+| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | placeholder | 输入框提示 | string \| slot | - |  |
 | v-model:value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |  |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
-| open | 是否展开下拉菜单 | boolean | - |  |

 ### 事件

 | 事件名称 | 说明 | 回调参数 | 版本 |
 | --- | --- | --- | --- |
-| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
-| blur | 失去焦点时的回调 | function() |
-| focus | 获得焦点时的回调 | function() |
-| search | 搜索补全项的时候调用 | function(value) |
-| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
-| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
+| blur | 失去焦点时的回调 | function() |  |
+| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |  |
+| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |  |
+| focus | 获得焦点时的回调 | function() |  |
+| search | 搜索补全项的时候调用 | function(value) |  |
+| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |  |

 ## 方法

 | 名称    | 描述     | 版本 |
 | ------- | -------- | ---- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |

 ## FAQ

--- a/components/auto-complete/style/index.tsx
+++ b/components/auto-complete/style/index.tsx
@ -3,4 +3,3 @@ import './index.less';

 // style dependencies
 import '../../select/style';
-import '../../input/style';
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@ -13,7 +13,7 @@ import { useInjectSize } from '../_util/hooks/useSize';

 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;

-export const avatarProps = {
+export const avatarProps = () => ({
  prefixCls: PropTypes.string,
  shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
  size: {
@ -27,17 +27,18 @@ export const avatarProps = {
  alt: PropTypes.string,
  gap: PropTypes.number,
  draggable: PropTypes.bool,
+  crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
  loadError: {
    type: Function as PropType<() => boolean>,
  },
-};
+});

-export type AvatarProps = Partial<ExtractPropTypes<typeof avatarProps>>;
+export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;

 const Avatar = defineComponent({
  name: 'AAvatar',
  inheritAttrs: false,
-  props: avatarProps,
+  props: avatarProps(),
  slots: ['icon'],
  setup(props, { slots, attrs }) {
    const isImgExist = ref(true);
@ -125,7 +126,7 @@ const Avatar = defineComponent({
    });

    return () => {
-      const { shape, size: customSize, src, alt, srcset, draggable } = props;
+      const { shape, size: customSize, src, alt, srcset, draggable, crossOrigin } = props;
      const icon = getPropsSlot(slots, props, 'icon');
      const pre = prefixCls.value;
      const size = customSize === 'default' ? groupSize.value : customSize;
@ -159,6 +160,7 @@ const Avatar = defineComponent({
            srcset={srcset}
            onError={handleImgLoadError}
            alt={alt}
+            crossorigin={crossOrigin}
          />
        );
      } else if (icon) {
--- a/components/avatar/Group.tsx
+++ b/components/avatar/Group.tsx
@ -1,6 +1,6 @@
 import { cloneElement } from '../_util/vnode';
 import type { AvatarSize } from './Avatar';
-import Avatar, { avatarProps } from './Avatar';
+import Avatar from './Avatar';
 import Popover from '../popover';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
@ -10,7 +10,7 @@ import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import useProvideSize from '../_util/hooks/useSize';

-const groupProps = {
+export const groupProps = () => ({
  prefixCls: PropTypes.string,
  maxCount: PropTypes.number,
  maxStyle: {
@ -18,26 +18,33 @@ const groupProps = {
    default: () => ({} as CSSProperties),
  },
  maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
+  maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
  /*
   * Size of avatar, options: `large`, `small`, `default`
   * or a custom number size
   * */
-  size: avatarProps.size,
-};
+  size: {
+    type: [Number, String, Object] as PropType<AvatarSize>,
+    default: (): AvatarSize => 'default',
+  },
+});

-export type AvatarGroupProps = Partial<ExtractPropTypes<typeof groupProps>> & {
-  size?: AvatarSize;
-};
+export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;

 const Group = defineComponent({
  name: 'AAvatarGroup',
  inheritAttrs: false,
-  props: groupProps,
+  props: groupProps(),
  setup(props, { slots, attrs }) {
    const { prefixCls, direction } = useConfigInject('avatar-group', props);
    useProvideSize<AvatarSize>(props);
    return () => {
-      const { maxPopoverPlacement = 'top', maxCount, maxStyle } = props;
+      const {
+        maxPopoverPlacement = 'top',
+        maxCount,
+        maxStyle,
+        maxPopoverTrigger = 'hover',
+      } = props;

      const cls = {
        [prefixCls.value]: true,
@ -61,7 +68,7 @@ const Group = defineComponent({
          <Popover
            key="avatar-popover-key"
            content={childrenHidden}
-            trigger="hover"
+            trigger={maxPopoverTrigger}
            placement={maxPopoverPlacement}
            overlayClassName={`${prefixCls.value}-popover`}
          >
--- a/components/avatar/tests/snapshots/demo.test.js.snap
+++ b/components/avatar/tests/snapshots/demo.test.js.snap
@ -15,23 +15,23 @@ exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
 `;

 exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
  <!----><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
  <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
  <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
 </div>
 `;

 exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;

-exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;
+exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;
--- a/components/avatar/demo/group.vue
+++ b/components/avatar/demo/group.vue
@ -17,7 +17,7 @@ Avatar group display.

 <template>
  <a-avatar-group>
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
    <a-avatar style="background-color: #f56a00">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
@ -30,7 +30,7 @@ Avatar group display.
  </a-avatar-group>
  <a-divider />
  <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
    <a-avatar style="background-color: #1890ff">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
@ -50,7 +50,7 @@ Avatar group display.
      backgroundColor: '#fde3cf',
    }"
  >
-    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <a-avatar src="https://joeschmoe.io/api/v1/random" />
    <a-avatar style="background-color: #1890ff">K</a-avatar>
    <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068">
--- a/components/avatar/demo/type.vue
+++ b/components/avatar/demo/type.vue
@ -23,7 +23,7 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
  </a-avatar>
  <a-avatar>U</a-avatar>
  <a-avatar>USER</a-avatar>
-  <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+  <a-avatar src="https://joeschmoe.io/api/v1/random" />
  <a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
  <a-avatar style="background-color: #87d068">
    <template #icon>
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -13,15 +13,16 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |
-| shape | the shape of avatar | `circle` \| `square` | `circle` |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
-| src | the address of the image for an image avatar | string | - |
-| srcset | a list of sources to use for different screen resolutions | string | - |
-| alt | This attribute defines the alternative text describing the image | string | - |
-| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
+| alt | This attribute defines the alternative text describing the image | string | - |  |
+| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
 | draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
-| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
+| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
+| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |  |
+| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
+| shape | the shape of avatar | `circle` \| `square` | `circle` |  |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
+| src | the address of the image for an image avatar | string | - |  |
+| srcset | a list of sources to use for different screen resolutions | string | - |  |

 ### Avatar.Group (2.2.0)

@ -29,5 +30,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | --- | --- | --- | --- | --- |
 | maxCount | Max avatars to show | number | - |  |
 | maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` |  |
+| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 3.0 |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |  |
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -18,15 +18,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |
+| alt | 图像无法显示时的替代文本 | string | - |  |
+| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
+| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
+| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |  |
+| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
-| src | 图片类头像的资源地址 | string | - |
-| srcset | 设置图片类头像响应式资源地址 | string | - |
-| alt | 图像无法显示时的替代文本 | string | - |
-| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
-| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
-| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
+| src | 图片类头像的资源地址 | string | - |  |
+| srcset | 设置图片类头像响应式资源地址 | string | - |  |

 ### Avatar.Group (2.2.0)

@ -34,5 +35,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | --- | --- | --- | --- | --- |
 | maxCount | 显示的最大头像个数 | number | - |  |
 | maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
+| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 3.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` |  |
--- a/components/back-top/tests/snapshots/demo.test.js.snap
+++ b/components/back-top/tests/snapshots/demo.test.js.snap
@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `<!----> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.`;
+exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `
+<div class="ant-back-top" style="display: none;">
+  <div class="ant-back-top-content">
+    <div class="ant-back-top-icon"><span role="img" aria-label="vertical-align-top" class="anticon anticon-vertical-align-top"><svg focusable="false" class="" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg></span></div>
+  </div>
+</div> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.
+`;

 exports[`renders ./components/back-top/demo/custom.vue correctly 1`] = `
 <div id="components-back-top-demo-custom">
-  <!----> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
+  <div class="ant-back-top" style="display: none;">
+    <div class="ant-back-top-inner">UP</div>
+  </div> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
 </div>
 `;
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@ -1,7 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import {
  defineComponent,
-  inject,
  nextTick,
  onActivated,
  onBeforeUnmount,
@ -10,17 +9,16 @@ import {
  ref,
  watch,
  onDeactivated,
-  computed,
 } from 'vue';
 import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
 import PropTypes from '../_util/vue-types';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
 import { getTransitionProps, Transition } from '../_util/transition';
-import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 import { withInstall } from '../_util/type';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
+import useConfigInject from '../_util/hooks/useConfigInject';

 export const backTopProps = {
  visibilityHeight: PropTypes.number.def(400),
@ -39,7 +37,7 @@ const BackTop = defineComponent({
  props: backTopProps,
  emits: ['click'],
  setup(props, { slots, attrs, emit }) {
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { prefixCls, direction } = useConfigInject('back-top', props);
    const domRef = ref();
    const state = reactive({
      visible: false,
@ -113,8 +111,6 @@ const BackTop = defineComponent({
      scrollRemove();
    });

-    const prefixCls = computed(() => configProvider.getPrefixCls('back-top', props.prefixCls));
-
    return () => {
      const defaultElement = (
        <div class={`${prefixCls.value}-content`}>
@ -129,17 +125,18 @@ const BackTop = defineComponent({
        class: {
          [`${prefixCls.value}`]: true,
          [`${attrs.class}`]: attrs.class,
-          [`${prefixCls.value}-rtl`]: configProvider.direction === 'rtl',
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
        },
      };

-      const backTopBtn = state.visible ? (
-        <div {...divProps} ref={domRef}>
-          {slots.default?.() || defaultElement}
-        </div>
-      ) : null;
      const transitionProps = getTransitionProps('fade');
-      return <Transition {...transitionProps}>{backTopBtn}</Transition>;
+      return (
+        <Transition {...transitionProps}>
+          <div v-show={state.visible} {...divProps} ref={domRef}>
+            {slots.default?.() || defaultElement}
+          </div>
+        </Transition>
+      );
    };
  },
 });
--- a/components/back-top/style/index.tsx
+++ b/components/back-top/style/index.tsx
--- a/components/badge/Badge.tsx
+++ b/components/badge/Badge.tsx
@ -62,7 +62,7 @@ export default defineComponent({
      () => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0,
    );

-    const showAsDot = computed(() => (props.dot && !isZero.value) || hasStatus.value);
+    const showAsDot = computed(() => props.dot && !isZero.value);

    const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value));

--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
 <!----></span>
 `;

 exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
-<div><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
  <!----></span>
  <div class="ant-btn-group"><button class="ant-btn" type="button">
      <!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
@ -16,9 +16,14 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
      <!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
    </button></div>
 </div>
-<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
-    <!----><span class="ant-switch-inner"><!----></span>
-  </button></div>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
+  <div class="ant-switch-handle">
+    <!---->
+  </div><span class="ant-switch-inner"><!----></span>
+</button>
 `;

 exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
@ -38,19 +43,16 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
  <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
 </div>
-<h4 style="margin: 16px 0px;">Custom:</h4>
-<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span></div>
+<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
 `;

 exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
-<div id="components-badge-demo-dot"><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
-  <!----></span><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="false" class="ant-scroll-number ant-badge-count" title="0" style="display: none;">0</sup>
-  <!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
-</div>
+<span class="ant-badge"><span style="font-size: 16px;" role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
 `;

 exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
-<a href="#"><span class="ant-badge"><span class="head-example"></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
  <!----></span>
 </a>
 `;
@ -62,19 +64,147 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
 `;

 exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup><!----></span>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
+<!----></span>
 `;

 exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 <div class="ant-ribbon-wrapper">
-  <div class="ant-card ant-card-bordered">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
    <!---->
-    <!---->
-    <div class="ant-card-body">And raises the spyglass.</div>
+    <div class="ant-card-body">and raises the spyglass.</div>
    <!---->
  </div>
-  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Pushes open the window</span>
+  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
    <div class="ant-ribbon-corner"></div>
  </div>
 </div>
@ -83,7 +213,6 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 exports[`renders ./components/badge/demo/status.vue correctly 1`] = `<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>`;

 exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
-<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
-  <!----></span>
-</div>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<!----></span>
 `;
--- a/components/badge/demo/basic.vue
+++ b/components/badge/demo/basic.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 0
-title: 
+title:
  zh-CN: 基本
  en-US: Basic
 ---
@ -17,16 +17,16 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 </docs>
 <template>
  <a-badge count="5">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
  <a-badge count="0" show-zero>
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
  <a-badge>
    <template #count>
      <clock-circle-outlined style="color: #f5222d" />
    </template>
-    <a href="#" class="head-example"></a>
+    <a-avatar shape="square" size="large" />
  </a-badge>
 </template>

--- a/components/badge/demo/change.vue
+++ b/components/badge/demo/change.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 5
-title: 
+title:
  zh-CN: 动态
  en-US: Dynamic
 ---
@ -11,14 +11,14 @@ title:
 展示动态变化的效果。

 ## en-US
-  
+
 The count will be animated as it changes.
 </docs>

 <template>
  <div>
    <a-badge :count="count">
-      <a href="#" class="head-example" />
+      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-button-group>
      <a-button @click="decline">
@ -29,12 +29,11 @@ The count will be animated as it changes.
      </a-button>
    </a-button-group>
  </div>
-  <div style="margin-top: 10px">
-    <a-badge :dot="show">
-      <a href="#" class="head-example" />
-    </a-badge>
-    <a-switch v-model:checked="show" />
-  </div>
+  <a-divider />
+  <a-badge :dot="show">
+    <a-avatar shape="square" size="large" />
+  </a-badge>
+  <a-switch v-model:checked="show" />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
--- a/components/badge/demo/colors.vue
+++ b/components/badge/demo/colors.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 7
-title: 
+title:
  zh-CN: 多彩徽标
  en-US: Colorful Badge
 ---
@ -23,16 +23,14 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
      <a-badge :color="color" :text="color" />
    </div>
  </div>
-  <h4 style="margin: 16px 0">Custom:</h4>
-  <div>
-    <a-badge color="#f50" text="#f50" />
-    <br />
-    <a-badge color="#2db7f5" text="#2db7f5" />
-    <br />
-    <a-badge color="#87d068" text="#87d068" />
-    <br />
-    <a-badge color="#108ee9" text="#108ee9" />
-  </div>
+  <a-divider orientation="left">Custom</a-divider>
+  <a-badge color="#f50" text="#f50" />
+  <br />
+  <a-badge color="#2db7f5" text="#2db7f5" />
+  <br />
+  <a-badge color="#87d068" text="#87d068" />
+  <br />
+  <a-badge color="#108ee9" text="#108ee9" />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
--- a/components/badge/demo/dot.vue
+++ b/components/badge/demo/dot.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 3
-title: 
+title:
  zh-CN: 讨嫌的小红点
  en-US: Red badge
 ---
@ -17,17 +17,12 @@ If count equals 0, it won't display the dot.
 </docs>

 <template>
-  <div id="components-badge-demo-dot">
-    <a-badge dot>
-      <notification-outlined />
-    </a-badge>
-    <a-badge :count="0" dot>
-      <notification-outlined />
-    </a-badge>
-    <a-badge dot>
-      <a href="#">Link something</a>
-    </a-badge>
-  </div>
+  <a-badge dot>
+    <notification-outlined style="font-size: 16px" />
+  </a-badge>
+  <a-badge dot>
+    <a href="#">Link something</a>
+  </a-badge>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@ -38,11 +33,3 @@ export default defineComponent({
  },
 });
 </script>
-<style scoped>
-#components-badge-demo-dot .anticon-notification {
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
-}
-</style>
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@ -8,8 +8,8 @@
    <Change />
    <Title />
    <Colors />
-    <Link />
    <Ribbon />
+    <Link />
  </demo-sort>
 </template>
 <script lang="ts">
--- a/components/badge/demo/link.vue
+++ b/components/badge/demo/link.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 8
-title: 
+title:
  zh-CN: 可点击
  en-US: Clickable
 ---
@ -18,7 +18,7 @@ The badge can be wrapped with `a` tag to make it linkable.
 <template>
  <a href="#">
    <a-badge count="5">
-      <span class="head-example" />
+      <a-avatar shape="square" size="large" />
    </a-badge>
  </a>
 </template>
--- a/components/badge/demo/overflow.vue
+++ b/components/badge/demo/overflow.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 2
-title: 
+title:
  zh-CN: 封顶数字
  en-US: Overflow Count
 ---
@ -18,15 +18,15 @@ title:

 <template>
  <a-badge :count="99">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
  <a-badge :count="100">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
  <a-badge :count="99" :overflow-count="10">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
  <a-badge :count="1000" :overflow-count="999">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
  </a-badge>
 </template>
--- a/components/badge/demo/ribbon.vue
+++ b/components/badge/demo/ribbon.vue
@ -6,17 +6,38 @@ title:
  en-US: Ribbon
 ---

-## zh-CN 
-使用缎带型的徽标。 
+## zh-CN
+使用缎带型的徽标。

-## en-US 
+## en-US

-Use ribbon badge. 
+Use ribbon badge.

 </docs>

 <template>
-  <a-badge-ribbon text="Pushes open the window">
-    <a-card>And raises the spyglass.</a-card>
+  <a-badge-ribbon text="Hippies">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="pink">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="red">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="cyan">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="green">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="purple">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="volcano">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="magenta">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
  </a-badge-ribbon>
 </template>
--- a/components/badge/demo/title.vue
+++ b/components/badge/demo/title.vue
@ -1,7 +1,7 @@
 <docs>
 ---
 order: 6
-title: 
+title:
  zh-CN: 自定义标题
  en-US: Title
 ---
@ -17,21 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
 </docs>

 <template>
-  <div id="components-badge-demo-title">
-    <a-badge :count="5" title="Custom hover text">
-      <a href="#" class="head-example" />
-    </a-badge>
-  </div>
+  <a-badge :count="5" title="Custom hover text">
+    <a-avatar shape="square" size="large" />
+  </a-badge>
 </template>
-<style scoped>
-#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
-  margin-right: 20px;
-}
-.head-example {
-  width: 42px;
-  height: 42px;
-  border-radius: 4px;
-  background: #eee;
-  display: inline-block;
-}
-</style>
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -31,12 +31,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 | color | 自定义小圆点的颜色 | string | - | 1.5.0 |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
+| numberStyle | 设置状态点的样式 | object | '' |  |
 | offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |  |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |  |
-| numberStyle | 设置状态点的样式 | object | '' |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | `count` |  |

 ### Badge.Ribbon (2.0.1+)
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -25,6 +25,7 @@
    background: @badge-color;
    border-radius: (@badge-height / 2);
    box-shadow: 0 0 0 1px @shadow-color-inverse;
+
    a,
    a:hover {
      color: @badge-text-color;
@ -54,6 +55,11 @@
    box-shadow: 0 0 0 1px @shadow-color-inverse;
  }

+  // Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088
+  &-dot.@{number-prefix-cls} {
+    transition: background 1.5s;
+  }
+
  &-count,
  &-dot,
  .@{number-prefix-cls}-custom-component {
@ -81,12 +87,15 @@
      vertical-align: middle;
      border-radius: 50%;
    }
+
    &-success {
      background-color: @success-color;
    }
+
    &-processing {
      position: relative;
      background-color: @processing-color;
+
      &::after {
        position: absolute;
        top: 0;
@ -99,12 +108,15 @@
        content: '';
      }
    }
+
    &-default {
      background-color: @normal-color;
    }
+
    &-error {
      background-color: @error-color;
    }
+
    &-warning {
      background-color: @warning-color;
    }
@ -152,21 +164,18 @@
      vertical-align: middle;
    }

-    .@{number-prefix-cls}-custom-component {
+    .@{number-prefix-cls}-custom-component,
+    .@{badge-prefix-cls}-count {
      transform: none;
    }

    .@{number-prefix-cls}-custom-component,
-    .@{ant-prefix}-scroll-number {
+    .@{number-prefix-cls} {
      position: relative;
      top: auto;
      display: block;
      transform-origin: 50% 50%;
    }
-
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
  }
 }

@ -175,6 +184,7 @@
    transform: scale(0.8);
    opacity: 0.5;
  }
+
  100% {
    transform: scale(2.4);
    opacity: 0;
@ -183,12 +193,16 @@

 // Safari will blink with transform when inner element has absolute style.
 .safari-fix-motion() {
+  /* stylelint-disable property-no-vendor-prefix */
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
+  /* stylelint-enable property-no-vendor-prefix */
 }

 .@{number-prefix-cls} {
  overflow: hidden;
+  direction: ltr;
+
  &-only {
    position: relative;
    display: inline-block;
@ -213,6 +227,7 @@
    transform: scale(0) translate(50%, -50%);
    opacity: 0;
  }
+
  100% {
    transform: scale(1) translate(50%, -50%);
  }
@ -222,6 +237,7 @@
  0% {
    transform: scale(1) translate(50%, -50%);
  }
+
  100% {
    transform: scale(0) translate(50%, -50%);
    opacity: 0;
@ -233,6 +249,7 @@
    transform: scale(0);
    opacity: 0;
  }
+
  100% {
    transform: scale(1);
  }
@ -242,6 +259,7 @@
  0% {
    transform: scale(1);
  }
+
  100% {
    transform: scale(0);
    opacity: 0;
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
--- a/components/badge/style/rtl.less
+++ b/components/badge/style/rtl.less
@ -3,9 +3,9 @@
    direction: rtl;
  }

-  &-count,
-  &-dot,
-  .@{number-prefix-cls}-custom-component {
+  &:not(&-not-a-wrapper) &-count,
+  &:not(&-not-a-wrapper) &-dot,
+  &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
    .@{badge-prefix-cls}-rtl & {
      right: auto;
      left: 0;
@ -15,7 +15,7 @@
    }
  }

-  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
+  &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
@ -30,25 +30,6 @@
      }
    }
  }
-
-  &-zoom-appear,
-  &-zoom-enter {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeInRtl;
-    }
-  }
-
-  &-zoom-leave {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeOutRtl;
-    }
-  }
-
-  &-not-a-wrapper {
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
-  }
 }

 .@{ribbon-prefix-cls}-rtl {
@ -62,6 +43,7 @@
      right: unset;
      left: 0;
      border-color: currentColor currentColor transparent transparent;
+
      &::after {
        border-color: currentColor currentColor transparent transparent;
      }
@ -76,29 +58,10 @@
      right: 0;
      left: unset;
      border-color: currentColor transparent transparent currentColor;
+
      &::after {
        border-color: currentColor transparent transparent currentColor;
      }
    }
  }
 }
-
-@keyframes antZoomBadgeInRtl {
-  0% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOutRtl {
-  0% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-  100% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-}
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -66,9 +66,9 @@ export default defineComponent({
      return path;
    };

-    const addChildPath = (paths: string[], childPath = '', params: unknown) => {
+    const addChildPath = (paths: string[], childPath: string, params: unknown) => {
      const originalPaths = [...paths];
-      const path = getPath(childPath, params);
+      const path = getPath(childPath || '', params);
      if (path) {
        originalPaths.push(path);
      }
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@ -30,7 +30,7 @@ export default defineComponent({
      const overlay = getPropsSlot(slots, props, 'overlay');
      if (overlay) {
        return (
-          <DropDown overlay={overlay} placement="bottomCenter">
+          <DropDown overlay={overlay} placement="bottom">
            <span class={`${prefixCls}-overlay-link`}>
              {breadcrumbItem}
              <DownOutlined />
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -31,7 +31,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b

 #### Events

-| Events Name | Description                   | Arguments            | Version |
+| Events Name | Description                   | Arguments            | Version |       |
 | ----------- | ----------------------------- | -------------------- | ------- | ----- |
 | click       | handler to handle click event | (e:MouseEvent)=>void | -       | 1.5.0 |

--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg

 #### 事件

-| 事件名称 | 说明     | 回调参数             | 版本 |
+| 事件名称 | 说明     | 回调参数             | 版本 |       |
 | -------- | -------- | -------------------- | ---- | ----- |
 | click    | 单击事件 | (e:MouseEvent)=>void | -    | 1.5.0 |

--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@ -16,6 +16,7 @@
  a {
    color: @breadcrumb-link-color;
    transition: color 0.3s;
+
    &:hover {
      color: @breadcrumb-link-color-hover;
    }
@ -23,6 +24,7 @@

  & > span:last-child {
    color: @breadcrumb-last-item-color;
+
    a {
      color: @breadcrumb-last-item-color;
    }
--- a/components/breadcrumb/style/index.tsx
+++ b/components/breadcrumb/style/index.tsx
@ -1,5 +1,6 @@
 import '../../style/index.less';
 import './index.less';

+// style dependencies
 import '../../menu/style';
 import '../../dropdown/style';
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@ -5,6 +5,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';

 import type { ExtractPropTypes, PropType } from 'vue';
 import type { SizeType } from '../config-provider';
+import UnreachableException from '../_util/unreachableException';

 const buttonGroupProps = {
  prefixCls: PropTypes.string,
@ -33,8 +34,12 @@ export default defineComponent({
        case 'small':
          sizeCls = 'sm';
          break;
-        default:
+        case 'middle':
+        case undefined:
          break;
+        default:
+          // eslint-disable-next-line no-console
+          console.warn(new UnreachableException(size).error);
      }
      return {
        [`${prefixCls.value}`]: true,
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -23,7 +23,6 @@ type Loading = boolean | number;

 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
-const props = buttonTypes();

 function isUnborderedButtonType(type: ButtonType | undefined) {
  return type === 'text' || type === 'link';
@ -33,11 +32,11 @@ export default defineComponent({
  name: 'AButton',
  inheritAttrs: false,
  __ANT_BUTTON: true,
-  props,
+  props: buttonTypes(),
  slots: ['icon'],
  emits: ['click', 'mousedown'],
  setup(props, { slots, attrs, emit }) {
-    const { prefixCls, autoInsertSpaceInButton, direction } = useConfigInject('btn', props);
+    const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);

    const buttonNodeRef = ref<HTMLElement>(null);
    const delayTimeoutRef = ref(undefined);
@ -73,25 +72,17 @@ export default defineComponent({
    );

    const classes = computed(() => {
-      const { type, shape, size, ghost, block, danger } = props;
+      const { type, shape = 'default', ghost, block, danger } = props;
      const pre = prefixCls.value;
-      // large => lg
-      // small => sm
-      let sizeCls = '';
-      switch (size) {
-        case 'large':
-          sizeCls = 'lg';
-          break;
-        case 'small':
-          sizeCls = 'sm';
-          break;
-        default:
-          break;
-      }
+
+      const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
+      const sizeFullname = size.value;
+      const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
+
      return {
        [`${pre}`]: true,
        [`${pre}-${type}`]: type,
-        [`${pre}-${shape}`]: shape,
+        [`${pre}-${shape}`]: shape !== 'default' && shape,
        [`${pre}-${sizeCls}`]: sizeCls,
        [`${pre}-loading`]: innerLoading.value,
        [`${pre}-background-ghost`]: ghost && !isUnborderedButtonType(type),
@ -206,7 +197,11 @@ export default defineComponent({
        return buttonNode;
      }

-      return <Wave ref="wave">{buttonNode}</Wave>;
+      return (
+        <Wave ref="wave" disabled={!!innerLoading.value}>
+          {buttonNode}
+        </Wave>
+      );
    };
  },
 });
--- a/components/button/buttonTypes.ts
+++ b/components/button/buttonTypes.ts
@ -6,7 +6,7 @@ import type { SizeType } from '../config-provider';

 const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
 export type ButtonType = typeof ButtonTypes[number];
-const ButtonShapes = tuple('circle', 'round');
+const ButtonShapes = tuple('default', 'circle', 'round');
 export type ButtonShape = typeof ButtonShapes[number];

 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
--- a/components/button/demo/ghost.vue
+++ b/components/button/demo/ghost.vue
@ -21,6 +21,6 @@ title:
    <a-button type="primary" ghost>Primary</a-button>
    <a-button ghost>Default</a-button>
    <a-button type="dashed" ghost>Dashed</a-button>
-    <a-button danger ghost>Danger</a-button>
+    <a-button type="primary" danger ghost>Danger</a-button>
  </div>
 </template>
--- a/components/button/demo/icon.vue
+++ b/components/button/demo/icon.vue
@ -49,6 +49,52 @@ If you want specific control over the positioning and placement of the `Icon`, t
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
+  <a-button href="https://www.google.com">
+    <template #icon><SearchOutlined /></template>
+  </a-button>
+  <br />
+  <br />
+  <a-tooltip title="search">
+    <a-button type="primary" shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button type="primary" shape="circle" size="large">A</a-button>
+  <a-button type="primary" size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-tooltip title="search">
+    <a-button shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <br />
+  <a-tooltip title="search">
+    <a-button shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-tooltip title="search">
+    <a-button type="dashed" shape="circle" size="large">
+      <template #icon><SearchOutlined /></template>
+    </a-button>
+  </a-tooltip>
+  <a-button type="dashed" size="large">
+    <template #icon><SearchOutlined /></template>
+    Search
+  </a-button>
+  <a-button size="large" href="https://www.google.com">
+    <template #icon><SearchOutlined /></template>
+  </a-button>
 </template>
 <script>
 import { SearchOutlined } from '@ant-design/icons-vue';
--- a/components/button/demo/loading.vue
+++ b/components/button/demo/loading.vue
@ -16,25 +16,34 @@ A loading indicator can be added to a button by setting the `loading` property o
 </docs>

 <template>
-  <a-button type="primary" loading>Loading</a-button>
-  <a-button type="primary" size="small" loading>Loading</a-button>
-  <br />
-  <a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
-  <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
-    延迟1s
-  </a-button>
-  <br />
-  <a-button type="primary" loading />
-  <a-button type="primary" shape="circle" loading />
-  <a-button danger shape="round" loading />
+  <a-space style="width: 100%">
+    <a-button type="primary" loading>Loading</a-button>
+    <a-button type="primary" size="small" loading>Loading</a-button>
+  </a-space>
+  <a-space style="width: 100%">
+    <a-button type="primary" :loading="loading" @mouseenter="loading = true">
+      mouseenter me!
+    </a-button>
+    <a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
+      <template #icon><PoweroffOutlined /></template>
+      延迟1s
+    </a-button>
+  </a-space>
+  <a-space style="width: 100%">
+    <a-button type="primary" loading />
+    <a-button type="primary" shape="circle" loading />
+    <a-button danger shape="round" loading />
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { PoweroffOutlined } from '@ant-design/icons-vue';

 interface DelayLoading {
  delay: number;
 }
 export default defineComponent({
+  components: { PoweroffOutlined },
  setup() {
    const iconLoading = ref<boolean | DelayLoading>(false);
    const enterIconLoading = () => {
--- a/components/button/demo/size.vue
+++ b/components/button/demo/size.vue
@ -46,8 +46,8 @@ If a large or small button is desired, set the `size` property to either `large`
  <a-button type="primary" shape="round" :size="size">
    <template #icon>
      <DownloadOutlined />
-      Download
    </template>
+    Download
  </a-button>
  <a-button type="primary" shape="round" :size="size">
    <template #icon>
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -40,7 +40,7 @@ Different button styles can be generated by setting Button properties. The recom
 | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | set the icon of button, see: Icon component | v-slot | - |  |
 | loading | set the loading status of button | boolean \| { delay: number } | `false` |  |
-| shape | can be set button shape | `circle` \| `round` | - |  |
+| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' |  |
 | size | set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | target | same as target attribute of a, works when href is specified | string | - |  |
 | type | can be set button type | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 - 默认按钮：用于没有主次之分的一组行动点。
 - 虚线按钮：常用于添加操作。
 - 文本按钮：用于最次级的行动点。
- 链接按钮：用于作为外链的行动点。
+- 链接按钮：一般用于链接，即导航至某位置。

 以及四种状态属性与上面配合使用。

@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标类型 | v-slot | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |  |
-| shape | 设置按钮形状 | `circle` \| `round` | - |  |
+| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -18,7 +18,7 @@
  // Fixing https://github.com/ant-design/ant-design/issues/18107
  // Fixing https://github.com/ant-design/ant-design/issues/13214
  // It is a render problem of chrome, which is only happened in the codesandbox demo
-  // 0.001px solution works and I don't why
+  // 0.001px solution works and I don't know why
  line-height: @btn-line-height;
  .btn();
  .btn-default();
@ -101,7 +101,21 @@

  &-icon-only {
    .btn-square(@btn-prefix-cls);
+    vertical-align: -3px;
+
+    > .@{iconfont-css-prefix} {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/32365
+  a&-icon-only {
    vertical-align: -1px;
+
+    > .@{iconfont-css-prefix} {
+      display: inline;
+    }
  }

  &-round {
@ -146,48 +160,32 @@

  &&-loading {
    position: relative;
-    &:not([disabled]) {
-      pointer-events: none;
-    }
+    cursor: default;

    &::before {
      display: block;
    }
  }

-  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
-    padding-left: 29px;
-    .@{iconfont-css-prefix}:not(:last-child) {
-      margin-left: -14px;
-    }
-  }
+  & > &-loading-icon {
+    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out;

-  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
-    padding-left: 24px;
    .@{iconfont-css-prefix} {
-      margin-left: -17px;
+      padding-right: @padding-xs;
+      animation: none;
+      // for smooth button padding transition
+      svg {
+        animation: loadingCircle 1s infinite linear;
+      }
+    }
+
+    &:only-child {
+      .@{iconfont-css-prefix} {
+        padding-right: 0;
+      }
    }
  }

-  // & > &-loading-icon {
-  //   transition: all 0.3s @ease-in-out;
-
-  //   .@{iconfont-css-prefix} {
-  //     padding-right: @padding-xs;
-  //     animation: none;
-  //     // for smooth button padding transition
-  //     svg {
-  //       animation: loadingCircle 1s infinite linear;
-  //     }
-  //   }
-
-  //   &:only-child {
-  //     .@{iconfont-css-prefix} {
-  //       padding-right: 0;
-  //     }
-  //   }
-  // }
-
  &-group {
    .btn-group(@btn-prefix-cls);
  }
@ -204,26 +202,49 @@
    margin-left: @margin-xs;
  }

-  &-background-ghost {
+  &&-background-ghost {
    color: @btn-default-ghost-color;
-    background: @btn-default-ghost-bg !important;
    border-color: @btn-default-ghost-border;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      background: @btn-default-ghost-bg;
+    }
+
+    &:hover,
+    &:focus {
+      color: @primary-color-hover;
+      border-color: @primary-color-hover;
+    }
+
+    &:active {
+      color: @primary-color-active;
+      border-color: @primary-color-active;
+    }
+
+    &[disabled] {
+      color: @disabled-color;
+      background: @btn-default-ghost-bg;
+      border-color: @btn-default-border;
+    }
  }

  &-background-ghost&-primary {
-    .button-variant-ghost(@btn-primary-bg);
+    .button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active);
  }

  &-background-ghost&-danger {
-    .button-variant-ghost(@btn-danger-border);
+    .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
  }

  &-background-ghost&-dangerous {
-    .button-variant-ghost(@btn-danger-border);
+    .button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
  }

  &-background-ghost&-dangerous&-link {
-    .button-variant-ghost(@btn-danger-border, transparent);
+    .button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active);
  }

  &-two-chinese-chars::first-letter {
@ -235,7 +256,7 @@
    letter-spacing: 0.34em;
  }

-  &&-block {
+  &-block {
    width: 100%;
  }

@ -260,6 +281,7 @@ a.@{btn-prefix-cls} {
  &-lg {
    line-height: @btn-height-lg - 2px;
  }
+
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -11,6 +11,28 @@
  border-radius: @border-radius;
 }

+.button-color(@color; @background; @border) {
+  color: @color;
+  border-color: @border; // a inside Button which only work in Chrome
+  & when not(@background = null) {
+    background: @background;
+  }
+  // http://stackoverflow.com/a/17253457
+  > a:only-child {
+    color: currentColor;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      content: '';
+    }
+  }
+}
+
 .button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
  &[disabled] {
    &,
@ -25,7 +47,7 @@
  }
 }

-.button-variant-primary(@color; @background) {
+.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
  .button-color(@color; @background; @background);

  text-shadow: @btn-text-shadow;
@ -38,11 +60,14 @@
        @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
      );
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@color; @backgroundHover; @backgroundHover);
+    }
  }

  &:active {
@ -51,11 +76,14 @@
        @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
      );
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@color; @backgroundActive; @backgroundActive);
+    }
  }

  .button-disabled();
@ -69,105 +97,112 @@
    & when (@theme = dark) {
      .button-color(@primary-5; @background; @primary-5);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        ~`colorPalette('@{btn-primary-bg}', 5) `; @background;
          ~`colorPalette('@{btn-primary-bg}', 5) `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@primary-color-hover; @background; @primary-color-hover);
+    }
  }
+
  &:active {
    & when (@theme = dark) {
      .button-color(@primary-7; @background; @primary-7);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        ~`colorPalette('@{btn-primary-bg}', 7) `; @background;
          ~`colorPalette('@{btn-primary-bg}', 7) `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@primary-color-active; @background; @primary-color-active);
+    }
  }
  .button-disabled();
 }
-.button-variant-ghost(@color; @border: @color) {
-  .button-color(@color; transparent; @border);
+
+.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
+  .button-color(@color; null; @border);
  text-shadow: none;
+
  &:hover,
  &:focus {
    & when (@border = transparent) {
      & when (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 7) `; null; transparent);
      }
-      & when not (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+      & when (not (@theme = dark) and not (@theme = variable)) {
+        .button-color(~`colorPalette('@{color}', 5) `; null; transparent);
+      }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; transparent);
      }
    }
    & when not (@border = transparent) {
      & when (@theme = dark) {
        .button-color(
-          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
+          ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
        );
      }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
        .button-color(
-          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
+          ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
        );
      }
+      & when (@theme = variable) {
+        .button-color(@borderHover; transparent; @borderHover);
+      }
    }
  }
+
  &:active {
    & when (@border = transparent) {
      & when (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+        .button-color(~`colorPalette('@{color}', 5) `; null; transparent);
      }
-      & when not (@theme = dark) {
-        .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+      & when (not (@theme = dark) and not (@theme = variable)) {
+        .button-color(~`colorPalette('@{color}', 7) `; null; transparent);
+      }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; transparent);
      }
    }
-    & when not(@border = transparent) {
+    & when not (@border = transparent) {
      & when (@theme = dark) {
        .button-color(
-          ~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
+          ~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
        );
      }
-      & when not (@theme = dark) {
+      & when (not (@theme = dark) and not (@theme = variable)) {
        .button-color(
-          ~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
+          ~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
        );
      }
+      & when (@theme = variable) {
+        .button-color(@borderActive; transparent; @borderActive);
+      }
    }
  }
  .button-disabled();
 }
-.button-color(@color; @background; @border) {
-  color: @color;
-  background: @background;
-  border-color: @border; // a inside Button which only work in Chrome
-  // http://stackoverflow.com/a/17253457
-  > a:only-child {
-    color: currentColor;
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: transparent;
-      content: '';
-    }
-  }
-}
+
 .button-group-base(@btnClassName) {
  position: relative;
  display: inline-flex;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
+
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
+
    &[disabled] {
      z-index: 0;
    }
@ -219,29 +254,36 @@
  > .@{iconfont-css-prefix} {
    line-height: 1;
  }
+
  &,
  &:active,
  &:focus {
    outline: 0;
  }
+
  &:not([disabled]):hover {
    text-decoration: none;
  }
+
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
+
  &[disabled] {
    cursor: not-allowed;
+
    > * {
      pointer-events: none;
    }
  }
+
  &-lg {
    .button-size(
      @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
    );
  }
+
  &-sm {
    .button-size(
      @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
@ -250,11 +292,12 @@
 }
 // primary button style
 .btn-primary() {
-  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
+  .button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active);
 }
 // default button style
 .btn-default() {
-  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
+  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
+
  &:hover,
  &:focus,
  &:active {
@ -273,11 +316,12 @@
 }
 // danger button style
 .btn-danger() {
-  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active);
 }
 // danger default button style
 .btn-danger-default() {
  .button-color(@error-color, @btn-default-bg, @error-color);
+
  &:hover,
  &:focus {
    & when (@theme = dark) {
@ -286,13 +330,17 @@
          `
      );
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
          `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
+    }
  }
+
  &:active {
    & when (@theme = dark) {
      .button-color(
@ -300,12 +348,15 @@
          `
      );
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(
        ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
          `
      );
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-active, @btn-default-bg, @error-color-active);
+    }
  }
  .button-disabled();
 }
@ -313,22 +364,30 @@
 .btn-danger-link() {
  .button-variant-other(@error-color, transparent, transparent);
  box-shadow: none;
+
  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover; transparent; transparent);
+    }
  }
+
  &:active {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-active; transparent; transparent);
+    }
  }
  .button-disabled(@disabled-color; transparent; transparent);
 }
@ -336,9 +395,11 @@
 .btn-link() {
  .button-variant-other(@link-color, transparent, transparent);
  box-shadow: none;
+
  &:hover {
    background: @btn-link-hover-bg;
  }
+
  &:hover,
  &:focus,
  &:active {
@ -350,6 +411,7 @@
 .btn-text() {
  .button-variant-other(@text-color, transparent, transparent);
  box-shadow: none;
+
  &:hover,
  &:focus {
    color: @text-color;
@ -368,23 +430,30 @@
 .btn-danger-text() {
  .button-variant-other(@error-color, transparent, transparent);
  box-shadow: none;
+
  &:hover,
  &:focus {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-hover; @btn-text-hover-bg; transparent);
+    }
  }

  &:active {
    & when (@theme = dark) {
      .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
    }
-    & when not (@theme = dark) {
+    & when (not (@theme = dark) and not (@theme = variable)) {
      .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
    }
+    & when (@theme = variable) {
+      .button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
  }
  .button-disabled(@disabled-color; transparent; transparent);
 }
@ -406,12 +475,14 @@
 .btn-square(@btnClassName: btn) {
  .square(@btn-square-size);
  .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+
  & > * {
    font-size: @btn-square-only-icon-size;
  }
  &.@{btnClassName}-lg {
    .square(@btn-square-size-lg);
    .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+
    & > * {
      font-size: @btn-square-only-icon-size-lg;
    }
@ -419,6 +490,7 @@
  &.@{btnClassName}-sm {
    .square(@btn-square-size-sm);
    .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+
    & > * {
      font-size: @btn-square-only-icon-size-sm;
    }
@ -479,6 +551,7 @@
    border-top-right-radius: @btn-border-radius-base;
    border-bottom-right-radius: @btn-border-radius-base;
  }
+
  &-sm {
    > .@{btnClassName}:only-child {
      border-radius: @btn-border-radius-sm;
@ -497,12 +570,14 @@
      border-bottom-right-radius: @btn-border-radius-sm;
    }
  }
+
  & > & {
    float: left;
  }
  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
    border-radius: 0;
  }
+
  & > &:first-child:not(:last-child) {
    > .@{btnClassName}:last-child {
      padding-right: 8px;
--- a/components/button/style/rtl.less
+++ b/components/button/style/rtl.less
@ -10,6 +10,7 @@
        border-right-color: @btn-group-border;
        border-left-color: @btn-default-border;
      }
+
      &[disabled] {
        .@{btn-prefix-cls}-group-rtl& {
          border-right-color: @btn-default-border;
@ -67,20 +68,14 @@
  > .@{btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{btnClassName} {
    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: 0;
-      border-top-right-radius: @btn-border-radius-base;
-      border-bottom-right-radius: @btn-border-radius-base;
-      border-bottom-left-radius: 0;
+      border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: @btn-border-radius-base;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: @btn-border-radius-base;
+      border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
    }
  }

@ -88,20 +83,14 @@
    > .@{btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{btnClassName} {
      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: 0;
-        border-top-right-radius: @btn-border-radius-sm;
-        border-bottom-right-radius: @btn-border-radius-sm;
-        border-bottom-left-radius: 0;
+        border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
      }
    }

    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: @btn-border-radius-sm;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @btn-border-radius-sm;
+        border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
      }
    }
  }
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
@ -797,7 +797,7 @@ exports[`renders ./components/calendar/demo/customize-header.vue correctly 1`] =
  <div class="ant-picker-calendar ant-picker-calendar-mini">
    <div style="padding: 10px;">
      <div style="margin-bottom: 10px;">Custom header</div>
-      <div class="ant-row ant-row-space-between">
+      <div class="ant-row ant-row-space-between" type="flex">
        <div class="ant-col">
          <div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
        </div>
@ -1615,13 +1615,11 @@ exports[`renders ./components/calendar/demo/notice-calendar.vue correctly 1`] =
 `;

 exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
-<div class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
+<div role="alert" class="ant-alert ant-alert-info ant-alert-no-icon" data-show="true">
  <!---->
  <div class="ant-alert-content">
    <div class="ant-alert-message">You selected date: 2017-01-25</div>
-    <div class="ant-alert-description">
-      <!---->
-    </div>
+    <!---->
  </div>
  <!---->
 </div>
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -28,21 +28,21 @@ customize the progress dot by setting a scoped slot
 | --- | --- | --- | --- | --- |
 | dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:dateCellRender="{current: dayjs}" | - |  |
 | dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | v-slot:dateFullCellRender="{current: dayjs}" | - |  |
-| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |
+| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | `true` |  |
+| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
 | locale | The calendar's locale | object | [default](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
 | monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:monthCellRender="{current: dayjs}" | - |  |
 | monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | v-slot:monthFullCellRender="{current: dayjs}" | - |  |
 | validRange | to set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value(v-model) | The current selected date | [dayjs](https://day.js.org/) | current date |  |
-| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
 | valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - |  |

 ### events

-| Events Name | Description | Arguments | Version |
+| Events Name | Description | Arguments | Version |  |
 | --- | --- | --- | --- | --- |
+| change | Callback for when value change | function(date: dayjs \| string） | - |  |
 | panelChange | Callback for when panel changes | function(date: dayjs \| string, mode: string) | - |  |
 | select | Callback for when a date is selected | function(date: dayjs \| string） | - |  |
-| change | Callback for when value change | function(date: dayjs \| string） | - |  |
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -29,19 +29,19 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
 | dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | 无 |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | 无 |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
+| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - |  |
 | locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) |  |
 | mode | 初始模式，`month/year` | string | month |  |
 | monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | 无 |  |
 | monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | 无 |  |
 | validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 |  |
 | value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 |  |
-| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - |  |
 | valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - |  |

 ### 事件

-| 事件名称 | 说明 | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |  |
 | --- | --- | --- | --- |
+| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
 | panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 |
 | select | 点击选择日期回调 | function(date: dayjs \| string） | 无 |
-| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
--- a/components/calendar/locale/bn_BD.tsx
+++ b/components/calendar/locale/bn_BD.tsx
@ -0,0 +1,3 @@
+import bnBD from '../../date-picker/locale/bn_BD';
+
+export default bnBD;
--- a/components/calendar/locale/ka_GE.tsx
+++ b/components/calendar/locale/ka_GE.tsx
@ -0,0 +1,3 @@
+import kaGE from '../../date-picker/locale/ka_GE';
+
+export default kaGE;
--- a/components/calendar/locale/km_KH.tsx
+++ b/components/calendar/locale/km_KH.tsx
@ -0,0 +1,3 @@
+import kmKH from '../../date-picker/locale/km_KH';
+
+export default kmKH;
--- a/Show More
+++ b/Show More