diff --git a/.eslintrc.js b/.eslintrc.js
index 9a8ebde1..a0662dcd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,12 +1,24 @@
+/**
+ * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict'
+
 module.exports = {
+  root: true, // So parent files don't get applied
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
     extraFileExtensions: ['.vue'],
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   extends: [
     'eslint:recommended',
@@ -29,11 +41,35 @@ module.exports = {
     'vue/require-default-prop': 'off',
   },
   overrides: [
+    {
+      files: ['**/*.mjs'],
+      env: {
+        browser: false,
+        node: true,
+      },
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
     {
       files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
       env: {
         jest: true,
       },
     },
+    {
+      files: ['packages/docs/build/**'],
+      env: {
+        browser: false,
+        node: true,
+      },
+      parserOptions: {
+        sourceType: 'script',
+      },
+      rules: {
+        'no-console': 'off',
+        strict: 'error',
+      },
+    },
   ],
 }
diff --git a/README.md b/README.md
index a71b31fc..0a993209 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.9.0-beta.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue`
@@ -148,11 +148,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 ## Status
 
-[![Build Status](https://github.com/coreui/coreui-vue/workflows/JS%20Tests/badge.svg?branch=main)](https://github.com/coreui/coreui-vue/actions?query=workflow%3AJS+Tests+branch%3Amain)
 [![npm version](https://img.shields.io/npm/v/@coreui/vue)](https://www.npmjs.com/package/@coreui/vue)
-[![peerDependencies Status](https://img.shields.io/david/peer/coreui/coreui)](https://david-dm.org/coreui/coreui?type=peer)
-[![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev)
-[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-vue/v4)](https://coveralls.io/github/coreui/coreui-vue?branch=v4)
 
 ## Bugs and feature requests
 
@@ -211,55 +207,23 @@ See [the Releases section of our project](https://github.com/coreui/coreui-vue/r
 
 **Łukasz Holeczek**
 
-- <https://twitter.com/lukaszholeczek>
-- <https://github.com/mrholek>
+* <https://twitter.com/lukaszholeczek>
+* <https://github.com/mrholek>
 
 **Andrzej Kopański**
 
-- <https://github.com/xidedix>
+* <https://github.com/xidedix>
 
-**The CoreUI Team**
+**CoreUI Team**
 
-- <https://github.com/orgs/coreui/people>
+* <https://twitter.com/core_ui>
+* <https://github.com/coreui>
+* <https://github.com/orgs/coreui/people>
 
 ## Support CoreUI Development
 
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
-
-<!--- StartOpenCollectiveBackers -->
-
-### Platinum Sponsors
-
-Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout"><img src="https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Gold Sponsors
-
-Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Silver Sponsors
-
-Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Bronze Sponsors
-
-Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
-
-<a href="https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout"><img src="https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Backers
-
-Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
-
-<a href="https://opencollective.com/coreui/contribute/backer-40965/checkout" target="_blank" rel="noopener"><img src="https://opencollective.com/coreui/backers.svg?width=890"></a>
-
-<!--- EndOpenCollectiveBackers -->
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-vue) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
 
 ## Copyright and license
 
-Copyright 2022 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/lerna.json b/lerna.json
index a64928e9..194343e3 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,8 +1,6 @@
 {
   "npmClient": "yarn",
-  "packages": [
-    "packages/*"
-  ],
-  "useWorkspaces": true,
-  "version": "4.9.0-beta.2"
+  "packages": ["packages/*"],
+  "version": "5.0.0",
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/package.json b/package.json
index a83c62b8..b8c9328f 100644
--- a/package.json
+++ b/package.json
@@ -22,18 +22,18 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/vue3-jest": "29.2.3",
-    "eslint": "8.36.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.10.0",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "lerna": "^6.6.1",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/vue3-jest": "29.2.6",
+    "eslint": "8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.24.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "lerna": "^8.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.7"
+    "prettier": "^3.2.5"
   }
 }
diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue
index 4caafa13..9de09384 160000
--- a/packages/coreui-icons-vue
+++ b/packages/coreui-icons-vue
@@ -1 +1 @@
-Subproject commit 4caafa13b155f5f915c3a2a05dbd6d74a1ef8977
+Subproject commit 9de09384e7b0ece5196adf30b0f5e25cee77975c
diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs
index cc734c3a..a3a42cab 160000
--- a/packages/coreui-vue-chartjs
+++ b/packages/coreui-vue-chartjs
@@ -1 +1 @@
-Subproject commit cc734c3abd6797191096be80e2b0429b37990f25
+Subproject commit a3a42cabd2b34dd1b1b78cbb72d5e6cdc41ba5cd
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index a8bc07f0..f4134e45 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "4.9.0-beta.2",
+  "version": "5.0.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -23,44 +23,45 @@
   },
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist/",
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "npm-run-all clean build-*",
+    "build-cjs": "rollup --environment ESM:false --config",
+    "build-esm": "rollup --environment ESM:true --config",
+    "clean": "cross-env-shell \"rm -rf dist\"",
     "test": "jest --coverage",
     "test:clear": "jest --clearCache",
     "test:update": "jest --coverage --updateSnapshot"
   },
+  "dependencies": {
+    "@coreui/coreui": "^5.0.0",
+    "@popperjs/core": "^2.11.8"
+  },
   "devDependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-commonjs": "^25.0.1",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@types/jest": "^29.5.2",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "29.2.4",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "rollup": "^3.25.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jest": "^29.5.12",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/vue3-jest": "29.2.6",
+    "cross-env": "^7.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.13.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^4.9.5",
-    "vue": "^3.3.4",
-    "vue-types": "^5.0.3"
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3",
+    "vue": "^3.4.21",
+    "vue-types": "^5.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^4.2.6",
     "vue": "^3.2.21"
-  },
-  "standard": {
-    "ignore": [
-      "node_modules/",
-      "build/"
-    ]
   }
 }
diff --git a/packages/coreui-vue/rollup.config.js b/packages/coreui-vue/rollup.config.js
deleted file mode 100644
index c4b5a462..00000000
--- a/packages/coreui-vue/rollup.config.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-import resolve from '@rollup/plugin-node-resolve'
-import vue from 'rollup-plugin-vue'
-import pkg from './package.json'
-
-const plugins = [
-  resolve({
-    dedupe: ['vue'],
-    extensions: ['.ts', '.json', '.vue'],
-  }),
-  typescript({
-    exclude: ['**/__tests__/**'],
-    tsconfig: './tsconfig.json',
-  }),
-  commonjs({
-    include: ['../../node_modules/**'],
-  }),
-]
-
-const external = ['vue']
-
-export default [
-  // ESM build to be used with webpack/rollup.
-  {
-    input: 'src/index.ts',
-    output: {
-      format: 'es',
-      file: pkg.module,
-      exports: 'named',
-      sourcemap: true,
-      sourcemapPathTransform: (relativeSourcePath) => {
-        return relativeSourcePath
-          .replace('../../node_modules/', '../')
-          .replace('../packages/coreui-vue', '..')
-      },
-    },
-    external,
-    plugins: [...plugins, vue()],
-  },
-  // SSR build.
-  {
-    input: 'src/index.ts',
-    output: {
-      format: 'cjs',
-      file: pkg.main,
-      exports: 'named',
-      sourcemap: true,
-      sourcemapPathTransform: (relativeSourcePath) => {
-        return relativeSourcePath
-          .replace('../../node_modules/', '../')
-          .replace('../packages/coreui-vue', '..')
-      },
-    },
-    external,
-    plugins: [...plugins, vue({ template: { optimizeSSR: true } })],
-  },
-]
diff --git a/packages/coreui-vue/rollup.config.mjs b/packages/coreui-vue/rollup.config.mjs
new file mode 100644
index 00000000..c47d4ac0
--- /dev/null
+++ b/packages/coreui-vue/rollup.config.mjs
@@ -0,0 +1,52 @@
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import resolve from '@rollup/plugin-node-resolve'
+import vue from 'rollup-plugin-vue'
+import { readFileSync } from 'node:fs'
+import { dirname } from 'node:path'
+
+const pkg = JSON.parse(readFileSync(new URL('package.json', import.meta.url)))
+
+const DIR_CJS = dirname(pkg.main)
+const DIR_ESM = dirname(pkg.module)
+const ESM = process.env.ESM === 'true'
+
+const plugins = [
+  resolve({
+    dedupe: ['vue'],
+    extensions: ['.ts', '.json', '.vue'],
+  }),
+  typescript({
+    exclude: ['**/__tests__/**'],
+    tsconfig: './tsconfig.json',
+    compilerOptions: {
+      declarationDir: ESM ? DIR_ESM : DIR_CJS,
+      outDir: ESM ? DIR_ESM : DIR_CJS,
+    },
+  }),
+  commonjs({
+    include: ['../../node_modules/**'],
+  }),
+  ESM ? vue({ template: { optimizeSSR: true } }) : vue(),
+]
+
+const external = ['@popperjs/core', 'vue']
+
+const rollupConfig = {
+  input: 'src/index.ts',
+  output: {
+    dir: ESM ? DIR_ESM : DIR_CJS,
+    format: ESM ? 'esm' : 'cjs',
+    exports: 'named',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    sourcemap: true,
+    sourcemapPathTransform: (relativeSourcePath) => {
+      return relativeSourcePath.replace('../../node_modules/', '../').replace('../src/', 'src/')
+    },
+  },
+  external,
+  plugins,
+}
+
+export default rollupConfig
diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts
index 1422d40b..639b5af2 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordion.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordion.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, provide, ref } from 'vue'
+import { defineComponent, h, provide, ref, watch } from 'vue'
 
 const CAccordion = defineComponent({
   name: 'CAccordion',
@@ -21,6 +21,12 @@ const CAccordion = defineComponent({
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
     }
+
+    watch(
+      () => props.activeItemKey,
+      (value) => (activeItemKey.value = value),
+    )
+
     provide('activeItemKey', activeItemKey)
     provide('alwaysOpen', props.alwaysOpen)
     provide('setActiveItemKey', setActiveItemKey)
diff --git a/packages/coreui-vue/src/components/accordion/index.ts b/packages/coreui-vue/src/components/accordion/index.ts
index ee2326db..0d3d51dd 100644
--- a/packages/coreui-vue/src/components/accordion/index.ts
+++ b/packages/coreui-vue/src/components/accordion/index.ts
@@ -7,11 +7,11 @@ import { CAccordionItem } from './CAccordionItem'
 
 const CAccordionPlugin = {
   install: (app: App): void => {
-    app.component(CAccordion.name, CAccordion)
-    app.component(CAccordionBody.name, CAccordionBody)
-    app.component(CAccordionButton.name, CAccordionButton)
-    app.component(CAccordionHeader.name, CAccordionHeader)
-    app.component(CAccordionItem.name, CAccordionItem)
+    app.component(CAccordion.name as string, CAccordion)
+    app.component(CAccordionBody.name as string, CAccordionBody)
+    app.component(CAccordionButton.name as string, CAccordionButton)
+    app.component(CAccordionHeader.name as string, CAccordionHeader)
+    app.component(CAccordionItem.name as string, CAccordionItem)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/alert/CAlertHeading.ts b/packages/coreui-vue/src/components/alert/CAlertHeading.ts
index fbf38c69..94ed187c 100644
--- a/packages/coreui-vue/src/components/alert/CAlertHeading.ts
+++ b/packages/coreui-vue/src/components/alert/CAlertHeading.ts
@@ -6,7 +6,7 @@ export const CAlertHeading = defineComponent({
     /**
      * 	Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h4',
     },
@@ -14,7 +14,7 @@ export const CAlertHeading = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'alert-heading',
         },
diff --git a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts b/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
index 628ba7ad..73448f41 100644
--- a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
+++ b/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/alert/index.ts b/packages/coreui-vue/src/components/alert/index.ts
index c8f7b404..d3fadac4 100644
--- a/packages/coreui-vue/src/components/alert/index.ts
+++ b/packages/coreui-vue/src/components/alert/index.ts
@@ -5,9 +5,9 @@ import { CAlertLink } from './CAlertLink'
 
 const CAlertPlugin = {
   install: (app: App): void => {
-    app.component(CAlert.name, CAlert)
-    app.component(CAlertHeading.name, CAlertHeading)
-    app.component(CAlertLink.name, CAlertLink)
+    app.component(CAlert.name as string, CAlert)
+    app.component(CAlertHeading.name as string, CAlertHeading)
+    app.component(CAlertLink.name as string, CAlertLink)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/avatar/CAvatar.ts b/packages/coreui-vue/src/components/avatar/CAvatar.ts
index 27008005..d35ee265 100644
--- a/packages/coreui-vue/src/components/avatar/CAvatar.ts
+++ b/packages/coreui-vue/src/components/avatar/CAvatar.ts
@@ -55,7 +55,7 @@ const CAvatar = defineComponent({
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },
diff --git a/packages/coreui-vue/src/components/avatar/index.ts b/packages/coreui-vue/src/components/avatar/index.ts
index 650fb4e6..479ab9f4 100644
--- a/packages/coreui-vue/src/components/avatar/index.ts
+++ b/packages/coreui-vue/src/components/avatar/index.ts
@@ -3,7 +3,7 @@ import { CAvatar } from './CAvatar'
 
 const CAvatarPlugin = {
   install: (app: App): void => {
-    app.component(CAvatar.name, CAvatar)
+    app.component(CAvatar.name as string, CAvatar)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/backdrop/index.ts b/packages/coreui-vue/src/components/backdrop/index.ts
index 7202b8fd..440292ba 100644
--- a/packages/coreui-vue/src/components/backdrop/index.ts
+++ b/packages/coreui-vue/src/components/backdrop/index.ts
@@ -3,7 +3,7 @@ import { CBackdrop } from './CBackdrop'
 
 const CBackdropPlugin = {
   install: (app: App): void => {
-    app.component(CBackdrop.name, CBackdrop)
+    app.component(CBackdrop.name as string, CBackdrop)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts
index 717adac3..3802015d 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -5,19 +5,19 @@ import { Color, Shape, TextColor } from '../../props'
 const CBadge = defineComponent({
   name: 'CBadge',
   props: {
-    /**
-     * Sets the color context of the component to one of CoreUI’s themed colors.
-     *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-     */
-    color: Color,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'span',
     },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Position badge in one of the corners of a link or button.
      *
@@ -46,17 +46,24 @@ const CBadge = defineComponent({
         return value === 'sm'
       },
     },
+    /**
+     * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0
+     */
+    textBgColor: Color,
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'badge',
@@ -69,6 +76,7 @@ const CBadge = defineComponent({
               'start-0': props.position && props.position.includes('start'),
               [`badge-${props.size}`]: props.size,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
             props.shape,
           ],
diff --git a/packages/coreui-vue/src/components/badge/index.ts b/packages/coreui-vue/src/components/badge/index.ts
index 3bd6f86a..9a2e47a3 100644
--- a/packages/coreui-vue/src/components/badge/index.ts
+++ b/packages/coreui-vue/src/components/badge/index.ts
@@ -3,7 +3,7 @@ import { CBadge } from './CBadge'
 
 const CBadgePlugin = {
   install: (app: App): void => {
-    app.component(CBadge.name, CBadge)
+    app.component(CBadge.name as string, CBadge)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
index 9e8bcc62..df95f2ff 100644
--- a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
+++ b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
@@ -2,6 +2,7 @@ import { defineComponent, h } from 'vue'
 
 const CBreadcrumb = defineComponent({
   name: 'CBreadcrumb',
+  inheritAttrs: false,
   setup(_, { slots, attrs }) {
     return () =>
       h(
diff --git a/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap b/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
index fa56864c..2cccad76 100644
--- a/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
+++ b/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CBreadcrumb component renders correctly 1`] = `
-"<nav aria-label="breadcrumb" class="bazinga">
+"<nav aria-label="breadcrumb">
   <ol class="breadcrumb bazinga">Default slot</ol>
 </nav>"
 `;
diff --git a/packages/coreui-vue/src/components/breadcrumb/index.ts b/packages/coreui-vue/src/components/breadcrumb/index.ts
index 90b2b6f1..b7bad130 100644
--- a/packages/coreui-vue/src/components/breadcrumb/index.ts
+++ b/packages/coreui-vue/src/components/breadcrumb/index.ts
@@ -4,8 +4,8 @@ import { CBreadcrumb } from './CBreadcrumb'
 
 const CBreadcrumbPlugin = {
   install: (app: App): void => {
-    app.component(CBreadcrumb.name, CBreadcrumb)
-    app.component(CBreadcrumbItem.name, CBreadcrumbItem)
+    app.component(CBreadcrumb.name as string, CBreadcrumb)
+    app.component(CBreadcrumbItem.name as string, CBreadcrumbItem)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/button-group/index.ts b/packages/coreui-vue/src/components/button-group/index.ts
index ed8c71c5..f038168b 100644
--- a/packages/coreui-vue/src/components/button-group/index.ts
+++ b/packages/coreui-vue/src/components/button-group/index.ts
@@ -4,8 +4,8 @@ import { CButtonGroup } from './CButtonGroup'
 
 const CButtonGroupPlugin = {
   install: (app: App): void => {
-    app.component(CButtonToolbar.name, CButtonToolbar)
-    app.component(CButtonGroup.name, CButtonGroup)
+    app.component(CButtonToolbar.name as string, CButtonToolbar)
+    app.component(CButtonGroup.name as string, CButtonGroup)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts
index d5b2421d..e918cbfc 100644
--- a/packages/coreui-vue/src/components/button/CButton.ts
+++ b/packages/coreui-vue/src/components/button/CButton.ts
@@ -9,19 +9,19 @@ export const CButton = defineComponent({
      * Toggle the active state for the component.
      */
     active: Boolean,
-    /**
-     * Sets the color context of the component to one of CoreUI’s themed colors.
-     *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-     */
-    color: Color,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'button',
     },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Toggle the disabled state for the component.
      */
@@ -79,6 +79,7 @@ export const CButton = defineComponent({
     'click',
   ],
   setup(props, { emit, slots }) {
+    const component = props.href ? 'a' : props.as
     const handleClick = (event: Event) => {
       if (props.disabled) {
         return
@@ -88,7 +89,7 @@ export const CButton = defineComponent({
     }
     return () =>
       h(
-        props.component,
+        component,
         {
           class: [
             'btn',
@@ -100,10 +101,9 @@ export const CButton = defineComponent({
             },
             props.shape,
           ],
-          disabled: props.disabled && props.component !== 'a',
-          ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
-          ...(props.component === 'a' && props.href && { href: props.href }),
-          ...(props.component === 'button' && { type: props.type }),
+          ...(component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+          ...(component === 'a' && props.href && { href: props.href }),
+          ...(component === 'button' && { type: props.type, disabled: props.disabled }),
           onClick: handleClick,
         },
         slots.default && slots.default(),
diff --git a/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts b/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts
index a739380f..a0aeded1 100644
--- a/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts
+++ b/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts
@@ -13,8 +13,8 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
+    as: 'div',
     color: 'warning',
-    component: 'div',
     disabled: true,
     href: '/bazinga',
     shape: 'rounded-pill',
@@ -28,8 +28,8 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
+    as: 'a',
     color: 'warning',
-    component: 'a',
     disabled: true,
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap b/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap
index 97172f31..7b2d617e 100644
--- a/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap
+++ b/packages/coreui-vue/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" disabled="false" aria-disabled="true" tabindex="-1">Default slot</a>"`;
+exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" aria-disabled="true" tabindex="-1">Default slot</a>"`;
 
-exports[`Customize CButton component renders correctly 1`] = `"<div class="btn btn-outline-warning btn-lg active disabled rounded-pill" disabled="true">Default slot</div>"`;
+exports[`Customize CButton component renders correctly 1`] = `"<a class="btn btn-outline-warning btn-lg active disabled rounded-pill" aria-disabled="true" tabindex="-1" href="https://github.com/bazinga">Default slot</a>"`;
 
 exports[`Loads and display CButton component renders correctly 1`] = `"<button class="btn btn-undefined" type="button">Default slot</button>"`;
diff --git a/packages/coreui-vue/src/components/button/index.ts b/packages/coreui-vue/src/components/button/index.ts
index 8a2531c0..679616e0 100644
--- a/packages/coreui-vue/src/components/button/index.ts
+++ b/packages/coreui-vue/src/components/button/index.ts
@@ -3,7 +3,7 @@ import { CButton } from './CButton'
 
 const CButtonPlugin = {
   install: (app: App): void => {
-    app.component(CButton.name, CButton)
+    app.component(CButton.name as string, CButton)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/callout/index.ts b/packages/coreui-vue/src/components/callout/index.ts
index 1fe788de..e0baf185 100644
--- a/packages/coreui-vue/src/components/callout/index.ts
+++ b/packages/coreui-vue/src/components/callout/index.ts
@@ -3,7 +3,7 @@ import { CCallout } from './CCallout'
 
 const CCalloutPlugin = {
   install: (app: App): void => {
-    app.component(CCallout.name, CCallout)
+    app.component(CCallout.name as string, CCallout)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts
index 3b63f8ff..580dc207 100644
--- a/packages/coreui-vue/src/components/card/CCard.ts
+++ b/packages/coreui-vue/src/components/card/CCard.ts
@@ -11,10 +11,17 @@ const CCard = defineComponent({
      * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
      */
     color: Color,
+    /**
+     * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0
+     */
+    textBgColor: Color,
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },
@@ -28,6 +35,7 @@ const CCard = defineComponent({
             {
               [`bg-${props.color}`]: props.color,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
           ],
         },
diff --git a/packages/coreui-vue/src/components/card/CCardHeader.ts b/packages/coreui-vue/src/components/card/CCardHeader.ts
index 722ba187..d216d892 100644
--- a/packages/coreui-vue/src/components/card/CCardHeader.ts
+++ b/packages/coreui-vue/src/components/card/CCardHeader.ts
@@ -6,13 +6,13 @@ const CCardHeader = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-header' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-header' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/card/CCardImage.ts b/packages/coreui-vue/src/components/card/CCardImage.ts
index ee8695b9..81ff7fc0 100644
--- a/packages/coreui-vue/src/components/card/CCardImage.ts
+++ b/packages/coreui-vue/src/components/card/CCardImage.ts
@@ -6,7 +6,7 @@ const CCardImage = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'img',
     },
@@ -25,7 +25,7 @@ const CCardImage = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         },
diff --git a/packages/coreui-vue/src/components/card/CCardSubtitle.ts b/packages/coreui-vue/src/components/card/CCardSubtitle.ts
index 5a950776..b3bdf933 100644
--- a/packages/coreui-vue/src/components/card/CCardSubtitle.ts
+++ b/packages/coreui-vue/src/components/card/CCardSubtitle.ts
@@ -6,13 +6,13 @@ const CCardSubtitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h6',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-subtitle' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-subtitle' }, slots.default && slots.default())
   },
 })
 export { CCardSubtitle }
diff --git a/packages/coreui-vue/src/components/card/CCardText.ts b/packages/coreui-vue/src/components/card/CCardText.ts
index 759ff7e8..0f26e875 100644
--- a/packages/coreui-vue/src/components/card/CCardText.ts
+++ b/packages/coreui-vue/src/components/card/CCardText.ts
@@ -6,13 +6,13 @@ const CCardText = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'p',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-text' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-text' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/card/CCardTitle.ts b/packages/coreui-vue/src/components/card/CCardTitle.ts
index bc540e15..4564bdf0 100644
--- a/packages/coreui-vue/src/components/card/CCardTitle.ts
+++ b/packages/coreui-vue/src/components/card/CCardTitle.ts
@@ -6,13 +6,13 @@ const CCardTitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h5',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-title' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-title' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts
index ded11542..01e950c4 100644
--- a/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts
+++ b/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'span',
+    as: 'span',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts
index da8cf0fb..342a74fa 100644
--- a/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts
+++ b/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'a',
+    as: 'a',
     orientation: 'bottom',
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts
index ae90329c..d78f05ad 100644
--- a/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts
+++ b/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h4',
+    as: 'h4',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts
index b77ce9ff..cf03e29a 100644
--- a/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts
+++ b/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h4',
+    as: 'h4',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts
index b6628c9f..a3c28d5d 100644
--- a/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts
+++ b/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/card/index.ts b/packages/coreui-vue/src/components/card/index.ts
index ef61b81a..cad0a6ca 100644
--- a/packages/coreui-vue/src/components/card/index.ts
+++ b/packages/coreui-vue/src/components/card/index.ts
@@ -13,17 +13,17 @@ import { CCardTitle } from './CCardTitle'
 
 const CCardPlugin = {
   install: (app: App): void => {
-    app.component(CCard.name, CCard)
-    app.component(CCardBody.name, CCardBody)
-    app.component(CCardFooter.name, CCardFooter)
-    app.component(CCardGroup.name, CCardGroup)
-    app.component(CCardHeader.name, CCardHeader)
-    app.component(CCardImage.name, CCardImage)
-    app.component(CCardImageOverlay.name, CCardImageOverlay)
-    app.component(CCardLink.name, CCardLink)
-    app.component(CCardSubtitle.name, CCardSubtitle)
-    app.component(CCardText.name, CCardText)
-    app.component(CCardTitle.name, CCardTitle)
+    app.component(CCard.name as string, CCard)
+    app.component(CCardBody.name as string, CCardBody)
+    app.component(CCardFooter.name as string, CCardFooter)
+    app.component(CCardGroup.name as string, CCardGroup)
+    app.component(CCardHeader.name as string, CCardHeader)
+    app.component(CCardImage.name as string, CCardImage)
+    app.component(CCardImageOverlay.name as string, CCardImageOverlay)
+    app.component(CCardLink.name as string, CCardLink)
+    app.component(CCardSubtitle.name as string, CCardSubtitle)
+    app.component(CCardText.name as string, CCardText)
+    app.component(CCardTitle.name as string, CCardTitle)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/carousel/CCarousel.ts b/packages/coreui-vue/src/components/carousel/CCarousel.ts
index 06809d04..bbb7046a 100644
--- a/packages/coreui-vue/src/components/carousel/CCarousel.ts
+++ b/packages/coreui-vue/src/components/carousel/CCarousel.ts
@@ -185,11 +185,8 @@ const CCarousel = defineComponent({
       h(
         'div',
         {
-          class: [
-            'carousel slide',
-            props.transition === 'crossfade' && 'carousel-fade',
-            props.dark && 'carousel-dark',
-          ],
+          class: ['carousel slide', props.transition === 'crossfade' && 'carousel-fade'],
+          ...(props.dark && { 'data-coreui-theme': 'dark' }),
           onmouseover: () => props.pause && pause(),
           onmouseleave: () => cycle(),
           ref: carouselRef,
diff --git a/packages/coreui-vue/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap b/packages/coreui-vue/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap
index 4bbd0a71..1798375d 100644
--- a/packages/coreui-vue/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap
+++ b/packages/coreui-vue/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CCarousel component renders correctly 1`] = `
-"<div class="carousel slide carousel-fade carousel-dark">
+"<div class="carousel slide carousel-fade" data-coreui-theme="dark">
   <div class="carousel-indicators"></div>
   <div class="carousel-inner"></div><button type="button" class="carousel-control-prev" data-coreui-target=""><span class="carousel-control-prev-icon" ariahidden="true"></span><span class="visually-hidden">Previous</span></button><button type="button" class="carousel-control-next" data-coreui-target=""><span class="carousel-control-next-icon" ariahidden="true"></span><span class="visually-hidden">Next</span></button>
 </div>"
diff --git a/packages/coreui-vue/src/components/carousel/index.ts b/packages/coreui-vue/src/components/carousel/index.ts
index 68c66fa5..59566ee8 100644
--- a/packages/coreui-vue/src/components/carousel/index.ts
+++ b/packages/coreui-vue/src/components/carousel/index.ts
@@ -5,9 +5,9 @@ import { CCarouselItem } from './CCarouselItem'
 
 const CCarouselPlugin = {
   install: (app: App): void => {
-    app.component(CCarousel.name, CCarousel)
-    app.component(CCarouselCaption.name, CCarouselCaption)
-    app.component(CCarouselItem.name, CCarouselItem)
+    app.component(CCarousel.name as string, CCarousel)
+    app.component(CCarouselCaption.name as string, CCarouselCaption)
+    app.component(CCarouselItem.name as string, CCarouselItem)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/close-button/CCloseButton.ts b/packages/coreui-vue/src/components/close-button/CCloseButton.ts
index 6e329f9e..0ddcc4a4 100644
--- a/packages/coreui-vue/src/components/close-button/CCloseButton.ts
+++ b/packages/coreui-vue/src/components/close-button/CCloseButton.ts
@@ -3,6 +3,10 @@ import { defineComponent, h } from 'vue'
 export const CCloseButton = defineComponent({
   name: 'CCloseButton',
   props: {
+    /**
+     * Invert the default color.
+     */
+    dark: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
@@ -39,6 +43,7 @@ export const CCloseButton = defineComponent({
         ],
         'aria-label': 'Close',
         disabled: props.disabled,
+        ...(props.dark && { 'data-coreui-theme': 'dark' }),
         onClick: handleClick,
       })
   },
diff --git a/packages/coreui-vue/src/components/close-button/index.ts b/packages/coreui-vue/src/components/close-button/index.ts
index 7c19c164..7445eb8f 100644
--- a/packages/coreui-vue/src/components/close-button/index.ts
+++ b/packages/coreui-vue/src/components/close-button/index.ts
@@ -3,7 +3,7 @@ import { CCloseButton } from './CCloseButton'
 
 const CCloseButtonPlugin = {
   install: (app: App): void => {
-    app.component(CCloseButton.name, CCloseButton)
+    app.component(CCloseButton.name as string, CCloseButton)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/collapse/index.ts b/packages/coreui-vue/src/components/collapse/index.ts
index c13fa246..2c6ccd7c 100644
--- a/packages/coreui-vue/src/components/collapse/index.ts
+++ b/packages/coreui-vue/src/components/collapse/index.ts
@@ -3,7 +3,7 @@ import { CCollapse } from './CCollapse'
 
 const CCollapsePlugin = {
   install: (app: App): void => {
-    app.component(CCollapse.name, CCollapse)
+    app.component(CCollapse.name as string, CCollapse)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
new file mode 100644
index 00000000..8fd104a1
--- /dev/null
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -0,0 +1,58 @@
+import { defineComponent, h, PropType, ref, Teleport, watch } from 'vue'
+
+const getContainer = (
+  container?: HTMLElement | (() => HTMLElement) | string,
+): HTMLElement | string => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return 'body'
+}
+
+const CConditionalTeleport = defineComponent({
+  name: 'CConditionalTeleport',
+  props: {
+    /**
+     * An HTML element or function that returns a single element, with `document.body` as the default.
+     *
+     * @since v5.0.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
+    /**
+     * Render some children into a different part of the DOM
+     */
+    teleport: {
+      type: [Boolean],
+      default: true,
+    },
+  },
+  setup(props, { slots }) {
+    const container = ref<HTMLElement | string>(getContainer(props.container))
+
+    watch(
+      () => [props.container, props.teleport],
+      () => {
+        if (props.teleport) {
+          container.value = getContainer(props.container)
+        }
+      },
+    )
+
+    return () =>
+      h(
+        Teleport,
+        {
+          disabled: props.teleport === false,
+          to: container.value,
+        },
+        {
+          default: () => slots.default && slots.default(),
+        },
+      )
+  },
+})
+export { CConditionalTeleport }
diff --git a/packages/coreui-vue/src/components/conditional-teleport/index.ts b/packages/coreui-vue/src/components/conditional-teleport/index.ts
new file mode 100644
index 00000000..538edf16
--- /dev/null
+++ b/packages/coreui-vue/src/components/conditional-teleport/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CConditionalTeleport } from './CConditionalTeleport'
+
+const CConditionalTeleportPlugin = {
+  install: (app: App): void => {
+    app.component(CConditionalTeleport.name as string, CConditionalTeleport)
+  },
+}
+
+export { CConditionalTeleport, CConditionalTeleportPlugin }
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 67b4d0cc..97ef4fe5 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -2,51 +2,11 @@ import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
-import type { Placements, Triggers } from '../../types'
+import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
-
-const getPlacement = (
-  placement: Placement,
-  direction: string | undefined,
-  alignment: Alignments | string | undefined,
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
+import type { Alignments } from './types'
+import { getNextActiveElement, getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
@@ -99,6 +59,15 @@ const CDropdown = defineComponent({
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
       },
     },
+    /**
+     * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -121,7 +90,7 @@ const CDropdown = defineComponent({
     /**
      * Offset of the dropdown menu relative to its target.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     offset: {
       type: Array,
@@ -143,6 +112,15 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Generates dropdown menu using Teleport.
+     *
+     * @since v5.0.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      */
@@ -214,6 +192,8 @@ const CDropdown = defineComponent({
         popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
+        dropdownToggleRef.value.addEventListener('keydown', handleKeydown)
+        dropdownMenuRef.value.addEventListener('keydown', handleKeydown)
         emit('show')
         return
       }
@@ -221,13 +201,18 @@ const CDropdown = defineComponent({
       popper.value && destroyPopper()
       window.removeEventListener('mouseup', handleMouseUp)
       window.removeEventListener('keyup', handleKeyup)
+      dropdownToggleRef.value &&
+        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
     provide('config', {
       alignment: props.alignment,
+      container: props.container,
       dark: props.dark,
       popper: props.popper,
+      teleport: props.teleport,
     })
 
     provide('variant', props.variant)
@@ -235,6 +220,21 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        visible.value &&
+        dropdownMenuRef.value &&
+        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const items: HTMLElement[] = Array.from(
+          dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+        )
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+      }
+    }
+
     const handleKeyup = (event: KeyboardEvent) => {
       if (props.autoClose === false) {
         return
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts
index 0ee6018e..ea630404 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts
@@ -6,7 +6,7 @@ const CDropdownHeader = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h6',
     },
@@ -14,7 +14,7 @@ const CDropdownHeader = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'dropdown-header',
         },
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts b/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts
index fdd01393..49b1ea68 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts
@@ -12,7 +12,7 @@ const CDropdownItem = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -32,7 +32,7 @@ const CDropdownItem = defineComponent({
         {
           class: 'dropdown-item',
           active: props.active,
-          component: props.component,
+          as: props.as,
           disabled: props.disabled,
           href: props.href,
         },
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts
index 43c885e6..29791bac 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts
@@ -1,56 +1,59 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { CConditionalTeleport } from '../conditional-teleport'
+import { getAlignmentClassNames } from './utils'
+
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
+  inheritAttrs: false,
   props: {
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      *
      * @values 'div', 'ul'
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
   },
-  setup(props, { slots }) {
+  setup(props, { attrs, slots }) {
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
     const visible = inject('visible') as Ref<boolean>
 
-    const { alignment, dark, popper } = config
-
-    // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
-    const alignmentClassNames = (alignment: object | string) => {
-      const classNames: string[] = []
-      if (typeof alignment === 'object') {
-        Object.keys(alignment).map((key) => {
-          classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-        })
-      }
-      if (typeof alignment === 'string') {
-        classNames.push(`dropdown-menu-${alignment}`)
-      }
-      return classNames
-    }
+    const { alignment, container, dark, popper, teleport } = config
 
     return () =>
       h(
-        props.component,
+        CConditionalTeleport,
+        {
+          container: container,
+          teleport: teleport,
+        },
         {
-          class: [
-            'dropdown-menu',
-            { 'dropdown-menu-dark': dark, show: visible.value },
-            alignmentClassNames(alignment),
-          ],
-          ...((typeof alignment === 'object' || !popper) && {
-            'data-coreui-popper': 'static',
-          }),
-          ref: dropdownMenuRef,
+          default: () =>
+            h(
+              props.as,
+              {
+                ...attrs,
+                class: [
+                  'dropdown-menu',
+                  { show: visible.value },
+                  getAlignmentClassNames(alignment),
+                  attrs.class,
+                ],
+                ...((typeof alignment === 'object' || !popper) && {
+                  'data-coreui-popper': 'static',
+                }),
+                ...(dark && { 'data-coreui-theme': 'dark' }),
+                ref: dropdownMenuRef,
+              },
+              props.as === 'ul'
+                ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
+                : slots.default && slots.default(),
+            ),
         },
-        props.component === 'ul'
-          ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
-          : slots.default && slots.default(),
       )
   },
 })
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index eb8200fd..33e96a35 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -1,4 +1,14 @@
-import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue'
+import {
+  cloneVNode,
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  PropType,
+  Ref,
+  ref,
+} from 'vue'
 
 import { CButton } from '../button'
 
@@ -9,9 +19,12 @@ const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
   props: {
     /**
-     * Toggle the active state for the component.
+     * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    active: Boolean,
+    as: {
+      type: String,
+      default: 'button',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -25,13 +38,6 @@ const CDropdownToggle = defineComponent({
       type: Boolean,
       default: true,
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'button',
-    },
     /**
      * Create a custom toggler which accepts any content.
      */
@@ -40,6 +46,15 @@ const CDropdownToggle = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+     *
+     * @since v5.0.0
+     */
+    navLink: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
      */
@@ -87,18 +102,10 @@ const CDropdownToggle = defineComponent({
     const visible = inject('visible') as Ref<boolean>
     const setVisible = inject('setVisible') as (_visible?: boolean) => void
 
-    const className = [
-      {
-        'dropdown-toggle': props.caret,
-        'dropdown-toggle-split': props.split,
-        active: props.active,
-        disabled: props.disabled,
-      },
-    ]
-
     const triggers = {
       ...((props.trigger === 'click' || props.trigger.includes('click')) && {
-        onClick: () => {
+        onClick: (event: Event) => {
+          event.preventDefault()
           if (props.disabled) {
             return
           }
@@ -123,6 +130,20 @@ const CDropdownToggle = defineComponent({
       }),
     }
 
+    const togglerProps = computed(() => {
+      return {
+        class: {
+          'nav-link': dropdownVariant === 'nav-item' && props.navLink,
+          'dropdown-toggle': props.caret,
+          'dropdown-toggle-split': props.split,
+          disabled: props.disabled,
+          show: visible.value,
+        },
+        'aria-expanded': visible.value,
+        ...(!props.disabled && { ...triggers }),
+      }
+    })
+
     onMounted(() => {
       if (togglerRef.value) {
         dropdownToggleRef.value = togglerRef.value.$el
@@ -140,51 +161,36 @@ const CDropdownToggle = defineComponent({
               ...triggers,
             }),
           )
-        : dropdownVariant === 'nav-item'
-        ? h(
-            'a',
-            {
-              active: props.active,
-              class: [
-                'nav-link',
-                className,
-                {
-                  show: visible.value,
-                },
-              ],
-              disabled: props.disabled,
-              href: '#',
-              ref: dropdownToggleRef,
-              ...triggers,
-            },
-            { default: () => slots.default && slots.default() },
-          )
-        : h(
-            CButton,
-            {
-              class: [
-                className,
-                {
-                  show: visible.value,
+        : dropdownVariant === 'nav-item' && props.navLink
+          ? h(
+              'a',
+              {
+                href: '#',
+                ...togglerProps.value,
+                role: 'button',
+                ref: dropdownToggleRef,
+              },
+              { default: () => slots.default && slots.default() },
+            )
+          : h(
+              CButton,
+              {
+                ...togglerProps.value,
+                as: props.as,
+                color: props.color,
+                disabled: props.disabled,
+                shape: props.shape,
+                size: props.size,
+                variant: props.variant,
+                ref: (el) => {
+                  togglerRef.value = el
                 },
-              ],
-              active: props.active,
-              color: props.color,
-              disabled: props.disabled,
-              ref: (el) => {
-                togglerRef.value = el
               },
-              shape: props.shape,
-              size: props.size,
-              ...triggers,
-              ...(props.component === 'button' && { type: 'button' }),
-              variant: props.variant,
-            },
-            () =>
-              props.split
-                ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-                : slots.default && slots.default(),
-          )
+              () =>
+                props.split
+                  ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                  : slots.default && slots.default(),
+            )
   },
 })
 
diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts
index 6ed72559..2401c7e8 100644
--- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts
+++ b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts
index bf153451..de5d2b11 100644
--- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts
+++ b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts
@@ -13,7 +13,7 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
     href: '/bazinga',
   },
diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts
index 265388de..23c7d3d7 100644
--- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts
+++ b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts
@@ -32,7 +32,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'ul',
+    as: 'ul',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap
index 42124bbf..2515aa2b 100644
--- a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap
+++ b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CDropdownMenu component renders correctly 1`] = `
-"<ul class="dropdown-menu dropdown-menu-dark show dropdown-menu-lg-end" data-coreui-popper="static">
-  <li>Default slot</li>
-</ul>"
+"<!--teleport start-->
+<!--teleport end-->"
 `;
 
-exports[`Loads and display CDropdownMenu component renders correctly 1`] = `"<div class="dropdown-menu dropdown-menu-lg-end" data-coreui-popper="static">Default slot</div>"`;
+exports[`Loads and display CDropdownMenu component renders correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;
diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap
index 9b78d066..4697a13e 100644
--- a/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap
+++ b/packages/coreui-vue/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active="true" class="nav-link dropdown-toggle-split active disabled show" disabled="true" href="#">Default slot</a>"`;
+exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a href="#" class="nav-link dropdown-toggle-split disabled show" aria-expanded="true" role="button" active="true">Default slot</a>"`;
 
-exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show" disabled="" type="button"><span class="visually-hidden">Toggle Dropdown</span></button>"`;
+exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split disabled show" type="button" disabled="" aria-expanded="true"><span class="visually-hidden">Toggle Dropdown</span></button>"`;
diff --git a/packages/coreui-vue/src/components/dropdown/index.ts b/packages/coreui-vue/src/components/dropdown/index.ts
index 3bec8afd..aabcfeb8 100644
--- a/packages/coreui-vue/src/components/dropdown/index.ts
+++ b/packages/coreui-vue/src/components/dropdown/index.ts
@@ -8,12 +8,12 @@ import { CDropdownToggle } from './CDropdownToggle'
 
 const CDropdownPlugin = {
   install: (app: App): void => {
-    app.component(CDropdown.name, CDropdown)
-    app.component(CDropdownItem.name, CDropdownItem)
-    app.component(CDropdownHeader.name, CDropdownHeader)
-    app.component(CDropdownDivider.name, CDropdownDivider)
-    app.component(CDropdownMenu.name, CDropdownMenu)
-    app.component(CDropdownToggle.name, CDropdownToggle)
+    app.component(CDropdown.name as string, CDropdown)
+    app.component(CDropdownItem.name as string, CDropdownItem)
+    app.component(CDropdownHeader.name as string, CDropdownHeader)
+    app.component(CDropdownDivider.name as string, CDropdownDivider)
+    app.component(CDropdownMenu.name as string, CDropdownMenu)
+    app.component(CDropdownToggle.name as string, CDropdownToggle)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/dropdown/types.ts b/packages/coreui-vue/src/components/dropdown/types.ts
new file mode 100644
index 00000000..3c68889a
--- /dev/null
+++ b/packages/coreui-vue/src/components/dropdown/types.ts
@@ -0,0 +1,11 @@
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints
diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts
new file mode 100644
index 00000000..edddb0db
--- /dev/null
+++ b/packages/coreui-vue/src/components/dropdown/utils.ts
@@ -0,0 +1,73 @@
+import type { Placement } from '@popperjs/core'
+import type { Placements } from '../../types'
+import type { Alignments, Breakpoints } from './types'
+
+export const getAlignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    for (const key in alignment) {
+      classNames.push(
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+      )
+    }
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+
+  return classNames
+}
+
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export const getPlacement = (
+  placement: Placement,
+  direction: string | undefined,
+  alignment: Alignments | string | undefined,
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}
diff --git a/packages/coreui-vue/src/components/footer/index.ts b/packages/coreui-vue/src/components/footer/index.ts
index 3f64755a..8bd4edd4 100644
--- a/packages/coreui-vue/src/components/footer/index.ts
+++ b/packages/coreui-vue/src/components/footer/index.ts
@@ -3,7 +3,7 @@ import { CFooter } from './CFooter'
 
 const CFooterPlugin = {
   install: (app: App): void => {
-    app.component(CFooter.name, CFooter)
+    app.component(CFooter.name as string, CFooter)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts
index b6e3df51..fbdd26fd 100644
--- a/packages/coreui-vue/src/components/form/CFormCheck.ts
+++ b/packages/coreui-vue/src/components/form/CFormCheck.ts
@@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: Object,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.10.0
+     */
+    falseValue: String,
     /**
      * Provide valuable, actionable feedback.
      *
@@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: [Boolean, String],
+      type: [Array, Boolean, String],
       value: undefined,
     },
     /**
@@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
      * @since 4.3.0
      */
     tooltipFeedback: Boolean,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.10.0
+     */
+    trueValue: String,
     /**
      * Specifies the type of component.
      *
@@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
   ],
   setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
       emit('change', event)
-      emit('update:modelValue', (event.target as HTMLInputElement).value)
+
+      if (props.falseValue && props.trueValue) {
+        emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
+        return
+      }
+
+      if (props.value && Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(props.value)) {
+          emit(
+            'update:modelValue',
+            props.modelValue.filter((value) => value !== props.value),
+          )
+        } else {
+          emit('update:modelValue', [...props.modelValue, props.value])
+        }
+
+        return
+      }
+
+      if (props.value === undefined) {
+        emit('update:modelValue', target.checked)
+        return
+      }
+
+      if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
+        emit('update:modelValue', target.checked ? props.value : undefined)
+      }
     }
 
     const className = [
@@ -135,7 +174,17 @@ const CFormCheck = defineComponent({
       },
     ]
 
-    const isChecked = computed(() => props.modelValue == props.value)
+    const isChecked = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value)
+      }
+
+      if (typeof props.modelValue === 'string') {
+        return props.modelValue === props.value
+      }
+
+      return props.modelValue
+    })
 
     const formControl = () => {
       return h('input', {
@@ -155,7 +204,7 @@ const CFormCheck = defineComponent({
         ? h(
             CButton,
             {
-              component: 'label',
+              as: 'label',
               ...props.button,
               ...(props.id && { for: props.id }),
             },
@@ -187,26 +236,26 @@ const CFormCheck = defineComponent({
       props.button
         ? [formControl(), (slots.label || props.label) && formLabel(), formValidation()]
         : props.label
-        ? props.hitArea
-          ? [
-              h(
-                CFormLabel,
+          ? props.hitArea
+            ? [
+                h(
+                  CFormLabel,
+                  {
+                    customClassName: className,
+                    ...(props.id && { for: props.id }),
+                  },
+                  [formControl(), props.label],
+                ),
+                formValidation(),
+              ]
+            : h(
+                'div',
                 {
-                  customClassName: className,
-                  ...(props.id && { for: props.id }),
+                  class: className,
                 },
-                [formControl(), props.label],
-              ),
-              formValidation(),
-            ]
-          : h(
-              'div',
-              {
-                class: className,
-              },
-              [formControl(), props.label && formLabel(), formValidation()],
-            )
-        : formControl()
+                [formControl(), props.label && formLabel(), formValidation()],
+              )
+          : formControl()
   },
 })
 
diff --git a/packages/coreui-vue/src/components/form/CFormFeedback.ts b/packages/coreui-vue/src/components/form/CFormFeedback.ts
index 3a7d9a16..df4d496e 100644
--- a/packages/coreui-vue/src/components/form/CFormFeedback.ts
+++ b/packages/coreui-vue/src/components/form/CFormFeedback.ts
@@ -6,7 +6,7 @@ const CFormFeedback = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
@@ -26,7 +26,7 @@ const CFormFeedback = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             {
diff --git a/packages/coreui-vue/src/components/form/CFormSwitch.ts b/packages/coreui-vue/src/components/form/CFormSwitch.ts
index a1c54a1e..6b75cd36 100644
--- a/packages/coreui-vue/src/components/form/CFormSwitch.ts
+++ b/packages/coreui-vue/src/components/form/CFormSwitch.ts
@@ -94,6 +94,7 @@ const CFormSwitch = defineComponent({
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
               },
+              attrs.class,
             ],
             id: props.id,
             onChange: (event: InputEvent) => handleChange(event),
diff --git a/packages/coreui-vue/src/components/form/CFormText.ts b/packages/coreui-vue/src/components/form/CFormText.ts
index 13b47ada..5ed6b00c 100644
--- a/packages/coreui-vue/src/components/form/CFormText.ts
+++ b/packages/coreui-vue/src/components/form/CFormText.ts
@@ -6,13 +6,13 @@ const CFormText = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'form-text' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'form-text' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts
index 21fb3596..a953991d 100644
--- a/packages/coreui-vue/src/components/form/CFormTextarea.ts
+++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts
@@ -133,6 +133,7 @@ const CFormTextarea = defineComponent({
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
                   },
+                  attrs.class,
                 ],
                 onChange: (event: InputEvent) => handleChange(event),
                 onInput: (event: InputEvent) => handleInput(event),
diff --git a/packages/coreui-vue/src/components/form/CInputGroupText.ts b/packages/coreui-vue/src/components/form/CInputGroupText.ts
index 92717357..d44172a7 100644
--- a/packages/coreui-vue/src/components/form/CInputGroupText.ts
+++ b/packages/coreui-vue/src/components/form/CInputGroupText.ts
@@ -6,13 +6,13 @@ const CInputGroupText = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'span',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'input-group-text' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'input-group-text' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts
index 86349ea2..c1351c6c 100644
--- a/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts
+++ b/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
     invalid: true,
     tooltip: true,
     valid: true,
@@ -24,7 +24,7 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
     invalid: true,
     tooltip: false,
     valid: true,
diff --git a/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts
index 224ad547..16a5de47 100644
--- a/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts
+++ b/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'p',
+    as 'p',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts
index 2ba2af6d..48a39878 100644
--- a/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts
+++ b/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap
index c864ba71..80f6acce 100644
--- a/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap
+++ b/packages/coreui-vue/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`Customize with label - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class="form-check-input" type="checkbox">"`;
diff --git a/packages/coreui-vue/src/components/form/index.ts b/packages/coreui-vue/src/components/form/index.ts
index 583df8d7..6fa6fb5c 100644
--- a/packages/coreui-vue/src/components/form/index.ts
+++ b/packages/coreui-vue/src/components/form/index.ts
@@ -1,7 +1,6 @@
 import { App } from 'vue'
 import { CForm } from './CForm'
 import { CFormCheck } from './CFormCheck'
-// import { CFormControl } from './CFormControl'
 import { CFormFeedback } from './CFormFeedback'
 import { CFormFloating } from './CFormFloating'
 import { CFormInput } from './CFormInput'
@@ -16,20 +15,19 @@ import { CInputGroupText } from './CInputGroupText'
 
 const CFormPlugin = {
   install: (app: App): void => {
-    app.component(CForm.name, CForm)
-    app.component(CFormCheck.name, CFormCheck)
-    // app.component(CFormControl.name, CFormControl)
-    app.component(CFormFeedback.name, CFormFeedback)
-    app.component(CFormFloating.name, CFormFloating)
-    app.component(CFormInput.name, CFormInput)
-    app.component(CFormLabel.name, CFormLabel)
-    app.component(CFormRange.name, CFormRange)
-    app.component(CFormSelect.name, CFormSelect)
-    app.component(CFormSwitch.name, CFormSwitch)
-    app.component(CFormText.name, CFormText)
-    app.component(CFormTextarea.name, CFormTextarea)
-    app.component(CInputGroup.name, CInputGroup)
-    app.component(CInputGroupText.name, CInputGroupText)
+    app.component(CForm.name as string, CForm)
+    app.component(CFormCheck.name as string, CFormCheck)
+    app.component(CFormFeedback.name as string, CFormFeedback)
+    app.component(CFormFloating.name as string, CFormFloating)
+    app.component(CFormInput.name as string, CFormInput)
+    app.component(CFormLabel.name as string, CFormLabel)
+    app.component(CFormRange.name as string, CFormRange)
+    app.component(CFormSelect.name as string, CFormSelect)
+    app.component(CFormSwitch.name as string, CFormSwitch)
+    app.component(CFormText.name as string, CFormText)
+    app.component(CFormTextarea.name as string, CFormTextarea)
+    app.component(CInputGroup.name as string, CInputGroup)
+    app.component(CInputGroupText.name as string, CInputGroupText)
   },
 }
 
@@ -37,7 +35,6 @@ export {
   CFormPlugin,
   CForm,
   CFormCheck,
-  // CFormControl,
   CFormFeedback,
   CFormFloating,
   CFormInput,
diff --git a/packages/coreui-vue/src/components/grid/index.ts b/packages/coreui-vue/src/components/grid/index.ts
index 1af418a2..785efaac 100644
--- a/packages/coreui-vue/src/components/grid/index.ts
+++ b/packages/coreui-vue/src/components/grid/index.ts
@@ -5,9 +5,9 @@ import { CRow } from './CRow'
 
 const CGridPlugin = {
   install: (app: App): void => {
-    app.component(CCol.name, CCol)
-    app.component(CContainer.name, CContainer)
-    app.component(CRow.name, CRow)
+    app.component(CCol.name as string, CCol)
+    app.component(CContainer.name as string, CContainer)
+    app.component(CRow.name as string, CRow)
   },
 }
 export { CGridPlugin, CCol, CContainer, CRow }
diff --git a/packages/coreui-vue/src/components/header/CHeaderBrand.ts b/packages/coreui-vue/src/components/header/CHeaderBrand.ts
index 97ee9581..3f94fb86 100644
--- a/packages/coreui-vue/src/components/header/CHeaderBrand.ts
+++ b/packages/coreui-vue/src/components/header/CHeaderBrand.ts
@@ -6,13 +6,13 @@ const CHeaderBrand = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'header-brand' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'header-brand' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/header/CHeaderNav.ts b/packages/coreui-vue/src/components/header/CHeaderNav.ts
index 1fa1e7c7..e34277e0 100644
--- a/packages/coreui-vue/src/components/header/CHeaderNav.ts
+++ b/packages/coreui-vue/src/components/header/CHeaderNav.ts
@@ -6,7 +6,7 @@ const CHeaderNav = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'ul',
     },
@@ -14,7 +14,7 @@ const CHeaderNav = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'header-nav',
           role: 'navigation',
diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts
index 10df823a..391e1e0d 100644
--- a/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts
+++ b/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts
index 13867aaa..6564189f 100644
--- a/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts
+++ b/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/header/index.ts b/packages/coreui-vue/src/components/header/index.ts
index 3b8c7ddd..85c25975 100644
--- a/packages/coreui-vue/src/components/header/index.ts
+++ b/packages/coreui-vue/src/components/header/index.ts
@@ -8,12 +8,12 @@ import { CHeaderToggler } from './CHeaderToggler'
 
 const CHeaderPlugin = {
   install: (app: App): void => {
-    app.component(CHeader.name, CHeader)
-    app.component(CHeaderBrand.name, CHeaderBrand)
-    app.component(CHeaderDivider.name, CHeaderDivider)
-    app.component(CHeaderNav.name, CHeaderNav)
-    app.component(CHeaderText.name, CHeaderText)
-    app.component(CHeaderToggler.name, CHeaderToggler)
+    app.component(CHeader.name as string, CHeader)
+    app.component(CHeaderBrand.name as string, CHeaderBrand)
+    app.component(CHeaderDivider.name as string, CHeaderDivider)
+    app.component(CHeaderNav.name as string, CHeaderNav)
+    app.component(CHeaderText.name as string, CHeaderText)
+    app.component(CHeaderToggler.name as string, CHeaderToggler)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/image/index.ts b/packages/coreui-vue/src/components/image/index.ts
index 072142f4..cd4c69ae 100644
--- a/packages/coreui-vue/src/components/image/index.ts
+++ b/packages/coreui-vue/src/components/image/index.ts
@@ -3,7 +3,7 @@ import { CImage } from './CImage'
 
 const CImagePlugin = {
   install: (app: App): void => {
-    app.component(CImage.name, CImage)
+    app.component(CImage.name as string, CImage)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/index.ts b/packages/coreui-vue/src/components/index.ts
index 0d3dae9e..d11d5eb0 100644
--- a/packages/coreui-vue/src/components/index.ts
+++ b/packages/coreui-vue/src/components/index.ts
@@ -11,6 +11,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-teleport'
 export * from './dropdown'
 export * from './footer'
 export * from './form'
diff --git a/packages/coreui-vue/src/components/link/CLink.ts b/packages/coreui-vue/src/components/link/CLink.ts
index 63766e56..78369306 100644
--- a/packages/coreui-vue/src/components/link/CLink.ts
+++ b/packages/coreui-vue/src/components/link/CLink.ts
@@ -10,7 +10,7 @@ const CLink = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -30,17 +30,21 @@ const CLink = defineComponent({
     'click',
   ],
   setup(props, { slots, emit }) {
-    const handleClick = () => {
+    const handleClick = (event: Event) => {
       emit('click', props.href)
+
+      if (props.href === '' || props.href === '#') {
+        event.preventDefault()
+      }
     }
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [{ active: props.active, disabled: props.disabled }],
           ...(props.active && { 'aria-current': 'page' }),
-          ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
-          ...((props.component === 'a' || props.component === 'button') && {
+          ...(props.as === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+          ...((props.as === 'a' || props.as === 'button') && {
             onClick: handleClick,
           }),
           href: props.href,
diff --git a/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts b/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts
index f3c8c7dd..59a21a9c 100644
--- a/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts
+++ b/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts
@@ -15,7 +15,7 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
     href: '/bazinga',
   },
diff --git a/packages/coreui-vue/src/components/link/index.ts b/packages/coreui-vue/src/components/link/index.ts
index 4e45e441..04be72dd 100644
--- a/packages/coreui-vue/src/components/link/index.ts
+++ b/packages/coreui-vue/src/components/link/index.ts
@@ -3,7 +3,7 @@ import { CLink } from './CLink'
 
 const CCLinkPlugin = {
   install: (app: App): void => {
-    app.component(CLink.name, CLink)
+    app.component(CLink.name as string, CLink)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/list-group/CListGroup.ts b/packages/coreui-vue/src/components/list-group/CListGroup.ts
index 57003be4..9a565fe0 100644
--- a/packages/coreui-vue/src/components/list-group/CListGroup.ts
+++ b/packages/coreui-vue/src/components/list-group/CListGroup.ts
@@ -6,7 +6,7 @@ const CListGroup = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'ul',
     },
@@ -36,7 +36,7 @@ const CListGroup = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'list-group',
diff --git a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts b/packages/coreui-vue/src/components/list-group/CListGroupItem.ts
index 0342f1fe..204df42f 100644
--- a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts
+++ b/packages/coreui-vue/src/components/list-group/CListGroupItem.ts
@@ -9,6 +9,13 @@ const CListGroupItem = defineComponent({
      * Toggle the active state for the component.
      */
     active: Boolean,
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -19,29 +26,22 @@ const CListGroupItem = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'li',
-    },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'list-group-item',
             {
               [`list-group-item-${props.color}`]: props.color,
-              'list-group-item-action': props.component === 'a' || props.component === 'button',
+              'list-group-item-action': props.as === 'a' || props.as === 'button',
               [`active`]: props.active,
               [`disabled`]: props.disabled,
             },
           ],
-          ...((props.component === 'a' || props.component === 'button') && {
+          ...((props.as === 'a' || props.as === 'button') && {
             active: props.active,
             disabled: props.disabled,
           }),
diff --git a/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts b/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts
index 092d62c2..f80906c1 100644
--- a/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts
+++ b/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     flush: true,
     layout: 'horizontal-lg',
   },
diff --git a/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts b/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts
index 41e9def2..763880b5 100644
--- a/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts
+++ b/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts
@@ -13,9 +13,9 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
+    as: 'div',
     color: 'warning',
     disabled: true,
-    component: 'div',
   },
   slots: {
     default: 'Default slot',
@@ -24,8 +24,8 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
-    component: 'button',
     active: true,
+    as: 'button',
     disabled: true,
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/list-group/index.ts b/packages/coreui-vue/src/components/list-group/index.ts
index 3aaafb5b..d969a028 100644
--- a/packages/coreui-vue/src/components/list-group/index.ts
+++ b/packages/coreui-vue/src/components/list-group/index.ts
@@ -4,8 +4,8 @@ import { CListGroupItem } from './CListGroupItem'
 
 const CListGroupPlugin = {
   install: (app: App): void => {
-    app.component(CListGroup.name, CListGroup)
-    app.component(CListGroupItem.name, CListGroupItem)
+    app.component(CListGroup.name as string, CListGroup)
+    app.component(CListGroupItem.name as string, CListGroupItem)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts
index ff9805a8..78a238b9 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -51,6 +51,15 @@ const CModal = defineComponent({
      * A string of all className you want applied to the modal content component.
      */
     contentClassName: String,
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v5.0.0
+     */
+    focus: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Set modal to covers the entire user viewport
      *
@@ -124,6 +133,7 @@ const CModal = defineComponent({
     'show',
   ],
   setup(props, { slots, attrs, emit }) {
+    const activeElementRef = ref()
     const modalRef = ref()
     const modalContentRef = ref()
     const visible = ref(props.visible)
@@ -136,6 +146,7 @@ const CModal = defineComponent({
     )
 
     const handleEnter = (el: RendererElement, done: () => void) => {
+      activeElementRef.value = document.activeElement as HTMLElement | null
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
       document.body.style.overflow = 'hidden'
@@ -148,6 +159,7 @@ const CModal = defineComponent({
     }
 
     const handleAfterEnter = () => {
+      props.focus && modalRef.value?.focus()
       window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
@@ -166,6 +178,7 @@ const CModal = defineComponent({
     }
 
     const handleAfterLeave = (el: RendererElement) => {
+      activeElementRef.value?.focus()
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.style.display = 'none'
@@ -217,6 +230,7 @@ const CModal = defineComponent({
       h(
         'div',
         {
+          ...attrs,
           class: [
             'modal',
             {
@@ -224,6 +238,7 @@ const CModal = defineComponent({
             },
             attrs.class,
           ],
+          ...(visible.value ? { 'aria-modal': true, role: 'dialog' } : { 'aria-hidden': 'true' }),
           ref: modalRef,
         },
         h(
@@ -240,7 +255,6 @@ const CModal = defineComponent({
                 [`modal-${props.size}`]: props.size,
               },
             ],
-            role: 'dialog',
           },
           h(
             'div',
diff --git a/packages/coreui-vue/src/components/modal/CModalTitle.ts b/packages/coreui-vue/src/components/modal/CModalTitle.ts
index ea970c09..a845f68c 100644
--- a/packages/coreui-vue/src/components/modal/CModalTitle.ts
+++ b/packages/coreui-vue/src/components/modal/CModalTitle.ts
@@ -6,13 +6,13 @@ const CModalTitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h5',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'modal-title' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'modal-title' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts b/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts
index 28df672b..387f355d 100644
--- a/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts
+++ b/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap
index 81cb267c..b818db63 100644
--- a/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap
+++ b/packages/coreui-vue/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Customize CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal">
-    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg" role="dialog">
+  <div class="modal" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg">
       <div class="modal-content bazinga">Default slot</div>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Customize CModal component renders correctly 1`] = `
 
 exports[`Loads and display CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal fade">
-    <div class="modal-dialog modal-fullscreen" role="dialog">
+  <div class="modal fade" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">Default slot</div>
     </div>
   </div>
diff --git a/packages/coreui-vue/src/components/modal/index.ts b/packages/coreui-vue/src/components/modal/index.ts
index 7e1c8e6b..4ebad336 100644
--- a/packages/coreui-vue/src/components/modal/index.ts
+++ b/packages/coreui-vue/src/components/modal/index.ts
@@ -7,11 +7,11 @@ import { CModalTitle } from './CModalTitle'
 
 const CModalPlugin = {
   install: (app: App): void => {
-    app.component(CModal.name, CModal)
-    app.component(CModalBody.name, CModalBody)
-    app.component(CModalFooter.name, CModalFooter)
-    app.component(CModalHeader.name, CModalHeader)
-    app.component(CModalTitle.name, CModalTitle)
+    app.component(CModal.name as string, CModal)
+    app.component(CModalBody.name as string, CModalBody)
+    app.component(CModalFooter.name as string, CModalFooter)
+    app.component(CModalHeader.name as string, CModalHeader)
+    app.component(CModalTitle.name as string, CModalTitle)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/nav/CNav.ts b/packages/coreui-vue/src/components/nav/CNav.ts
index add7ef70..922603e9 100644
--- a/packages/coreui-vue/src/components/nav/CNav.ts
+++ b/packages/coreui-vue/src/components/nav/CNav.ts
@@ -6,7 +6,7 @@ const CNav = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'ul',
     },
@@ -24,19 +24,19 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'tabs', 'pills'
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['tabs', 'pills'].includes(value)
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'nav',
diff --git a/packages/coreui-vue/src/components/nav/CNavGroup.ts b/packages/coreui-vue/src/components/nav/CNavGroup.ts
index a0e8815f..2c83ccdf 100644
--- a/packages/coreui-vue/src/components/nav/CNavGroup.ts
+++ b/packages/coreui-vue/src/components/nav/CNavGroup.ts
@@ -5,6 +5,13 @@ import { executeAfterTransition } from '../../utils/transition'
 const CNavGroup = defineComponent({
   name: 'CNavGroup',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
     /**
      * Make nav group more compact by cutting all `padding` in half.
      */
@@ -93,7 +100,7 @@ const CNavGroup = defineComponent({
 
     return () =>
       h(
-        'li',
+        props.as,
         {
           class: 'nav-group',
           ref: navGroupRef,
@@ -123,7 +130,7 @@ const CNavGroup = defineComponent({
               default: () =>
                 visible.value &&
                 h(
-                  'ul',
+                  props.as === 'div' ? 'div' : 'ul',
                   {
                     class: [
                       'nav-group-items',
diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 19462bda..3ed139c7 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -6,12 +6,20 @@ const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
     ...CNavLink.props,
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        'li',
+        props.as,
         {
+          as: props.component,
           class: 'nav-item',
         },
         props.href
@@ -19,7 +27,6 @@ const CNavItem = defineComponent({
               CNavLink,
               {
                 active: props.active,
-                component: props.component,
                 disabled: props.disabled,
                 href: props.href,
               },
diff --git a/packages/coreui-vue/src/components/nav/CNavLink.ts b/packages/coreui-vue/src/components/nav/CNavLink.ts
index db5c183d..63c2af94 100644
--- a/packages/coreui-vue/src/components/nav/CNavLink.ts
+++ b/packages/coreui-vue/src/components/nav/CNavLink.ts
@@ -12,7 +12,7 @@ const CNavLink = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -30,9 +30,9 @@ const CNavLink = defineComponent({
       h(
         CLink,
         {
-          class: 'nav-link',
+          as: props.as,
           active: props.active,
-          component: props.component,
+          class: 'nav-link',
           disabled: props.disabled,
           href: props.href,
         },
diff --git a/packages/coreui-vue/src/components/nav/CNavTitle.ts b/packages/coreui-vue/src/components/nav/CNavTitle.ts
index c1a22227..6a808a42 100644
--- a/packages/coreui-vue/src/components/nav/CNavTitle.ts
+++ b/packages/coreui-vue/src/components/nav/CNavTitle.ts
@@ -2,8 +2,17 @@ import { defineComponent, h } from 'vue'
 
 const CNavTitle = defineComponent({
   name: 'CNavTitle',
-  setup(_, { slots }) {
-    return () => h('li', { class: 'nav-title' }, slots.default && slots.default())
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
+  },
+  setup(props, { slots }) {
+    return () => h(props.as, { class: 'nav-title' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts
index 59ea597d..7b94d89b 100644
--- a/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts
+++ b/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     layout: 'fill',
     variant: 'pills',
   },
diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts
index f7bee164..fc24c1c2 100644
--- a/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts
+++ b/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts
@@ -14,7 +14,7 @@ const customWrapper = mount(Component, {
   propsData: {
     href: '/bazinga',
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts
index 9b334d44..0220a67c 100644
--- a/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts
+++ b/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts
@@ -14,7 +14,7 @@ const customWrapper = mount(Component, {
   propsData: {
     href: '/bazinga',
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/nav/index.ts b/packages/coreui-vue/src/components/nav/index.ts
index d8796b1e..d38a6cfd 100644
--- a/packages/coreui-vue/src/components/nav/index.ts
+++ b/packages/coreui-vue/src/components/nav/index.ts
@@ -8,12 +8,12 @@ import { CNavTitle } from './CNavTitle'
 
 const CNavPlugin = {
   install: (app: App): void => {
-    app.component(CNav.name, CNav)
-    app.component(CNavGroup.name, CNavGroup)
-    app.component(CNavGroupItems.name, CNavGroupItems)
-    app.component(CNavItem.name, CNavItem)
-    app.component(CNavLink.name, CNavLink)
-    app.component(CNavTitle.name, CNavTitle)
+    app.component(CNav.name as string, CNav)
+    app.component(CNavGroup.name as string, CNavGroup)
+    app.component(CNavGroupItems.name as string, CNavGroupItems)
+    app.component(CNavItem.name as string, CNavItem)
+    app.component(CNavLink.name as string, CNavLink)
+    app.component(CNavTitle.name as string, CNavTitle)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/navbar/CNavbar.ts b/packages/coreui-vue/src/components/navbar/CNavbar.ts
index a58486b8..ec6f4991 100644
--- a/packages/coreui-vue/src/components/navbar/CNavbar.ts
+++ b/packages/coreui-vue/src/components/navbar/CNavbar.ts
@@ -5,6 +5,13 @@ import { Color } from '../../props'
 const CNavbar = defineComponent({
   name: 'CNavbar',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'nav',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -22,13 +29,6 @@ const CNavbar = defineComponent({
         return ['dark', 'light'].includes(value)
       },
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'nav',
-    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -68,19 +68,19 @@ const CNavbar = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'navbar',
             {
               [`bg-${props.color}`]: props.color,
-              [`navbar-${props.colorScheme}`]: props.colorScheme,
               [typeof props.expand === 'boolean'
                 ? 'navbar-expand'
                 : `navbar-expand-${props.expand}`]: props.expand,
             },
             props.placement,
           ],
+          ...(props.colorScheme && { 'data-coreui-theme': props.colorScheme }),
         },
         props.container
           ? h(
diff --git a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts
index bd8e5211..25a50b93 100644
--- a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts
+++ b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts
@@ -7,7 +7,7 @@ const CNavbarBrand = defineComponent({
      * Component used for the root node. Either a string to use a HTML element or a component.
      *
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -19,7 +19,7 @@ const CNavbarBrand = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component ?? (props.href ? 'a' : 'span'),
+        props.as ?? (props.href ? 'a' : 'span'),
         {
           class: 'navbar-brand',
           href: props.href,
diff --git a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts
index 7a36931f..338882e1 100644
--- a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts
+++ b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts
@@ -6,7 +6,7 @@ const CNavbarNav = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'ul',
     },
@@ -14,7 +14,7 @@ const CNavbarNav = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'navbar-nav',
           role: 'navigation',
diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts
index aa081f28..6c533fb4 100644
--- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts
+++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts
@@ -12,9 +12,9 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
+    as: 'div',
     color: 'warning',
     colorScheme: 'light',
-    component: 'div',
     container: 'lg',
     expand: 'xl',
     placement: 'fixed-bottom',
diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts
index f4b1c5d1..8f9b1b7e 100644
--- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts
+++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     href: '/bazinga',
   },
   slots: {
diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts
index 74db8a76..3c51ea8c 100644
--- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts
+++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap
index ff0e3509..8c12255a 100644
--- a/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap
+++ b/packages/coreui-vue/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavbar component renders correctly 1`] = `
-"<div class="navbar bg-warning navbar-light navbar-expand-xl fixed-bottom">
+"<div class="navbar bg-warning navbar-expand-xl fixed-bottom" data-coreui-theme="light">
   <div class="container-lg">Default slot</div>
 </div>"
 `;
diff --git a/packages/coreui-vue/src/components/navbar/index.ts b/packages/coreui-vue/src/components/navbar/index.ts
index b857b0f9..c466c871 100644
--- a/packages/coreui-vue/src/components/navbar/index.ts
+++ b/packages/coreui-vue/src/components/navbar/index.ts
@@ -7,11 +7,11 @@ import { CNavbarToggler } from './CNavbarToggler'
 
 const CNavbarPlugin = {
   install: (app: App): void => {
-    app.component(CNavbar.name, CNavbar)
-    app.component(CNavbarBrand.name, CNavbarBrand)
-    app.component(CNavbarNav.name, CNavbarNav)
-    app.component(CNavbarText.name, CNavbarText)
-    app.component(CNavbarToggler.name, CNavbarToggler)
+    app.component(CNavbar.name as string, CNavbar)
+    app.component(CNavbarBrand.name as string, CNavbarBrand)
+    app.component(CNavbarNav.name as string, CNavbarNav)
+    app.component(CNavbarText.name as string, CNavbarText)
+    app.component(CNavbarToggler.name as string, CNavbarToggler)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts
index 8f3a70b2..5377fa72 100644
--- a/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts
+++ b/packages/coreui-vue/src/components/offcanvas/COffcanvas.ts
@@ -7,6 +7,7 @@ import { executeAfterTransition } from '../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a backdrop on body while offcanvas is open.
@@ -26,6 +27,10 @@ const COffcanvas = defineComponent({
         return false
       },
     },
+    /**
+     * Sets a darker color scheme.
+     */
+    dark: Boolean,
     /**
      * Closes the offcanvas when escape key is pressed.
      */
@@ -90,7 +95,7 @@ const COffcanvas = defineComponent({
      */
     'show',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { attrs, emit, slots }) {
     const offcanvasRef = ref()
     const visible = ref(props.visible)
 
@@ -159,6 +164,7 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          appear: visible.value,
           css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
@@ -170,6 +176,7 @@ const COffcanvas = defineComponent({
             h(
               'div',
               {
+                ...attrs,
                 class: [
                   {
                     [`offcanvas${
@@ -177,11 +184,13 @@ const COffcanvas = defineComponent({
                     }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },
+                  attrs.class,
                 ],
                 onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
                 ref: offcanvasRef,
                 role: 'dialog',
                 tabindex: -1,
+                ...(props.dark && { 'data-coreui-theme': 'dark' }),
               },
               slots.default && slots.default(),
             ),
diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts
index 0ea9f496..6a1cc18e 100644
--- a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts
+++ b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts
@@ -6,13 +6,13 @@ const COffcanvasTitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h5',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'offcanvas-title' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'offcanvas-title' }, slots.default && slots.default())
   },
 })
 
diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts
index c41d76eb..7e27792f 100644
--- a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts
+++ b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap
index d74a3bcb..c05805a4 100644
--- a/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap
+++ b/packages/coreui-vue/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-bottom" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
@@ -10,7 +10,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 `;
 
 exports[`Loads and display COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-end" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
diff --git a/packages/coreui-vue/src/components/offcanvas/index.ts b/packages/coreui-vue/src/components/offcanvas/index.ts
index cad1d0d3..28572037 100644
--- a/packages/coreui-vue/src/components/offcanvas/index.ts
+++ b/packages/coreui-vue/src/components/offcanvas/index.ts
@@ -6,10 +6,10 @@ import { COffcanvasTitle } from './COffcanvasTitle'
 
 const COffcanvasPlugin = {
   install: (app: App): void => {
-    app.component(COffcanvas.name, COffcanvas)
-    app.component(COffcanvasBody.name, COffcanvasBody)
-    app.component(COffcanvasHeader.name, COffcanvasHeader)
-    app.component(COffcanvasTitle.name, COffcanvasTitle)
+    app.component(COffcanvas.name as string, COffcanvas)
+    app.component(COffcanvasBody.name as string, COffcanvasBody)
+    app.component(COffcanvasHeader.name as string, COffcanvasHeader)
+    app.component(COffcanvasTitle.name as string, COffcanvasTitle)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
index 92475524..c4085a9a 100644
--- a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
+++ b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
@@ -12,7 +12,7 @@ const CPaginationItem = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: String,
+    as: String,
     /**
      * Toggle the disabled state for the component.
      */
@@ -24,7 +24,7 @@ const CPaginationItem = defineComponent({
   },
   setup(props, { slots }) {
     return () => {
-      const component = props.component ?? (props.active ? 'span' : 'a')
+      const component = props.as ?? (props.active ? 'span' : 'a')
       return h(
         'li',
         {
@@ -41,8 +41,8 @@ const CPaginationItem = defineComponent({
           ? h(
               CLink,
               {
+                as: component,
                 class: ['page-link'],
-                component: component,
                 href: props.href,
               },
               {
diff --git a/packages/coreui-vue/src/components/pagination/index.ts b/packages/coreui-vue/src/components/pagination/index.ts
index 307d0534..8c7d5e7c 100644
--- a/packages/coreui-vue/src/components/pagination/index.ts
+++ b/packages/coreui-vue/src/components/pagination/index.ts
@@ -4,8 +4,8 @@ import { CPaginationItem } from './CPaginationItem'
 
 const CPaginationPlugin = {
   install: (app: App): void => {
-    app.component(CPagination.name, CPagination)
-    app.component(CPaginationItem.name, CPaginationItem)
+    app.component(CPagination.name as string, CPagination)
+    app.component(CPaginationItem.name as string, CPaginationItem)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts
index 99b69a20..9217bf91 100644
--- a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts
+++ b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts
@@ -25,19 +25,19 @@ export const CPlaceholder = defineComponent({
         return ['glow', 'wave'].includes(value)
       },
     },
-    /**
-     * Sets the color context of the component to one of CoreUI’s themed colors.
-     *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-     */
-    color: Color,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'span',
     },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Size the component extra small, small, or large.
      *
@@ -93,7 +93,7 @@ export const CPlaceholder = defineComponent({
 
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             props.animation ? `placeholder-${props.animation}` : 'placeholder',
diff --git a/packages/coreui-vue/src/components/placeholder/index.ts b/packages/coreui-vue/src/components/placeholder/index.ts
index 39369fc1..87038824 100644
--- a/packages/coreui-vue/src/components/placeholder/index.ts
+++ b/packages/coreui-vue/src/components/placeholder/index.ts
@@ -3,7 +3,7 @@ import { CPlaceholder } from './CPlaceholder'
 
 const CPlaceholderPlugin = {
   install: (app: App): void => {
-    app.component(CPlaceholder.name, CPlaceholder)
+    app.component(CPlaceholder.name as string, CPlaceholder)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 1c43742a..a39aea63 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -1,23 +1,34 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getUID } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the popover.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     animation: {
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -25,7 +36,7 @@ const CPopover = defineComponent({
     /**
      * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     delay: {
       type: [Number, Object] as PropType<number | { show: number; hide: number }>,
@@ -34,7 +45,7 @@ const CPopover = defineComponent({
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     fallbackPlacements: {
       type: [String, Array] as PropType<Placements | Placements[]>,
@@ -106,6 +117,7 @@ const CPopover = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
+    const uID = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
 
@@ -136,6 +148,10 @@ const CPopover = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    onMounted(() => {
+      uID.value = getUID('popover')
+    })
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -168,56 +184,63 @@ const CPopover = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'popover',
-                  'bs-popover-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    ...attrs,
+                    class: [
+                      'popover',
+                      'bs-popover-auto',
+                      {
+                        fade: props.animation,
+                      },
+                      attrs.class,
+                    ],
+                    id: uID.value,
+                    ref: popoverRef,
+                    role: 'tooltip',
                   },
-                ],
-                ref: popoverRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'popover-arrow' }),
-                (props.title || slots.title) &&
-                  h(
-                    'div',
-                    { class: 'popover-header' },
-                    {
-                      default: () => (slots.title && slots.title()) || props.title,
-                    },
-                  ),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'popover-body' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'popover-arrow' }),
+                    (props.title || slots.title) &&
+                      h(
+                        'div',
+                        { class: 'popover-header' },
+                        {
+                          default: () => (slots.title && slots.title()) || props.title,
+                        },
+                      ),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'popover-body' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({
+          id: visible.value ? uID.value : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),
diff --git a/packages/coreui-vue/src/components/popover/index.ts b/packages/coreui-vue/src/components/popover/index.ts
index 58eaee32..261dae00 100644
--- a/packages/coreui-vue/src/components/popover/index.ts
+++ b/packages/coreui-vue/src/components/popover/index.ts
@@ -3,7 +3,7 @@ import { CPopover } from './CPopover'
 
 const CPopoverPlugin = {
   install: (app: App): void => {
-    app.component(CPopover.name, CPopover)
+    app.component(CPopover.name as string, CPopover)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts
index 66a9c84f..03c39ed3 100644
--- a/packages/coreui-vue/src/components/progress/CProgress.ts
+++ b/packages/coreui-vue/src/components/progress/CProgress.ts
@@ -1,25 +1,61 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { CProgressBar } from './CProgressBar'
+import { Color } from '../../props'
 
 const CProgress = defineComponent({
   name: 'CProgress',
   props: {
+    /**
+     * Use to animate the stripes right to left via CSS3 animations.
+     */
+    animated: Boolean,
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
      */
     height: Number,
+    /**
+     * A string of all className you want applied to the <CProgressBar/> component.
+     *
+     * @since 5.0.0
+     */
+    progressBarClassName: String,
     /**
      * Makes progress bar thinner.
      */
     thin: Boolean,
+    /**
+     * The percent to progress the ProgressBar.
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * Set the progress bar variant to optional striped.
+     *
+     * @values 'striped'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return value === 'striped'
+      },
+    },
     /**
      * Change the default color to white.
      */
     white: Boolean,
-    ...CProgressBar.props,
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -31,20 +67,42 @@ const CProgress = defineComponent({
               'progress-white': props.white,
             },
           ],
-          ...(props.height, { style: `height: ${props.height}px` }),
+          style: {
+            ...(props.height ? { height: `${props.height}px` } : {}),
+            ...(stacked ? { width: `${props.value}%` } : {}),
+          },
+          ...(props.value !== undefined && {
+            role: 'progressbar',
+            'aria-valuenow': props.value,
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+          }),
         },
-        props.value
-          ? h(
+        // @ts-expect-error name is defined in component
+        slots.default && slots.default().some((vnode) => vnode.type.name === 'CProgressBar')
+          ? slots.default().map((vnode) => {
+              // @ts-expect-error name is defined in component
+              if (vnode.type.name === 'CProgressBar') {
+                return h(vnode, {
+                  ...(props.animated && { animated: props.animated }),
+                  ...(props.color && { color: props.color }),
+                  ...(props.value && { value: props.value }),
+                  ...(props.variant && { variant: props.variant }),
+                })
+              }
+              return vnode
+            })
+          : h(
               CProgressBar,
               {
-                value: props.value,
+                ...(props.progressBarClassName && { class: props.progressBarClassName }),
                 animated: props.animated,
                 color: props.color,
+                value: props.value,
                 variant: props.variant,
               },
-              slots.default && slots.default(),
-            )
-          : slots.default && slots.default(),
+              () => slots.default && slots.default(),
+            ),
       )
   },
 })
diff --git a/packages/coreui-vue/src/components/progress/CProgressBar.ts b/packages/coreui-vue/src/components/progress/CProgressBar.ts
index 2463c25c..a483cbde 100644
--- a/packages/coreui-vue/src/components/progress/CProgressBar.ts
+++ b/packages/coreui-vue/src/components/progress/CProgressBar.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { Color } from '../../props'
 
@@ -35,6 +35,8 @@ const CProgressBar = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -47,11 +49,7 @@ const CProgressBar = defineComponent({
               ['progress-bar-animated']: props.animated,
             },
           ],
-          role: 'progressbar',
-          style: `width: ${props.value}%`,
-          'aria-valuenow': props.value,
-          'aria-valuemin': '0',
-          'aria-valuemax': '100',
+          ...(!stacked && { style: { width: `${props.value}%` } }),
         },
         slots.default && slots.default(),
       )
diff --git a/packages/coreui-vue/src/components/progress/CProgressStacked.ts b/packages/coreui-vue/src/components/progress/CProgressStacked.ts
new file mode 100644
index 00000000..efa48cca
--- /dev/null
+++ b/packages/coreui-vue/src/components/progress/CProgressStacked.ts
@@ -0,0 +1,19 @@
+import { defineComponent, h, provide } from 'vue'
+
+const CProgressStacked = defineComponent({
+  name: 'CProgressStacked',
+  props: {},
+  setup(_, { slots }) {
+    provide('stacked', true)
+    return () =>
+      h(
+        'div',
+        {
+          class: 'progress-stacked',
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CProgressStacked }
diff --git a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap
index bb820197..d4477a07 100644
--- a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap
+++ b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgress component renders correctly 1`] = `"<div class="progress progress-thin progress-white" style="height: 100px;">Default slot</div>"`;
+exports[`Customize CProgress component renders correctly 1`] = `
+"<div class="progress progress-thin progress-white" style="height: 100px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;
 
-exports[`Loads and display CProgress component renders correctly 1`] = `"<div class="progress" style="">Default slot</div>"`;
+exports[`Loads and display CProgress component renders correctly 1`] = `
+"<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;
diff --git a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap
index c4daea91..f5e81a11 100644
--- a/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap
+++ b/packages/coreui-vue/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 75%;">Default slot</div>"`;
 
-exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>"`;
diff --git a/packages/coreui-vue/src/components/progress/index.ts b/packages/coreui-vue/src/components/progress/index.ts
index ca04166e..ae6fabfc 100644
--- a/packages/coreui-vue/src/components/progress/index.ts
+++ b/packages/coreui-vue/src/components/progress/index.ts
@@ -1,12 +1,14 @@
 import { App } from 'vue'
 import { CProgress } from './CProgress'
 import { CProgressBar } from './CProgressBar'
+import { CProgressStacked } from './CProgressStacked'
 
 const CProgressPlugin = {
   install: (app: App): void => {
-    app.component(CProgress.name, CProgress)
-    app.component(CProgressBar.name, CProgressBar)
+    app.component(CProgress.name as string, CProgress)
+    app.component(CProgressBar.name as string, CProgressBar)
+    app.component(CProgressStacked.name as string, CProgressStacked)
   },
 }
 
-export { CProgressPlugin, CProgress, CProgressBar }
+export { CProgressPlugin, CProgress, CProgressBar, CProgressStacked }
diff --git a/packages/coreui-vue/src/components/sidebar/CSidebar.ts b/packages/coreui-vue/src/components/sidebar/CSidebar.ts
index 9dc69b52..64a5ef73 100644
--- a/packages/coreui-vue/src/components/sidebar/CSidebar.ts
+++ b/packages/coreui-vue/src/components/sidebar/CSidebar.ts
@@ -14,6 +14,18 @@ const isOnMobile = (element: HTMLDivElement) => {
 const CSidebar = defineComponent({
   name: 'CSidebar',
   props: {
+    /**
+     * Sets if the color of text should be colored for a light or dark dark background.
+     *
+     * @values 'dark', light'
+     */
+    colorScheme: {
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        return ['dark', 'light'].includes(value)
+      },
+    },
     /**
      * Make sidebar narrow.
      */
@@ -22,6 +34,17 @@ const CSidebar = defineComponent({
      * Set sidebar to overlaid variant.
      */
     overlaid: Boolean,
+    /**
+     * Components placement, there’s no default placement.
+     * @values 'start', 'end'
+     */
+    placement: {
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        return ['start', 'end'].includes(value)
+      },
+    },
     /**
      * Place sidebar in non-static positions.
      */
@@ -47,7 +70,10 @@ const CSidebar = defineComponent({
     /**
      * Toggle the visibility of sidebar component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: [
     /**
@@ -64,10 +90,14 @@ const CSidebar = defineComponent({
     'visible-change',
   ],
   setup(props, { attrs, slots, emit }) {
-    const mobile = ref()
-    const inViewport = ref()
     const sidebarRef = ref()
-    const visible = ref(props.visible)
+
+    const inViewport = ref()
+    const mobile = ref()
+    const visibleMobile = ref(false)
+    const visibleDesktop = ref(
+      props.visible === undefined ? (props.overlaid ? false : true) : props.visible,
+    )
 
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
@@ -76,11 +106,14 @@ const CSidebar = defineComponent({
 
     watch(
       () => props.visible,
-      () => (visible.value = props.visible),
+      () => props.visible !== undefined && handleVisibleChange(props.visible),
     )
 
     watch(mobile, () => {
-      if (mobile.value && visible.value) visible.value = false
+      if (mobile.value) {
+        console.log('mobile')
+        visibleMobile.value = false
+      }
     })
 
     onMounted(() => {
@@ -109,8 +142,17 @@ const CSidebar = defineComponent({
       })
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile.value) {
+        visibleMobile.value = visible
+        return
+      }
+
+      visibleDesktop.value = visible
+    }
+
     const handleHide = () => {
-      visible.value = false
+      handleVisibleChange(false)
       emit('visible-change', false)
     }
 
@@ -146,13 +188,16 @@ const CSidebar = defineComponent({
           class: [
             'sidebar',
             {
+              [`sidebar-${props.colorScheme}`]: props.colorScheme,
               'sidebar-narrow': props.narrow,
               'sidebar-overlaid': props.overlaid,
+              [`sidebar-${props.placement}`]: props.placement,
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: visible.value === true && mobile.value,
-              hide: visible.value === false && !mobile.value,
+              show:
+                (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,
           ],
@@ -162,8 +207,8 @@ const CSidebar = defineComponent({
       ),
       mobile.value &&
         h(CBackdrop, {
-          class: 'sidebar-backdrop d-none',
-          visible: props.visible,
+          class: 'sidebar-backdrop',
+          visible: visibleMobile.value,
           onClick: () => handleHide(),
         }),
     ]
diff --git a/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts b/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts
index b6327134..d58b5803 100644
--- a/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts
+++ b/packages/coreui-vue/src/components/sidebar/CSidebarBrand.ts
@@ -2,8 +2,27 @@ import { defineComponent, h } from 'vue'
 
 const CSidebarBrand = defineComponent({
   name: 'CSidebarBrand',
-  setup(_, { slots }) {
-    return () => h('div', { class: 'sidebar-brand' }, slots.default && slots.default())
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     *
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
+    /**
+     * The href attribute specifies the URL of the page the link goes to.
+     */
+    href: String,
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        props.as ?? (props.href ? 'a' : 'div'),
+        { class: 'sidebar-brand', href: props.href },
+        slots.default && slots.default(),
+      )
   },
 })
 
diff --git a/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts b/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts
index 2b645744..daea06af 100644
--- a/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts
+++ b/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts
@@ -1,8 +1,17 @@
-import { defineComponent, h, ref } from 'vue'
+import { Component, defineComponent, h, ref, PropType } from 'vue'
 
 const CSidebarNav = defineComponent({
   name: 'CSidebarNav',
-  setup(_, { slots }) {
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: [Object, String] as PropType<string | Component>,
+      default: 'ul',
+    },
+  },
+  setup(props, { slots }) {
     const visibleGroup = ref()
 
     const handleVisibleChange = (visible: boolean, index: number) => {
@@ -19,21 +28,24 @@ const CSidebarNav = defineComponent({
 
     return () =>
       h(
-        'ul',
+        props.as,
         {
           class: 'sidebar-nav',
         },
-        slots.default &&
-          slots.default().map((vnode, index) => {
-            // @ts-expect-error name is defined in component
-            if (vnode.type.name === 'CNavGroup') {
-              return h(vnode, {
-                onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1),
-                ...(visibleGroup.value && { visible: isVisible(index + 1) }),
-              })
-            }
-            return vnode
-          }),
+        {
+          default: () =>
+            slots.default &&
+            slots.default().map((vnode, index) => {
+              // @ts-expect-error name is defined in component
+              if (vnode.type.name === 'CNavGroup') {
+                return h(vnode, {
+                  onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1),
+                  ...(visibleGroup.value && { visible: isVisible(index + 1) }),
+                })
+              }
+              return vnode
+            }),
+        },
       )
   },
 })
diff --git a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap
index cffd8e68..15a3cec4 100644
--- a/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap
+++ b/packages/coreui-vue/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable">Default slot</div>"`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable show">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar hide">Default slot</div>"`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar">Default slot</div>"`;
diff --git a/packages/coreui-vue/src/components/sidebar/index.ts b/packages/coreui-vue/src/components/sidebar/index.ts
index ec0e1826..11dd0095 100644
--- a/packages/coreui-vue/src/components/sidebar/index.ts
+++ b/packages/coreui-vue/src/components/sidebar/index.ts
@@ -8,12 +8,12 @@ import { CSidebarToggler } from './CSidebarToggler'
 
 const CSidebarPlugin = {
   install: (app: App): void => {
-    app.component(CSidebar.name, CSidebar)
-    app.component(CSidebarBrand.name, CSidebarBrand)
-    app.component(CSidebarFooter.name, CSidebarFooter)
-    app.component(CSidebarHeader.name, CSidebarHeader)
-    app.component(CSidebarNav.name, CSidebarNav)
-    app.component(CSidebarToggler.name, CSidebarToggler)
+    app.component(CSidebar.name as string, CSidebar)
+    app.component(CSidebarBrand.name as string, CSidebarBrand)
+    app.component(CSidebarFooter.name as string, CSidebarFooter)
+    app.component(CSidebarHeader.name as string, CSidebarHeader)
+    app.component(CSidebarNav.name as string, CSidebarNav)
+    app.component(CSidebarToggler.name as string, CSidebarToggler)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/spinner/CSpinner.ts b/packages/coreui-vue/src/components/spinner/CSpinner.ts
index f773d422..1e4f0f26 100644
--- a/packages/coreui-vue/src/components/spinner/CSpinner.ts
+++ b/packages/coreui-vue/src/components/spinner/CSpinner.ts
@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CSpinner = defineComponent({
   name: 'CSpinner',
   props: {
+        /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+        as: {
+          type: String,
+          default: 'div',
+        },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -23,13 +30,6 @@ const CSpinner = defineComponent({
         ].includes(value)
       },
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'div',
-    },
     /**
      * Size the component small.
      *
@@ -64,7 +64,7 @@ const CSpinner = defineComponent({
   setup(props) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             `spinner-${props.variant}`,
diff --git a/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts b/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts
index 0f1ec0a9..f007df07 100644
--- a/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts
+++ b/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts
@@ -12,8 +12,8 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
+    as: 'h4',
     color: 'warning',
-    component: 'h4',
     size: 'sm',
     variant: 'grow',
     visuallyHiddenLabel: 'visuallyHiddenLabel',
diff --git a/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap b/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap
index f1d49397..2147b3ac 100644
--- a/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap
+++ b/packages/coreui-vue/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow text-warning spinner-grow-sm" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
+exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow spinner-grow-sm text-warning" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
 
-exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border text-undefined" role="status"><span class="visually-hidden">Loading...</span></div>"`;
+exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>"`;
diff --git a/packages/coreui-vue/src/components/spinner/index.ts b/packages/coreui-vue/src/components/spinner/index.ts
index f1b76dda..8bcffb6d 100644
--- a/packages/coreui-vue/src/components/spinner/index.ts
+++ b/packages/coreui-vue/src/components/spinner/index.ts
@@ -3,7 +3,7 @@ import { CSpinner } from './CSpinner'
 
 const CSpinnerPlugin = {
   install: (app: App): void => {
-    app.component(CSpinner.name, CSpinner)
+    app.component(CSpinner.name as string, CSpinner)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/table/index.ts b/packages/coreui-vue/src/components/table/index.ts
index 9bdba307..96b44727 100644
--- a/packages/coreui-vue/src/components/table/index.ts
+++ b/packages/coreui-vue/src/components/table/index.ts
@@ -10,14 +10,14 @@ import { CTableRow } from './CTableRow'
 
 const CTablePlugin = {
   install: (app: App): void => {
-    app.component(CTable.name, CTable)
-    app.component(CTableBody.name, CTableBody)
-    app.component(CTableCaption.name, CTableCaption)
-    app.component(CTableDataCell.name, CTableDataCell)
-    app.component(CTableFoot.name, CTableFoot)
-    app.component(CTableHead.name, CTableHead)
-    app.component(CTableHeaderCell.name, CTableHeaderCell)
-    app.component(CTableRow.name, CTableRow)
+    app.component(CTable.name as string, CTable)
+    app.component(CTableBody.name as string, CTableBody)
+    app.component(CTableCaption.name as string, CTableCaption)
+    app.component(CTableDataCell.name as string, CTableDataCell)
+    app.component(CTableFoot.name as string, CTableFoot)
+    app.component(CTableHead.name as string, CTableHead)
+    app.component(CTableHeaderCell.name as string, CTableHeaderCell)
+    app.component(CTableRow.name as string, CTableRow)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts
index 47f3846a..997480a5 100644
--- a/packages/coreui-vue/src/components/tabs/index.ts
+++ b/packages/coreui-vue/src/components/tabs/index.ts
@@ -4,8 +4,8 @@ import { CTabPane } from './CTabPane'
 
 const CTabsPlugin = {
   install: (app: App): void => {
-    app.component(CTabContent.name, CTabContent)
-    app.component(CTabPane.name, CTabPane)
+    app.component(CTabContent.name as string, CTabContent)
+    app.component(CTabPane.name as string, CTabPane)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts
index f0aedd8d..b00e8dd1 100644
--- a/packages/coreui-vue/src/components/toast/CToastClose.ts
+++ b/packages/coreui-vue/src/components/toast/CToastClose.ts
@@ -7,7 +7,7 @@ const CToastClose = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: String,
+    as: String,
     ...CCloseButton.props,
   },
   emits: [
@@ -24,9 +24,9 @@ const CToastClose = defineComponent({
       updateVisible(false)
     }
     return () =>
-      props.component
+      props.as
         ? h(
-            props.component,
+            props.as,
             {
               onClick: () => {
                 handleClose()
diff --git a/packages/coreui-vue/src/components/toast/CToaster.ts b/packages/coreui-vue/src/components/toast/CToaster.ts
index 6e5b8381..12217da4 100644
--- a/packages/coreui-vue/src/components/toast/CToaster.ts
+++ b/packages/coreui-vue/src/components/toast/CToaster.ts
@@ -31,7 +31,7 @@ const CToaster = defineComponent({
         'div',
         {
           class: [
-            'toaster toast-container p-3',
+            'toaster toast-container',
             {
               'position-fixed': props.placement,
               'top-0': props.placement && props.placement.includes('top'),
diff --git a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts
index eee1ba77..b12e21a1 100644
--- a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts
+++ b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts
@@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: CButton,
+    as: CButton,
   },
   slots: {
     default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap
index 8f23150f..950cc006 100644
--- a/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap
+++ b/packages/coreui-vue/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3 position-fixed top-0 end-0">Default slot</div>"`;
+exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container position-fixed top-0 end-0">Default slot</div>"`;
 
-exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3">Default slot</div>"`;
+exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container">Default slot</div>"`;
diff --git a/packages/coreui-vue/src/components/toast/index.ts b/packages/coreui-vue/src/components/toast/index.ts
index 4e2ac38d..bf297589 100644
--- a/packages/coreui-vue/src/components/toast/index.ts
+++ b/packages/coreui-vue/src/components/toast/index.ts
@@ -7,11 +7,11 @@ import { CToastHeader } from './CToastHeader'
 
 const CToastPlugin = {
   install: (app: App): void => {
-    app.component(CToast.name, CToast)
-    app.component(CToastBody.name, CToastBody)
-    app.component(CToastClose.name, CToastClose)
-    app.component(CToaster.name, CToaster)
-    app.component(CToastHeader.name, CToastHeader)
+    app.component(CToast.name as string, CToast)
+    app.component(CToastBody.name as string, CToastBody)
+    app.component(CToastClose.name as string, CToastClose)
+    app.component(CToaster.name as string, CToaster)
+    app.component(CToastHeader.name as string, CToastHeader)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 638cb387..8ee54061 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -1,23 +1,34 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getUID } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the tooltip.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     animation: {
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -25,7 +36,7 @@ const CTooltip = defineComponent({
     /**
      * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     delay: {
       type: [Number, Object] as PropType<number | { show: number; hide: number }>,
@@ -34,7 +45,7 @@ const CTooltip = defineComponent({
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     fallbackPlacements: {
       type: [String, Array] as PropType<Placements | Placements[]>,
@@ -102,9 +113,10 @@ const CTooltip = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const tooltipRef = ref()
+    const uID = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
-    
+
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 
@@ -132,6 +144,10 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    onMounted(() => {
+      uID.value = getUID('tooltip')
+    })
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -164,48 +180,55 @@ const CTooltip = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'tooltip',
-                  'bs-tooltip-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    ...attrs,
+                    class: [
+                      'tooltip',
+                      'bs-tooltip-auto',
+                      {
+                        fade: props.animation,
+                      },
+                      attrs.class,
+                    ],
+                    id: uID.value,
+                    ref: tooltipRef,
+                    role: 'tooltip',
                   },
-                ],
-                ref: tooltipRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'tooltip-arrow' }),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'tooltip-inner' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'tooltip-arrow' }),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'tooltip-inner' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({
+          id: visible.value ? uID.value : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),
diff --git a/packages/coreui-vue/src/components/tooltip/index.ts b/packages/coreui-vue/src/components/tooltip/index.ts
index 88b3e802..cde4a9a3 100644
--- a/packages/coreui-vue/src/components/tooltip/index.ts
+++ b/packages/coreui-vue/src/components/tooltip/index.ts
@@ -3,7 +3,7 @@ import { CTooltip } from './CTooltip'
 
 const CTooltipPlugin = {
   install: (app: App): void => {
-    app.component(CTooltip.name, CTooltip)
+    app.component(CTooltip.name as string, CTooltip)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts
index c2d3cc18..998217ed 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsA.ts
@@ -33,9 +33,7 @@ const CWidgetStatsA = defineComponent({
       h(
         CCard,
         {
-          class: [
-            { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
-          ],
+          class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
         },
         () => [
           h(
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts
index 1bcd1a0d..ded7cd3f 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsB.ts
@@ -57,7 +57,7 @@ const CWidgetStatsB = defineComponent({
         {
           class: [
             {
-              'text-high-emphasis-inverse': props.inverse,
+              'text-white': props.inverse,
             },
           ],
           color: props.color,
@@ -98,9 +98,7 @@ const CWidgetStatsB = defineComponent({
                 h(
                   'small',
                   {
-                    class: [
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
-                    ],
+                    class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
                   },
                   {
                     default: () => (slots.text && slots.text()) || props.text,
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts
index 30584383..8c4c6a7c 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsC.ts
@@ -75,7 +75,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-end mb-4',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   slots.icon && slots.icon(),
@@ -96,7 +96,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-uppercase fw-semibold small',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   {
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts
index 894bf592..0489d1eb 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsD.ts
@@ -74,7 +74,7 @@ const CWidgetStatsD = defineComponent({
                           h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
                           h(
                             CCol,
-                            { class: 'text-uppercase text-medium-emphasis small' },
+                            { class: 'text-uppercase text-body-secondary small' },
                             () => value.title,
                           ),
                         ],
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts
index 563e41b0..8c68d976 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsE.ts
@@ -35,7 +35,7 @@ const CWidgetStatsE = defineComponent({
               h(
                 'div',
                 {
-                  class: 'text-muted small text-uppercase font-weight-bold',
+                  class: 'text-body-secondary small text-uppercase font-weight-bold',
                 },
                 {
                   default: () => (slots.title && slots.title()) || props.title,
diff --git a/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts b/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts
index 8c4db082..0c2ffd8e 100644
--- a/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts
+++ b/packages/coreui-vue/src/components/widgets/CWidgetStatsF.ts
@@ -81,7 +81,7 @@ const CWidgetStatsF = defineComponent({
                     h(
                       'div',
                       {
-                        class: 'text-medium-emphasis text-uppercase fw-semibold small',
+                        class: 'text-body-secondary text-uppercase fw-semibold small',
                       },
                       {
                         default: () => (slots.title && slots.title()) || props.title,
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap
index c8e5f776..c2d3d59c 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsA component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body pb-0 d-flex justify-content-between align-items-start">
     <div>
       <div class="fs-4 fw-semibold">75</div>
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap
index 33f7850e..35a70bb9 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap
@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsB component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body">
     <div class="fs-4 fw-semibold">75</div>
     <div>title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-    </div><small class="text-medium-emphasis-inverse">text</small>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
+    </div><small class="text-white text-opacity-75">text</small>
   </div>
 </div>"
 `;
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap
index 8793d1ec..acea9bdf 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap
@@ -3,11 +3,13 @@
 exports[`Loads and display CWidgetStatsC component renders correctly 1`] = `
 "<div class="card bg-warning text-white">
   <div class="card-body">
-    <div class="text-end mb-4 text-medium-emphasis-inverse">icon</div>
+    <div class="text-end mb-4 text-white text-opacity-75">icon</div>
     <div class="fs-4 fw-semibold">75</div>
-    <div class="text-uppercase fw-semibold small text-medium-emphasis-inverse">title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="text-uppercase fw-semibold small text-white text-opacity-75">title</div>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
     </div>
   </div>
 </div>"
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap
index 77bab6a7..904ea85c 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap
@@ -7,12 +7,12 @@ exports[`Loads and display CWidgetStatsD component renders correctly 1`] = `
     <!---->
     <div class="col">
       <div class="col fs-5 fw-semibold">bb</div>
-      <div class="col text-uppercase text-medium-emphasis small">aa</div>
+      <div class="col text-uppercase text-body-secondary small">aa</div>
     </div>
     <div class="vr"></div>
     <div class="col">
       <div class="col fs-5 fw-semibold">dd</div>
-      <div class="col text-uppercase text-medium-emphasis small">cc</div>
+      <div class="col text-uppercase text-body-secondary small">cc</div>
     </div>
   </div>
 </div>"
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap
index c1c85e62..18ed7668 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Loads and display CWidgetStatsE component renders correctly 1`] = `
 "<div class="card">
   <div class="card-body text-center">
-    <div class="text-muted small text-uppercase font-weight-bold">title</div>
+    <div class="text-body-secondary small text-uppercase font-weight-bold">title</div>
     <div class="h2 py-3">value</div>chartdefault
   </div>
 </div>"
diff --git a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap
index 81b9aa42..08c236ae 100644
--- a/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap
+++ b/packages/coreui-vue/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Loads and display CWidgetStatsF component renders correctly 1`] = `
     <div class="me-3 text-white bg-warning p-3">default</div>
     <div>
       <div class="fs-6 fw-semibold text-warning">75</div>
-      <div class="text-medium-emphasis text-uppercase fw-semibold small">title</div>
+      <div class="text-body-secondary text-uppercase fw-semibold small">title</div>
     </div>
   </div>
   <div class="card-footer">footer</div>
diff --git a/packages/coreui-vue/src/components/widgets/index.ts b/packages/coreui-vue/src/components/widgets/index.ts
index 2e6cdb18..38a6f825 100644
--- a/packages/coreui-vue/src/components/widgets/index.ts
+++ b/packages/coreui-vue/src/components/widgets/index.ts
@@ -8,12 +8,12 @@ import { CWidgetStatsF } from './CWidgetStatsF'
 
 const CWidgetsStatsPlugin = {
   install: (app: App): void => {
-    app.component(CWidgetStatsA.name, CWidgetStatsA)
-    app.component(CWidgetStatsB.name, CWidgetStatsB)
-    app.component(CWidgetStatsC.name, CWidgetStatsC)
-    app.component(CWidgetStatsD.name, CWidgetStatsD)
-    app.component(CWidgetStatsE.name, CWidgetStatsE)
-    app.component(CWidgetStatsF.name, CWidgetStatsF)
+    app.component(CWidgetStatsA.name as string, CWidgetStatsA)
+    app.component(CWidgetStatsB.name as string, CWidgetStatsB)
+    app.component(CWidgetStatsC.name as string, CWidgetStatsC)
+    app.component(CWidgetStatsD.name as string, CWidgetStatsD)
+    app.component(CWidgetStatsE.name as string, CWidgetStatsE)
+    app.component(CWidgetStatsF.name as string, CWidgetStatsF)
   },
 }
 
diff --git a/packages/coreui-vue/src/directives/v-c-popover.ts b/packages/coreui-vue/src/directives/v-c-popover.ts
index 49d6d0f8..41c22601 100644
--- a/packages/coreui-vue/src/directives/v-c-popover.ts
+++ b/packages/coreui-vue/src/directives/v-c-popover.ts
@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
@@ -14,8 +16,13 @@ const createPopoverElement = (id: string, header: string, content: string): HTML
   return popover
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addPopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(popover)
   createPopper(el, popover, popperOptions)
   setTimeout(() => {
@@ -23,21 +30,26 @@ const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removePopoverElement = (popover: HTMLDivElement) => {
+const removePopoverElement = (el: HTMLElement, popover: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   popover.classList.remove('show')
   setTimeout(() => {
     popover.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const togglePopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const togglePopoverElement = (
+  el: HTMLElement,
+  popover: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(popover.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removePopoverElement(popover)
+    removePopoverElement(el, popover)
     return
   }
-  addPopoverElement(popover, el, popperOptions)
+  addPopoverElement(el, popover, popperOptions, uID)
 }
 
 export default {
@@ -65,30 +77,30 @@ export default {
       ],
     }
 
-    const popoverUID = getUID('popover')
-    binding.arg = popoverUID
-    const popover = createPopoverElement(popoverUID, header, content)
+    const uID = getUID('popover')
+    binding.arg = uID
+    const popover = createPopoverElement(uID, header, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        togglePopoverElement(popover, el, popperOptions)
+        togglePopoverElement(el, popover, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addPopoverElement(popover, el, popperOptions)
+        addPopoverElement(el, popover, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removePopoverElement(popover)
+        removePopoverElement(el, popover)
       })
     }
   },
diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts
index 20b0c09d..50903711 100644
--- a/packages/coreui-vue/src/directives/v-c-tooltip.ts
+++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts
@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
@@ -13,8 +15,13 @@ const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   return tooltip
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(tooltip)
   createPopper(el, tooltip, popperOptions)
   setTimeout(() => {
@@ -22,21 +29,26 @@ const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removeTooltipElement = (tooltip: HTMLDivElement) => {
+const removeTooltipElement = (el: HTMLElement, tooltip: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   tooltip.classList.remove('show')
   setTimeout(() => {
     tooltip.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const toggleTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(tooltip.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removeTooltipElement(tooltip)
+    removeTooltipElement(el, tooltip)
     return
   }
-  addTooltipElement(tooltip, el, popperOptions)
+  addTooltipElement(el, tooltip, popperOptions, uID)
 }
 
 export default {
@@ -62,30 +74,30 @@ export default {
       ],
     }
 
-    const tooltipUID = getUID('tooltip')
-    binding.arg = tooltipUID
-    const tooltip = createTooltipElement(tooltipUID, content)
+    const uID = getUID('tooltip')
+    binding.arg = uID
+    const tooltip = createTooltipElement(uID, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        toggleTooltipElement(tooltip, el, popperOptions)
+        toggleTooltipElement(el, tooltip, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
   },
diff --git a/packages/coreui-vue/src/index.ts b/packages/coreui-vue/src/index.ts
index 262ecc6b..6b6bbeef 100644
--- a/packages/coreui-vue/src/index.ts
+++ b/packages/coreui-vue/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { App } from 'vue'
 import * as Components from './components'
 import * as Directives from './directives'
@@ -5,11 +6,14 @@ import * as Directives from './directives'
 const CoreuiVue = {
   install: (app: App): void => {
     for (const key in Components) {
-      app.component(key, Components[key])
+      app.component(key, (Components as { [key: string]: any })[key])
     }
 
     for (const key in Directives) {
-      app.directive(Directives[key]['name'], Directives[key])
+      app.directive(
+        (Directives as { [key: string]: any })[key]['name'],
+        (Directives as { [key: string]: any })[key],
+      )
     }
   },
 }
diff --git a/packages/coreui-vue/src/props.ts b/packages/coreui-vue/src/props.ts
index 667186d5..f0fda387 100644
--- a/packages/coreui-vue/src/props.ts
+++ b/packages/coreui-vue/src/props.ts
@@ -57,14 +57,21 @@ export const TextColor = {
       'info',
       'dark',
       'light',
+      'primary-emphasis',
+      'secondary-emphasis',
+      'success-emphasis',
+      'danger-emphasis',
+      'warning-emphasis',
+      'info-emphasis',
+      'light-emphasis',
+      'body',
+      'body-emphasis',
+      'body-secondary',
+      'body-tertiary',
+      'black',
+      'black-50',
       'white',
-      'muted',
-      'high-emphasis',
-      'medium-emphasis',
-      'disabled',
-      'high-emphasis-inverse',
-      'medium-emphasis-inverse',
-      'disabled-inverse',
+      'white-50',
     ].includes(value)
   },
 }
diff --git a/packages/coreui-vue/src/shims-vue.d.ts b/packages/coreui-vue/src/shims-vue.d.ts
index ff02b35c..ac1ded79 100644
--- a/packages/coreui-vue/src/shims-vue.d.ts
+++ b/packages/coreui-vue/src/shims-vue.d.ts
@@ -1,12 +1,5 @@
-/*
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-*/
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
\ No newline at end of file
diff --git a/packages/coreui-vue/src/utils/getRTLPlacement.ts b/packages/coreui-vue/src/utils/getRTLPlacement.ts
index cc60b801..87c38517 100644
--- a/packages/coreui-vue/src/utils/getRTLPlacement.ts
+++ b/packages/coreui-vue/src/utils/getRTLPlacement.ts
@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core'
-import { isRTL } from '../utils'
+import isRTL from './isRTL'
 
 const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
   switch (placement) {
diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index a793a702..b410c0a2 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -8,6 +8,7 @@ import '@coreui/chartjs/scss/coreui-chartjs.scss'
 import {
   cibCoreuiC,
   cibDiscourse,
+  cibFacebook,
   cibGithub,
   cibTwitter,
   cibOpenCollective,
@@ -21,6 +22,7 @@ import {
   cilContrast,
   cilHandshake,
   cilInfo,
+  cilLayers,
   cilMenu,
   cilMoon,
   cilOptions,
@@ -36,6 +38,7 @@ import {
 export const icons = {
   cibCoreuiC,
   cibDiscourse,
+  cibFacebook,
   cibGithub,
   cibTwitter,
   cibOpenCollective,
@@ -49,6 +52,7 @@ export const icons = {
   cilContrast,
   cilHandshake,
   cilInfo,
+  cilLayers,
   cilMenu,
   cilMoon,
   cilOptions,
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index ddf717dd..4c55aee9 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -66,9 +66,20 @@ export default defineUserConfig({
         }
       },
     }),
+    containerPlugin({
+      type: 'demo-bg-secondary',
+      render: function (tokens, idx) {
+        if (tokens[idx].nesting === 1) {
+          return '<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n'
+        } else {
+          return '</div>\n'
+        }
+      },
+    }),
     tocPlugin({}),
     registerComponentsPlugin({
       components: {
+        Callout: path.resolve(__dirname, './theme-coreui/src/client/components/Callout.vue'),
         ScssDocs: path.resolve(__dirname, './theme-coreui/src/client/components/ScssDocs.vue'),
       },
     }),
@@ -366,6 +377,10 @@ export default defineUserConfig({
             text: 'v4',
             link: '/migration/v4.html',
           },
+          {
+            text: 'v5',
+            link: '/migration/v5.html',
+          },
         ],
       },
     ],
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
new file mode 100644
index 00000000..f3f3e8f1
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
@@ -0,0 +1,29 @@
+<template>
+  <div :class="class">
+    <h5 v-if="title">{{ title }}</h5>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Callout',
+  props: {
+    color: String,
+    title: String,
+  },
+  setup(props) {
+    return {
+      class: [
+        'docs-callout',
+        {
+          [`docs-callout-${props.color}`]: props.color,
+        }
+      ],
+      color: props.color,
+      title: props.title,
+    }
+  },
+})
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
index 183935cf..ca3f0165 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
@@ -28,7 +28,7 @@
           <CDropdownItem
             :active="colorMode === 'light'"
             class="d-flex align-items-center"
-            component="button"
+            as="button"
             type="button"
             @click="setColorMode('light')"
           >
@@ -37,7 +37,7 @@
           <CDropdownItem
             :active="colorMode === 'dark'"
             class="d-flex align-items-center"
-            component="button"
+            as="button"
             type="button"
             @click="setColorMode('dark')"
           >
@@ -46,7 +46,7 @@
           <CDropdownItem
             :active="colorMode === 'auto'"
             class="d-flex align-items-center"
-            component="button"
+            as="button"
             type="button"
             @click="setColorMode('auto')"
           >
@@ -62,7 +62,7 @@
     <CButton
       class="d-lg-inline-block my-2 my-md-0 ms-md-3"
       color="primary"
-      component="a"
+      as="a"
       href="https://coreui.io/vue/docs/getting-started/introduction.html"
       variant="outline"
     >
@@ -79,7 +79,7 @@
     <CButton
       class="d-lg-inline-block my-2 my-md-0 ms-md-3"
       color="primary"
-      component="a"
+      as="a"
       href="https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
     >
       Get CoreUI PRO
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
index ce1b07f7..6ad736e2 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <CSidebar position="fixed" size="lg" class="docs-sidebar elevation-0 border-end ps-xl-4">
+  <CSidebar position="fixed" size="lg" class="docs-sidebar border-end px-xl-4 elevation-0">
     <CSidebarBrand class="justify-content-start ps-3">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -17,8 +17,8 @@
         </g>
       </svg>
     </CSidebarBrand>
-    <div class="text-body-secondary ms-3 me-5 mb-2 small fw-semibold">Framework:</div>
-    <CDropdown class="ms-3 me-5 mb-4">
+    <div class="text-body-secondary mx-3 mb-2 small fw-semibold">Framework:</div>
+    <CDropdown class="mx-3 mb-4">
       <CDropdownToggle color="primary" variant="outline"> Vue.js </CDropdownToggle>
       <CDropdownMenu class="w-100">
         <CDropdownItem href="https://coreui.io/angular/docs/4.0/" target="_blank">
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
index 65089b81..24fdb74b 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
@@ -26,7 +26,7 @@
                   </Page>
                 </CCol>
                 <CCol :lg="3">
-                  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-muted">
+                  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
                     <strong class="d-block h6 mb-2 pb-2 border-bottom">On this page</strong>
                     <Toc />
                   </div>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
new file mode 100644
index 00000000..a0dc566c
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
@@ -0,0 +1,39 @@
+//
+// Callouts
+//
+
+.docs-callout {
+  --#{$prefix}link-color-rgb: var(--cd-callout-link);
+  --#{$prefix}code-color: var(--cd-callout-code-color);
+
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  background-color: var(--cd-callout-bg, var(--cui-gray-100));
+  border-left: .25rem solid var(--cd-callout-border, var(--cui-gray-300));
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .docs-callout {
+    margin-top: -.25rem;
+  }
+
+  .highlight {
+    background-color: rgba($black, .05);
+  }
+}
+
+// Variations
+@each $variant in $cd-callout-variants {
+  .docs-callout-#{$variant} {
+    --cd-callout-color: var(--cui-#{$variant}-text-emphasis);
+    --cd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .1);
+    --cd-callout-border: var(--cui-#{$variant});
+  }
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
index ecc83bd7..6561eaee 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
@@ -73,6 +73,11 @@
     margin-left: .5rem;
   }
 
+  // Badges
+  > .badge + .badge {
+    margin-left: .25rem;
+  }
+
   // Buttons
   > .btn,
   > .btn-group {
@@ -109,6 +114,24 @@
   .pagination {
     margin-bottom: 0;
   }
+
+    // Sidebar
+    .sidebar-narrow,
+    .sidebar-narrow-unfoldable {
+      position: static;
+    }
+  
+    .sidebar-narrow-unfoldable {
+      min-height: 550px;
+    }
+
+  // Spinners
+  > .spinner-grow + .spinner-border,
+  > .spinner-border + .spinner-grow,
+  > .spinner-border + .spinner-border,
+  > .spinner-grow + .spinner-grow {
+    margin-left: .25rem;
+  }
 }
 
 //
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
index 18ab0150..3e2482fa 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
@@ -2,15 +2,31 @@
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
   --cui-sidebar-brand-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-active-bg: transparent;
-  --cui-sidebar-nav-link-active-color: var(--cui-primary);
-  --cui-sidebar-nav-link-hover-bg: transparent;
-  --cui-sidebar-nav-link-hover-color: var(--cui-primary);
-  --cui-sidebar-nav-group-bg: transparent;
-  --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
 
-  .nav-group-items {
+  .sidebar-nav {
     --cui-sidebar-nav-link-color: var(--cui-body-color);
+    --cui-sidebar-nav-link-active-bg: transparent;
+    --cui-sidebar-nav-link-active-color: var(--cui-primary);
+    --cui-sidebar-nav-link-hover-bg: transparent;
+    --cui-sidebar-nav-link-hover-color: var(--cui-primary);
+    --cui-sidebar-nav-link-icon-margin: 1rem;
+    --cui-sidebar-nav-group-bg: transparent;
+    --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
+
+    .compact .nav-link {
+      --cui-sidebar-nav-link-padding-y: .375rem;
+    }
+
+    .nav-group-items {
+      --cui-sidebar-nav-link-color: var(--cui-body-color);
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .docs-sidebar {
+      --cui-sidebar-bg: var(--cui-body-bg);
+    }
   }
 }
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss
deleted file mode 100644
index ac38381a..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_syntax.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-:root,
-[data-coreui-theme="light"] {
-  // --base00: #fff;
-  // --base01: #f5f5f5;
-  --base02: #c8c8fa;
-  --base03: #565c64;
-  --base04: #666;
-  --base05: #333;
-  --base06: #fff;
-  --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
-  --base09: #{$cyan-700}; // #087990
-  --base0A: #{$purple-500}; // #795da3
-  --base0B: #{$blue-700}; // #183691
-  --base0C: #{$blue-700}; // #183691
-  --base0D: #{$purple-500}; // #795da3
-  --base0E: #{$pink-600}; // #a71d5d
-  --base0F: #333;
-}
-
-@include color-mode(dark, true) {
-  // --base00: #282c34;
-  // --base01: #353b45;
-  --base02: #3e4451;
-  --base03: #868e96;
-  --base04: #868e96;
-  --base05: #abb2bf;
-  --base06: #b6bdca;
-  --base07: #{$orange-300}; // #d19a66
-  --base08: #{$cyan-300};
-  --base09: #{$orange-300}; // #d19a66
-  --base0A: #{$yellow-200}; // #e5c07b
-  --base0B: #{$teal-300}; // #98c379
-  --base0C: #{$teal-300}; // #56b6c2
-  --base0D: #{$blue-300}; // #61afef
-  --base0E: #{$indigo-200}; // #c678dd
-  --base0F: #{$red-300}; // #be5046
-
-  .language-diff .gd {
-    color: $red-400;
-  }
-  .language-diff .gi {
-    color: $green-400;
-  }
-}
-
-.hl { background-color: var(--base02); }
-.c { color: var(--base03); }
-.err { color: var(--base08); }
-.k { color: var(--base0E); }
-.l { color: var(----base09); }
-.n { color: var(--base08); }
-.o { color: var(--base05); }
-.p { color: var(--base05); }
-.cm { color: var(--base04); }
-.cp { color: var(--base08); }
-.c1 { color: var(--base03); }
-.cs { color: var(--base04); }
-.gd { color: var(--base08); }
-.ge { font-style: italic; }
-.gh {
-  font-weight: 600;
-  color: var(--base0A);
-}
-.gi { color: var(--cui-success); }
-.gp {
-  font-weight: 600;
-  color: var(--base04);
-}
-.gs { font-weight: 600; }
-.gu {
-  font-weight: 600;
-  color: var(--base0C);
-}
-.kc { color: var(--base0E); }
-.kd { color: var(--base0E); }
-.kn { color: var(--base0C); }
-.kp { color: var(--base0E); }
-.kr { color: var(--base0E); }
-.kt { color: var(--base0A); }
-.ld { color: var(--base0C); }
-.m { color: var(--base09); }
-.s { color: var(--base0C); }
-.na { color: var(--base0A); }
-.nb { color: var(--base05); }
-.nc { color: var(--base07); }
-.no { color: var(--base08); }
-.nd { color: var(--base07); }
-.ni { color: var(--base08); }
-.ne { color: var(--base08); }
-.nf { color: var(--base0B); }
-.nl { color: var(--base05); }
-.nn { color: var(--base0A); }
-.nx { color: var(--base0A); }
-.py { color: var(--base08); }
-.nt { color: var(--base08); }
-.nv { color: var(--base08); }
-.ow { color: var(--base0C); }
-.w { color: #fff; }
-.mf { color: var(--base09); }
-.mh { color: var(--base09); }
-.mi { color: var(--base09); }
-.mo { color: var(--base09); }
-.sb { color: var(--base0C); }
-.sc { color: #fff; }
-.sd { color: var(--base04); }
-.s2 { color: var(--base0C); }
-.se { color: var(--base09); }
-.sh { color: var(--base0C); }
-.si { color: var(--base09); }
-.sx { color: var(--base0C); }
-.sr { color: var(--base0C); }
-.s1 { color: var(--base0C); }
-.ss { color: var(--base0C); }
-.bp { color: var(--base05); }
-.vc { color: var(--base08); }
-.vg { color: var(--base08); }
-.vi { color: var(--base08); }
-.il { color: var(--base09); }
-
-// Color commas in rgba() values
-.m + .o { color: var(--base03); }
-
-// Fix bash
-.language-sh .c { color: var(--base03); }
-
-.chroma {
-  .language-bash,
-  .language-sh {
-    .line::before {
-      color: var(--base03);
-      content: "$ ";
-      user-select: none;
-    }
-  }
-
-  .language-powershell::before {
-    color: var(--base0C);
-    content: "PM> ";
-    user-select: none;
-  }
-}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
index bb49c60f..b53b7754 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
@@ -1,14 +1,3 @@
-// responsive breakpoints
-$MQNarrow: 959px !default;
-$MQMobile: 719px !default;
-$MQMobileNarrow: 419px !default;
-
-// code languages
-$codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js'
-  'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh'
-  'styl' 'ts' 'toml' 'vue' 'yml' !default;
-
-
 // stylelint-disable scss/dollar-variable-default
 
 // Local docs variables
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
index df73b581..ea3615e4 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
@@ -5,6 +5,7 @@
 
 @import "https://github.com/ads";
 @import "https://github.com/anchor";
+@import "https://github.com/callouts";
 @import "https://github.com/component-examples";
 @import "https://github.com/footer";
 @import "https://github.com/layout";
diff --git a/packages/docs/api/CChart.api.md b/packages/docs/api/CChart.api.md
index 22ddea1a..e997de50 100644
--- a/packages/docs/api/CChart.api.md
+++ b/packages/docs/api/CChart.api.md
@@ -14,7 +14,7 @@ import CChart from '@coreui/vue-chartjs/src/CChart'
 | **data**            | The data object that is passed into the Chart.js chart (more info).                                                                                       | ChartData \| ((canvas: HTMLCanvasElement) => ChartData) | -      | -       |
 | **height**          | Height attribute applied to the rendered canvas.<br/>`@default` 150                                                                                       | number                                                  | -      | 150     |
 | **id**              | ID attribute applied to the rendered canvas.                                                                                                              | string                                                  | -      | -       |
-| **options**         | The options object that is passed into the Chart.js chart.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}              | ChartOptions                                            | -      | -       |
+| **options**         | The options object that is passed into the Chart.js chartRef.value.<br><br>{@link https://www.chartjs.org/docs/latest/general/options.html More Info}     | ChartOptions                                            | -      | -       |
 | **plugins**         | The plugins array that is passed into the Chart.js chart (more info)<br><br>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | Plugin[]                                                | -      | -       |
 | **redraw**          | If true, will tear down and redraw chart on all updates.                                                                                                  | boolean                                                 | -      | -       |
 | **type**            | Chart.js chart type.<br/>`@type` 'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter'                                | ChartType                                               | -      | 'bar'   |
diff --git a/packages/docs/api/alert/CAlertHeading.api.md b/packages/docs/api/alert/CAlertHeading.api.md
index 30262600..da1acd2d 100644
--- a/packages/docs/api/alert/CAlertHeading.api.md
+++ b/packages/docs/api/alert/CAlertHeading.api.md
@@ -8,6 +8,6 @@ import CAlertHeading from '@coreui/vue/src/components/alert/CAlertHeading'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h4'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h4'    |
diff --git a/packages/docs/api/avatar/CAvatar.api.md b/packages/docs/api/avatar/CAvatar.api.md
index 51491b27..eb80cc30 100644
--- a/packages/docs/api/avatar/CAvatar.api.md
+++ b/packages/docs/api/avatar/CAvatar.api.md
@@ -8,11 +8,11 @@ import CAvatar from '@coreui/vue/src/components/avatar/CAvatar'
 
 #### Props
 
-| Prop name      | Description                                                                      | Type   | Values                                                                                                                                                                                                                                                    | Default |
-| -------------- | -------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **color**      | Sets the color context of the component to one of CoreUI’s themed colors.        | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                           | -       |
-| **shape**      | Select the shape of the component.                                               | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`                                                                    | -       |
-| **size**       | Size the component small, large, or extra large.                                 | string | `'sm'`, `'md'`, `'lg'`, `'xl'`                                                                                                                                                                                                                            | -       |
-| **src**        | The src attribute for the img element.                                           | string | -                                                                                                                                                                                                                                                         | -       |
-| **status**     | Sets the color context of the status indicator to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                           | -       |
-| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors.           | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | -       |
+| Prop name      | Description                                                                      | Type   | Values                                                                                                                                                                                                                                                                                                                                                                      | Default |
+| -------------- | -------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **color**      | Sets the color context of the component to one of CoreUI’s themed colors.        | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **shape**      | Select the shape of the component.                                               | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`                                                                                                                                                                                      | -       |
+| **size**       | Size the component small, large, or extra large.                                 | string | `'sm'`, `'md'`, `'lg'`, `'xl'`                                                                                                                                                                                                                                                                                                                                              | -       |
+| **src**        | The src attribute for the img element.                                           | string | -                                                                                                                                                                                                                                                                                                                                                                           | -       |
+| **status**     | Sets the color context of the status indicator to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors.           | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | -       |
diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md
index b9fd90b0..4d763c88 100644
--- a/packages/docs/api/badge/CBadge.api.md
+++ b/packages/docs/api/badge/CBadge.api.md
@@ -8,11 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge'
 
 #### Props
 
-| Prop name      | Description                                                                             | Type   | Values                                                                                                                                                                                                                                                    | Default |
-| -------------- | --------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **color**      | Sets the color context of the component to one of CoreUI’s themed colors.               | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                           | -       |
-| **component**  | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                                                                                                                                                                                                                         | 'span'  |
-| **position**   | Position badge in one of the corners of a link or button.                               | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'`                                                                                                                                                                                              | -       |
-| **shape**      | Select the shape of the component.                                                      | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`                                                                    | -       |
-| **size**       | Size the component small.                                                               | string | `'sm'`                                                                                                                                                                                                                                                    | -       |
-| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors.                  | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | -       |
+| Prop name                                                        | Description                                                                                                                                                               | Type   | Values                                                                                                                                                                                                                                                                                                                                                                      | Default |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **as**                                                           | Component used for the root node. Either a string to use a HTML element or a component.                                                                                   | string | -                                                                                                                                                                                                                                                                                                                                                                           | 'span'  |
+| **color**                                                        | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                 | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **position**                                                     | Position badge in one of the corners of a link or button.                                                                                                                 | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'`                                                                                                                                                                                                                                                                                                                | -       |
+| **shape**                                                        | Select the shape of the component.                                                                                                                                        | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`                                                                                                                                                                                      | -       |
+| **size**                                                         | Size the component small.                                                                                                                                                 | string | `'sm'`                                                                                                                                                                                                                                                                                                                                                                      | -       |
+| **text-bg-color** <br><div class="badge bg-primary">5.0.0+</div> | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **text-color**                                                   | Sets the text color of the component to one of CoreUI’s themed colors.                                                                                                    | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | -       |
diff --git a/packages/docs/api/button/CButton.api.md b/packages/docs/api/button/CButton.api.md
index 8f8f11ee..47adf340 100644
--- a/packages/docs/api/button/CButton.api.md
+++ b/packages/docs/api/button/CButton.api.md
@@ -8,17 +8,17 @@ import CButton from '@coreui/vue/src/components/button/CButton'
 
 #### Props
 
-| Prop name     | Description                                                                                                                                                                   | Type    | Values                                                                                                                                                                                 | Default  |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| **active**    | Toggle the active state for the component.                                                                                                                                    | boolean | -                                                                                                                                                                                      | -        |
-| **color**     | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                     | string  | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                        | -        |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component.                                                                                       | string  | -                                                                                                                                                                                      | 'button' |
-| **disabled**  | Toggle the disabled state for the component.                                                                                                                                  | boolean | -                                                                                                                                                                                      | -        |
-| **href**      | The href attribute specifies the URL of the page the link goes to.                                                                                                            | string  | -                                                                                                                                                                                      | -        |
-| **shape**     | Select the shape of the component.                                                                                                                                            | string  | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | -        |
-| **size**      | Size the component small or large.                                                                                                                                            | string  | `'sm'`, `'lg'`                                                                                                                                                                         | -        |
-| **type**      | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br>Different browsers may use different default types for the `<button>` element. | string  | `'button'`, `'submit'`, `'reset'`                                                                                                                                                      | 'button' |
-| **variant**   | Set the button variant to an outlined button or a ghost button.                                                                                                               | string  | `'ghost'`, `'outline'`                                                                                                                                                                 | -        |
+| Prop name    | Description                                                                                                                                                                   | Type    | Values                                                                                                                                                                                 | Default  |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| **active**   | Toggle the active state for the component.                                                                                                                                    | boolean | -                                                                                                                                                                                      | -        |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component.                                                                                       | string  | -                                                                                                                                                                                      | 'button' |
+| **color**    | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                     | string  | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                        | -        |
+| **disabled** | Toggle the disabled state for the component.                                                                                                                                  | boolean | -                                                                                                                                                                                      | -        |
+| **href**     | The href attribute specifies the URL of the page the link goes to.                                                                                                            | string  | -                                                                                                                                                                                      | -        |
+| **shape**    | Select the shape of the component.                                                                                                                                            | string  | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | -        |
+| **size**     | Size the component small or large.                                                                                                                                            | string  | `'sm'`, `'lg'`                                                                                                                                                                         | -        |
+| **type**     | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br>Different browsers may use different default types for the `<button>` element. | string  | `'button'`, `'submit'`, `'reset'`                                                                                                                                                      | 'button' |
+| **variant**  | Set the button variant to an outlined button or a ghost button.                                                                                                               | string  | `'ghost'`, `'outline'`                                                                                                                                                                 | -        |
 
 #### Events
 
diff --git a/packages/docs/api/card/CCard.api.md b/packages/docs/api/card/CCard.api.md
index 4db75e45..49c792f9 100644
--- a/packages/docs/api/card/CCard.api.md
+++ b/packages/docs/api/card/CCard.api.md
@@ -8,7 +8,8 @@ import CCard from '@coreui/vue/src/components/card/CCard'
 
 #### Props
 
-| Prop name      | Description                                                                    | Type   | Values                                                                                                                                                                                                                                                    | Default |
-| -------------- | ------------------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **color**      | Sets the color context of the component to one of CoreUI’s themed colors.      | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                           | -       |
-| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'white'`, `'muted'`, `'high-emphasis'`, `'medium-emphasis'`, `'disabled'`, `'high-emphasis-inverse'`, `'medium-emphasis-inverse'`, `'disabled-inverse'` | -       |
+| Prop name                                                        | Description                                                                                                                                                               | Type   | Values                                                                                                                                                                                                                                                                                                                                                                      | Default |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **color**                                                        | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                 | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **text-bg-color** <br><div class="badge bg-primary">5.0.0+</div> | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`                                                                                                                                                                                                                                                                             | -       |
+| **text-color**                                                   | Sets the text color context of the component to one of CoreUI’s themed colors.                                                                                            | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | -       |
diff --git a/packages/docs/api/card/CCardHeader.api.md b/packages/docs/api/card/CCardHeader.api.md
index fb314279..a04ae736 100644
--- a/packages/docs/api/card/CCardHeader.api.md
+++ b/packages/docs/api/card/CCardHeader.api.md
@@ -8,6 +8,6 @@ import CCardHeader from '@coreui/vue/src/components/card/CCardHeader'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'div'   |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'div'   |
diff --git a/packages/docs/api/card/CCardImage.api.md b/packages/docs/api/card/CCardImage.api.md
index 117d906b..880ccab1 100644
--- a/packages/docs/api/card/CCardImage.api.md
+++ b/packages/docs/api/card/CCardImage.api.md
@@ -10,5 +10,5 @@ import CCardImage from '@coreui/vue/src/components/card/CCardImage'
 
 | Prop name       | Description                                                                             | Type   | Values              | Default |
 | --------------- | --------------------------------------------------------------------------------------- | ------ | ------------------- | ------- |
-| **component**   | Component used for the root node. Either a string to use a HTML element or a component. | string | -                   | 'img'   |
+| **as**          | Component used for the root node. Either a string to use a HTML element or a component. | string | -                   | 'img'   |
 | **orientation** | Optionally orientate the image to the top, bottom.                                      | string | `'top'`, `'bottom'` | -       |
diff --git a/packages/docs/api/card/CCardSubtitle.api.md b/packages/docs/api/card/CCardSubtitle.api.md
index 92ebf44e..8961c4d0 100644
--- a/packages/docs/api/card/CCardSubtitle.api.md
+++ b/packages/docs/api/card/CCardSubtitle.api.md
@@ -8,6 +8,6 @@ import CCardSubtitle from '@coreui/vue/src/components/card/CCardSubtitle'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h6'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h6'    |
diff --git a/packages/docs/api/card/CCardText.api.md b/packages/docs/api/card/CCardText.api.md
index 6dc7aaae..b2550fb6 100644
--- a/packages/docs/api/card/CCardText.api.md
+++ b/packages/docs/api/card/CCardText.api.md
@@ -8,6 +8,6 @@ import CCardText from '@coreui/vue/src/components/card/CCardText'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'p'     |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'p'     |
diff --git a/packages/docs/api/card/CCardTitle.api.md b/packages/docs/api/card/CCardTitle.api.md
index e2cb5eb4..6fe87e17 100644
--- a/packages/docs/api/card/CCardTitle.api.md
+++ b/packages/docs/api/card/CCardTitle.api.md
@@ -8,6 +8,6 @@ import CCardTitle from '@coreui/vue/src/components/card/CCardTitle'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
diff --git a/packages/docs/api/close-button/CCloseButton.api.md b/packages/docs/api/close-button/CCloseButton.api.md
index f6da7a9a..631cdaf2 100644
--- a/packages/docs/api/close-button/CCloseButton.api.md
+++ b/packages/docs/api/close-button/CCloseButton.api.md
@@ -10,6 +10,7 @@ import CCloseButton from '@coreui/vue/src/components/close-button/CCloseButton'
 
 | Prop name    | Description                                  | Type    | Values | Default |
 | ------------ | -------------------------------------------- | ------- | ------ | ------- |
+| **dark**     | Invert the default color.                    | boolean | -      | -       |
 | **disabled** | Toggle the disabled state for the component. | boolean | -      | -       |
 | **white**    | Change the default color to white.           | boolean | -      | -       |
 
diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
new file mode 100644
index 00000000..66b3972f
--- /dev/null
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -0,0 +1,14 @@
+### CConditionalTeleport
+
+```jsx
+import { CConditionalTeleport } from '@coreui/vue'
+// or
+import CConditionalTeleport from '@coreui/vue/src/components/conditional-teleport/CConditionalTeleport'
+```
+
+#### Props
+
+| Prop name                                                     | Description                                                                                     | Type                                         | Values | Default |
+| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
+| **container** <br><div class="badge bg-primary">v5.0.0+</div> | An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | -      | 'body'  |
+| **teleport**                                                  | Render some children into a different part of the DOM                                           | boolean                                      | -      | true    |
diff --git a/packages/docs/api/coreui-icons-vue/src/CIcon.api.md b/packages/docs/api/coreui-icons-vue/src/CIcon.api.md
new file mode 100644
index 00000000..2811502c
--- /dev/null
+++ b/packages/docs/api/coreui-icons-vue/src/CIcon.api.md
@@ -0,0 +1,19 @@
+### CIcon
+
+```jsx
+import { CIcon } from '@coreui/icons-vue'
+// or
+import CIcon from '@coreui/icons-vue/src/CIcon'
+```
+
+#### Props
+
+| Prop name             | Description                                                                                       | Type                  | Values | Default |
+| --------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | ------ | ------- |
+| **content**           | Use `:icon="..."` instead of<br/>`@deprecated` since version 3.0                                  | string\|array         | -      | -       |
+| **custom-class-name** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.            | string\|array\|object | -      | -       |
+| **icon**              | Name of the icon placed in React object or SVG content.                                           | string \| string[]    | -      | -       |
+| **name**              | Use `icon="..."` instead of<br/>`@deprecated` since version 3.0                                   | string                | -      | -       |
+| **size**              | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | string                | -      | -       |
+| **title**             | Title tag content.                                                                                | string                | -      | -       |
+| **use**               | If defined component will be rendered using 'use' tag.                                            | string                | -      | -       |
diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 71f0905c..3eaad39f 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,18 +8,21 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 
 #### Props
 
-| Prop name      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type            | Values                                                                                                                                                                                        | Default        |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| **alignment**  | Set aligment of dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | string\|object  | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | -              |
-| **auto-close** | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | -                                                                                                                                                                                             | true           |
-| **dark**       | Sets a darker color scheme to match a dark navbar.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | boolean         | -                                                                                                                                                                                             | -              |
-| **direction**  | Sets a specified direction and location of the dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                            | string          | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`                                                                                                                         | -              |
-| **disabled**   | Toggle the disabled state for the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | boolean         | -                                                                                                                                                                                             | -              |
-| **placement**  | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                                                                                                                                                                                                                                                                     | Placement       | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'`                | 'bottom-start' |
-| **popper**     | If you want to disable dynamic positioning set this property to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean         | -                                                                                                                                                                                             | true           |
-| **trigger**    | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                                                                                                                                                                                                                                                                      | string\|array   | -                                                                                                                                                                                             | 'click'        |
-| **variant**    | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.                                                                                                                                                                                                                                                                                                                                                                                                                           | string          | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`                                                                                                                                    | 'btn-group'    |
-| **visible**    | Toggle the visibility of dropdown menu component.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | boolean         | -                                                                                                                                                                                             | -              |
+| Prop name                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type                                         | Values                                                                                                                                                                                        | Default        |
+| ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| **alignment**                                                 | Set aligment of dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | string \| Alignments                         | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | -              |
+| **auto-close**                                                | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string                              | -                                                                                                                                                                                             | true           |
+| **container** <br><div class="badge bg-primary">v5.0.0+</div> | Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                                                                                                                                                                                                                                                                 | HTMLElement \| (() => HTMLElement) \| string | -                                                                                                                                                                                             | 'body'         |
+| **dark**                                                      | Sets a darker color scheme to match a dark navbar.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | boolean                                      | -                                                                                                                                                                                             | -              |
+| **direction**                                                 | Sets a specified direction and location of the dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                            | string                                       | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`                                                                                                                         | -              |
+| **disabled**                                                  | Toggle the disabled state for the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | boolean                                      | -                                                                                                                                                                                             | -              |
+| **offset** <br><div class="badge bg-primary">4.9.0+</div>     | Offset of the dropdown menu relative to its target.                                                                                                                                                                                                                                                                                                                                                                                                                                                      | array                                        | -                                                                                                                                                                                             | [0, 2]         |
+| **placement**                                                 | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                                                                                                                                                                                                                                                                     | Placement                                    | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'`                | 'bottom-start' |
+| **popper**                                                    | If you want to disable dynamic positioning set this property to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | true           |
+| **teleport** <br><div class="badge bg-primary">v5.0.0+</div>  | Generates dropdown menu using Teleport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | false          |
+| **trigger**                                                   | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                                                                                                                                                                                                                                                                      | Triggers                                     | -                                                                                                                                                                                             | 'click'        |
+| **variant**                                                   | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.                                                                                                                                                                                                                                                                                                                                                                                                                           | string                                       | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`                                                                                                                                    | 'btn-group'    |
+| **visible**                                                   | Toggle the visibility of dropdown menu component.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | boolean                                      | -                                                                                                                                                                                             | -              |
 
 #### Events
 
diff --git a/packages/docs/api/dropdown/CDropdownHeader.api.md b/packages/docs/api/dropdown/CDropdownHeader.api.md
index ce854682..97d237e2 100644
--- a/packages/docs/api/dropdown/CDropdownHeader.api.md
+++ b/packages/docs/api/dropdown/CDropdownHeader.api.md
@@ -8,6 +8,6 @@ import CDropdownHeader from '@coreui/vue/src/components/dropdown/CDropdownHeader
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h6'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h6'    |
diff --git a/packages/docs/api/dropdown/CDropdownItem.api.md b/packages/docs/api/dropdown/CDropdownItem.api.md
index d3739469..c9d88766 100644
--- a/packages/docs/api/dropdown/CDropdownItem.api.md
+++ b/packages/docs/api/dropdown/CDropdownItem.api.md
@@ -8,9 +8,9 @@ import CDropdownItem from '@coreui/vue/src/components/dropdown/CDropdownItem'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active**    | Toggle the active state for the component.                                              | boolean | -      | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
-| **disabled**  | Toggle the disabled state for the component.                                            | boolean | -      | -       |
-| **href**      | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
+| Prop name    | Description                                                                             | Type    | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -      | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
+| **href**     | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
diff --git a/packages/docs/api/dropdown/CDropdownMenu.api.md b/packages/docs/api/dropdown/CDropdownMenu.api.md
index d283ed5c..2c7c07b0 100644
--- a/packages/docs/api/dropdown/CDropdownMenu.api.md
+++ b/packages/docs/api/dropdown/CDropdownMenu.api.md
@@ -8,6 +8,6 @@ import CDropdownMenu from '@coreui/vue/src/components/dropdown/CDropdownMenu'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values          | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | `'div'`, `'ul'` | 'div'   |
+| Prop name | Description                                                                             | Type   | Values          | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | `'div'`, `'ul'` | 'div'   |
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 14987eae..2c5e2d20 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -8,15 +8,15 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 
 #### Props
 
-| Prop name     | Description                                                                                                                                                                                                   | Type     | Values                                                                                          | Default  |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
-| **active**    | Toggle the active state for the component.                                                                                                                                                                    | boolean  | -                                                                                               | -        |
-| **color**     | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                                                     | string   | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -        |
-| **caret**     | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component.                                                                                                                       | string   | -                                                                                               | 'button' |
-| **custom**    | Create a custom toggler which accepts any content.                                                                                                                                                            | boolean  | -                                                                                               | -        |
-| **disabled**  | Toggle the disabled state for the component.                                                                                                                                                                  | boolean  | -                                                                                               | -        |
-| **size**      | Size the component small or large.                                                                                                                                                                            | string   | `'sm'`, `'lg'`                                                                                  | -        |
-| **split**     | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean  | -                                                                                               | -        |
-| **trigger**   | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br/>`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
-| **variant**   | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
+| Prop name                                                    | Description                                                                                                                                                                                                   | Type     | Values                                                                                          | Default  |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
+| **as**                                                       | Component used for the root node. Either a string to use a HTML element or a component.                                                                                                                       | string   | -                                                                                               | 'button' |
+| **color**                                                    | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                                                     | string   | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -        |
+| **caret**                                                    | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
+| **custom**                                                   | Create a custom toggler which accepts any content.                                                                                                                                                            | boolean  | -                                                                                               | -        |
+| **disabled**                                                 | Toggle the disabled state for the component.                                                                                                                                                                  | boolean  | -                                                                                               | -        |
+| **nav-link** <br><div class="badge bg-primary">v5.0.0+</div> | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.                                                                                                           | boolean  | -                                                                                               | true     |
+| **size**                                                     | Size the component small or large.                                                                                                                                                                            | string   | `'sm'`, `'lg'`                                                                                  | -        |
+| **split**                                                    | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean  | -                                                                                               | -        |
+| **trigger**                                                  | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br/>`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
+| **variant**                                                  | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
diff --git a/packages/docs/api/form/CFormCheck.api.md b/packages/docs/api/form/CFormCheck.api.md
index e6fd5f77..1d906212 100644
--- a/packages/docs/api/form/CFormCheck.api.md
+++ b/packages/docs/api/form/CFormCheck.api.md
@@ -8,23 +8,26 @@ import CFormCheck from '@coreui/vue/src/components/form/CFormCheck'
 
 #### Props
 
-| Prop name                                                           | Description                                                                                                                                           | Type            | Values                  | Default    |
-| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- |
-| **button**                                                          | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html                                          | object          | -                       | -          |
-| **feedback** <br><div class="badge bg-primary">4.3.0+</div>         | Provide valuable, actionable feedback.                                                                                                                | string          | -                       | -          |
-| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.                                                                                                                | string          | -                       | -          |
-| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div>   | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string          | -                       | -          |
-| **hit-area**                                                        | Sets hit area to the full area of the component.                                                                                                      | string          | -                       | -          |
-| **id**                                                              | The id global attribute defines an identifier (ID) that must be unique in the whole document.                                                         | string          | -                       | -          |
-| **indeterminate**                                                   | Input Checkbox indeterminate Property                                                                                                                 | boolean         | -                       | -          |
-| **inline**                                                          | Group checkboxes or radios on the same horizontal row by adding.                                                                                      | boolean         | -                       | -          |
-| **invalid**                                                         | Set component validation state to invalid.                                                                                                            | boolean         | -                       | -          |
-| **label**                                                           | The element represents a caption for a component.                                                                                                     | string          | -                       | -          |
-| **model-value**                                                     | The default name for a value passed using v-model.                                                                                                    | boolean\|string | -                       | -          |
-| **reverse**                                                         | Put checkboxes or radios on the opposite side.<br/>`@since` 4.8.0                                                                                     | boolean         | -                       | -          |
-| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.                                                                                                      | boolean         | -                       | -          |
-| **type**                                                            | Specifies the type of component.                                                                                                                      | string          | `'checkbox'`, `'radio'` | 'checkbox' |
-| **valid**                                                           | Set component validation state to valid.                                                                                                              | boolean         | -                       | -          |
+| Prop name                                                           | Description                                                                                                                                                 | Type                   | Values                  | Default    |
+| ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------- | ---------- |
+| **button**                                                          | Create button-like checkboxes and radio buttons.<br/>`@see` http://coreui.io/vue/docs/components/button.html                                                | object                 | -                       | -          |
+| **false-value** <br><div class="badge bg-primary">4.10.0+</div>     | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state. | string                 | -                       | -          |
+| **feedback** <br><div class="badge bg-primary">4.3.0+</div>         | Provide valuable, actionable feedback.                                                                                                                      | string                 | -                       | -          |
+| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.                                                                                                                      | string                 | -                       | -          |
+| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div>   | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.       | string                 | -                       | -          |
+| **hit-area**                                                        | Sets hit area to the full area of the component.                                                                                                            | string                 | -                       | -          |
+| **id**                                                              | The id global attribute defines an identifier (ID) that must be unique in the whole document.                                                               | string                 | -                       | -          |
+| **indeterminate**                                                   | Input Checkbox indeterminate Property                                                                                                                       | boolean                | -                       | -          |
+| **inline**                                                          | Group checkboxes or radios on the same horizontal row by adding.                                                                                            | boolean                | -                       | -          |
+| **invalid**                                                         | Set component validation state to invalid.                                                                                                                  | boolean                | -                       | -          |
+| **label**                                                           | The element represents a caption for a component.                                                                                                           | string                 | -                       | -          |
+| **model-value**                                                     | The default name for a value passed using v-model.                                                                                                          | array\|boolean\|string | -                       | -          |
+| **reverse** <br><div class="badge bg-primary">4.8.0+</div>          | Put checkboxes or radios on the opposite side.                                                                                                              | boolean                | -                       | -          |
+| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.                                                                                                            | boolean                | -                       | -          |
+| **true-value** <br><div class="badge bg-primary">4.10.0+</div>      | Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.  | string                 | -                       | -          |
+| **type**                                                            | Specifies the type of component.                                                                                                                            | string                 | `'checkbox'`, `'radio'` | 'checkbox' |
+| **valid**                                                           | Set component validation state to valid.                                                                                                                    | boolean                | -                       | -          |
+| **value**                                                           | The value attribute of component.                                                                                                                           | string                 | -                       | -          |
 
 #### Events
 
diff --git a/packages/docs/api/form/CFormFeedback.api.md b/packages/docs/api/form/CFormFeedback.api.md
index bc45a57d..3ab11d05 100644
--- a/packages/docs/api/form/CFormFeedback.api.md
+++ b/packages/docs/api/form/CFormFeedback.api.md
@@ -8,9 +8,9 @@ import CFormFeedback from '@coreui/vue/src/components/form/CFormFeedback'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'div'   |
-| **invalid**   | Method called immediately after the `value` prop changes.                               | boolean | -      | -       |
-| **tooltip**   | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | -      | -       |
-| **valid**     | Set component validation state to valid.                                                | boolean | -      | -       |
+| Prop name   | Description                                                                             | Type    | Values | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **as**      | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'div'   |
+| **invalid** | Method called immediately after the `value` prop changes.                               | boolean | -      | -       |
+| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | -      | -       |
+| **valid**   | Set component validation state to valid.                                                | boolean | -      | -       |
diff --git a/packages/docs/api/form/CFormSwitch.api.md b/packages/docs/api/form/CFormSwitch.api.md
index ede39558..fc2864c1 100644
--- a/packages/docs/api/form/CFormSwitch.api.md
+++ b/packages/docs/api/form/CFormSwitch.api.md
@@ -8,16 +8,16 @@ import CFormSwitch from '@coreui/vue/src/components/form/CFormSwitch'
 
 #### Props
 
-| Prop name       | Description                                                                                  | Type            | Values                  | Default    |
-| --------------- | -------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- |
-| **id**          | The id global attribute defines an identifier (ID) that must be unique in the whole document | string          | -                       | -          |
-| **invalid**     | Set component validation state to invalid.                                                   | boolean         | -                       | -          |
-| **label**       | The element represents a caption for a component.                                            | string          | -                       | -          |
-| **model-value** | The default name for a value passed using v-model.                                           | boolean\|string | -                       | -          |
-| **reverse**     | Put checkboxes or radios on the opposite side.<br/>`@since` 4.8.0                            | boolean         | -                       | -          |
-| **size**        | Size the component large or extra large. Works only with `switch`.                           | string          | `'lg' \| 'xl'`          | -          |
-| **type**        | Specifies the type of component.                                                             | string          | `'checkbox'`, `'radio'` | 'checkbox' |
-| **valid**       | Set component validation state to valid.                                                     | boolean         | -                       | -          |
+| Prop name                                                  | Description                                                                                  | Type            | Values                  | Default    |
+| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ---------- |
+| **id**                                                     | The id global attribute defines an identifier (ID) that must be unique in the whole document | string          | -                       | -          |
+| **invalid**                                                | Set component validation state to invalid.                                                   | boolean         | -                       | -          |
+| **label**                                                  | The element represents a caption for a component.                                            | string          | -                       | -          |
+| **model-value**                                            | The default name for a value passed using v-model.                                           | boolean\|string | -                       | -          |
+| **reverse** <br><div class="badge bg-primary">4.8.0+</div> | Put checkboxes or radios on the opposite side.                                               | boolean         | -                       | -          |
+| **size**                                                   | Size the component large or extra large. Works only with `switch`.                           | string          | `'lg' \| 'xl'`          | -          |
+| **type**                                                   | Specifies the type of component.                                                             | string          | `'checkbox'`, `'radio'` | 'checkbox' |
+| **valid**                                                  | Set component validation state to valid.                                                     | boolean         | -                       | -          |
 
 #### Events
 
diff --git a/packages/docs/api/form/CFormText.api.md b/packages/docs/api/form/CFormText.api.md
index 939772da..33cdc019 100644
--- a/packages/docs/api/form/CFormText.api.md
+++ b/packages/docs/api/form/CFormText.api.md
@@ -8,6 +8,6 @@ import CFormText from '@coreui/vue/src/components/form/CFormText'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'div'   |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'div'   |
diff --git a/packages/docs/api/form/CInputGroupText.api.md b/packages/docs/api/form/CInputGroupText.api.md
index a3ad985f..09998a59 100644
--- a/packages/docs/api/form/CInputGroupText.api.md
+++ b/packages/docs/api/form/CInputGroupText.api.md
@@ -8,6 +8,6 @@ import CInputGroupText from '@coreui/vue/src/components/form/CInputGroupText'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'span'  |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'span'  |
diff --git a/packages/docs/api/header/CHeaderBrand.api.md b/packages/docs/api/header/CHeaderBrand.api.md
index a87636c5..9249d0a0 100644
--- a/packages/docs/api/header/CHeaderBrand.api.md
+++ b/packages/docs/api/header/CHeaderBrand.api.md
@@ -8,6 +8,6 @@ import CHeaderBrand from '@coreui/vue/src/components/header/CHeaderBrand'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'a'     |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'a'     |
diff --git a/packages/docs/api/header/CHeaderNav.api.md b/packages/docs/api/header/CHeaderNav.api.md
index 1ceb45e3..dde286f0 100644
--- a/packages/docs/api/header/CHeaderNav.api.md
+++ b/packages/docs/api/header/CHeaderNav.api.md
@@ -8,6 +8,6 @@ import CHeaderNav from '@coreui/vue/src/components/header/CHeaderNav'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'ul'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'ul'    |
diff --git a/packages/docs/api/link/CLink.api.md b/packages/docs/api/link/CLink.api.md
index 5404dffa..ddf93047 100644
--- a/packages/docs/api/link/CLink.api.md
+++ b/packages/docs/api/link/CLink.api.md
@@ -8,12 +8,12 @@ import CLink from '@coreui/vue/src/components/link/CLink'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active**    | Toggle the active state for the component.                                              | boolean | -      | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
-| **disabled**  | Toggle the disabled state for the component.                                            | boolean | -      | -       |
-| **href**      | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
+| Prop name    | Description                                                                             | Type    | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -      | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
+| **href**     | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
 
 #### Events
 
diff --git a/packages/docs/api/list-group/CListGroup.api.md b/packages/docs/api/list-group/CListGroup.api.md
index 005ead80..2a88b9d3 100644
--- a/packages/docs/api/list-group/CListGroup.api.md
+++ b/packages/docs/api/list-group/CListGroup.api.md
@@ -8,8 +8,8 @@ import CListGroup from '@coreui/vue/src/components/list-group/CListGroup'
 
 #### Props
 
-| Prop name     | Description                                                                                                             | Type    | Values                                                                                                             | Default |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component.                                 | string  | -                                                                                                                  | 'ul'    |
-| **flush**     | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`) | boolean | -                                                                                                                  | -       |
-| **layout**    | Specify a layout type.                                                                                                  | string  | `'horizontal'`, `'horizontal-sm'`, `'horizontal-md'`, `'horizontal-lg'`, `'horizontal-xl'`, `'horizontal-xxl'`, `` | -       |
+| Prop name  | Description                                                                                                             | Type    | Values                                                                                                             | Default |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
+| **as**     | Component used for the root node. Either a string to use a HTML element or a component.                                 | string  | -                                                                                                                  | 'ul'    |
+| **flush**  | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`) | boolean | -                                                                                                                  | -       |
+| **layout** | Specify a layout type.                                                                                                  | string  | `'horizontal'`, `'horizontal-sm'`, `'horizontal-md'`, `'horizontal-lg'`, `'horizontal-xl'`, `'horizontal-xxl'`, `` | -       |
diff --git a/packages/docs/api/list-group/CListGroupItem.api.md b/packages/docs/api/list-group/CListGroupItem.api.md
index 3cfe1132..a5eddd7a 100644
--- a/packages/docs/api/list-group/CListGroupItem.api.md
+++ b/packages/docs/api/list-group/CListGroupItem.api.md
@@ -8,9 +8,9 @@ import CListGroupItem from '@coreui/vue/src/components/list-group/CListGroupItem
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values                                                                                                    | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------- |
-| **active**    | Toggle the active state for the component.                                              | boolean | -                                                                                                         | -       |
-| **color**     | Sets the color context of the component to one of CoreUI’s themed colors.               | string  | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | -       |
-| **disabled**  | Toggle the disabled state for the component.                                            | boolean | -                                                                                                         | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -                                                                                                         | 'li'    |
+| Prop name    | Description                                                                             | Type    | Values                                                                                                    | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -                                                                                                         | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -                                                                                                         | 'li'    |
+| **color**    | Sets the color context of the component to one of CoreUI’s themed colors.               | string  | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | -       |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -                                                                                                         | -       |
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 7485e03c..582c2798 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -8,18 +8,19 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
 
 #### Props
 
-| Prop name              | Description                                                                                                                        | Type            | Values                                             | Default |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
-| **alignment**          | Align the modal in the center or top of the screen.                                                                                | string          | `'top'`, `'center'`                                | 'top'   |
-| **backdrop**           | Apply a backdrop on body while offcanvas is open.                                                                                  | boolean\|string | `boolean \| 'static'`                              | true    |
-| **content-class-name** | A string of all className you want applied to the modal content component.                                                         | string          | -                                                  | -       |
-| **fullscreen**         | Set modal to covers the entire user viewport                                                                                       | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | -       |
-| **keyboard**           | Closes the modal when escape key is pressed.                                                                                       | boolean         | -                                                  | true    |
-| **scrollable**         | Create a scrollable modal that allows scrolling the modal body.                                                                    | boolean         | -                                                  | -       |
-| **size**               | Size the component small, large, or extra large.                                                                                   | string          | `'sm'`, `'lg'`, `'xl'`                             | -       |
-| **transition**         | Remove animation to create modal that simply appear rather than fade in to view.                                                   | boolean         | -                                                  | true    |
-| **unmount-on-close**   | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean         | -                                                  | true    |
-| **visible**            | Toggle the visibility of alert component.                                                                                          | boolean         | -                                                  | -       |
+| Prop name                                                 | Description                                                                                                                        | Type            | Values                                             | Default |
+| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
+| **alignment**                                             | Align the modal in the center or top of the screen.                                                                                | string          | `'top'`, `'center'`                                | 'top'   |
+| **backdrop**                                              | Apply a backdrop on body while offcanvas is open.                                                                                  | boolean\|string | `boolean \| 'static'`                              | true    |
+| **content-class-name**                                    | A string of all className you want applied to the modal content component.                                                         | string          | -                                                  | -       |
+| **focus** <br><div class="badge bg-primary">v5.0.0+</div> | Puts the focus on the modal when shown.                                                                                            | boolean         | -                                                  | true    |
+| **fullscreen**                                            | Set modal to covers the entire user viewport                                                                                       | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | -       |
+| **keyboard**                                              | Closes the modal when escape key is pressed.                                                                                       | boolean         | -                                                  | true    |
+| **scrollable**                                            | Create a scrollable modal that allows scrolling the modal body.                                                                    | boolean         | -                                                  | -       |
+| **size**                                                  | Size the component small, large, or extra large.                                                                                   | string          | `'sm'`, `'lg'`, `'xl'`                             | -       |
+| **transition**                                            | Remove animation to create modal that simply appear rather than fade in to view.                                                   | boolean         | -                                                  | true    |
+| **unmount-on-close**                                      | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean         | -                                                  | true    |
+| **visible**                                               | Toggle the visibility of alert component.                                                                                          | boolean         | -                                                  | -       |
 
 #### Events
 
diff --git a/packages/docs/api/modal/CModalTitle.api.md b/packages/docs/api/modal/CModalTitle.api.md
index 81ba100e..93d9891a 100644
--- a/packages/docs/api/modal/CModalTitle.api.md
+++ b/packages/docs/api/modal/CModalTitle.api.md
@@ -8,6 +8,6 @@ import CModalTitle from '@coreui/vue/src/components/modal/CModalTitle'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
diff --git a/packages/docs/api/nav/CNav.api.md b/packages/docs/api/nav/CNav.api.md
index 249b3f6b..deda7877 100644
--- a/packages/docs/api/nav/CNav.api.md
+++ b/packages/docs/api/nav/CNav.api.md
@@ -8,8 +8,8 @@ import CNav from '@coreui/vue/src/components/nav/CNav'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values                  | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ----------------------- | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -                       | 'ul'    |
-| **layout**    | Specify a layout type for component.                                                    | string | `'fill'`, `'justified'` | -       |
-| **variant**   | Set the nav variant to tabs or pills.                                                   | string | `'tabs'`, `'pills'`     | -       |
+| Prop name   | Description                                                                             | Type   | Values                                                   | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| **as**      | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                        | 'ul'    |
+| **layout**  | Specify a layout type for component.                                                    | string | `'fill'`, `'justified'`                                  | -       |
+| **variant** | Set the nav variant to tabs or pills.                                                   | string | `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/api/nav/CNavGroup.api.md b/packages/docs/api/nav/CNavGroup.api.md
index 3d826283..309a55c4 100644
--- a/packages/docs/api/nav/CNavGroup.api.md
+++ b/packages/docs/api/nav/CNavGroup.api.md
@@ -8,10 +8,11 @@ import CNavGroup from '@coreui/vue/src/components/nav/CNavGroup'
 
 #### Props
 
-| Prop name   | Description                                                   | Type    | Values | Default |
-| ----------- | ------------------------------------------------------------- | ------- | ------ | ------- |
-| **compact** | Make nav group more compact by cutting all `padding` in half. | boolean | -      | -       |
-| **visible** | Show nav group items.                                         | boolean | -      | -       |
+| Prop name   | Description                                                                             | Type    | Values | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **as**      | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'li'    |
+| **compact** | Make nav group more compact by cutting all `padding` in half.                           | boolean | -      | -       |
+| **visible** | Show nav group items.                                                                   | boolean | -      | -       |
 
 #### Events
 
diff --git a/packages/docs/api/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index 0be3893c..2a2d63d1 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -5,3 +5,9 @@ import { CNavItem } from '@coreui/vue'
 // or
 import CNavItem from '@coreui/vue/src/components/nav/CNavItem'
 ```
+
+#### Props
+
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'li'    |
diff --git a/packages/docs/api/nav/CNavLink.api.md b/packages/docs/api/nav/CNavLink.api.md
index 748b5bea..7e17ce27 100644
--- a/packages/docs/api/nav/CNavLink.api.md
+++ b/packages/docs/api/nav/CNavLink.api.md
@@ -8,8 +8,8 @@ import CNavLink from '@coreui/vue/src/components/nav/CNavLink'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active**    | Toggle the active state for the component.                                              | boolean | -      | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
-| **disabled**  | Toggle the disabled state for the component.                                            | boolean | -      | -       |
+| Prop name    | Description                                                                             | Type    | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -      | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'a'     |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
diff --git a/packages/docs/api/nav/CNavTitle.api.md b/packages/docs/api/nav/CNavTitle.api.md
index 856e314b..ce56c9b1 100644
--- a/packages/docs/api/nav/CNavTitle.api.md
+++ b/packages/docs/api/nav/CNavTitle.api.md
@@ -5,3 +5,9 @@ import { CNavTitle } from '@coreui/vue'
 // or
 import CNavTitle from '@coreui/vue/src/components/nav/CNavTitle'
 ```
+
+#### Props
+
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'li'    |
diff --git a/packages/docs/api/navbar/CNavbar.api.md b/packages/docs/api/navbar/CNavbar.api.md
index d907f3fc..bc8d5c8b 100644
--- a/packages/docs/api/navbar/CNavbar.api.md
+++ b/packages/docs/api/navbar/CNavbar.api.md
@@ -10,9 +10,9 @@ import CNavbar from '@coreui/vue/src/components/navbar/CNavbar'
 
 | Prop name        | Description                                                                             | Type            | Values                                                                                                    | Default |
 | ---------------- | --------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
+| **as**           | Component used for the root node. Either a string to use a HTML element or a component. | string          | -                                                                                                         | 'nav'   |
 | **color**        | Sets the color context of the component to one of CoreUI’s themed colors.               | string          | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | -       |
 | **color-scheme** | Sets if the color of text should be colored for a light or dark dark background.        | string          | `'dark'`, `'light'`                                                                                       | -       |
-| **component**    | Component used for the root node. Either a string to use a HTML element or a component. | string          | -                                                                                                         | 'nav'   |
 | **container**    | Defines optional container wrapping children elements.                                  | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'`                                             | -       |
 | **expand**       | Defines the responsive breakpoint to determine when content collapses.                  | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`                                                        | -       |
 | **placement**    | Place component in non-static positions.                                                | string          | `'fixed-top'`, `'fixed-bottom'`, `'sticky-top'`                                                           | -       |
diff --git a/packages/docs/api/navbar/CNavbarBrand.api.md b/packages/docs/api/navbar/CNavbarBrand.api.md
index 5d24b0e8..de415ed5 100644
--- a/packages/docs/api/navbar/CNavbarBrand.api.md
+++ b/packages/docs/api/navbar/CNavbarBrand.api.md
@@ -8,7 +8,7 @@ import CNavbarBrand from '@coreui/vue/src/components/navbar/CNavbarBrand'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'a'     |
-| **href**      | The href attribute specifies the URL of the page the link goes to.                      | string | -      | -       |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'a'     |
+| **href**  | The href attribute specifies the URL of the page the link goes to.                      | string | -      | -       |
diff --git a/packages/docs/api/navbar/CNavbarNav.api.md b/packages/docs/api/navbar/CNavbarNav.api.md
index d71b96fc..ce7da6a2 100644
--- a/packages/docs/api/navbar/CNavbarNav.api.md
+++ b/packages/docs/api/navbar/CNavbarNav.api.md
@@ -8,6 +8,6 @@ import CNavbarNav from '@coreui/vue/src/components/navbar/CNavbarNav'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'ul'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'ul'    |
diff --git a/packages/docs/api/offcanvas/COffcanvas.api.md b/packages/docs/api/offcanvas/COffcanvas.api.md
index ec04f04e..130ab67f 100644
--- a/packages/docs/api/offcanvas/COffcanvas.api.md
+++ b/packages/docs/api/offcanvas/COffcanvas.api.md
@@ -11,6 +11,7 @@ import COffcanvas from '@coreui/vue/src/components/offcanvas/COffcanvas'
 | Prop name                                                     | Description                                                                                           | Type            | Values                                             | Default |
 | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
 | **backdrop**                                                  | Apply a backdrop on body while offcanvas is open.                                                     | boolean\|string | `boolean \| 'static'`                              | true    |
+| **dark**                                                      | Sets a darker color scheme.                                                                           | boolean         | -                                                  | -       |
 | **keyboard**                                                  | Closes the offcanvas when escape key is pressed.                                                      | boolean         | -                                                  | true    |
 | **placement**                                                 | Components placement, there’s no default placement.                                                   | string          | `'start'`, `'end'`, `'top'`, `'bottom'`            | -       |
 | **responsive** <br><div class="badge bg-primary">4.7.0+</div> | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | boolean\|string | `boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | true    |
diff --git a/packages/docs/api/offcanvas/COffcanvasTitle.api.md b/packages/docs/api/offcanvas/COffcanvasTitle.api.md
index 48fff654..f920006c 100644
--- a/packages/docs/api/offcanvas/COffcanvasTitle.api.md
+++ b/packages/docs/api/offcanvas/COffcanvasTitle.api.md
@@ -8,6 +8,6 @@ import COffcanvasTitle from '@coreui/vue/src/components/offcanvas/COffcanvasTitl
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'h5'    |
diff --git a/packages/docs/api/pagination/CPaginationItem.api.md b/packages/docs/api/pagination/CPaginationItem.api.md
index fced0268..ce607b0b 100644
--- a/packages/docs/api/pagination/CPaginationItem.api.md
+++ b/packages/docs/api/pagination/CPaginationItem.api.md
@@ -8,9 +8,9 @@ import CPaginationItem from '@coreui/vue/src/components/pagination/CPaginationIt
 
 #### Props
 
-| Prop name     | Description                                                                             | Type    | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active**    | Toggle the active state for the component.                                              | boolean | -      | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | -       |
-| **disabled**  | Toggle the disabled state for the component.                                            | boolean | -      | -       |
-| **href**      | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
+| Prop name    | Description                                                                             | Type    | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -      | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | -       |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
+| **href**     | The href attribute specifies the URL of the page the link goes to.                      | string  | -      | -       |
diff --git a/packages/docs/api/placeholder/CPlaceholder.api.md b/packages/docs/api/placeholder/CPlaceholder.api.md
index e229a9dc..074a0c57 100644
--- a/packages/docs/api/placeholder/CPlaceholder.api.md
+++ b/packages/docs/api/placeholder/CPlaceholder.api.md
@@ -11,8 +11,8 @@ import CPlaceholder from '@coreui/vue/src/components/placeholder/CPlaceholder'
 | Prop name     | Description                                                                             | Type   | Values                                                                                          | Default |
 | ------------- | --------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------- | ------- |
 | **animation** | Set animation type to better convey the perception of something being actively loaded.  | string | `'glow'`, `'wave'`                                                                              | -       |
+| **as**        | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                                                               | 'span'  |
 | **color**     | Sets the color context of the component to one of CoreUI’s themed colors.               | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -       |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                                                               | 'span'  |
 | **size**      | Size the component extra small, small, or large.                                        | string | `'xs'`, `'sm'`, `'lg'`                                                                          | -       |
 | **xs**        | The number of columns on extra small devices (<576px).                                  | number | -                                                                                               | -       |
 | **sm**        | The number of columns on small devices (<768px).                                        | number | -                                                                                               | -       |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 3c4917d6..55a94fd7 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -8,14 +8,18 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 
 #### Props
 
-| Prop name     | Description                                                                                                                                                          | Type               | Values                          | Default |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------- | ------- |
-| **content**   | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                       | string             | -                               | -       |
-| **offset**    | Offset of the popover relative to its target.                                                                                                                        | array              | -                               | [0, 8]  |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement          | -                               | 'top'   |
-| **title**     | Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`                                           | string             | -                               | -       |
-| **trigger**   | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                  | string \| string[] | `'click'`, `'focus'`, `'hover'` | 'click' |
-| **visible**   | Toggle the visibility of popover component.                                                                                                                          | boolean            | -                               | -       |
+| Prop name                                                              | Description                                                                                                                                                                                                                                                     | Type                                         | Values                          | Default                                  |
+| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
+| **animation** <br><div class="badge bg-primary">4.9.0+</div>           | Apply a CSS fade transition to the popover.                                                                                                                                                                                                                     | boolean                                      | -                               | true                                     |
+| **container** <br><div class="badge bg-primary">v5.0.0+</div>          | Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
+| **content**                                                            | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                                                                                                                  | string                                       | -                               | -                                        |
+| **delay** <br><div class="badge bg-primary">4.9.0+</div>               | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number }     | -                               | 0                                        |
+| **fallback-placements** <br><div class="badge bg-primary">4.9.0+</div> | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.                                                                                                       | Placements \| Placements[]                   | -                               | () => ['top', 'right', 'bottom', 'left'] |
+| **offset**                                                             | Offset of the popover relative to its target.                                                                                                                                                                                                                   | array                                        | -                               | [0, 8]                                   |
+| **placement**                                                          | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                            | Placement                                    | -                               | 'top'                                    |
+| **title**                                                              | Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`                                                                                                                                      | string                                       | -                               | -                                        |
+| **trigger**                                                            | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                             | Triggers \| Triggers[]                       | `'click'`, `'focus'`, `'hover'` | 'click'                                  |
+| **visible**                                                            | Toggle the visibility of popover component.                                                                                                                                                                                                                     | boolean                                      | -                               | -                                        |
 
 #### Events
 
diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md
index 3621fe13..1236b6ba 100644
--- a/packages/docs/api/progress/CProgress.api.md
+++ b/packages/docs/api/progress/CProgress.api.md
@@ -8,8 +8,13 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress'
 
 #### Props
 
-| Prop name  | Description                                                                                                               | Type    | Values | Default |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **height** | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. | number  | -      | -       |
-| **thin**   | Makes progress bar thinner.                                                                                               | boolean | -      | -       |
-| **white**  | Change the default color to white.                                                                                        | boolean | -      | -       |
+| Prop name                                                                  | Description                                                                                                               | Type    | Values                                                                                          | Default |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | ------- |
+| **animated**                                                               | Use to animate the stripes right to left via CSS3 animations.                                                             | boolean | -                                                                                               | -       |
+| **color**                                                                  | Sets the color context of the component to one of CoreUI’s themed colors.                                                 | string  | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -       |
+| **height**                                                                 | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. | number  | -                                                                                               | -       |
+| **progress-bar-class-name** <br><div class="badge bg-primary">5.0.0+</div> | A string of all className you want applied to the <CProgressBar/> component.                                              | string  | -                                                                                               | -       |
+| **thin**                                                                   | Makes progress bar thinner.                                                                                               | boolean | -                                                                                               | -       |
+| **value**                                                                  | The percent to progress the ProgressBar.                                                                                  | number  | -                                                                                               | 0       |
+| **variant**                                                                | Set the progress bar variant to optional striped.                                                                         | string  | `'striped'`                                                                                     | -       |
+| **white**                                                                  | Change the default color to white.                                                                                        | boolean | -                                                                                               | -       |
diff --git a/packages/docs/api/progress/CProgressStacked.api.md b/packages/docs/api/progress/CProgressStacked.api.md
new file mode 100644
index 00000000..8faf5158
--- /dev/null
+++ b/packages/docs/api/progress/CProgressStacked.api.md
@@ -0,0 +1,7 @@
+### CProgressStacked
+
+```jsx
+import { CProgressStacked } from '@coreui/vue'
+// or
+import CProgressStacked from '@coreui/vue/src/components/progress/CProgressStacked'
+```
diff --git a/packages/docs/api/sidebar/CSidebar.api.md b/packages/docs/api/sidebar/CSidebar.api.md
index 37e6f9ee..94a678d8 100644
--- a/packages/docs/api/sidebar/CSidebar.api.md
+++ b/packages/docs/api/sidebar/CSidebar.api.md
@@ -8,14 +8,16 @@ import CSidebar from '@coreui/vue/src/components/sidebar/CSidebar'
 
 #### Props
 
-| Prop name      | Description                                      | Type    | Values | Default |
-| -------------- | ------------------------------------------------ | ------- | ------ | ------- |
-| **narrow**     | Make sidebar narrow.                             | boolean | -      | -       |
-| **overlaid**   | Set sidebar to overlaid variant.                 | boolean | -      | -       |
-| **position**   | Place sidebar in non-static positions.           | string  | -      | -       |
-| **size**       | Size the component small, large, or extra large. | string  | -      | -       |
-| **unfoldable** | Expand narrowed sidebar on hover.                | boolean | -      | -       |
-| **visible**    | Toggle the visibility of sidebar component.      | boolean | -      | -       |
+| Prop name        | Description                                                                      | Type    | Values             | Default |
+| ---------------- | -------------------------------------------------------------------------------- | ------- | ------------------ | ------- |
+| **color-scheme** | Sets if the color of text should be colored for a light or dark dark background. | string  | `'dark'`, `light'` | -       |
+| **narrow**       | Make sidebar narrow.                                                             | boolean | -                  | -       |
+| **overlaid**     | Set sidebar to overlaid variant.                                                 | boolean | -                  | -       |
+| **placement**    | Components placement, there’s no default placement.                              | string  | `'start'`, `'end'` | -       |
+| **position**     | Place sidebar in non-static positions.                                           | string  | -                  | -       |
+| **size**         | Size the component small, large, or extra large.                                 | string  | -                  | -       |
+| **unfoldable**   | Expand narrowed sidebar on hover.                                                | boolean | -                  | -       |
+| **visible**      | Toggle the visibility of sidebar component.                                      | boolean | -                  | -       |
 
 #### Events
 
diff --git a/packages/docs/api/sidebar/CSidebarBrand.api.md b/packages/docs/api/sidebar/CSidebarBrand.api.md
index 79d69d44..9819a335 100644
--- a/packages/docs/api/sidebar/CSidebarBrand.api.md
+++ b/packages/docs/api/sidebar/CSidebarBrand.api.md
@@ -5,3 +5,10 @@ import { CSidebarBrand } from '@coreui/vue'
 // or
 import CSidebarBrand from '@coreui/vue/src/components/sidebar/CSidebarBrand'
 ```
+
+#### Props
+
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'div'   |
+| **href**  | The href attribute specifies the URL of the page the link goes to.                      | string | -      | -       |
diff --git a/packages/docs/api/sidebar/CSidebarNav.api.md b/packages/docs/api/sidebar/CSidebarNav.api.md
index 30558957..fdfa8a1c 100644
--- a/packages/docs/api/sidebar/CSidebarNav.api.md
+++ b/packages/docs/api/sidebar/CSidebarNav.api.md
@@ -5,3 +5,9 @@ import { CSidebarNav } from '@coreui/vue'
 // or
 import CSidebarNav from '@coreui/vue/src/components/sidebar/CSidebarNav'
 ```
+
+#### Props
+
+| Prop name | Description                                                                             | Type                | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------------------- | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string \| Component | -      | 'ul'    |
diff --git a/packages/docs/api/spinner/CSpinner.api.md b/packages/docs/api/spinner/CSpinner.api.md
index df9d77ed..2ff979b7 100644
--- a/packages/docs/api/spinner/CSpinner.api.md
+++ b/packages/docs/api/spinner/CSpinner.api.md
@@ -10,8 +10,8 @@ import CSpinner from '@coreui/vue/src/components/spinner/CSpinner'
 
 | Prop name                 | Description                                                                             | Type   | Values                                                                                          | Default      |
 | ------------------------- | --------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------- | ------------ |
+| **as**                    | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                                                               | 'div'        |
 | **color**                 | Sets the color context of the component to one of CoreUI’s themed colors.               | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -            |
-| **component**             | Component used for the root node. Either a string to use a HTML element or a component. | string | -                                                                                               | 'div'        |
 | **size**                  | Size the component small.                                                               | string | `'sm'`                                                                                          | -            |
 | **variant**               | Set the button variant to an outlined button or a ghost button.                         | string | `'border'`, `'grow'`                                                                            | 'border'     |
 | **visually-hidden-label** | Set visually hidden label for accessibility purposes.                                   | string | -                                                                                               | 'Loading...' |
diff --git a/packages/docs/api/toast/CToastClose.api.md b/packages/docs/api/toast/CToastClose.api.md
index beab2765..c1b0f388 100644
--- a/packages/docs/api/toast/CToastClose.api.md
+++ b/packages/docs/api/toast/CToastClose.api.md
@@ -8,9 +8,9 @@ import CToastClose from '@coreui/vue/src/components/toast/CToastClose'
 
 #### Props
 
-| Prop name     | Description                                                                             | Type   | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | -       |
+| Prop name | Description                                                                             | Type   | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | -       |
 
 #### Events
 
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index 66bf91ce..f8f3d672 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -8,13 +8,17 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 
 #### Props
 
-| Prop name     | Description                                                                                                                                                          | Type               | Values                          | Default |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------- | ------- |
-| **content**   | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                       | string             | -                               | -       |
-| **offset**    | Offset of the tooltip relative to its target.                                                                                                                        | array              | -                               | [0, 0]  |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement          | -                               | 'top'   |
-| **trigger**   | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                  | string \| string[] | `'click'`, `'focus'`, `'hover'` | 'hover' |
-| **visible**   | Toggle the visibility of tooltip component.                                                                                                                          | boolean            | -                               | -       |
+| Prop name                                                              | Description                                                                                                                                                                                                                                                     | Type                                         | Values                          | Default                                  |
+| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
+| **animation** <br><div class="badge bg-primary">4.9.0+</div>           | Apply a CSS fade transition to the tooltip.                                                                                                                                                                                                                     | boolean                                      | -                               | true                                     |
+| **container** <br><div class="badge bg-primary">v5.0.0+</div>          | Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
+| **content**                                                            | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                                                                                                                  | string                                       | -                               | -                                        |
+| **delay** <br><div class="badge bg-primary">4.9.0+</div>               | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number }     | -                               | 0                                        |
+| **fallback-placements** <br><div class="badge bg-primary">4.9.0+</div> | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.                                                                                                       | Placements \| Placements[]                   | -                               | () => ['top', 'right', 'bottom', 'left'] |
+| **offset**                                                             | Offset of the tooltip relative to its target.                                                                                                                                                                                                                   | array                                        | -                               | [0, 6]                                   |
+| **placement**                                                          | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                            | Placement                                    | -                               | 'top'                                    |
+| **trigger**                                                            | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                             | Triggers \| Triggers[]                       | `'click'`, `'focus'`, `'hover'` | () => ['hover', 'focus']                 |
+| **visible**                                                            | Toggle the visibility of tooltip component.                                                                                                                                                                                                                     | boolean                                      | -                               | -                                        |
 
 #### Events
 
diff --git a/packages/docs/build/.eslintrc.json b/packages/docs/build/.eslintrc.json
deleted file mode 100644
index b890edff..00000000
--- a/packages/docs/build/.eslintrc.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "env": {
-    "browser": false,
-    "node": true
-  },
-  "parserOptions": {
-    "sourceType": "script"
-  },
-  "extends": "../../../.eslintrc.js",
-  "rules": {
-    "no-console": "off",
-    "strict": "error"
-  }
-}
\ No newline at end of file
diff --git a/packages/docs/build/buildVscodeHints.js b/packages/docs/build/buildVscodeHints.js
deleted file mode 100644
index 38c627c6..00000000
--- a/packages/docs/build/buildVscodeHints.js
+++ /dev/null
@@ -1,119 +0,0 @@
-// TODO: refactor this component
-// const fs = require('fs-extra')
-// const types = fs.readFileSync('src/components/index.d.ts', 'utf-8')
-// const classes = getTypesClasses(types)
-
-// function getTypesClasses (types) {
-//   let classes = {}
-//   const rawClasses = types.replace(/(\n|\r)/ig, '')
-//                           .split('declare')
-//                           .filter(rawClass => rawClass.includes('class'))
-
-//   rawClasses.forEach(rawClass => {
-//     const name = rawClass.match(/(?<=class\s+).*?(?=\s+)/gs)[0]
-
-//     const propsRaw = rawClass
-//       .substring(rawClass.indexOf('{') + 1, rawClass.lastIndexOf('}'))
-//       .replace(/{(()([^}]))+}/ig, 'custom')
-
-
-//     let props = propsRaw.match(/([a-zA-Z?]+:).*?(?=[a-zA-Z?]+:|$)/g)
-
-//     if (props) {
-//       props = props.map(prop => prop.trim().replace('?', ''))
-//     }        
-    
-//     classes[name] = {
-//       isExported: rawClass.includes('export'),
-//       extend: rawClass.match(/(?<=extends\s+).*?(?=\s+{)/gs)[0],
-//       props,
-//     }
-//   })
-//   Object.entries(classes).forEach(([key, value]) => {
-//     if (value.extend !== 'Vue') {
-//       const props = classes[key].props || []
-//       const extend = classes[value.extend].props || []
-//       classes[key].props = [...props, ...extend]
-//     }
-//   })
-//   return classes
-// }
-
-// const components = {} 
-// Object.entries(classes).forEach(([key,value]) => {
-//   if (value.isExported) {
-//     components[key] = value
-//   }
-// }) 
-
-// generateVeturFiles(components)
-
-// function generateVeturFiles (content) {
-//   const dir = 'dist/vetur'
-//   if (!fs.existsSync(dir)) {
-//     fs.mkdirSync(dir)
-//   }
-
-//   const attributes = generateAttributes(content)
-//   fs.writeFile(
-//     `dist/vetur/coreui-attributes.json`,
-//     attributes,
-//     () => ''
-//   )
-
-//   const tags = generateTags(content)
-//   fs.writeFile(
-//     `dist/vetur/coreui-tags.json`,
-//     tags,
-//     () => ''
-//   )
-// }
-
-// function generateTags (content) {
-//   let tags = {}
-//   Object.entries(content).forEach(([name, component]) => {
-//     let attributes = []
-//     if (component.props) {
-//       attributes = component.props.map(prop => toKebabCase(prop.split(':')[0]))
-//     }
-//     tags[name] = {
-//       attributes,
-//       description: ''
-//     }
-//     tags[toKebabCase(name)] = {
-//       attributes,
-//       description: ''
-//     }
-//   })
-//   return JSON.stringify(tags, null, 2)
-// }
-
-// function generateAttributes (content) {
-//   let attributes = {}
-//   Object.entries(content).forEach(([name, component]) => {
-//     if (component.props) {
-//       component.props.forEach(prop => {
-//         const propName = toKebabCase(prop.split(':')[0])
-//         const key = name + '/' + propName
-//         const kebabKey = toKebabCase(name) + '/' + propName
-//         const type = prop.split(':')[1].trim()
-//         const description = 'For API documentation please visit https://coreui.io/vue/docs'
-
-//         attributes[kebabKey] = {
-//           description,
-//           type,
-//         }
-//         attributes[key] = {
-//           description,
-//           type,
-//         }
-//       })
-//     }
-//   })
-//   return JSON.stringify(attributes, null, 2)
-// }
-
-// function toKebabCase (str) {
-//   const camelCase = str.charAt(0).toLowerCase() + str.slice(1)
-//   return camelCase.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-// }
\ No newline at end of file
diff --git a/packages/docs/build/changelog-template.hbs b/packages/docs/build/changelog-template.hbs
deleted file mode 100644
index 1f66e38c..00000000
--- a/packages/docs/build/changelog-template.hbs
+++ /dev/null
@@ -1,34 +0,0 @@
-# Changelog
-
-{{#each releases}}
-{{#if href}}
-## {{#unless major}}{{/unless}}[{{title}}]({{href}})
-{{else}}
-## {{title}}
-{{/if}}
-
-{{#if tag}}
-> {{niceDate}}
-{{/if}}
-{{#if summary}}
-
-{{summary}}
-{{/if}}
-{{#if commits}}
-
-### Changed
-
-{{#each commits}}
-- {{#if breaking}}**Breaking change:** {{/if}}{{subject}}{{#if href}} [`{{shorthash}}`]({{href}}){{/if}}
-{{/each}}
-
-{{/if}}
-{{#if fixes}}
-
-### Fixed
-
-{{#each fixes}}
-- {{commit.subject}}{{#each fixes}}{{#if href}} [`#{{id}}`]({{href}}){{/if}}{{/each}}
-{{/each}}
-{{/if}}
-{{/each}}
\ No newline at end of file
diff --git a/packages/docs/build/docgen.config.js b/packages/docs/build/docgen.config.js
index 67b35dee..e4c71f24 100644
--- a/packages/docs/build/docgen.config.js
+++ b/packages/docs/build/docgen.config.js
@@ -2,7 +2,6 @@
 'use strict'
 
 const path = require('path')
-// const pkg = require('./../package.json')
 
 module.exports = {
   componentsRoot: './../../packages', // the folder where CLI will start searching for components.
diff --git a/packages/docs/build/webpack.config.js b/packages/docs/build/webpack.config.js
deleted file mode 100644
index 0ddbf9f5..00000000
--- a/packages/docs/build/webpack.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-    rules: {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: "pre",
-        include: [resolve('src'), resolve('test')],
-        options: {
-          formatter: require('eslint-friendly-formatter')
-        }
-    }
-}
\ No newline at end of file
diff --git a/packages/docs/components/badge.md b/packages/docs/components/badge.md
index 5f6a22a0..6d46e501 100644
--- a/packages/docs/components/badge.md
+++ b/packages/docs/components/badge.md
@@ -145,7 +145,7 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
 <CBadge color="danger">danger</CBadge>
 <CBadge color="warning">warning</CBadge>
 <CBadge color="info">info</CBadge>
-<CBadge color="light">light</CBadge>
+<CBadge textBgColor="light">light</CBadge>
 <CBadge color="dark">dark</CBadge>
 :::
 ```vue
@@ -154,10 +154,32 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
 <CBadge color="danger">danger</CBadge>
 <CBadge color="warning">warning</CBadge>
 <CBadge color="info">info</CBadge>
-<CBadge color="light">light</CBadge>
+<CBadge textBgColor="light">light</CBadge>
 <CBadge color="dark">dark</CBadge>
 ```
 
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+::: demo
+<CBadge textBgColor="primary">primary</CBadge>
+<CBadge textBgColor="success">success</CBadge>
+<CBadge textBgColor="danger">danger</CBadge>
+<CBadge textBgColor="warning">warning</CBadge>
+<CBadge textBgColor="info">info</CBadge>
+<CBadge textBgColor="light">light</CBadge>
+<CBadge textBgColor="dark">dark</CBadge>
+:::
+```vue
+<CBadge textBgColor="primary">primary</CBadge>
+<CBadge textBgColor="success">success</CBadge>
+<CBadge textBgColor="danger">danger</CBadge>
+<CBadge textBgColor="warning">warning</CBadge>
+<CBadge textBgColor="info">info</CBadge>
+<CBadge textBgColor="light">light</CBadge>
+<CBadge textBgColor="dark">dark</CBadge>
+```
+
+
 ## Pill badges
 
 Apply the `shape="rounded-pill"` prop to make badges rounded.
@@ -168,7 +190,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
 <CBadge color="danger" shape="rounded-pill">danger</CBadge>
 <CBadge color="warning" shape="rounded-pill">warning</CBadge>
 <CBadge color="info" shape="rounded-pill">info</CBadge>
-<CBadge color="light" shape="rounded-pill">light</CBadge>
+<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
 <CBadge color="dark" shape="rounded-pill">dark</CBadge>
 :::
 ```vue
@@ -177,7 +199,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
 <CBadge color="danger" shape="rounded-pill">danger</CBadge>
 <CBadge color="warning" shape="rounded-pill">warning</CBadge>
 <CBadge color="info" shape="rounded-pill">info</CBadge>
-<CBadge color="light" shape="rounded-pill">light</CBadge>
+<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
 <CBadge color="dark" shape="rounded-pill">dark</CBadge>
 ```
 
diff --git a/packages/docs/components/button.md b/packages/docs/components/button.md
index 05a3d5dc..0f9a8428 100644
--- a/packages/docs/components/button.md
+++ b/packages/docs/components/button.md
@@ -32,12 +32,9 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
 <CButton color="link">Link</CButton>
 ```
 
-<div class="callout callout-info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</div>
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ## Disable text wrapping
 
@@ -50,18 +47,18 @@ The `<CButton>` component are designed for `<button>` ,  `<a>`  or  `<input>` el
 If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
 
 ::: demo
-<CButton component="a" color="primary" href="#" role="button">Link</CButton>
+<CButton as="a" color="primary" href="#" role="button">Link</CButton>
 <CButton type="submit" color="primary">Button</CButton>
-<CButton component="input" type="button" color="primary" value="Input"/>
-<CButton component="input" type="submit" color="primary" value="Submit"/>
-<CButton component="input" type="reset" color="primary" value="Reset"/>
+<CButton as="input" type="button" color="primary" value="Input"/>
+<CButton as="input" type="submit" color="primary" value="Submit"/>
+<CButton as="input" type="reset" color="primary" value="Reset"/>
 :::
 ```vue
-<CButton component="a" color="primary" href="#" role="button">Link</CButton>
+<CButton as="a" color="primary" href="#" role="button">Link</CButton>
 <CButton type="submit" color="primary">Button</CButton>
-<CButton component="input" type="button" color="primary" value="Input"/>
-<CButton component="input" type="submit" color="primary" value="Submit"/>
-<CButton component="input" type="reset" color="primary" value="Reset"/>
+<CButton as="input" type="button" color="primary" value="Input"/>
+<CButton as="input" type="submit" color="primary" value="Submit"/>
+<CButton as="input" type="reset" color="primary" value="Reset"/>
 ```
 
 ## Outline buttons
@@ -115,7 +112,7 @@ If you need a ghost variant of button, set `variant="ghost"` prop to remove all
 ```
 
 
-<CCallout color="info">Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</CCallout>
+<Callout color="info">Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</Callout>
 
 ## Sizes
 
@@ -200,12 +197,12 @@ Disabled buttons using the `<a>` component act a little different:
 `<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` class to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
 
 ::: demo
-<CButton component="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
-<CButton component="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
+<CButton as="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
+<CButton as="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
 :::
 ```vue
-<CButton component="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
-<CButton component="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
+<CButton as="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
+<CButton as="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
 ```
 
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
diff --git a/packages/docs/components/card.md b/packages/docs/components/card.md
index 591ab009..57562d86 100644
--- a/packages/docs/components/card.md
+++ b/packages/docs/components/card.md
@@ -24,7 +24,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -34,7 +34,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -71,7 +71,7 @@ Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also
 <CCard style="width: 18rem">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
-    <CCardSubtitle class="mb-2 text-muted">Card subtitle</CCardSubtitle>
+    <CCardSubtitle class="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
     <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
     <CCardLink href="#">Card link</CCardLink>
     <CCardLink href="#">Another link</CCardLink>
@@ -82,7 +82,7 @@ Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also
 <CCard style="width: 18rem">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
-    <CCardSubtitle class="mb-2 text-muted">Card subtitle</CCardSubtitle>
+    <CCardSubtitle class="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
     <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
     <CCardLink href="#">Card link</CCardLink>
     <CCardLink href="#">Another link</CCardLink>
@@ -226,7 +226,7 @@ Add an optional header and/or footer within a card.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -236,30 +236,30 @@ Add an optional header and/or footer within a card.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
 
-Card headers can be styled by adding ex. `component="h5"`.
+Card headers can be styled by adding ex. `as="h5"`.
 
 ::: demo
 <CCard>
-  <CCardHeader component="h5">Header</CCardHeader>
+  <CCardHeader as="h5">Header</CCardHeader>
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
 ```vue
 <CCard>
-  <CCardHeader component="h5">Header</CCardHeader>
+  <CCardHeader as="h5">Header</CCardHeader>
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -293,9 +293,9 @@ Card headers can be styled by adding ex. `component="h5"`.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
-  <CCardFooter class="text-muted">2 days ago</CCardFooter>
+  <CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
 </CCard>
 :::
 ```vue
@@ -304,9 +304,9 @@ Card headers can be styled by adding ex. `component="h5"`.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
-  <CCardFooter class="text-muted">2 days ago</CCardFooter>
+  <CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
 </CCard>
 ```
 
@@ -325,7 +325,7 @@ Using the grid, wrap cards in columns and rows as needed.
       <CCardBody>
         <CCardTitle>Special title treatment</CCardTitle>
         <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-        <CButton href="#">Go somewhere</CButton>
+        <CButton color="primary" href="#">Go somewhere</CButton>
       </CCardBody>
     </CCard>
   </CCol>
@@ -334,7 +334,7 @@ Using the grid, wrap cards in columns and rows as needed.
       <CCardBody>
         <CCardTitle>Special title treatment</CCardTitle>
         <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-        <CButton href="#">Go somewhere</CButton>
+        <CButton color="primary" href="#">Go somewhere</CButton>
       </CCardBody>
     </CCard>
   </CCol>
@@ -347,7 +347,7 @@ Using the grid, wrap cards in columns and rows as needed.
       <CCardBody>
         <CCardTitle>Special title treatment</CCardTitle>
         <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-        <CButton href="#">Go somewhere</CButton>
+        <CButton color="primary" href="#">Go somewhere</CButton>
       </CCardBody>
     </CCard>
   </CCol>
@@ -356,7 +356,7 @@ Using the grid, wrap cards in columns and rows as needed.
       <CCardBody>
         <CCardTitle>Special title treatment</CCardTitle>
         <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-        <CButton href="#">Go somewhere</CButton>
+        <CButton color="primary" href="#">Go somewhere</CButton>
       </CCardBody>
     </CCard>
   </CCol>
@@ -372,14 +372,14 @@ Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="w-50">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -388,14 +388,14 @@ Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="w-50">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -409,7 +409,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -418,7 +418,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -432,21 +432,21 @@ You can instantly change the text arrangement of any card—in its whole or spec
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="text-center" style="width: 18rem">
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="text-end" style="width: 18rem">
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -455,21 +455,21 @@ You can instantly change the text arrangement of any card—in its whole or spec
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="text-center" style="width: 18rem">
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 <CCard class="text-end" style="width: 18rem">
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -510,7 +510,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -546,7 +546,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -583,7 +583,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 :::
@@ -619,7 +619,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
   <CCardBody>
     <CCardTitle>Special title treatment</CCardTitle>
     <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton href="#">Go somewhere</CButton>
+    <CButton color="primary" href="#">Go somewhere</CButton>
   </CCardBody>
 </CCard>
 ```
@@ -638,14 +638,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+    <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
   </CCardBody>
 </CCard>
 <CCard class="mb-3">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+    <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
   </CCardBody>
     <CCardImage orientation="bottom" :src="https://github.com/$withBase('/images/vue.jpg')" />
 </CCard>
@@ -656,14 +656,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+    <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
   </CCardBody>
 </CCard>
 <CCard class="mb-3">
   <CCardBody>
     <CCardTitle>Card title</CCardTitle>
     <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+    <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
   </CCardBody>
     <CCardImage orientation="bottom" src="https://github.com/images/vue.jpg" />
 </CCard>
@@ -708,7 +708,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
       <CCardBody>
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-        <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+        <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
       </CCardBody>
     </CCol>
   </CRow>
@@ -724,7 +724,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
       <CCardBody>
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-        <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+        <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
       </CCardBody>
     </CCol>
   </CRow>
@@ -780,12 +780,52 @@ Use `color` property to change the appearance of a card.
 </template>
 ```
 
-<CCallout color="info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</CCallout>
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+::: demo
+<template v-for="(item) in [
+  { color: 'primary' },
+  { color: 'secondary' },
+  { color: 'success' },
+  { color: 'danger' },
+  { color: 'warning' },
+  { color: 'info' },
+  { color: 'light' },
+  { color: 'dark' }
+]">
+  <CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
+    <CCardHeader>Header</CCardHeader>
+    <CCardBody>
+      <CCardTitle>{{item.color}} card title</CCardTitle>
+      <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
+    </CCardBody>
+  </CCard>
+</template>
+:::
+```vue
+<template v-for="(item) in [
+  { color: 'primary' },
+  { color: 'secondary' },
+  { color: 'success' },
+  { color: 'danger' },
+  { color: 'warning' },
+  { color: 'info' },
+  { color: 'light' },
+  { color: 'dark' }
+]">
+  <CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
+    <CCardHeader>Header</CCardHeader>
+    <CCardBody>
+      <CCardTitle>{{item.color}} card title</CCardTitle>
+      <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
+    </CCardBody>
+  </CCard>
+</template>
+```
+
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ### Border
 
@@ -890,7 +930,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
   <CCard>
@@ -898,7 +938,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
   <CCard>
@@ -906,7 +946,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
 </CCardGroup>
@@ -918,7 +958,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
   <CCard>
@@ -926,7 +966,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
   <CCard>
@@ -934,7 +974,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <CCardBody>
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
-      <CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
+      <CCardText><small class="text-body-secondary">Last updated 3 mins ago</small></CCardText>
     </CCardBody>
   </CCard>
 </CCardGroup>
@@ -950,7 +990,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
   <CCard>
     <CCardImage orientation="top" :src="https://github.com/$withBase('/images/vue.jpg')" />
@@ -958,7 +998,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
   <CCard>
     <CCardImage orientation="top" :src="https://github.com/$withBase('/images/vue.jpg')" />
@@ -966,7 +1006,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
 </CCardGroup>
 :::
@@ -978,7 +1018,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
   <CCard>
     <CCardImage orientation="top" src="https://github.com/images/vue.jpg" />
@@ -986,7 +1026,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
   <CCard>
     <CCardImage orientation="top" src="https://github.com/images/vue.jpg" />
@@ -994,7 +1034,7 @@ When using card groups with footers, their content will automatically line up.
       <CCardTitle>Card title</CCardTitle>
       <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
     </CCardBody>
-    <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+    <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
   </CCard>
 </CCardGroup>
 ```
@@ -1012,7 +1052,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1022,7 +1062,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1032,7 +1072,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1042,7 +1082,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
@@ -1056,7 +1096,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1066,7 +1106,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1076,7 +1116,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1086,7 +1126,7 @@ Use the `CRow` component and set `:xs|sm|md|lg|xl|xxl="{ cols: * }"` property to
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
@@ -1103,7 +1143,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1113,7 +1153,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1123,7 +1163,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1133,7 +1173,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
@@ -1147,7 +1187,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1157,7 +1197,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1167,7 +1207,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1177,7 +1217,7 @@ Change it to `:md="{ cols: 3}"` and you'll see the fourth card wrap.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
@@ -1277,7 +1317,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1287,7 +1327,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1297,7 +1337,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
@@ -1311,7 +1351,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1321,7 +1361,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
   <CCol xs>
@@ -1331,7 +1371,7 @@ Just like with card groups, card footers will automatically line up.
         <CCardTitle>Card title</CCardTitle>
         <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
       </CCardBody>
-      <CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
+      <CCardFooter><small class="text-body-secondary">Last updated 3 mins ago</small></CCardFooter>
     </CCard>
   </CCol>
 </CRow>
diff --git a/packages/docs/components/close-button.md b/packages/docs/components/close-button.md
index d6c71301..3bc5b38a 100644
--- a/packages/docs/components/close-button.md
+++ b/packages/docs/components/close-button.md
@@ -27,17 +27,17 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
 <CCloseButton disabled/>
 ```
 
-## White variant
+## Dark variant
 
-Change the default `<CCloseButton>` to be white with the `white` boolean property.
+Add `dark` boolean property to the `<CCloseButton>`, to invert the close button. This uses the filter property to invert the background-image without overriding its value.
 
 ::: demo-dark
-<CCloseButton white/>
-<CCloseButton white disabled/>
+<CCloseButton dark/>
+<CCloseButton dark disabled/>
 :::
 ```vue
-<CCloseButton white/>
-<CCloseButton white disabled/>
+<CCloseButton dark/>
+<CCloseButton dark disabled/>
 ```
 
 ## API
diff --git a/packages/docs/components/collapse.md b/packages/docs/components/collapse.md
index 50d879bc..162b1a16 100644
--- a/packages/docs/components/collapse.md
+++ b/packages/docs/components/collapse.md
@@ -15,7 +15,7 @@ The collapse component is used to show and hide content. Buttons or anchors are
 You can use a link or a button component.
 
 ::: demo
-<CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
+<CButton color="primary" href="#" @click.prevent="visible = !visible">Link</CButton>
 <CButton color="primary" @click="visible = !visible">Button</CButton>
 <CCollapse :visible="visible">
   <CCard class="mt-3">
@@ -29,7 +29,7 @@ You can use a link or a button component.
 :::
 ```vue
 <template>
-  <CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
+  <CButton color="primary" href="#" @click.prevent="visible = !visible">Link</CButton>
   <CButton color="primary" @click="visible = !visible">Button</CButton>
   <CCollapse :visible="visible">
     <CCard class="mt-3">
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index 5f492c9d..da73b72e 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -19,16 +19,7 @@ Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or differ
 
 Here's how you can put them to work with either `<button>` elements:
 ::: demo
-<CDropdown direction="dropup">
-  <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-<div dir="rtl">
-<CDropdown direction="dropup">
+<CDropdown>
   <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
   <CDropdownMenu>
     <CDropdownItem href="#">Action</CDropdownItem>
@@ -36,7 +27,6 @@ Here's how you can put them to work with either `<button>` elements:
     <CDropdownItem href="#">Something else here</CDropdownItem>
   </CDropdownMenu>
 </CDropdown>
-</div>
 :::
 ```vue
 <CDropdown>
@@ -53,7 +43,7 @@ And with `<a>` elements:
 
 ::: demo
 <CDropdown color="secondary" togglerText="Dropdown button">
-  <CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
+  <CDropdownToggle as="a" color="primary">Dropdown Button</CDropdownToggle>
   <CDropdownMenu>
     <CDropdownItem href="#">Action</CDropdownItem>
     <CDropdownItem href="#">Another action</CDropdownItem>
@@ -63,7 +53,7 @@ And with `<a>` elements:
 :::
 ```vue
 <CDropdown color="secondary" togglerText="Dropdown button">
-  <CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
+  <CDropdownToggle as="a" color="primary">Dropdown Button</CDropdownToggle>
   <CDropdownMenu>
     <CDropdownItem href="#">Action</CDropdownItem>
     <CDropdownItem href="#">Another action</CDropdownItem>
@@ -267,7 +257,7 @@ And putting it to use in a navbar:
     <CNavbarBrand href="#">Navbar</CNavbarBrand>
     <CNavbarNav>
       <CDropdown dark variant="nav-item">
-        <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
+        <CDropdownToggle color="dark" :navLink="false">Dropdown Button</CDropdownToggle>
         <CDropdownMenu>
           <CDropdownItem href="#">Action</CDropdownItem>
           <CDropdownItem href="#">Another action</CDropdownItem>
@@ -286,7 +276,7 @@ And putting it to use in a navbar:
     <CNavbarBrand href="#">Navbar</CNavbarBrand>
     <CNavbarNav>
       <CDropdown dark variant="nav-item">
-        <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
+        <CDropdownToggle color="dark" :navLink="false">Dropdown Button</CDropdownToggle>
         <CDropdownMenu>
           <CDropdownItem href="#">Action</CDropdownItem>
           <CDropdownItem href="#">Another action</CDropdownItem>
@@ -302,12 +292,9 @@ And putting it to use in a navbar:
 
 ## Directions
 
-<CCallout color="info">
-  <h4>RTL</h4>
-  <p>
-    Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
-  </p>
-</CCallout>
+<Callout color="info" title="RTL">
+  Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
+</Callout>
 
 ### Centered
 
@@ -591,7 +578,7 @@ Add a header to label sections of actions in any dropdown menu.
 In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
 
 ::: demo
-<div class="border rounded py-2">
+<div class="dropdown-menu">
   <CDropdownHeader>Dropdown header</CDropdownHeader>
   <CDropdownItem href="#">Action</CDropdownItem>
   <CDropdownItem href="#">Another action</CDropdownItem>
@@ -610,7 +597,7 @@ Separate groups of related menu items with a divider.
 In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
 
 ::: demo
-<div class="border rounded py-2">
+<div class="dropdown-menu">
   <CDropdownItem href="#">Action</CDropdownItem>
   <CDropdownItem href="#">Another action</CDropdownItem>
   <CDropdownItem href="#">Something else here</CDropdownItem>
@@ -630,7 +617,7 @@ In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDr
 Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
 
 ::: demo
-<div class="border rounded p-4 text-muted" style="max-width: 200px">
+<div class="border rounded p-4 text-body-secondary" style="max-width: 200px">
   <p>
     Some example text that's free-flowing within the dropdown menu.
   </p>
@@ -653,7 +640,7 @@ Place any freeform text within a dropdown menu with text. Note that you'll likel
 Put a form within a dropdown menu, or make it into a dropdown menu.
 
 ::: demo
-<div class="border rounded py-2">
+<div class="dropdown-menu">
   <CForm class="px-4 py-4">
     <div class="mb-3">
       <CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
@@ -666,7 +653,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
     <div class="mb-3">
       <CFormCheck id="dropdownCheck" label="Remember me"/>
     </div>
-    <CButton type="submit">Sign in</CButton>
+    <CButton color="primary" type="submit">Sign in</CButton>
   </CForm>
   <CDropdownDivider/>
   <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
@@ -686,7 +673,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
   <div class="mb-3">
     <CFormCheck id="dropdownCheck" label="Remember me"/>
   </div>
-  <CButton type="submit">Sign in</CButton>
+  <CButton color="primary" type="submit">Sign in</CButton>
 </CForm>
 <CDropdownDivider/>
 <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md
index c8d8a27e..d50d957e 100644
--- a/packages/docs/components/icon.md
+++ b/packages/docs/components/icon.md
@@ -162,7 +162,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
         <div class="p-3 py-4 mb-2 bg-light text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
-        <div class="text-medium-emphasis text-center pt-1 small">{{i}}</div>
+        <div class="text-body-secondary text-center pt-1 small">{{i}}</div>
       </CCol>
     </CRow>
   </CTabPane>
@@ -172,7 +172,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
         <div class="p-3 py-4 mb-2 bg-light text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
-        <div class="text-medium-emphasis text-center pt-1 small">{{i}}</div>
+        <div class="text-body-secondary text-center pt-1 small">{{i}}</div>
       </CCol>
     </CRow>
   </CTabPane>
@@ -182,7 +182,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
         <div class="p-3 py-4 mb-2 bg-light text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
-        <div class="text-medium-emphasis text-center pt-1 small">{{i}}</div>
+        <div class="text-body-secondary text-center pt-1 small">{{i}}</div>
       </CCol>
     </CRow>
   </CTabPane>
diff --git a/packages/docs/components/list-group.md b/packages/docs/components/list-group.md
index 27d4c98f..f7525f5c 100644
--- a/packages/docs/components/list-group.md
+++ b/packages/docs/components/list-group.md
@@ -76,43 +76,43 @@ Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabl
 
 ## Links and buttons
 
-Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `component="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
+Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
 
 ::: demo
 <CListGroup>
-  <CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
-  <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
-  <CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
+  <CListGroupItem as="a" href="#" active>Cras justo odio</CListGroupItem>
+  <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem as="a" href="#">Morbi leo risus</CListGroupItem>
+  <CListGroupItem as="a" href="#">Porta ac consectetur ac</CListGroupItem>
+  <CListGroupItem as="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
 </CListGroup>
 :::
 ```vue
 <CListGroup>
-  <CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
-  <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
-  <CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
+  <CListGroupItem as="a" href="#" active>Cras justo odio</CListGroupItem>
+  <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem as="a" href="#">Morbi leo risus</CListGroupItem>
+  <CListGroupItem as="a" href="#">Porta ac consectetur ac</CListGroupItem>
+  <CListGroupItem as="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
 </CListGroup>
 ```
 
 ::: demo
 <CListGroup>
-  <CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
-  <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem component="button">Morbi leo risus</CListGroupItem>
-  <CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
+  <CListGroupItem as="button" active>Cras justo odio</CListGroupItem>
+  <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
+  <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
+  <CListGroupItem as="button" disabled>Vestibulum at eros</CListGroupItem>
 </CListGroup>
 :::
 ```vue
 <CListGroup>
-  <CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
-  <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem component="button">Morbi leo risus</CListGroupItem>
-  <CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
+  <CListGroupItem as="button" active>Cras justo odio</CListGroupItem>
+  <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
+  <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
+  <CListGroupItem as="button" disabled>Vestibulum at eros</CListGroupItem>
 </CListGroup>
 ```
 
@@ -183,23 +183,20 @@ Contextual classes also work with `<a>`s or `<button>`s. Note the addition of th
 
 ::: demo
 <CListGroup>
-  <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
+  <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" as="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
 </CListGroup>
 :::
 ```vue
 <CListGroup>
-  <CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
+  <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+  <CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" as="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
 </CListGroup>
 ```
 
-<CCallout color="info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</CCallout>
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ## With badges
 
@@ -226,7 +223,7 @@ Add nearly any HTML within, even for linked list groups like the one below, with
 
 ::: demo
 <CListGroup>
-  <CListGroupItem component="a" href="#" active>
+  <CListGroupItem as="a" href="#" active>
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
       <small>3 days ago</small>
@@ -234,27 +231,27 @@ Add nearly any HTML within, even for linked list groups like the one below, with
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
     <small>Donec id elit non mi porta.</small>
   </CListGroupItem>
-  <CListGroupItem component="a" href="#">
+  <CListGroupItem as="a" href="#">
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-    <small class="text-muted">Donec id elit non mi porta.</small>
+    <small class="text-body-secondary">Donec id elit non mi porta.</small>
   </CListGroupItem>
-  <CListGroupItem component="a" href="#">
+  <CListGroupItem as="a" href="#">
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-    <small class="text-muted">Donec id elit non mi porta.</small>
+    <small class="text-body-secondary">Donec id elit non mi porta.</small>
   </CListGroupItem>
 </CListGroup>
 :::
 ```vue
 <CListGroup>
-  <CListGroupItem component="a" href="#" active>
+  <CListGroupItem as="a" href="#" active>
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
       <small>3 days ago</small>
@@ -262,21 +259,21 @@ Add nearly any HTML within, even for linked list groups like the one below, with
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
     <small>Donec id elit non mi porta.</small>
   </CListGroupItem>
-  <CListGroupItem component="a" href="#">
+  <CListGroupItem as="a" href="#">
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-    <small class="text-muted">Donec id elit non mi porta.</small>
+    <small class="text-body-secondary">Donec id elit non mi porta.</small>
   </CListGroupItem>
-  <CListGroupItem component="a" href="#">
+  <CListGroupItem as="a" href="#">
     <div class="d-flex w-100 justify-content-between">
     <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-    <small class="text-muted">Donec id elit non mi porta.</small>
+    <small class="text-body-secondary">Donec id elit non mi porta.</small>
   </CListGroupItem>
 </CListGroup>
 ```
diff --git a/packages/docs/components/modal.md b/packages/docs/components/modal.md
index f26f03bd..72ea1b66 100644
--- a/packages/docs/components/modal.md
+++ b/packages/docs/components/modal.md
@@ -43,9 +43,13 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 
 ::: demo
 <CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
-<CModal :visible="visibleLiveDemo" @close="() => { visibleLiveDemo = false }">
+<CModal 
+  :visible="visibleLiveDemo"
+  @close="() => { visibleLiveDemo = false }"
+  aria-labelledby="LiveDemoExampleLabel"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
   <CModalFooter>
@@ -59,9 +63,13 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
-  <CModal :visible="visibleLiveDemo" @close="() => { visibleLiveDemo = false }">
+  <CModal 
+    :visible="visibleLiveDemo"
+    @close="() => { visibleLiveDemo = false }"
+    aria-labelledby="LiveDemoExampleLabel"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
     <CModalFooter>
@@ -88,9 +96,14 @@ If you set `backdrop` property to `static`, your modal will behave as though the
 
 ::: demo
 <CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch static backdrop modal</CButton>
-<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @close="() => { visibleStaticBackdropDemo = false }">
+<CModal 
+  backdrop="static"
+  :visible="visibleStaticBackdropDemo"
+  @close="() => { visibleStaticBackdropDemo = false }" 
+  aria-labelledby="StaticBackdropExampleLabel"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
   <CModalFooter>
@@ -104,9 +117,14 @@ If you set `backdrop` property to `static`, your modal will behave as though the
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
-  <CModal backdrop="static" :visible="visibleStaticBackdropDemo" @close="() => { visibleStaticBackdropDemo = false }">
+  <CModal 
+    backdrop="static"
+    :visible="visibleStaticBackdropDemo"
+    @close="() => { visibleStaticBackdropDemo = false }" 
+    aria-labelledby="StaticBackdropExampleLabel"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
     <CModalFooter>
@@ -134,9 +152,13 @@ When modals become too long for the user's viewport or device, they scroll indep
 
 ::: demo
 <CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch static backdrop modal</CButton>
-<CModal :visible="visibleScrollingLongContentDemo" @close="() => { visibleScrollingLongContentDemo = false }">
+<CModal 
+  :visible="visibleScrollingLongContentDemo"
+  @close="() => { visibleScrollingLongContentDemo = false }"
+  aria-labelledby="ScrollingLongContentExampleLabel"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+   <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>
     <p>
@@ -229,9 +251,13 @@ When modals become too long for the user's viewport or device, they scroll indep
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
-  <CModal :visible="visibleScrollingLongContentDemo" @close="() => { visibleScrollingLongContentDemo = false }">
+  <CModal 
+    :visible="visibleScrollingLongContentDemo"
+    @close="() => { visibleScrollingLongContentDemo = false }"
+    aria-labelledby="ScrollingLongContentExampleLabel"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+     <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>
       <p>
@@ -336,9 +362,14 @@ You can also create a scrollable modal that allows scroll the modal body by addi
 
 ::: demo
 <CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch static backdrop modal</CButton>
-<CModal scrollable :visible="visibleScrollableDemo" @close="() => { visibleScrollableDemo = false }">
+<CModal
+  scrollable
+  :visible="visibleScrollableDemo"
+  @close="() => { visibleScrollableDemo = false }"
+  aria-labelledby="ScrollingLongContentExampleLabel2"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>
     <p>
@@ -431,9 +462,14 @@ You can also create a scrollable modal that allows scroll the modal body by addi
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
-  <CModal scrollable :visible="visibleScrollableDemo" @close="() => { visibleScrollableDemo = false }">
+  <CModal
+    scrollable
+    :visible="visibleScrollableDemo"
+    @close="() => { visibleScrollableDemo = false }"
+    aria-labelledby="ScrollingLongContentExampleLabel2"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>
       <p>
@@ -540,9 +576,14 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 
 ::: demo
 <CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Vertically centered modal</CButton>
-<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @close="() => { visibleVerticallyCenteredDemo = false }">
+<CModal
+  alignment="center"
+  :visible="visibleVerticallyCenteredDemo"
+  @close="() => { visibleVerticallyCenteredDemo = false }"
+  aria-labelledby="VerticallyCenteredExample"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>
     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
@@ -558,9 +599,14 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
-  <CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @close="() => { visibleVerticallyCenteredDemo = false }">
+  <CModal
+    alignment="center"
+    :visible="visibleVerticallyCenteredDemo"
+    @close="() => { visibleVerticallyCenteredDemo = false }"
+    aria-labelledby="VerticallyCenteredExample"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>
       Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
@@ -586,9 +632,15 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 
 ::: demo
 <CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
-<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @close="() => { visibleVerticallyCenteredScrollableDemo = false }">
+<CModal 
+  alignment="center"
+  scrollable
+  :visible="visibleVerticallyCenteredScrollableDemo"
+  @close="() => { visibleVerticallyCenteredScrollableDemo = false }"
+  aria-labelledby="VerticallyCenteredExample2"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="VerticallyCenteredExample2">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>
     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
@@ -604,9 +656,15 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 ``` vue
 <template>
   <CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
-  <CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @close="() => { visibleVerticallyCenteredScrollableDemo = false }">
+  <CModal 
+    alignment="center"
+    scrollable
+    :visible="visibleVerticallyCenteredScrollableDemo"
+    @close="() => { visibleVerticallyCenteredScrollableDemo = false }"
+    aria-labelledby="VerticallyCenteredExample2"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="VerticallyCenteredExample2">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>
       Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
@@ -635,10 +693,14 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 `<CTooltips>` and `<CPopovers>` can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automaticallyed.
 
 ::: demo
-<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
-<CModal :visible="tooltipsAndPopoversDemo" @close="() => { tooltipsAndPopoversDemo = false }">
+<CButton color="primary" @click="() => { visibleTooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
+<CModal
+  :visible="visibleTooltipsAndPopoversDemo"
+  @close="() => { visibleTooltipsAndPopoversDemo = false }"
+  aria-labelledby="TooltipsAndPopoverExample"
+>
   <CModalHeader>
-    <CModalTitle>Modal title</CModalTitle>
+    <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
   </CModalHeader>
   <CModalBody>
     <h5>Popover in a modal</h5>
@@ -650,7 +712,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
     </p>
   </CModalBody>
   <CModalFooter>
-    <CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
+    <CButton color="secondary" @click="() => { visibleTooltipsAndPopoversDemo = false }">
       Close
     </CButton>
     <CButton color="primary">Save changes</CButton>
@@ -659,10 +721,14 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
 :::
 ``` vue
 <template>
-  <CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
-  <CModal :visible="tooltipsAndPopoversDemo" @close="() => { tooltipsAndPopoversDemo = false }">
+  <CButton color="primary" @click="() => { visibleTooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
+  <CModal
+    :visible="visibleTooltipsAndPopoversDemo"
+    @close="() => { visibleTooltipsAndPopoversDemo = false }"
+    aria-labelledby="TooltipsAndPopoverExample"
+  >
     <CModalHeader>
-      <CModalTitle>Modal title</CModalTitle>
+      <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
     </CModalHeader>
     <CModalBody>
       <h5>Popover in a modal</h5>
@@ -674,7 +740,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
       </p>
     </CModalBody>
     <CModalFooter>
-      <CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
+      <CButton color="secondary" @click="() => { visibleTooltipsAndPopoversDemo = false }">
         Close
       </CButton>
       <CButton color="primary">Save changes</CButton>
@@ -685,13 +751,142 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
   export default {
     data() {
       return { 
-        tooltipsAndPopoversDemo: false,
+        visibleTooltipsAndPopoversDemo: false,
+      }
+    }
+  }
+</script>
+```
+
+### Toggle between modals
+
+Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.
+
+::: demo
+<CButton color="primary" @click="() => { visibleToggleBetweenModalsDemo1 = true }">Open first modal</CButton>
+<CModal
+  :visible="visibleToggleBetweenModalsDemo1"
+  @close="() => { visibleToggleBetweenModalsDemo1 = false }"
+  aria-labelledby="ToggleBetweenModalsExample1"
+>
+  <CModalHeader>
+    <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
+  </CModalHeader>
+  <CModalBody>
+    <p>Show a second modal and hide this one with the button below.</p>
+  </CModalBody>
+  <CModalFooter>
+    <CButton 
+      color="primary"
+      @click="() => { 
+        visibleToggleBetweenModalsDemo1 = false
+        visibleToggleBetweenModalsDemo2 = true
+      }"
+    >Open second modal</CButton>
+  </CModalFooter>
+</CModal>
+<CModal
+  :visible="visibleToggleBetweenModalsDemo2"
+  @close="() => {
+    visibleToggleBetweenModalsDemo1 = true
+    visibleToggleBetweenModalsDemo2 = false
+  }"
+  aria-labelledby="ToggleBetweenModalsExample2"
+>
+  <CModalHeader>
+    <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
+  </CModalHeader>
+  <CModalBody>
+    <p>Hide this modal and show the first with the button below.</p>
+  </CModalBody>
+  <CModalFooter>
+    <CButton 
+      color="primary"
+      @click="() => { 
+        visibleToggleBetweenModalsDemo1 = true
+        visibleToggleBetweenModalsDemo2 = false
+      }"
+    >Back to first</CButton>
+  </CModalFooter>
+</CModal>
+:::
+```vue
+<template>
+  <CButton color="primary" @click="() => { visibleToggleBetweenModalsDemo1 = true }">Open first modal</CButton>
+  <CModal
+    :visible="visibleToggleBetweenModalsDemo1"
+    @close="() => { visibleToggleBetweenModalsDemo1 = false }"
+    aria-labelledby="ToggleBetweenModalsExample1"
+  >
+    <CModalHeader>
+      <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <p>Show a second modal and hide this one with the button below.</p>
+    </CModalBody>
+    <CModalFooter>
+      <CButton 
+        color="primary"
+        @click="() => { 
+          visibleToggleBetweenModalsDemo1 = false
+          visibleToggleBetweenModalsDemo2 = true
+        }"
+      >Open second modal</CButton>
+    </CModalFooter>
+  </CModal>
+  <CModal
+    :visible="visibleToggleBetweenModalsDemo2"
+    @close="() => {
+      visibleToggleBetweenModalsDemo1 = true
+      visibleToggleBetweenModalsDemo2 = false
+    }"
+    aria-labelledby="ToggleBetweenModalsExample2"
+  >
+    <CModalHeader>
+      <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <p>Hide this modal and show the first with the button below.</p>
+    </CModalBody>
+    <CModalFooter>
+      <CButton 
+        color="primary"
+        @click="() => { 
+          visibleToggleBetweenModalsDemo1 = true
+          visibleToggleBetweenModalsDemo2 = false
+        }"
+      >Back to first</CButton>
+    </CModalFooter>
+  </CModal>
+</template>
+<script>
+  export default {
+    data() {
+      return { 
+        visibleToggleBetweenModalsDemo1: false,
+        visibleToggleBetweenModalsDemo2: false,
       }
     }
   }
 </script>
 ```
 
+### Change animation
+
+The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.
+If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.
+
+### Remove animation
+
+For modals that simply appear rather than fade into view, set `transition` to `false`.
+
+```vue
+<CModal transition={false}>...</CModal>
+```
+
+### Accessibility
+
+Be sure to add `aria-labelledby="..."`, referencing the modal title, to `<CModal />` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog` since we already add it.
 
 ## Optional sizes
 
@@ -713,7 +908,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
     </tr>
     <tr>
       <td>Default</td>
-      <td class="text-muted">None</td>
+      <td class="text-body-secondary">None</td>
       <td><code>500px</code></td>
     </tr>
     <tr>
@@ -733,25 +928,40 @@ Modals have three optional sizes, available via modifier classes to be placed on
 <CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
 <CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
 <CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
-<CModal size="xl" :visible="xlDemo" @close="() => { xlDemo = false }">
+<CModal
+  size="xl"
+  :visible="xlDemo"
+  @close="() => { xlDemo = false }"
+  aria-labelledby="OptionalSizesExample1"
+>
   <CModalHeader>
-    <CModalTitle>Extra large modal</CModalTitle>
+    <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal size="lg" :visible="lgDemo" @close="() => { lgDemo = false }">
+<CModal 
+  size="lg"
+  :visible="lgDemo"
+  @close="() => { lgDemo = false }"
+  aria-labelledby="OptionalSizesExample2"
+>
   <CModalHeader>
-    <CModalTitle>Large modal</CModalTitle>
+    <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal size="sm" :visible="smDemo" @close="() => { smDemo = false }">
+<CModal
+  size="sm" 
+  :visible="smDemo" 
+  @close="() => { smDemo = false }"
+  aria-labelledby="OptionalSizesExample3"
+>
   <CModalHeader>
-    <CModalTitle>Small modal</CModalTitle>
+    <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
@@ -763,25 +973,40 @@ Modals have three optional sizes, available via modifier classes to be placed on
   <CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
   <CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
   <CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
-  <CModal size="xl" :visible="xlDemo" @close="() => { xlDemo = false }">
+  <CModal
+    size="xl"
+    :visible="xlDemo"
+    @close="() => { xlDemo = false }"
+    aria-labelledby="OptionalSizesExample1"
+  >
     <CModalHeader>
-      <CModalTitle>Extra large modal</CModalTitle>
+      <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal size="lg" :visible="lgDemo" @close="() => { lgDemo = false }">
-    <CModalHeader>
-      <CModalTitle>Large modal</CModalTitle>
-    </CModalHeader>
+  <CModal
+    size="lg"
+    :visible="lgDemo"
+    @close="() => { lgDemo = false }"
+    aria-labelledby="OptionalSizesExample2"
+  >
+  <CModalHeader>
+    <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
+  </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal size="sm" :visible="smDemo" @close="() => { smDemo = false }">
+  <CModal
+    size="sm" 
+    :visible="smDemo" 
+    @close="() => { smDemo = false }"
+    aria-labelledby="OptionalSizesExample3"
+  >
     <CModalHeader>
-      <CModalTitle>Small modal</CModalTitle>
+      <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
@@ -847,49 +1072,79 @@ Another override is the option to pop up a modal that covers the user viewport,
 <CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
 <CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
 <CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
-<CModal fullscreen :visible="fullscreenDemo" @close="() => { fullscreenDemo = false }">
+<CModal
+  fullscreen
+  :visible="fullscreenDemo"
+  @close="() => { fullscreenDemo = false }"
+  aria-labelledby="FullscreenExample1"
+>
   <CModalHeader>
-    <CModalTitle>Full screen</CModalTitle>
+    <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal fullscreen="sm" :visible="fullscreenSmDemo" @close="() => { fullscreenSmDemo = false }">
+<CModal
+  fullscreen="sm"
+  :visible="fullscreenSmDemo"
+  @close="() => { fullscreenSmDemo = false }"
+  aria-labelledby="FullscreenExample2"
+>
   <CModalHeader>
-    <CModalTitle>Full screen below sm</CModalTitle>
+    <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal fullscreen="md" :visible="fullscreenMdDemo" @close="() => { fullscreenMdDemo = false }">
+<CModal
+  fullscreen="md"
+  :visible="fullscreenMdDemo"
+  @close="() => { fullscreenMdDemo = false }"
+  aria-labelledby="FullscreenExample3"
+>
   <CModalHeader>
-    <CModalTitle>Full screen below md</CModalTitle>
+    <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal fullscreen="lg" :visible="fullscreenLgDemo" @close="() => { fullscreenLgDemo = false }">
+<CModal
+  fullscreen="lg"
+  :visible="fullscreenLgDemo"
+  @close="() => { fullscreenLgDemo = false }"
+  aria-labelledby="FullscreenExample4"
+>
   <CModalHeader>
-    <CModalTitle>Full screen below lg</CModalTitle>
+    <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal fullscreen="xl" :visible="fullscreenXlDemo" @close="() => { fullscreenXlDemo = false }">
+<CModal
+  fullscreen="xl"
+  :visible="fullscreenXlDemo"
+  @close="() => { fullscreenXlDemo = false }"
+  aria-labelledby="FullscreenExample5"
+>
   <CModalHeader>
-    <CModalTitle>Full screen below xl</CModalTitle>
+    <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
   </CModalBody>
 </CModal>
-<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @close="() => { fullscreenXxlDemo = false }">
+<CModal
+  fullscreen="xxl"
+  :visible="fullscreenXxlDemo"
+  @close="() => { fullscreenXxlDemo = false }"
+  aria-labelledby="FullscreenExample6"
+>
   <CModalHeader>
-    <CModalTitle>Full screen below xxl</CModalTitle>
+    <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
   </CModalHeader>
   <CModalBody>
     ...
@@ -904,49 +1159,79 @@ Another override is the option to pop up a modal that covers the user viewport,
   <CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
   <CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
   <CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
-  <CModal fullscreen :visible="fullscreenDemo" @close="() => { fullscreenDemo = false }">
+  <CModal
+    fullscreen
+    :visible="fullscreenDemo"
+    @close="() => { fullscreenDemo = false }"
+    aria-labelledby="FullscreenExample1"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen</CModalTitle>
+      <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal fullscreen="sm" :visible="fullscreenSmDemo" @close="() => { fullscreenSmDemo = false }">
+  <CModal
+    fullscreen="sm"
+    :visible="fullscreenSmDemo"
+    @close="() => { fullscreenSmDemo = false }"
+    aria-labelledby="FullscreenExample2"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen below sm</CModalTitle>
+      <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal fullscreen="md" :visible="fullscreenMdDemo" @close="() => { fullscreenMdDemo = false }">
+  <CModal
+    fullscreen="md"
+    :visible="fullscreenMdDemo"
+    @close="() => { fullscreenMdDemo = false }"
+    aria-labelledby="FullscreenExample3"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen below md</CModalTitle>
+      <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal fullscreen="lg" :visible="fullscreenLgDemo" @close="() => { fullscreenLgDemo = false }">
+  <CModal
+    fullscreen="lg"
+    :visible="fullscreenLgDemo"
+    @close="() => { fullscreenLgDemo = false }"
+    aria-labelledby="FullscreenExample4"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen below lg</CModalTitle>
+      <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal fullscreen="xl" :visible="fullscreenXlDemo" @close="() => { fullscreenXlDemo = false }">
+  <CModal
+    fullscreen="xl"
+    :visible="fullscreenXlDemo"
+    @close="() => { fullscreenXlDemo = false }"
+    aria-labelledby="FullscreenExample5"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen below xl</CModalTitle>
+      <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
     </CModalBody>
   </CModal>
-  <CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @close="() => { fullscreenXxlDemo = false }">
+  <CModal
+    fullscreen="xxl"
+    :visible="fullscreenXxlDemo"
+    @close="() => { fullscreenXxlDemo = false }"
+    aria-labelledby="FullscreenExample6"
+  >
     <CModalHeader>
-      <CModalTitle>Full screen below xxl</CModalTitle>
+      <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
     </CModalHeader>
     <CModalBody>
       ...
@@ -979,7 +1264,9 @@ Another override is the option to pop up a modal that covers the user viewport,
         visibleScrollableDemo: false,
         visibleVerticallyCenteredDemo: false,
         visibleVerticallyCenteredScrollableDemo: false,
-        tooltipsAndPopoversDemo: false,
+        visibleTooltipsAndPopoversDemo: false,
+        visibleToggleBetweenModalsDemo1: false,
+        visibleToggleBetweenModalsDemo2: false,
         xlDemo: false,
         lgDemo: false,
         smDemo: false,
diff --git a/packages/docs/components/navbar.md b/packages/docs/components/navbar.md
index c2b7f2ef..4c32c36d 100644
--- a/packages/docs/components/navbar.md
+++ b/packages/docs/components/navbar.md
@@ -237,7 +237,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
     <CNavbarBrand href="#">Navbar</CNavbarBrand>
     <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
     <CCollapse class="navbar-collapse" :visible="visible">
-      <CNavbarNav component="nav">
+      <CNavbarNav as="nav">
         <CNavLink href="#" active>
             Home
           </CNavLink>
@@ -255,7 +255,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
     <CNavbarBrand href="#">Navbar</CNavbarBrand>
     <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
     <CCollapse class="navbar-collapse" :visible="visible">
-      <CNavbarNav component="nav">
+      <CNavbarNav as="nav">
         <CNavLink href="#" active>
             Home
           </CNavLink>
@@ -981,10 +981,10 @@ With a toggler on the left and brand name on the right:
 Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
 
 ::: demo
-<CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent">
+<CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent" data-coreui-theme="dark">
   <div class="bg-dark p-4">
-    <h5 class="text-white h4">Collapsed content</h5>
-    <span class="text-medium-emphasis-inverse">Toggleable via the navbar brand.</span>
+    <h5 class="text-body-emphasis h4">Collapsed content</h5>
+    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </CCollapse>
 <CNavbar colorScheme="dark" class="bg-dark">
@@ -999,10 +999,10 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 :::
 ```vue
 <template>
-  <CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent">
+  <CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent" data-coreui-theme="dark">
     <div class="bg-dark p-4">
-      <h5 class="text-white h4">Collapsed content</h5>
-      <span class="text-medium-emphasis-inverse">Toggleable via the navbar brand.</span>
+      <h5 class="text-body-emphasis h4">Collapsed content</h5>
+      <span class="text-body-secondary">Toggleable via the navbar brand.</span>
     </div>
   </CCollapse>
   <CNavbar colorScheme="dark" class="bg-dark">
diff --git a/packages/docs/components/navs-tabs.md b/packages/docs/components/navs-tabs.md
index 6b667d6e..543ac981 100644
--- a/packages/docs/components/navs-tabs.md
+++ b/packages/docs/components/navs-tabs.md
@@ -56,7 +56,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 
 ::: demo
 
-  <CNav component="nav">
+  <CNav as="nav">
     <CNavLink href="#" active>
       Active
     </CNavLink>
@@ -70,7 +70,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 :::
 ```vue
 
-  <CNav component="nav">
+  <CNav as="nav">
     <CNavLink href="#" active>
       Active
     </CNavLink>
@@ -312,6 +312,96 @@ Take that same HTML, but use `variant="pills"` instead:
 </CNav>
 ```
 
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+::: demo
+<CNav variant="underline">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+:::
+```vue
+<CNav variant="underline">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+::: demo
+<CNav variant="underline-border">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+:::
+```vue
+<CNav variant="underline-border">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+
 ### Fill and justify
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
@@ -405,7 +495,7 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
 If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 ::: demo
-<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
+<CNav as="nav" variant="pills" class="flex-column flex-sm-row">
   <CNavLink href="#" active>
     Active
   </CNavLink>
@@ -417,7 +507,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
 </CNav>
 :::
 ```vue
-<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
+<CNav as="nav" variant="pills" class="flex-column flex-sm-row">
   <CNavLink href="#" active>
     Active
   </CNavLink>
diff --git a/packages/docs/components/offcanvas.md b/packages/docs/components/offcanvas.md
index 59225a35..71b3a2f0 100644
--- a/packages/docs/components/offcanvas.md
+++ b/packages/docs/components/offcanvas.md
@@ -205,6 +205,36 @@ If you set a `backdrop` to `static`, your Vue offcanvas component will not close
 </script>
 ```
 
+## Dark offcanvas
+
+Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.
+
+::: demo
+<div class="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden">
+  <COffcanvas :backdrop="false" dark placement="start" :visible="true">
+    <COffcanvasHeader>
+      <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+      <CCloseButton class="text-reset" />
+    </COffcanvasHeader>
+    <COffcanvasBody>
+      Content for the offcanvas goes here. You can place just about any React component or custom elements here.
+    </COffcanvasBody>
+  </COffcanvas>
+</div>
+:::
+```vue
+<COffcanvas :backdrop="false" dark placement="start" :visible="true">
+  <COffcanvasHeader>
+    <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+    <CCloseButton class="text-reset" />
+  </COffcanvasHeader>
+  <COffcanvasBody>
+    Content for the offcanvas goes here. You can place just about any React component or custom elements here.
+  </COffcanvasBody>
+</COffcanvas>
+```
+
+
 ## Responsive 
 
 Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
diff --git a/packages/docs/components/placeholder.md b/packages/docs/components/placeholder.md
index f45dbca2..658ca503 100644
--- a/packages/docs/components/placeholder.md
+++ b/packages/docs/components/placeholder.md
@@ -30,7 +30,7 @@ In the example below, we take a typical card component and recreate it with plac
     </CCardBody>
   </CCard>
   <CCard style="width: 18rem">
-    <CCardImage component="svg" orientation="top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
+    <CCardImage as="svg" orientation="top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
       <title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect>
     </CCardImage>  
     <CCardBody>
@@ -62,7 +62,7 @@ In the example below, we take a typical card component and recreate it with plac
   </CCardBody>
 </CCard>
 <CCard style="width: 18rem">
-  <CCardImage component="svg" orientation="top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
+  <CCardImage as="svg" orientation="top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
     <title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect>
   </CCardImage>  
   <CCardBody>
@@ -100,9 +100,9 @@ We apply additional styling to `CButton`s via `::before` to ensure the `height`
 <CButton v-c-placeholder="{xs: 4}" color="primary" aria-hidden="true" disabled href="#" tabindex="-1"></CButton>
 ```
 
-<CCallout class="mb-4" color="info">
+<Callout color="info">
   The use of <code>aria-hidden="true"</code> only indicates that the element should be hidden to screen readers. The <strong>loading</strong> behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
-</CCallout>
+</Callout>
 
 ### Width
 
@@ -170,19 +170,19 @@ The size of `<CPlaceholder>`s are based on the typographic style of the parent e
 Animate placeholders with `animation="glow"` or `animation="wave"` to better convey the perception of something being _actively_ loaded.
 
 :::demo
-<CPlaceholder component="p" animation="glow">
+<CPlaceholder as="p" animation="glow">
   <CPlaceholder :xs="12" />
 </CPlaceholder>  
-<CPlaceholder component="p" animation="wave">
+<CPlaceholder as="p" animation="wave">
   <CPlaceholder :xs="12" />
 </CPlaceholder> 
 :::
 ```vue
-<CPlaceholder component="p" animation="glow">
+<CPlaceholder as="p" animation="glow">
   <CPlaceholder :xs="12" />
 </CPlaceholder>  
 
-<CPlaceholder component="p" animation="wave">
+<CPlaceholder as="p" animation="wave">
   <CPlaceholder :xs="12" />
 </CPlaceholder> 
 ```
diff --git a/packages/docs/components/popover.md b/packages/docs/components/popover.md
index bd8b6f30..0fcf964a 100644
--- a/packages/docs/components/popover.md
+++ b/packages/docs/components/popover.md
@@ -11,15 +11,15 @@ other_frameworks: popover
 
 ::: demo
 <CPopover title="Popover title" content="And here\’s some amazing content. It’s very engaging. Right?" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="danger" size="lg" v-on="on">Click to toggle popover</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="danger" size="lg" :aria-describedby="id" v-on="on">Click to toggle popover</CButton>
   </template>
 </CPopover>
 :::
 ```vue
 <CPopover title="Popover title" content="And here\’s some amazing content. It’s very engaging. Right?" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="danger" size="lg" v-on="on">Click to toggle popover</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="danger" size="lg" :aria-describedby="id" v-on="on">Click to toggle popover</CButton>
   </template>
 </CPopover>
 ```
@@ -41,45 +41,45 @@ Four options are available: top, right, bottom, and left aligned. Directions are
 
 ::: demo
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on top</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on top</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on right</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on right</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on bottom</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on bottom</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on left</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on left</CButton>
   </template>
 </CPopover>
 :::
 ```vue
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on top</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on top</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on right</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on right</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on bottom</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on bottom</CButton>
   </template>
 </CPopover>
 <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Popover on left</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Popover on left</CButton>
   </template>
 </CPopover>
 ```
@@ -110,8 +110,8 @@ You can customize the appearance of popovers using [CSS variables](#css-variable
   title="Custom popover"
   :style="customPopoverStyle"
 >
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Custom popover</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
   </template>
 </CPopover>
 :::
@@ -123,8 +123,8 @@ You can customize the appearance of popovers using [CSS variables](#css-variable
     title="Custom popover"
     :style="customPopoverStyle"
   >
-    <template #toggler="{ on }">
-      <CButton color="secondary" v-on="on">Custom popover</CButton>
+    <template #toggler="{ id, on }">
+      <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
     </template>
   </CPopover>
 </template>
@@ -160,8 +160,8 @@ For disabled popover triggers, you may also prefer `:trigger="['hover', 'focus']
   placement="right"
   :trigger="['hover', 'focus']"
 >
-  <template #toggler="{ on }">
-    <span class="d-inline-block" :tabindex="0" v-on="on">
+  <template #toggler="{ id, on }">
+    <span class="d-inline-block" :tabindex="0" :aria-describedby="id" v-on="on">
       <CButton color="primary" disabled>Disabled button</CButton>
     </span>
   </template>
@@ -173,8 +173,8 @@ For disabled popover triggers, you may also prefer `:trigger="['hover', 'focus']
   placement="right"
   :trigger="['hover', 'focus']"
 >
-  <template #toggler="{ on }">
-    <span class="d-inline-block" :tabindex="0" v-on="on">
+  <template #toggler="{ id, on }">
+    <span class="d-inline-block" :tabindex="0" :aria-describedby="id" v-on="on">
       <CButton color="primary" disabled>Disabled button</CButton>
     </span>
   </template>
diff --git a/packages/docs/components/progress.md b/packages/docs/components/progress.md
index 9c32dbcb..335bae35 100644
--- a/packages/docs/components/progress.md
+++ b/packages/docs/components/progress.md
@@ -12,38 +12,18 @@ Progress components are built with two HTML elements, some CSS to set the width,
 ## Basic usage
 
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar :value="0"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="100"/>
-</CProgress>
+<CProgress :value="0"/>
+<CProgress :value="25"/>
+<CProgress :value="50"/>
+<CProgress :value="75"/>
+<CProgress :value="100"/>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar :value="0"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar :value="100"/>
-</CProgress>
+<CProgress :value="0"/>
+<CProgress :value="25"/>
+<CProgress :value="50"/>
+<CProgress :value="75"/>
+<CProgress :value="100"/>
 ```
 
 ## Labels
@@ -51,35 +31,42 @@ Progress components are built with two HTML elements, some CSS to set the width,
 Add labels to your progress bars by placing text within the `<CProgressBar>`.
 
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar :value="25">25%</CProgressBar>
+<CProgress :value="25">25%</CProgress>
+:::
+```vue
+<CProgress :value="25">25%</CProgress>
+```
+
+Please note that the default setting for the content within the `<CProgressBar />` is to be limited by the `overflow: hidden property`, preventing it from extending beyond the bar's boundaries. If the progress bar is shorter than its label, the content will be truncated and could be difficult to read. To modify this behavior, you can utilize the `.overflow-visible` class from the overflow utilities. However, it is important to specify a specific text color to ensure readability. It's worth noting that this approach currently does not consider color modes.
+
+:::demo
+<CProgress :value="10" color="success">
+  <CProgressBar class="overflow-visible text-dark px-2">Long label text for the progress bar, set to a dark color</CProgressBar>
 </CProgress>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar :value="25">25%</CProgressBar>
+<CProgress :value="10" color="success">
+  <CProgressBar class="overflow-visible text-dark px-2">Long label text for the progress bar, set to a dark color</CProgressBar>
 </CProgress>
 ```
 
+Since **v5.0.0** you can also use the `progressBarClassName` property directly on the `<CProgress />` component to achieve the same.
+
+```vue
+<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" :value="10">Long label text for the progress bar, set to a dark color</CProgress>
+```
+
 ## Height
 
 We only set a `height` value on the `<CProgress>`, so if you change that value the inner `<CProgressBar>` will automatically resize accordingly.
 
 ::: demo
-<CProgress :height="1" class="mb-3">
-  <CProgressBar :value="25"></CProgressBar>
-</CProgress>
-<CProgress :height="20" class="mb-3">
-  <CProgressBar :value="25"></CProgressBar>
-</CProgress>
+<CProgress :height="1" :value="25" />
+<CProgress :height="20" :value="25" />
 :::
 ```vue
-<CProgress :height="1" class="mb-3">
-  <CProgressBar :value="25"></CProgressBar>
-</CProgress>
-<CProgress :height="20" class="mb-3">
-  <CProgressBar :value="25"></CProgressBar>
-</CProgress>
+<CProgress :height="1" :value="25" />
+<CProgress :height="20" :value="25" />
 ```
 
 ## Backgrounds
@@ -87,50 +74,92 @@ We only set a `height` value on the `<CProgress>`, so if you change that value t
 Use `color` prop to change the appearance of individual progress bars.
 
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar color="success" :value="25"/>
+<CProgress color="success" :value="25"/>
+<CProgress color="info" :value="50"/>
+<CProgress color="warning" :value="75"/>
+<CProgress color="danger" :value="100"/>
+:::
+```vue
+<CProgress color="success" :value="25"/>
+<CProgress color="info" :value="50"/>
+<CProgress color="warning" :value="75"/>
+<CProgress color="danger" :value="100"/>
+```
+
+Ensure that when you incorporate labels into progress bars featuring a custom background color, you also select an appropriate text color to ensure readability and maintain adequate contrast for the labels.
+
+::: demo
+<CProgress color="success" :value="25">
+  <CProgressBar>25%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" :value="50"/>
+<CProgress color="info" :value="50">
+  <CProgressBar class="text-dark">50%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" :value="75"/>
+<CProgress color="warning" :value="75">
+  <CProgressBar class="text-dark">75%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" :value="100"/>
+<CProgress color="danger" :value="100">
+  <CProgressBar>100%</CProgressBar>
 </CProgress>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar color="success" :value="25"/>
+<CProgress color="success" :value="25">
+  <CProgressBar>25%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" :value="50"/>
+<CProgress color="info" :value="50">
+  <CProgressBar class="text-dark">50%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" :value="75"/>
+<CProgress color="warning" :value="75">
+  <CProgressBar class="text-dark">75%</CProgressBar>
 </CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" :value="100"/>
+<CProgress color="danger" :value="100">
+  <CProgressBar>100%</CProgressBar>
 </CProgress>
 ```
 
+
+Since **v5.0.0** you can also use the `progressBarClassName` property directly on the `<CProgress />` component to achieve the same.
+
+```vue
+<CProgress color="success" :value="25">25%</CProgress>
+<CProgress color="info" progressBarClassName="text-dark" :value="50">50%</CProgress>
+<CProgress color="warning" progressBarClassName="text-dark" :value="75">75%</CProgress>
+<CProgress color="danger" :value="100">100%</CProgress>
+```
+
 ## Multiple bars
 
 Include multiple progress bars in a progress component if you need.
 
+<Callout color="info" title="New markup in v5.0.0">
+  In version 5.0.0, we introduced a new <code>&lt;CProgressStacked&gt;</code> component to more logically wrap multiple progress bars into a single stacked progress bar. The previous structure will continue to work until the next major version.
+</Callout>
+
+
+**New markup**
+
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar :value="15"/>
-  <CProgressBar color="success" :value="30"/>
-  <CProgressBar color="info" :value="20"/>
-</CProgress>
+<CProgressStacked>
+  <CProgress :value="15" />
+  <CProgress color="success" :value="30" />
+  <CProgress color="info" :value="20" />
+</CProgressStacked>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar :value="15"/>
-  <CProgressBar color="success" :value="30"/>
-  <CProgressBar color="info" :value="20"/>
+<CProgressStacked>
+  <CProgress :value="15" />
+  <CProgress color="success" :value="30" />
+  <CProgress color="info" :value="20" />
+</CProgressStacked>
+```
+
+
+**Previous markup**
+```vue
+<CProgress>
+  <CProgressBar :value="15" />
+  <CProgressBar color="success" :value="30" />
+  <CProgressBar color="info" :value="20" />
 </CProgress>
 ```
 
@@ -139,32 +168,16 @@ Include multiple progress bars in a progress component if you need.
 Add `variant="striped"` to any `<CProgressBar>` to apply a stripe via CSS gradient over the progress bar's background color.
 
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar color="success" variant="striped" :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" variant="striped" :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" variant="striped" :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" variant="striped" :value="100"/>
-</CProgress>
+<CProgress color="success" variant="striped" :value="25"/>
+<CProgress color="info" variant="striped" :value="50"/>
+<CProgress color="warning" variant="striped" :value="75"/>
+<CProgress color="danger" variant="striped" :value="100"/>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar color="success" variant="striped" :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" variant="striped" :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" variant="striped" :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" variant="striped" :value="100"/>
-</CProgress>
+<CProgress color="success" variant="striped" :value="25"/>
+<CProgress color="info" variant="striped" :value="50"/>
+<CProgress color="warning" variant="striped" :value="75"/>
+<CProgress color="danger" variant="striped" :value="100"/>
 ```
 
 ## Animated stripes
@@ -172,32 +185,16 @@ Add `variant="striped"` to any `<CProgressBar>` to apply a stripe via CSS gradie
 The striped gradient can also be animated. Add `animated` property to `<CProgressBar>` to animate the stripes right to left via CSS3 animations.
 
 ::: demo
-<CProgress class="mb-3">
-  <CProgressBar color="success" variant="striped" animated :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" variant="striped" animated :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" variant="striped" animated :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" variant="striped" animated :value="100"/>
-</CProgress>
+<CProgress color="success" variant="striped" animated :value="25"/>
+<CProgress color="info" variant="striped" animated :value="50"/>
+<CProgress color="warning" variant="striped" animated :value="75"/>
+<CProgress color="danger" variant="striped" animated :value="100"/>
 :::
 ```vue
-<CProgress class="mb-3">
-  <CProgressBar color="success" variant="striped" animated :value="25"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="info" variant="striped" animated :value="50"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="warning" variant="striped" animated :value="75"/>
-</CProgress>
-<CProgress class="mb-3">
-  <CProgressBar color="danger" variant="striped" animated :value="100"/>
-</CProgress>
+<CProgress color="success" variant="striped" animated :value="25"/>
+<CProgress color="info" variant="striped" animated :value="50"/>
+<CProgress color="warning" variant="striped" animated :value="75"/>
+<CProgress color="danger" variant="striped" animated :value="100"/>
 ```
 
 ## Customizing
diff --git a/packages/docs/components/sidebar.md b/packages/docs/components/sidebar.md
index 99afd650..1f32c9c6 100644
--- a/packages/docs/components/sidebar.md
+++ b/packages/docs/components/sidebar.md
@@ -16,18 +16,172 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
 
 ## Examples
 
-::: demo
-<CSidebar visible>
-  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
+### Sidebar component
+
+Below is an sidebar example that is shown by default on desktop devices.
+
+::: demo-bg-secondary
+<CSidebar>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CoreUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
+      <CBadge class="ms-auto" color="primary">NEW</CBadge>
+    </CNavItem>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
+  </CSidebarNav>
+  <CSidebarFooter class="border-top">
+    <CSidebarToggler/>
+  </CSidebarFooter>
+</CSidebar>
+:::
+```vue
+<CSidebar>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CoreUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
+      <CBadge class="ms-auto" color="primary">NEW</CBadge>
+    </CNavItem>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
+  </CSidebarNav>
+  <CSidebarFooter class="border-top">
+    <CSidebarToggler/>
+  </CSidebarFooter>
+</CSidebar>
+```
+
+### Narrow sidebar
+
+Add the `narrow` property to make the sidebar narrow.
+
+::: demo-bg-secondary
+<CSidebar narrow>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
+    </CNavItem>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" />
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" />
+    </CNavItem>
+  </CSidebarNav>
+</CSidebar>
+:::
+```vue
+<CSidebar narrow>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CUI</CSidebarBrand>
+  </CSidebarHeader>
   <CSidebarNav>
-    <li class="nav-title">Nav Title</li>
+    <CNavTitle>Nav Title</CNavTitle>
     <CNavItem href="#">
       <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
-      Nav item
     </CNavItem>
     <CNavItem href="#">
       <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
-      With badge
+    </CNavItem>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" />
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" />
+    </CNavItem>
+  </CSidebarNav>
+</CSidebar>
+```
+
+### Unfoldable sidebar
+
+Add the `unfoldable` property to make the sidebar narrow with unfoldable on hover.
+
+::: demo-bg-secondary
+<CSidebar unfoldable>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
       <CBadge class="ms-auto" color="primary">NEW</CBadge>
     </CNavItem>
     <CNavGroup>
@@ -35,10 +189,10 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
       </template>
       <CNavItem href="#">
-        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
       <CNavItem href="#">
-         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
     </CNavGroup>
     <CNavGroup>
@@ -46,55 +200,192 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
       </template>
       <CNavItem href="#">
-        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
       <CNavItem href="#">
-         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
     </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
   </CSidebarNav>
-  <CSidebarToggler/>
 </CSidebar>
 :::
 ```vue
-<CSidebar visible>
-  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
+<CSidebar unfoldable>
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CUI</CSidebarBrand>
+  </CSidebarHeader>
   <CSidebarNav>
-    <li class="nav-title">Nav Title</li>
+    <CNavTitle>Nav Title</CNavTitle>
     <CNavItem href="#">
-      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
-      Nav item
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
     </CNavItem>
     <CNavItem href="#">
-        <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
-        With badge
-        <CBadge color="primary ms-auto">NEW</CBadge>
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
+      <CBadge class="ms-auto" color="primary">NEW</CBadge>
     </CNavItem>
     <CNavGroup>
       <template #togglerContent>
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
       </template>
       <CNavItem href="#">
-        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
       <CNavItem href="#">
-         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown item
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
       </CNavItem>
     </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
   </CSidebarNav>
-  <CSidebarToggler/>
 </CSidebar>
 ```
 
+## Dark sidebar
+
+Change the appearance of sidebars with the `colorScheme="dark"`.
+
+::: demo-bg-secondary
+<CSidebar colorScheme="dark">
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CoreUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
+      <CBadge class="ms-auto" color="primary">NEW</CBadge>
+    </CNavItem>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
+  </CSidebarNav>
+  <CSidebarFooter class="border-top">
+    <CSidebarToggler/>
+  </CSidebarFooter>
+</CSidebar>
+:::
+```vue
+<CSidebar colorScheme="dark">
+  <CSidebarHeader class="border-bottom">
+    <CSidebarBrand>CoreUI</CSidebarBrand>
+  </CSidebarHeader>
+  <CSidebarNav>
+    <CNavTitle>Nav Title</CNavTitle>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> Nav item
+    </CNavItem>
+    <CNavItem href="#">
+      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/> With badge
+      <CBadge class="ms-auto" color="primary">NEW</CBadge>
+    </CNavItem>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavGroup>
+      <template #togglerContent>
+        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Nav dropdown2
+      </template>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+      <CNavItem href="#">
+        <span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
+      </CNavItem>
+    </CNavGroup>
+    <CNavItem href="https://coreui.io/">
+      <CIcon customClassName="nav-icon" icon="cil-cloud-download" /> Download CoreUI
+    </CNavItem>
+    <CNavItem href="https://coreui.io/pro/">
+      <CIcon customClassName="nav-icon" icon="cil-layers" /> Try CoreUI PRO
+    </CNavItem>
+  </CSidebarNav>
+  <CSidebarFooter class="border-top">
+    <CSidebarToggler/>
+  </CSidebarFooter>
+</CSidebar>
+```
+
+## Placement
+
+By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
+
+- `placement="start"` places sidebar on the left of the viewport (shown above)
+- `placement="end"` places sidebar on the right of the viewport
+
 ## Customizing
 
 ### CSS variables
 
 Vue sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars"/>
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars" />
 
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars"/>
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-overlaid-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-narrow.scss" capture="sidebar-narrow-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-nav.scss" capture="sidebar-nav-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-toggler-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars" />
 
 #### How to use CSS variables
 
@@ -108,7 +399,9 @@ return <CSidebar :style="vars">...</CSidebar>
 
 ### SASS variables
 
-<ScssDocs file="_variables.scss" capture="sidebar-variables"/>
+<ScssDocs file="_variables.scss" capture="sidebar-variables" />
+
+<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
 
 ## API
 
diff --git a/packages/docs/components/spinner.md b/packages/docs/components/spinner.md
index 7c3dda54..f6a9eaac 100644
--- a/packages/docs/components/spinner.md
+++ b/packages/docs/components/spinner.md
@@ -101,39 +101,39 @@ Add `size="sm"`property` to make a smaller spinner that can quickly be used with
 Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
 
 ::: demo
-<CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 :::
 ```vue
-<CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 ```
 
 ::: demo
-<CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
   Loading...
 </CButton>
 :::
 ```vue
-<CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+<CButton color="primary" disabled>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
   Loading...
 </CButton>
 ```
diff --git a/packages/docs/components/toast.md b/packages/docs/components/toast.md
index 1d27d176..8f6e1b76 100644
--- a/packages/docs/components/toast.md
+++ b/packages/docs/components/toast.md
@@ -65,8 +65,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 
 :::demo
 <CButton color="primary" @click="createToast">Send a toast</CButton>
-<CToaster placement="top-end">
-  <CToast v-for="(toast, index) in toasts" visible>
+<CToaster class="p-3" placement="top-end">
+  <CToast v-for="(toast, index) in toasts" visible :key="index">
     <CToastHeader closeButton>
     <span class="me-auto fw-bold">{{toast.title}}</span>
     <small>7 min ago</small>
@@ -80,8 +80,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 ```vue
 <template>
   <CButton color="primary" @click="createToast">Send a toast</CButton>
-  <CToaster placement="top-end" visible>
-    <CToast v-for="(toast, index) in toasts">
+  <CToaster class="p-3" placement="top-end">
+    <CToast v-for="(toast, index) in toasts" visible :key="index">
       <CToastHeader closeButton>
       <span class="me-auto fw-bold">{{toast.title}}</span>
       <small>7 min ago</small>
@@ -181,7 +181,7 @@ Toasts are slightly translucent to blend in with what's below them.
 You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
 
 ::: demo
-<CToaster class="position-relative" >
+<CToaster class="position-static">
 <CToast :autohide="false" visible>
 <CToastHeader closeButton>
 <svg
@@ -222,7 +222,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
 :::
 
 ```vue
-<CToaster>
+<CToaster class="position-static">
   <CToast :autohide="false" visible>
     <CToastHeader closeButton>
       <svg
@@ -293,7 +293,7 @@ Alternatively, you can also add additional controls and components to toasts.
     <CButton type="button" color="primary" size="sm">
     Take action
     </CButton>
-    <CToastClose component="CButton" color="secondary" size="sm" class="ms-1">Close</CToastClose>
+    <CToastClose as="CButton" color="secondary" size="sm" class="ms-1">Close</CToastClose>
     </div>
   </CToastBody>
 </CToast>
@@ -306,7 +306,7 @@ Alternatively, you can also add additional controls and components to toasts.
     <CButton type="button" color="primary" size="sm">
     Take action
     </CButton>
-    <CToastClose component="CButton" color="secondary" size="sm" class="ms-1">Close</CToastClose>
+    <CToastClose as="CButton" color="secondary" size="sm" class="ms-1">Close</CToastClose>
     </div>
   </CToastBody>
 </CToast>
diff --git a/packages/docs/components/tooltip.md b/packages/docs/components/tooltip.md
index a03128d5..52a00c1d 100644
--- a/packages/docs/components/tooltip.md
+++ b/packages/docs/components/tooltip.md
@@ -12,7 +12,7 @@ other_frameworks: tooltip
 Hover over the links below to see tooltips:
 
 ::: demo
-<p class="text-medium-emphasis">
+<p class="text-body-secondary">
   Tight pants next level keffiyeh
   <CLink v-c-tooltip="'Tooltip text'"> you&nbsp;probably </CLink>
     haven't heard of them.
@@ -31,7 +31,7 @@ Hover over the links below to see tooltips:
 </p>
 :::
 ```vue demo
-<p class="text-medium-emphasis">
+<p class="text-body-secondary">
   Tight pants next level keffiyeh
   <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
     haven't heard of them.
@@ -56,45 +56,45 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
 
 ::: demo
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on top</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on top</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on right</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on right</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on bottom</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on bottom</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on left</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on left</CButton>
   </template>
 </CTooltip>
 :::
 ```vue
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on top</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on top</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on right</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on right</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on bottom</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on bottom</CButton>
   </template>
 </CTooltip>
 <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Tooltip on left</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on left</CButton>
   </template>
 </CTooltip>
 ```
@@ -124,8 +124,8 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable
   placement="top"
   :style="customTooltipStyle"
 >
-  <template #toggler="{ on }">
-    <CButton color="secondary" v-on="on">Custom popover</CButton>
+  <template #toggler="{ id, on }">
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
   </template>
 </CTooltip>
 :::
@@ -136,8 +136,8 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable
     placement="top"
     :style="customTooltipStyle"
   >
-    <template #toggler="{ on }">
-      <CButton color="secondary" v-on="on">Custom popover</CButton>
+    <template #toggler="{ id, on }">
+      <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
     </template>
   </CTooltip>
 </template>
@@ -161,24 +161,18 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable
 Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
 
 :::demo
-<CTooltip
-  content="Disabled tooltip"
-  :trigger="['hover', 'focus']"
->
-  <template #toggler="{ on }">
-    <span class="d-inline-block" :tabindex="0" v-on="on">
+<CTooltip content="Disabled tooltip">
+  <template #toggler="{ id, on }">
+    <span class="d-inline-block" :tabindex="0" :aria-describedby="id" v-on="on">
       <CButton color="primary" disabled>Disabled button</CButton>
     </span>
   </template>
 </CTooltip>
 :::
 ```vue
-<CTooltip
-  content="Disabled tooltip"
-  :trigger="['hover', 'focus']"
->
-  <template #toggler="{ on }">
-    <span class="d-inline-block" :tabindex="0" v-on="on">
+<CTooltip content="Disabled tooltip">
+  <template #toggler="{ id, on }">
+    <span class="d-inline-block" :tabindex="0" :aria-describedby="id" v-on="on">
       <CButton color="primary" disabled>Disabled button</CButton>
     </span>
   </template>
diff --git a/packages/docs/components/widgets.md b/packages/docs/components/widgets.md
index 77421487..9c295123 100644
--- a/packages/docs/components/widgets.md
+++ b/packages/docs/components/widgets.md
@@ -8,33 +8,32 @@ description:
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsA class="mb-3" color="primary">
-      <template #value
-        >26K
-        <span class="fs-6 fw-normal">
-          (-12.4% <CIcon icon="cil-arrow-bottom" />)
-        </span>
-      </template>
-      <template #title>Users</template>
-      <template #action>
-        <CDropdown placement="bottom-end">
-          <CDropdownToggle
+<CCol :sm="6">
+<CWidgetStatsA class="mb-3" color="primary">
+<template #value >26K
+<span class="fs-6 fw-normal">
+(-12.4% <CIcon icon="cil-arrow-bottom" />)
+</span>
+</template>
+<template #title>Users</template>
+<template #action>
+<CDropdown placement="bottom-end">
+<CDropdownToggle
             color="transparent"
             class="p-0 text-white"
             :caret="false"
           >
-            <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </template>
-      <template #chart>
-        <CChart
+<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+</CDropdownToggle>
+<CDropdownMenu>
+<CDropdownItem href="#">Action</CDropdownItem>
+<CDropdownItem href="#">Another action</CDropdownItem>
+<CDropdownItem href="#">Something else here</CDropdownItem>
+</CDropdownMenu>
+</CDropdown>
+</template>
+<template #chart>
+<CChart
           type="line"
           class="mt-3 mx-3"
           style="height: 70px"
@@ -53,7 +52,7 @@ description:
                 label: 'My First dataset',
                 backgroundColor: 'transparent',
                 borderColor: 'rgba(255,255,255,.55)',
-                pointBackgroundColor: '#321fdb',
+                pointBackgroundColor: '#5856d6',
                 data: [65, 59, 84, 84, 51, 55, 40],
               },
             ],
@@ -67,6 +66,9 @@ description:
             maintainAspectRatio: false,
             scales: {
               x: {
+                border: {
+                  display: false
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -100,36 +102,35 @@ description:
             },
           }"
         />
-      </template>
-    </CWidgetStatsA>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsA class="mb-3" color="info">
-      <template #value
-        >$6.200
-        <span class="fs-6 fw-normal">
-          (40.9% <CIcon icon="cil-arrow-top" />)
-        </span>
-      </template>
-      <template #title>Income</template>
-      <template #action>
-        <CDropdown placement="bottom-end">
-          <CDropdownToggle
+</template>
+</CWidgetStatsA>
+</CCol>
+<CCol :sm="6">
+<CWidgetStatsA class="mb-3" color="info">
+<template #value >$6.200
+<span class="fs-6 fw-normal">
+(40.9% <CIcon icon="cil-arrow-top" />)
+</span>
+</template>
+<template #title>Income</template>
+<template #action>
+<CDropdown placement="bottom-end">
+<CDropdownToggle
             color="transparent"
             class="p-0 text-white"
             :caret="false"
           >
-            <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </template>
-      <template #chart>
-        <CChart
+<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+</CDropdownToggle>
+<CDropdownMenu>
+<CDropdownItem href="#">Action</CDropdownItem>
+<CDropdownItem href="#">Another action</CDropdownItem>
+<CDropdownItem href="#">Something else here</CDropdownItem>
+</CDropdownMenu>
+</CDropdown>
+</template>
+<template #chart>
+<CChart
           type="line"
           class="mt-3 mx-3"
           style="height: 70px"
@@ -162,6 +163,9 @@ description:
             maintainAspectRatio: false,
             scales: {
               x: {
+                border: {
+                  display: false,
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -194,36 +198,35 @@ description:
             },
           }"
         />
-      </template>
-    </CWidgetStatsA>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsA class="mb-3" color="warning">
-      <template #value
-        >2.49%
-        <span class="fs-6 fw-normal">
-          (84.7% <CIcon icon="cil-arrow-top" />)
-        </span>
-      </template>
-      <template #title>Conversion Rate</template>
-      <template #action>
-        <CDropdown placement="bottom-end">
-          <CDropdownToggle
+</template>
+</CWidgetStatsA>
+</CCol>
+<CCol :sm="6">
+<CWidgetStatsA class="mb-3" color="warning">
+<template #value >2.49%
+<span class="fs-6 fw-normal">
+(84.7% <CIcon icon="cil-arrow-top" />)
+</span>
+</template>
+<template #title>Conversion Rate</template>
+<template #action>
+<CDropdown placement="bottom-end">
+<CDropdownToggle
             color="transparent"
             class="p-0 text-white"
             :caret="false"
           >
-            <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </template>
-      <template #chart>
-        <CChart
+<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+</CDropdownToggle>
+<CDropdownMenu>
+<CDropdownItem href="#">Action</CDropdownItem>
+<CDropdownItem href="#">Another action</CDropdownItem>
+<CDropdownItem href="#">Something else here</CDropdownItem>
+</CDropdownMenu>
+</CDropdown>
+</template>
+<template #chart>
+<CChart
           type="line"
           class="mt-3"
           style="height: 70px"
@@ -275,36 +278,35 @@ description:
             },
           }"
         />
-      </template>
-    </CWidgetStatsA>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsA class="mb-3" color="danger">
-      <template #value
-        >44K
-        <span class="fs-6 fw-normal">
-          (-23.6% <CIcon icon="cil-arrow-bottom" />)
-        </span>
-      </template>
-      <template #title>Sessions</template>
-      <template #action>
-        <CDropdown placement="bottom-end">
-          <CDropdownToggle
+</template>
+</CWidgetStatsA>
+</CCol>
+<CCol :sm="6">
+<CWidgetStatsA class="mb-3" color="danger">
+<template #value >44K
+<span class="fs-6 fw-normal">
+(-23.6% <CIcon icon="cil-arrow-bottom" />)
+</span>
+</template>
+<template #title>Sessions</template>
+<template #action>
+<CDropdown placement="bottom-end">
+<CDropdownToggle
             color="transparent"
             class="p-0 text-white"
             :caret="false"
           >
-            <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </template>
-      <template #chart>
-        <CChart
+<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+</CDropdownToggle>
+<CDropdownMenu>
+<CDropdownItem href="#">Action</CDropdownItem>
+<CDropdownItem href="#">Another action</CDropdownItem>
+<CDropdownItem href="#">Something else here</CDropdownItem>
+</CDropdownMenu>
+</CDropdown>
+</template>
+<template #chart>
+<CChart
           type="bar"
           class="mt-3 mx-3"
           style="height: 70px"
@@ -358,6 +360,9 @@ description:
                 },
               },
               y: {
+                border: {
+                  display: false,
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -370,14 +375,15 @@ description:
             },
           }"
         />
-      </template>
-    </CWidgetStatsA>
-  </CCol>
+</template>
+</CWidgetStatsA>
+</CCol>
 </CRow>
 :::
+
 ```vue
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsA class="mb-3" color="primary">
       <template #value
         >26K
@@ -422,7 +428,7 @@ description:
                 label: 'My First dataset',
                 backgroundColor: 'transparent',
                 borderColor: 'rgba(255,255,255,.55)',
-                pointBackgroundColor: '#321fdb',
+                pointBackgroundColor: '#5856d6',
                 data: [65, 59, 84, 84, 51, 55, 40],
               },
             ],
@@ -436,6 +442,9 @@ description:
             maintainAspectRatio: false,
             scales: {
               x: {
+                border: {
+                  display: false,
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -472,7 +481,7 @@ description:
       </template>
     </CWidgetStatsA>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsA class="mb-3" color="info">
       <template #value
         >$6.200
@@ -531,6 +540,9 @@ description:
             maintainAspectRatio: false,
             scales: {
               x: {
+                border: {
+                  display: false,
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -566,7 +578,7 @@ description:
       </template>
     </CWidgetStatsA>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsA class="mb-3" color="warning">
       <template #value
         >2.49%
@@ -647,7 +659,7 @@ description:
       </template>
     </CWidgetStatsA>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsA class="mb-3" color="danger">
       <template #value
         >44K
@@ -727,6 +739,9 @@ description:
                 },
               },
               y: {
+                border: {
+                  display: false,
+                },
                 grid: {
                   display: false,
                   drawBorder: false,
@@ -749,37 +764,32 @@ description:
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsB
+<CCol :sm="6">
+<CWidgetStatsB
       class="mb-3"
       :progress="{ color: 'success', value: 75}"
     >
-      <template #text>Widget helper text</template>
-      <template #title>Widget title</template>
-      <template #value>89.9%</template>
-    </CWidgetStatsB>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsB
+<template #text>Widget helper text</template>
+<template #title>Widget title</template>
+<template #value>89.9%</template>
+</CWidgetStatsB>
+</CCol>
+<CCol :sm="6">
+<CWidgetStatsB
       class="mb-3"
-      :progress="{ color: 'info', value: 75}"
+      color="primary"
+      inverse
+      :progress="{ value: 75}"
       text="Widget helper text"
       title="Widget title"
       value="12.124"/>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsB
-      class="mb-3"
-      :progress="{ color: 'warning', value: 75}"
-      text="Widget helper text"
-      title="Widget title"
-      value="$98.111,00"/>
-  </CCol>
+</CCol>
 </CRow>
 :::
+
 ```vue
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsB
       class="mb-3"
       :progress="{ color: 'success', value: 75}"
@@ -789,89 +799,16 @@ description:
       <template #value>89.9%</template>
     </CWidgetStatsB>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsB
-      class="mb-3"
-      :progress="{ color: 'info', value: 75}"
-      text="Widget helper text"
-      title="Widget title"
-      value="12.124"/>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsB
-      class="mb-3"
-      :progress="{ color: 'warning', value: 75}"
-      text="Widget helper text"
-      title="Widget title"
-      value="$98.111,00"/>
-  </CCol>
-</CRow>
-```
-
-::: demo
-<CRow>
-  <CCol :xs="4">
-    <CWidgetStatsB
-      class="mb-3"
-      color="primary"
-      inverse
-      :progress="{ value: 75 }"
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"/>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsB
-      class="mb-3"
-      color="warning"
-      inverse
-      :progress="{ value: 75 }"
-      text="Widget helper text"
-      title="Widget title"
-      value="12.124"/>
-  </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsB
-      color="danger"
-      inverse
-      :progress="{ value: 75 }"
-      text="Widget helper text"
-      title="Widget title"
-      value="$98.111,00"/>
-  </CCol>
-</CRow>
-:::
-```vue
-<CRow>
-  <CCol :xs="4">
-    <CWidgetProgress
       class="mb-3"
       color="primary"
       inverse
-      :progressValue="75"
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"/>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetProgress
-      class="mb-3"
-      color="warning"
-      inverse
-      :progressValue="75"
+      :progress="{ value: 75}"
       text="Widget helper text"
       title="Widget title"
       value="12.124"/>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetProgress
-      color="danger"
-      inverse
-      :progressValue="75"
-      text="Widget helper text"
-      title="Widget title"
-      value="$98.111,00"/>
-  </CCol>
 </CRow>
 ```
 
@@ -879,97 +816,229 @@ description:
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="87.500" :progress="{ color: 'info', value: 75 }" title="Visitors">
-      <template #icon><CIcon icon="cil-people" height="36"/></template>
+  <CCol :sm="6">
+    <CWidgetStatsC
+      class="mb-3"
+      value="87.500"
+      :progress="{ color: 'info', value: 75 }"
+      title="Visitors"
+    >
+      <template #icon><CIcon icon="cil-people" height="36" /></template>
       <template #title>Visitors</template>
     </CWidgetStatsC>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="385" :progress="{ color: 'success', value: 75 }" title="New clients">
-      <template #icon><CIcon icon="cil-user-follow" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="1238" :progress="{ color: 'info', value: 75 }" title="Product sold">
-      <template #icon><CIcon icon="cil-basket" height="36"/></template>
+  <CCol :sm="6">
+    <CWidgetStatsC
+      class="mb-3"
+      inverse
+      color="info"
+      value="385"
+      :progress="{ value: 75 }"
+      title="New clients"
+    >
+      <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
     </CWidgetStatsC>
   </CCol>
-</CRow> 
+</CRow>
 :::
 ```vue
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="87.500" :progress="{ color: 'info', value: 75 }" title="Visitors">
-      <template #icon><CIcon icon="cil-people" height="36"/></template>
+  <CCol :sm="6">
+    <CWidgetStatsC
+      class="mb-3"
+      value="87.500"
+      :progress="{ color: 'info', value: 75 }"
+      title="Visitors"
+    >
+      <template #icon><CIcon icon="cil-people" height="36" /></template>
       <template #title>Visitors</template>
     </CWidgetStatsC>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="385" :progress="{ color: 'success', value: 75 }" title="New clients">
-      <template #icon><CIcon icon="cil-user-follow" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="1238" :progress="{ color: 'info', value: 75 }" title="Product sold">
-      <template #icon><CIcon icon="cil-basket" height="36"/></template>
+  <CCol :sm="6">
+    <CWidgetStatsC
+      class="mb-3"
+      inverse
+      color="info"
+      value="385"
+      :progress="{ value: 75 }"
+      title="New clients"
+    >
+      <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
     </CWidgetStatsC>
   </CCol>
-</CRow> 
+</CRow>
 ```
 
+## WidgetStatsD
+
 ::: demo
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="87.500" inverse color="info" :progress="{ value: 75 }" title="Visitors">
-      <template #icon><CIcon icon="cil-people" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="385" inverse color="success" :progress="{ value: 75 }" title="New clients">
-      <template #icon><CIcon icon="cil-user-follow" height="36"/></template>
-    </CWidgetStatsC>
+  <CCol :sm="6">
+    <CWidgetStatsD
+      class="mb-4"
+      style="--cui-card-cap-bg: #3b5998"
+      :values="[
+        { title: 'friends', value: '89K' },
+        { title: 'feeds', value: '459' },
+      ]"
+    >
+      <template #icon>
+        <CIcon icon="cib-facebook" height="52" class="my-4 text-white"/>
+      </template>
+      <template #chart>
+        <CChart
+          class="position-absolute w-100 h-100"
+          type="line"
+          :data="{
+            labels: [
+              'January',
+              'February',
+              'March',
+              'April',
+              'May',
+              'June',
+              'July',
+            ],
+            datasets: [
+              {
+                backgroundColor: 'rgba(255,255,255,.1)',
+                borderColor: 'rgba(255,255,255,.55)',
+                pointHoverBackgroundColor: '#fff',
+                borderWidth: 2,
+                data: [65, 59, 84, 84, 51, 55, 40],
+                fill: true,
+              },
+            ],
+          }"
+          :options="{
+            elements: {
+              line: {
+                tension: 0.4,
+              },
+              point: {
+                radius: 0,
+                hitRadius: 10,
+                hoverRadius: 4,
+                hoverBorderWidth: 3,
+              },
+            },
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false,
+              },
+            },
+            scales: {
+              x: {
+                display: false,
+              },
+              y: {
+                display: false,
+              },
+            },
+          }"
+        />
+      </template>
+    </CWidgetStatsD>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="1238" inverse color="info" :progress="{ value: 75 }" title="Product sold">
-      <template #icon><CIcon icon="cil-basket" height="36"/></template>
-    </CWidgetStatsC>
+  <CCol :sm="6">
+    <CWidgetStatsD
+      class="mb-4"
+      style="--cui-card-cap-bg: #00aced"
+      :values="[
+        { title: 'followers', value: '973k' },
+        { title: 'tweets', value: '1.792' },
+      ]"
+    >
+      <template #icon>
+        <CIcon icon="cib-twitter" height="52" class="my-4 text-white" />
+      </template>
+      <template #chart>
+        <CChart
+          class="position-absolute w-100 h-100"
+          type="line"
+          :data="{
+            labels: [
+              'January',
+              'February',
+              'March',
+              'April',
+              'May',
+              'June',
+              'July',
+            ],
+            datasets: [
+              {
+                backgroundColor: 'rgba(255,255,255,.1)',
+                borderColor: 'rgba(255,255,255,.55)',
+                pointHoverBackgroundColor: '#fff',
+                borderWidth: 2,
+                data: [1, 13, 9, 17, 34, 41, 38],
+                fill: true,
+              },
+            ],
+          }"
+          :options="{
+            elements: {
+              line: {
+                tension: 0.4,
+              },
+              point: {
+                radius: 0,
+                hitRadius: 10,
+                hoverRadius: 4,
+                hoverBorderWidth: 3,
+              },
+            },
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false,
+              },
+            },
+            scales: {
+              x: {
+                display: false,
+              },
+              y: {
+                display: false,
+              },
+            },
+          }"
+        />
+      </template>
+    </CWidgetStatsD>
   </CCol>
-</CRow> 
+</CRow>
 :::
 ```vue
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="87.500" inverse color="info" :progress="{ value: 75 }" title="Visitors">
-      <template #icon><CIcon icon="cil-people" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="385" inverse color="success" :progress="{ value: 75 }" title="New clients">
-      <template #icon><CIcon icon="cil-user-follow" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsC class="mb-3" value="1238" inverse color="info" :progress="{ value: 75 }" title="Product sold">
-      <template #icon><CIcon icon="cil-basket" height="36"/></template>
-    </CWidgetStatsC>
-  </CCol>
-</CRow> 
-```
-
-## WidgetStatsD
-
-::: demo
-<CRow>
-  <CCol :xs="4">
-    <CWidgetStatsD :values="[['89k', 'friends'],['459', 'feeds']]" style="--cui-card-cap-bg: #321fdb">
-      <template #icon><CIcon icon="cib-coreui-c" height="52" class="my-4 text-white" /></template>
+  <CCol :sm="6">
+    <CWidgetStatsD
+      class="mb-4"
+      style="--cui-card-cap-bg: #3b5998"
+      :values="[
+        { title: 'friends', value: '89K' },
+        { title: 'feeds', value: '459' },
+      ]"
+    >
+      <template #icon>
+        <CIcon icon="cib-facebook" height="52" class="my-4 text-white"/>
+      </template>
       <template #chart>
         <CChart
           class="position-absolute w-100 h-100"
           type="line"
           :data="{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            labels: [
+              'January',
+              'February',
+              'March',
+              'April',
+              'May',
+              'June',
+              'July',
+            ],
             datasets: [
               {
                 backgroundColor: 'rgba(255,255,255,.1)',
@@ -1006,25 +1075,88 @@ description:
               y: {
                 display: false,
               },
-            }
+            },
+          }"
+        />
+      </template>
+    </CWidgetStatsD>
+  </CCol>
+  <CCol :sm="6">
+    <CWidgetStatsD
+      class="mb-4"
+      style="--cui-card-cap-bg: #00aced"
+      :values="[
+        { title: 'followers', value: '973k' },
+        { title: 'tweets', value: '1.792' },
+      ]"
+    >
+      <template #icon>
+        <CIcon icon="cib-twitter" height="52" class="my-4 text-white" />
+      </template>
+      <template #chart>
+        <CChart
+          class="position-absolute w-100 h-100"
+          type="line"
+          :data="{
+            labels: [
+              'January',
+              'February',
+              'March',
+              'April',
+              'May',
+              'June',
+              'July',
+            ],
+            datasets: [
+              {
+                backgroundColor: 'rgba(255,255,255,.1)',
+                borderColor: 'rgba(255,255,255,.55)',
+                pointHoverBackgroundColor: '#fff',
+                borderWidth: 2,
+                data: [1, 13, 9, 17, 34, 41, 38],
+                fill: true,
+              },
+            ],
+          }"
+          :options="{
+            elements: {
+              line: {
+                tension: 0.4,
+              },
+              point: {
+                radius: 0,
+                hitRadius: 10,
+                hoverRadius: 4,
+                hoverBorderWidth: 3,
+              },
+            },
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false,
+              },
+            },
+            scales: {
+              x: {
+                display: false,
+              },
+              y: {
+                display: false,
+              },
+            },
           }"
         />
       </template>
-    </CWidgetStatsD>   
+    </CWidgetStatsD>
   </CCol>
 </CRow>
-:::
-```vue
-<CWidgetStatsD :values="[['89k', 'friends'],['459', 'feeds']]" style="--cui-card-cap-bg: #321fdb">
-  <CIcon icon="cib-coreui-c" height="52" class="my-4 text-white" />
-</CWidgetStatsD>   
 ```
 
 ## WidgetStatsE
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsE>
       <template #chart>
         <CChart
@@ -1064,7 +1196,7 @@ description:
       <template #value>1,123</template>
     </CWidgetStatsE>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsE title="title" value="1,123">
       <template #chart>
         <CChart
@@ -1152,65 +1284,52 @@ description:
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
-    <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="info" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
+ <CCol :sm="6">
+  <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
+    <template #icon>
+      <CIcon icon="cil-settings" size="xl"/>
+    </template>
+  </CWidgetStatsF>
+ </CCol>
+ <CCol :sm="6">
+  <CWidgetStatsF color="info" title="Title" value="$1.999,50">
+    <template #icon>
+      <CIcon icon="cil-settings" size="xl"/>
+    </template>
+  </CWidgetStatsF>
+ </CCol>
 </CRow>
 :::
+
 ```vue
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
     </CWidgetStatsF>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="info" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
     </CWidgetStatsF>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
 </CRow>
 ```
 
 ::: demo
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
       <template #footer>
         <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
+          class="font-weight-bold font-xs text-body-secondary"
           href="https://coreui.io/"
           rel="noopener norefferer"
           target="_blank"
@@ -1221,32 +1340,14 @@ description:
       </template>  
     </CWidgetStatsF>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="info" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
       <template #footer>
         <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
-          href="https://coreui.io/"
-          rel="noopener norefferer"
-          target="_blank"
-        >
-          View more
-          <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
-        </CLink>
-      </template>  
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-      <template #footer>
-        <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
+          class="font-weight-bold font-xs text-body-secondary"
           href="https://coreui.io/"
           rel="noopener norefferer"
           target="_blank"
@@ -1261,14 +1362,14 @@ description:
 :::
 ```vue
 <CRow>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
       <template #footer>
         <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
+          class="font-weight-bold font-xs text-body-secondary"
           href="https://coreui.io/"
           rel="noopener norefferer"
           target="_blank"
@@ -1279,14 +1380,14 @@ description:
       </template>  
     </CWidgetStatsF>
   </CCol>
-  <CCol :xs="4">
+  <CCol :sm="6">
     <CWidgetStatsF color="info" title="Title" value="$1.999,50">
       <template #icon>
         <CIcon icon="cil-settings" size="xl"/>
       </template>
       <template #footer>
         <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
+          class="font-weight-bold font-xs text-body-secondary"
           href="https://coreui.io/"
           rel="noopener norefferer"
           target="_blank"
@@ -1297,75 +1398,6 @@ description:
       </template>  
     </CWidgetStatsF>
   </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-      <template #footer>
-        <CLink
-          class="font-weight-bold font-xs text-medium-emphasis"
-          href="https://coreui.io/"
-          rel="noopener norefferer"
-          target="_blank"
-        >
-          View more
-          <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
-        </CLink>
-      </template>  
-    </CWidgetStatsF>
-  </CCol>
-</CRow>
-```
-
-::: demo
-<CRow>
-  <CCol :xs="4">
-    <CWidgetStatsF color="primary" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="info" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-</CRow>
-:::
-```vue
-<CRow>
-  <CCol :xs="4">
-    <CWidgetStatsF color="primary" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="info" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
-  <CCol :xs="4">
-    <CWidgetStatsF color="warning" :padding="false" title="Title" value="$1.999,50">
-      <template #icon>
-        <CIcon icon="cil-settings" size="xl"/>
-      </template>
-    </CWidgetStatsF>
-  </CCol>
 </CRow>
 ```
 
@@ -1381,4 +1413,4 @@ description:
 
 !!!include(./api/widgets/CWidgetStatsE.api.md)!!!
 
-!!!include(./api/widgets/CWidgetStatsF.api.md)!!!
\ No newline at end of file
+!!!include(./api/widgets/CWidgetStatsF.api.md)!!!
diff --git a/packages/docs/forms/checkbox.md b/packages/docs/forms/checkbox.md
index ceced278..9b2273e0 100644
--- a/packages/docs/forms/checkbox.md
+++ b/packages/docs/forms/checkbox.md
@@ -20,6 +20,74 @@ Browser default checkboxes are replaced with the help of `<CFormCheck>`. Checkbo
 <CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
 ```
 
+### vModel
+
+Single checkbox, boolean value.
+
+::: demo
+<CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
+<div>Checked: {{checked}}</div>
+:::
+```vue
+<template>
+  <CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
+  <div>Checked: {{checked}}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checked = ref(true)
+      return {
+        checked
+      }
+    }
+  }
+</script>
+```
+
+We can also bind multiple checkboxes to the same array.
+
+::: demo
+<CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames"/>
+<CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames"/>
+<CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames"/>
+<div>Checked names: {{checkedNames}}</div>
+:::
+```vue
+<template>
+  <CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames"/>
+  <CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames"/>
+  <CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames"/>
+  <div>Checked names: {{checkedNames}}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checkedNames = ref(['Andrew'])
+      return {
+        checkedNames
+      }
+    }
+  }
+</script>
+```
+
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const checked = ref(true)
+      const checkedNames = ref(['Andrew'])
+      return {
+        checked,
+        checkedNames
+      }
+    }
+  }
+</script>
+
 ## Indeterminate
 
 Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
diff --git a/packages/docs/forms/input-group.md b/packages/docs/forms/input-group.md
index d8540628..d3a4d523 100644
--- a/packages/docs/forms/input-group.md
+++ b/packages/docs/forms/input-group.md
@@ -422,7 +422,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ::: demo
 <CInputGroup class="mb-3">
-  <CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupSelect01">Options</CInputGroupText>
   <CFormSelect id="inputGroupSelect01">
     <option>Choose...</option>
     <option value="1">One</option>
@@ -437,7 +437,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </CFormSelect>
-  <CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupSelect02">Options</CInputGroupText>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CButton type="button" color="secondary" variant="outline">Button</CButton>
@@ -460,7 +460,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 :::
 ```vue
 <CInputGroup class="mb-3">
-  <CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupSelect01">Options</CInputGroupText>
   <CFormSelect id="inputGroupSelect01">
     <option>Choose...</option>
     <option value="1">One</option>
@@ -475,7 +475,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </CFormSelect>
-  <CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupSelect02">Options</CInputGroupText>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CButton type="button" color="secondary" variant="outline">Button</CButton>
@@ -501,12 +501,12 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ::: demo
 <CInputGroup class="mb-3">
-  <CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupFile01">Upload</CInputGroupText>
   <CFormInput type="file" id="inputGroupFile01"/>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CFormInput type="file" id="inputGroupFile02"/>
-  <CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupFile02">Upload</CInputGroupText>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
@@ -519,12 +519,12 @@ Input groups include support for custom selects and custom file inputs. Browser
 :::
 ```vue
 <CInputGroup class="mb-3">
-  <CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupFile01">Upload</CInputGroupText>
   <CFormInput type="file" id="inputGroupFile01"/>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CFormInput type="file" id="inputGroupFile02"/>
-  <CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
+  <CInputGroupText as="label" for="inputGroupFile02">Upload</CInputGroupText>
 </CInputGroup>
 <CInputGroup class="mb-3">
   <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
diff --git a/packages/docs/forms/input.md b/packages/docs/forms/input.md
index 211afd82..71bafe1f 100644
--- a/packages/docs/forms/input.md
+++ b/packages/docs/forms/input.md
@@ -38,7 +38,7 @@ If you need to add custom classs to form's components, or need to add some custo
 <CForm>
   <CFormLabel for="exampleFormControlInput1">Email address</CFormLabel>
   <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
-  <CFormText component="span" id="exampleFormControlInputHelpInline">
+  <CFormText as="span" id="exampleFormControlInputHelpInline">
     Must be 8-20 characters long.
   </CFormText>
 </CForm>
diff --git a/packages/docs/forms/layout.md b/packages/docs/forms/layout.md
index e2f733a2..eed21307 100644
--- a/packages/docs/forms/layout.md
+++ b/packages/docs/forms/layout.md
@@ -107,7 +107,7 @@ More complex layouts can also be created with the grid system.
     <CFormCheck type="checkbox" id="gridCheck" label="Check me out"/>
   </CCol>
   <CCol xs="12">
-    <CButton type="submit">Sign in</CButton>
+    <CButton color="primary" type="submit">Sign in</CButton>
   </CCol>
 </CForm>
 :::
@@ -148,7 +148,7 @@ More complex layouts can also be created with the grid system.
     <CFormCheck type="checkbox" id="gridCheck" label="Check me out"/>
   </CCol>
   <CCol xs="12">
-    <CButton type="submit">Sign in</CButton>
+    <CButton color="primary" type="submit">Sign in</CButton>
   </CCol>
 </CForm>
 ```
@@ -186,7 +186,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
       <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
     </div>
   </CRow>
-  <CButton type="submit">Sign in</CButton>
+  <CButton color="primary" type="submit">Sign in</CButton>
 </CForm>
 :::
 ```vue
@@ -216,7 +216,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
       <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
     </div>
   </CRow>
-  <CButton type="submit">Sign in</CButton>
+  <CButton color="primary" type="submit">Sign in</CButton>
 </CForm>
 ```
 
@@ -326,7 +326,7 @@ The example below uses a flexbox utility to vertically center the contents and c
     <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me"/>
   </CCol>
   <CCol xs="auto">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 :::
@@ -356,7 +356,7 @@ The example below uses a flexbox utility to vertically center the contents and c
     <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me"/>
   </CCol>
   <CCol xs="auto">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 ```
@@ -389,7 +389,7 @@ You can then remix that once again with size-specific column classes.
     <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me"/>
   </CCol>
   <CCol xs="auto">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 :::
@@ -419,7 +419,7 @@ You can then remix that once again with size-specific column classes.
     <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me"/>
   </CCol>
   <CCol xs="auto">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 ```
@@ -450,7 +450,7 @@ Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter
     <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me"/>
   </CCol>
   <CCol xs="12">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 :::
@@ -476,7 +476,7 @@ Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter
     <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me"/>
   </CCol>
   <CCol xs="12">
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </CCol>
 </CForm>
 ```
diff --git a/packages/docs/forms/overview.md b/packages/docs/forms/overview.md
index ae58681f..d37133f6 100644
--- a/packages/docs/forms/overview.md
+++ b/packages/docs/forms/overview.md
@@ -102,7 +102,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
     <CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
   </CCol>
   <CCol xs="auto">
-    <CFormText component="span" id="passwordHelpInline">
+    <CFormText as="span" id="passwordHelpInline">
       Must be 8-20 characters long.
     </CFormText>
   </CCol>
@@ -119,7 +119,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
     <CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
   </CCol>
   <CCol xs="auto">
-    <CFormText component="span" id="passwordHelpInline">
+    <CFormText as="span" id="passwordHelpInline">
       Must be 8-20 characters long.
     </CFormText>
   </CCol>
@@ -155,7 +155,7 @@ However, if your form also includes custom button-like elements such as `<CButto
     <div class="mb-3">
       <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
     </div>
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </fieldset>
 </CForm>
 :::
@@ -176,7 +176,7 @@ However, if your form also includes custom button-like elements such as `<CButto
     <div class="mb-3">
       <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
     </div>
-    <CButton type="submit">Submit</CButton>
+    <CButton color="primary" type="submit">Submit</CButton>
   </fieldset>
 </CForm>
 ```
diff --git a/packages/docs/forms/radio.md b/packages/docs/forms/radio.md
index 3a942a5e..938663c7 100644
--- a/packages/docs/forms/radio.md
+++ b/packages/docs/forms/radio.md
@@ -22,6 +22,50 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" checked/>
 ```
 
+### vModel
+
+::: demo
+<CFormCheck type="radio" id="flexRadioVModel1" inline label="One" value="One" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel2" inline label="Two" value="Two" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel3" inline label="Three" value="Three" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel4" inline label="Four" value="Four" v-model="picked"/>
+<CFormCheck type="radio" id="flexRadioVModel5" inline label="Five" value="Five" v-model="picked"/>
+<div>Picked: {{ picked }}</div>
+:::
+```vue
+<template>
+  <CFormCheck type="radio" id="flexRadioVModel1" inline label="One" value="One" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Two" value="Two" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel3" inline label="Three" value="Three" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel4" inline label="Four" value="Four" v-model="picked"/>
+  <CFormCheck type="radio" id="flexRadioVModel5" inline label="Five" value="Five" v-model="picked"/>
+  <div>Picked: {{ picked }}</div>
+</template>
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const picked = ref('Four')
+      return {
+        picked
+      }
+    }
+  }
+</script>
+```
+
+<script>
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const picked = ref('Four')
+      return {
+        picked
+      }
+    }
+  }
+</script>
+
 ### Disabled
 
 ::: demo
diff --git a/packages/docs/forms/textarea.md b/packages/docs/forms/textarea.md
index 558c1b20..c238c297 100644
--- a/packages/docs/forms/textarea.md
+++ b/packages/docs/forms/textarea.md
@@ -15,13 +15,12 @@ other_frameworks: textarea
   text="Must be 8-20 words long."></CFormTextarea>
 :::
 ```vue
-<CForm>
-  <CFormTextarea
-    id="exampleFormControlTextarea1"
-    label="Example textarea"
-    rows="3"
-    text="Must be 8-20 words long."
-  ></CFormTextarea>
+<CFormTextarea
+  id="exampleFormControlTextarea1"
+  label="Example textarea"
+  rows="3"
+  text="Must be 8-20 words long."
+></CFormTextarea>
 </CForm>
 ```
 
@@ -30,7 +29,7 @@ If you need to add custom classs to form's components, or need to add some custo
 ```vue
 <CFormLabel for="exampleFormControlTextarea1">Example textarea</CFormLabel>
 <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
-<CFormText component="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
+<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
 ```
 
 You can also use slots.
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index ea260da9..369de935 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -10,37 +10,49 @@ menu: Getting started
 ### Npm
 
 ```bash
-npm install @coreui/vue
+npm install @coreui/vue @coreui/coreui
+```
+
+If you use CoreUI PRO version.
+
+```bash
+npm install @coreui/vue-pro @coreui/coreui-pro
 ```
 
 ### Yarn
 
 ```bash
-yarn add @coreui/vue
+yarn add @coreui/vue @coreui/coreui
+```
+
+If you use CoreUI PRO version.
+
+```bash
+yarn add @coreui/vue-pro @coreui/coreui-pro
 ```
 
 ## Using components
 
 ```ts
 import { CAlert } from '@coreui/vue';
+
+// CoreUI PRO version
+import { CAlert } from '@coreui/vue-pro';
 ```
 
 ## Stylesheets
 
-Vue components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem.
+Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS library, but you can also use them with the bootstrap CSS library. That is possible because the `@coreui/coreui` library is compatible with Bootstrap, it just extends its functionalities. The only exceptions are custom CoreUI and CoreUI PRO components, which don't exist in the Bootstrap ecosystem.
 
 ### CoreUI CSS files
 
-###### Installation
-
-```bash
-npm install @coreui/coreui
-```
-
 ###### Basic usage
 
 ```js
 import '@coreui/coreui/dist/css/coreui.min.css'
+
+// CoreUI PRO version
+import '@coreui/coreui-pro/dist/css/coreui.min.css'
 ```
 
 ### Bootstrap CSS files
diff --git a/packages/docs/layout/breakpoints.md b/packages/docs/layout/breakpoints.md
index 49dd1e67..40612dfb 100644
--- a/packages/docs/layout/breakpoints.md
+++ b/packages/docs/layout/breakpoints.md
@@ -171,9 +171,9 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // No media query since the xxl breakpoint has no upper bound on its width
 ```
 
-<CCallout color="warning">
+<Callout color="warning">
   <strong>Why subtract .02px?</strong> Browsers don’t currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, so we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code>min-</code> and <code>max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
-</CCallout>
+</Callout>
 
 ### Single breakpoint
 
diff --git a/packages/docs/layout/containers.md b/packages/docs/layout/containers.md
index 9f11c59b..4db2ce73 100644
--- a/packages/docs/layout/containers.md
+++ b/packages/docs/layout/containers.md
@@ -49,7 +49,7 @@ The table below illustrates how each container's `max-width` compares to the ori
   <tbody>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer&gt;</code></th>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>540px</td>
       <td>720px</td>
       <td>960px</td>
@@ -58,7 +58,7 @@ The table below illustrates how each container's `max-width` compares to the ori
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer sm&gt;</code></th>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>540px</td>
       <td>720px</td>
       <td>960px</td>
@@ -67,8 +67,8 @@ The table below illustrates how each container's `max-width` compares to the ori
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer md&gt;</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>720px</td>
       <td>960px</td>
       <td>1140px</td>
@@ -76,39 +76,39 @@ The table below illustrates how each container's `max-width` compares to the ori
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer lg&gt;</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>960px</td>
       <td>1140px</td>
       <td>1320px</td>
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer xl&gt;</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>1140px</td>
       <td>1320px</td>
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer xxl&gt;</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
       <td>1320px</td>
     </tr>
     <tr>
       <th scope="row" class="fw-normal"><code>&lt;CContainer fluid&gt;</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
+      <td class="text-body-secondary">100%</td>
     </tr>
   </tbody>
 </table>
diff --git a/packages/docs/migration/v4.md b/packages/docs/migration/v4.md
index 9a20c0cb..c6fc9df5 100644
--- a/packages/docs/migration/v4.md
+++ b/packages/docs/migration/v4.md
@@ -1,9 +1,9 @@
 ---
-name: Migration to v4
+title: Migration to v4
 description: Track and review changes to the CoreUI for Vue.js components to help you migrate from v3 to v4.
 ---
 
-CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/4.0/migration/).
+CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/migration/v4/).
 
 ## Components
 
diff --git a/packages/docs/migration/v5.md b/packages/docs/migration/v5.md
new file mode 100644
index 00000000..d0891fe9
--- /dev/null
+++ b/packages/docs/migration/v5.md
@@ -0,0 +1,169 @@
+---
+title: Migration to v5
+description: Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.
+---
+
+CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/docs/migration/v5/).
+
+## Components
+
+### CAlertHeading
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CAvatar
+
+- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
+- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
+
+### CBadge
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
+- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
+
+### CButton
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCard
+
+- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
+- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
+
+### CCardHeader
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCardImage
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCardSubtitle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCardText
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCardTitle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CCloseButton
+
+- Deprecated property `white`, use `dark` instead of.
+
+### CDropdown
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CDropdownHeader
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CDropdownItem
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CDropdownItemPlain
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CDropdownMenu
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CDropdownToggle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CFormFeedback
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CFormText
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CHeaderBrand
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CHeaderNav
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CInputGroupText
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CLink
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CListGroup
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CListGroupItem
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CModalTitle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNav
+
+- The `underline` variant has been changed to `underline-border`
+
+### CNavbar
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNavbarBrand
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNavbarNav
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNavItem
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNavLink
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CNavTitle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### COffcanvasTitle
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CPaginationItem
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CPlaceholder
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CSidebar
+
+- <span class="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use `colorScheme="dark"` to make it dark.
+
+### CSpinner
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+
+### CToastClose
+
+- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
+- Deprecated property `white`, use `dark` instead of.
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 140c3ee8..95f61218 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "4.9.0-beta.2",
+  "version": "5.0.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
@@ -8,18 +8,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@coreui/chartjs": "^3.1.2",
-    "@coreui/coreui": "^4.3.0-beta.0",
+    "@coreui/chartjs": "^4.0.0",
+    "@coreui/coreui": "^5.0.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue-chartjs": "^2.1.0",
-    "@docsearch/css": "^3.5.0",
-    "@docsearch/js": "^3.5.0",
-    "@vuepress/plugin-register-components": "2.0.0-beta.62",
-    "@vuepress/plugin-toc": "2.0.0-beta.62",
+    "@coreui/vue-chartjs": "^3.0.0",
+    "@docsearch/css": "^3.6.0",
+    "@docsearch/js": "^3.6.0",
+    "@vuepress/plugin-register-components": "2.0.0-rc.0",
+    "@vuepress/plugin-toc": "2.0.0-rc.0",
     "markdown-it-include": "^2.0.0",
-    "vue-docgen-cli": "^4.67.0",
-    "vuepress": "2.0.0-beta.62"
+    "vue-docgen-cli": "^4.79.0",
+    "vuepress": "2.0.0-rc.0"
   }
 }
diff --git a/packages/docs/templates/admin-dashboard.md b/packages/docs/templates/admin-dashboard.md
index a91a81ab..d761ec92 100644
--- a/packages/docs/templates/admin-dashboard.md
+++ b/packages/docs/templates/admin-dashboard.md
@@ -15,7 +15,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/free-vue-admin-template/" target="_blank">
           <CCardTitle>Free Vue Admin Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Default Theme</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Default Theme</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_free_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
@@ -26,7 +26,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=default-v3" target="_blank">
           <CCardTitle>Vue Dashboard Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Default Theme v3</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Default Theme v3</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_v3_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
@@ -37,7 +37,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=light-v3" target="_blank">
           <CCardTitle>Vue Dashboard Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Light Theme v3</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Light Theme v3</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_v3_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
@@ -48,7 +48,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=default" target="_blank">
           <CCardTitle>Vue Dashboard Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Default Theme</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Default Theme</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
@@ -59,7 +59,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=light" target="_blank">
           <CCardTitle>Vue Dashboard Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Light Theme</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Light Theme</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
@@ -70,7 +70,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using
       <CCardBody>
         <CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=dark" target="_blank">
           <CCardTitle>Vue Dashboard Template</CCardTitle>
-          <CCardSubtitle class="mb-3 text-muted">Dark Theme</CCardSubtitle>
+          <CCardSubtitle class="mb-3 text-body-secondary">Dark Theme</CCardSubtitle>
           <CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_dark_1440.webp" alt=""/>
         </CLink>
       </CCardBody>
diff --git a/tsconfig.json b/tsconfig.json
index 8cf48188..d8830b53 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "esModuleInterop": true,
@@ -30,4 +29,4 @@
     }
   },
   "exclude": ["**/node_modules", "**/dist"]
-}
\ No newline at end of file
+}