From 92186d32e2ab50a1c2e850a4b1a308bb601c2266 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 7 Mar 2024 00:06:05 +0100
Subject: [PATCH 01/92] refactor(CBadge): update badge colors

---
 packages/coreui-vue/src/components/badge/CBadge.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts
index 6fdfd798..18480ba4 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -61,7 +61,7 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`bg-${props.color}`]: props.color,
+              [`text-bg-${props.color}`]: props.color,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),

From 60899f7f499954c6116de86f69ed39dbeb80ee20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 11:18:27 +0100
Subject: [PATCH 02/92] Merge pull request #282 from
 gfoidl/accordion-active-item-key

Accordion watches for activeItemKey changes
---
 packages/coreui-vue/src/components/accordion/CAccordion.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts
index 1422d40b..eee9a535 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,9 @@ 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)

From 26ff1351ad0ffb74e9631a33087579bfad55a3ce Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 11:40:15 +0100
Subject: [PATCH 03/92] style: format syntax

---
 packages/coreui-vue/src/components/accordion/CAccordion.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts
index eee9a535..639b5af2 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordion.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordion.ts
@@ -21,8 +21,11 @@ const CAccordion = defineComponent({
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
     }
-    
-    watch(() => props.activeItemKey, value => activeItemKey.value = value)
+
+    watch(
+      () => props.activeItemKey,
+      (value) => (activeItemKey.value = value),
+    )
 
     provide('activeItemKey', activeItemKey)
     provide('alwaysOpen', props.alwaysOpen)

From 54373f14ba439244c14d67f0b77fe6233cdb0001 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 11:53:41 +0100
Subject: [PATCH 04/92] fix(CFormSwitch, CFormTextarea): class attribute values
 are not combining

---
 packages/coreui-vue/src/components/form/CFormSwitch.ts   | 1 +
 packages/coreui-vue/src/components/form/CFormTextarea.ts | 1 +
 2 files changed, 2 insertions(+)

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/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),

From 6dd629d4ddc40f4994bee63c42ed9699f5a18c87 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 11:56:01 +0100
Subject: [PATCH 05/92] docs: update content

---
 packages/docs/forms/textarea.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/docs/forms/textarea.md b/packages/docs/forms/textarea.md
index 558c1b20..b1361c63 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>
 ```
 

From 5d337d61155270f95bb8a425d939ede0d4e9dddd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 12:19:46 +0100
Subject: [PATCH 06/92] fix(CFormCheck): the `checked` attribute is not working
 when `value` is set

---
 .../src/components/form/CFormCheck.ts         | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts
index ea044fba..fbdd26fd 100644
--- a/packages/coreui-vue/src/components/form/CFormCheck.ts
+++ b/packages/coreui-vue/src/components/form/CFormCheck.ts
@@ -189,7 +189,7 @@ const CFormCheck = defineComponent({
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...((props.modelValue || props.value) && { checked: isChecked.value }),
+        ...(props.modelValue && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -236,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()
   },
 })
 

From 5f75e9e793459596ef9210d19730c91d924d9070 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 12:43:59 +0100
Subject: [PATCH 07/92] docs: update content

---
 packages/docs/forms/radio.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/forms/radio.md b/packages/docs/forms/radio.md
index 90d93af2..938663c7 100644
--- a/packages/docs/forms/radio.md
+++ b/packages/docs/forms/radio.md
@@ -27,18 +27,18 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 ::: 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="flexRadioVModel2" inline label="Three" value="Three" v-model="picked"/>
-<CFormCheck type="radio" id="flexRadioVModel2" inline label="Four" value="Four" v-model="picked"/>
-<CFormCheck type="radio" id="flexRadioVModel2" inline label="Five" value="Five" 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="flexRadioVModel2" inline label="Three" value="Three" v-model="picked"/>
-  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Four" value="Four" v-model="picked"/>
-  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Five" value="Five" 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>

From d9a7656d9157e7290407e251fe1529f2484f8f57 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 12:47:14 +0100
Subject: [PATCH 08/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@typescript-eslint/eslint-plugin  ^6.17.0  →   ^7.1.1
@typescript-eslint/parser         ^6.17.0  →   ^7.1.1
@vue/eslint-config-typescript     ^12.0.0  →  ^13.0.0
eslint                             8.56.0  →   8.57.0
eslint-plugin-prettier             ^5.1.2  →   ^5.1.3
eslint-plugin-unicorn             ^50.0.1  →  ^51.0.1
eslint-plugin-vue                 ^9.19.2  →  ^9.22.0
lerna                              ^8.0.1  →   ^8.1.2
prettier                           ^3.1.1  →   ^3.2.5
---
 package.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 2089686c..2139943d 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": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/vue3-jest": "29.2.6",
-    "eslint": "8.56.0",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint": "8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.22.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^50.0.1",
-    "lerna": "^8.0.1",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "lerna": "^8.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1"
+    "prettier": "^3.2.5"
   }
 }

From 4425cd41f05a81ab50258730522a88b05cd1542c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 14:24:52 +0100
Subject: [PATCH 09/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                        ^5.0.0-rc.1  →  ^5.0.0-rc-2
@docsearch/css                             ^3.5.2  →       ^3.6.0
@docsearch/js                              ^3.5.2  →       ^3.6.0
---
 packages/docs/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index d229be21..d154d2db 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,13 +9,13 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.1",
+    "@coreui/coreui": "^5.0.0-rc-2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
-    "@docsearch/css": "^3.5.2",
-    "@docsearch/js": "^3.5.2",
+    "@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",

From 95cf2c708f479cb0077c916138d01cbe284453ea Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 10 Mar 2024 16:07:59 +0100
Subject: [PATCH 10/92] release: v5.0.0-rc.2

---
 README.md                                                     | 2 +-
 lerna.json                                                    | 2 +-
 packages/coreui-vue/package.json                              | 4 ++--
 .../components/conditional-teleport/CConditionalTeleport.ts   | 2 +-
 packages/coreui-vue/src/components/dropdown/CDropdown.ts      | 4 ++--
 .../coreui-vue/src/components/dropdown/CDropdownToggle.ts     | 2 +-
 packages/coreui-vue/src/components/modal/CModal.ts            | 2 +-
 packages/coreui-vue/src/components/popover/CPopover.ts        | 2 +-
 packages/coreui-vue/src/components/progress/CProgress.ts      | 2 +-
 packages/coreui-vue/src/components/tooltip/CTooltip.ts        | 2 +-
 .../docs/api/conditional-teleport/CConditionalTeleport.api.md | 2 +-
 packages/docs/api/dropdown/CDropdown.api.md                   | 4 ++--
 packages/docs/api/dropdown/CDropdownToggle.api.md             | 2 +-
 packages/docs/api/modal/CModal.api.md                         | 2 +-
 packages/docs/api/popover/CPopover.api.md                     | 2 +-
 packages/docs/api/progress/CProgress.api.md                   | 2 +-
 packages/docs/api/tooltip/CTooltip.api.md                     | 2 +-
 packages/docs/package.json                                    | 2 +-
 18 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index e57961c8..3eec02ea 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/v5.0.0-rc.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.2.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`
diff --git a/lerna.json b/lerna.json
index fed1a749..49a8b937 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 21af3e3c..e30b2abe 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0-rc.1",
+    "@coreui/coreui": "^5.0.0-rc.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
index 22207486..44bc6660 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index b1eb9200..dc6ca125 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * 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-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     teleport: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 10b7f85a..6f348894 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     navLink: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts
index 50a0a570..1ee36c53 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.2
      */
     focus: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 5dc24bfd..b472b9d2 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * 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-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts
index ad67b183..26cf43eb 100644
--- a/packages/coreui-vue/src/components/progress/CProgress.ts
+++ b/packages/coreui-vue/src/components/progress/CProgress.ts
@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.2
      */
     progressBarClassName: String,
     /**
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 1b0da318..06607284 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * 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-rc.1
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index b9dafcef..ece97230 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -10,5 +10,5 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
 
 | Prop name                                                          | Description                                                                                     | Type                                         | Values | Default |
 | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
-| **container** <br><div class="badge bg-primary">v5.0.0-rc.1+</div> | An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | -      | 'body'  |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.2+</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/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 76a88d7a..02de108d 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -12,14 +12,14 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | **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-rc.1+</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'         |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.2+</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-rc.1+</div>  | Generates dropdown menu using Teleport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | false          |
+| **teleport** <br><div class="badge bg-primary">v5.0.0-rc.2+</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                                      | -                                                                                                                                                                                             | -              |
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 3c2a2479..5d6c2b55 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 | **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-rc.1+</div> | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.                                                                                                           | boolean  | -                                                                                               | true     |
+| **nav-link** <br><div class="badge bg-primary">v5.0.0-rc.2+</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'  |
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 238935f9..fec31d16 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -13,7 +13,7 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
 | **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-rc.1+</div> | Puts the focus on the modal when shown.                                                                                            | boolean         | -                                                  | true    |
+| **focus** <br><div class="badge bg-primary">v5.0.0-rc.2+</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         | -                                                  | -       |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index bdcc1d81..3bfa8ba6 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 | 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-rc.1+</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'                                   |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.2+</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'] |
diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md
index cc4812ea..2f03bcd8 100644
--- a/packages/docs/api/progress/CProgress.api.md
+++ b/packages/docs/api/progress/CProgress.api.md
@@ -13,7 +13,7 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress'
 | **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-rc.1+</div> | A string of all className you want applied to the <CProgressBar/> component.                                              | string  | -                                                                                               | -       |
+| **progress-bar-class-name** <br><div class="badge bg-primary">5.0.0-rc.2+</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'`                                                                                     | -       |
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index 4eb49c1a..169db23d 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 | 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-rc.1+</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'                                   |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.2+</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'] |
diff --git a/packages/docs/package.json b/packages/docs/package.json
index d154d2db..8a508e54 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From e70b9e56c8a476e1c44748e49cf0c80191bbb7f1 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 21 Mar 2024 11:25:57 +0100
Subject: [PATCH 11/92] refactor: migrate from `component` property to `as`

---
 .../components/dropdown/CDropdownToggle.ts    |  2 +-
 .../coreui-vue/src/components/nav/CNavLink.ts |  4 +-
 .../components/pagination/CPaginationItem.ts  |  2 +-
 .../src/client/components/Header.vue          | 10 +--
 packages/docs/components/button.md            | 24 +++----
 packages/docs/components/card.md              |  6 +-
 packages/docs/components/dropdown.md          |  4 +-
 packages/docs/components/list-group.md        | 62 +++++++++----------
 packages/docs/components/navbar.md            |  4 +-
 packages/docs/components/navs-tabs.md         |  8 +--
 packages/docs/components/placeholder.md       | 12 ++--
 packages/docs/components/spinner.md           | 16 ++---
 packages/docs/components/toast.md             |  4 +-
 packages/docs/forms/input-group.md            | 16 ++---
 packages/docs/forms/input.md                  |  2 +-
 packages/docs/forms/overview.md               |  4 +-
 packages/docs/forms/textarea.md               |  2 +-
 17 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 6f348894..2a02d18a 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -176,8 +176,8 @@ const CDropdownToggle = defineComponent({
               CButton,
               {
                 ...togglerProps.value,
+                as: props.as,
                 color: props.color,
-                component: props.as,
                 disabled: props.disabled,
                 shape: props.shape,
                 size: props.size,
diff --git a/packages/coreui-vue/src/components/nav/CNavLink.ts b/packages/coreui-vue/src/components/nav/CNavLink.ts
index d2df89bb..63c2af94 100644
--- a/packages/coreui-vue/src/components/nav/CNavLink.ts
+++ b/packages/coreui-vue/src/components/nav/CNavLink.ts
@@ -30,9 +30,9 @@ const CNavLink = defineComponent({
       h(
         CLink,
         {
-          class: 'nav-link',
+          as: props.as,
           active: props.active,
-          component: props.as,
+          class: 'nav-link',
           disabled: props.disabled,
           href: props.href,
         },
diff --git a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
index c997c061..c4085a9a 100644
--- a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
+++ b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts
@@ -41,8 +41,8 @@ const CPaginationItem = defineComponent({
           ? h(
               CLink,
               {
+                as: component,
                 class: ['page-link'],
-                component: component,
                 href: props.href,
               },
               {
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/components/button.md b/packages/docs/components/button.md
index e772d760..0f9a8428 100644
--- a/packages/docs/components/button.md
+++ b/packages/docs/components/button.md
@@ -47,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
@@ -197,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 8202ff2b..2e298a4f 100644
--- a/packages/docs/components/card.md
+++ b/packages/docs/components/card.md
@@ -241,11 +241,11 @@ Add an optional header and/or footer within a card.
 </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>
@@ -255,7 +255,7 @@ Card headers can be styled by adding ex. `component="h5"`.
 :::
 ```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>
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index 7e99ce96..188211c7 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -43,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>
@@ -53,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>
diff --git a/packages/docs/components/list-group.md b/packages/docs/components/list-group.md
index 1678dd24..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,14 +183,14 @@ 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>
 ```
 
@@ -223,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>
@@ -231,7 +231,7 @@ 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-body-secondary">3 days ago</small>
@@ -239,7 +239,7 @@ 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 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-body-secondary">3 days ago</small>
@@ -251,7 +251,7 @@ Add nearly any HTML within, even for linked list groups like the one below, with
 :::
 ```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>
@@ -259,7 +259,7 @@ 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-body-secondary">3 days ago</small>
@@ -267,7 +267,7 @@ 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 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-body-secondary">3 days ago</small>
diff --git a/packages/docs/components/navbar.md b/packages/docs/components/navbar.md
index 0f77c2f7..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>
diff --git a/packages/docs/components/navs-tabs.md b/packages/docs/components/navs-tabs.md
index 097c880b..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>
@@ -495,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>
@@ -507,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/placeholder.md b/packages/docs/components/placeholder.md
index 14e45b9a..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>
@@ -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/spinner.md b/packages/docs/components/spinner.md
index 7c3dda54..c0d6e028 100644
--- a/packages/docs/components/spinner.md
+++ b/packages/docs/components/spinner.md
@@ -102,38 +102,38 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 ::: demo
 <CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
 <CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 :::
 ```vue
 <CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
 <CButton disabled>
-  <CSpinner component="span" size="sm" aria-hidden="true"/>
+  <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 ```
 
 ::: demo
 <CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
 <CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+  <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"/>
+  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
 <CButton disabled>
-  <CSpinner component="span" size="sm" variant="grow" aria-hidden="true"/>
+  <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 8e156b5e..8f6e1b76 100644
--- a/packages/docs/components/toast.md
+++ b/packages/docs/components/toast.md
@@ -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/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/overview.md b/packages/docs/forms/overview.md
index ae58681f..59f2911b 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>
diff --git a/packages/docs/forms/textarea.md b/packages/docs/forms/textarea.md
index b1361c63..c238c297 100644
--- a/packages/docs/forms/textarea.md
+++ b/packages/docs/forms/textarea.md
@@ -29,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.

From f6093b6eb4f2458f4e3754d8797573aad638aa79 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 21 Mar 2024 11:36:51 +0100
Subject: [PATCH 12/92] refactor(CBadge): improve background and text color
 handling

---
 .../coreui-vue/src/components/badge/CBadge.ts     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts
index 18480ba4..a6897567 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -5,12 +5,6 @@ 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.
      */
@@ -18,6 +12,12 @@ const CBadge = defineComponent({
       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.
      *
@@ -61,7 +61,8 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`text-bg-${props.color}`]: props.color,
+              [`text-bg-${props.color}`]: props.color && !props.textColor,
+              [`bg-${props.color}`]: props.color && props.textColor,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),

From c4f5da9b5c01041959e7bfc04585dd49b2d60734 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 15:49:51 +0100
Subject: [PATCH 13/92] refactor(CBadge, CCard): improve background and text
 color handling

---
 .../coreui-vue/src/components/badge/CBadge.ts | 11 ++++-
 .../coreui-vue/src/components/card/CCard.ts   |  8 ++++
 .../client/styles/_component-examples.scss    |  5 +++
 packages/docs/components/badge.md             | 30 +++++++++++--
 packages/docs/components/card.md              | 43 +++++++++++++++++++
 5 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts
index a6897567..65e5936c 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -46,6 +46,13 @@ 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-rc.3
+     */
+    textBgColor: Color,
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
@@ -61,8 +68,7 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`text-bg-${props.color}`]: props.color && !props.textColor,
-              [`bg-${props.color}`]: props.color && props.textColor,
+              [`bg-${props.color}`]: props.color,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),
@@ -70,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/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts
index 34e0531a..e63631fb 100644
--- a/packages/coreui-vue/src/components/card/CCard.ts
+++ b/packages/coreui-vue/src/components/card/CCard.ts
@@ -11,6 +11,13 @@ 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-rc.3
+     */
+    textBgColor: Color,
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
@@ -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/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
index 10462b61..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 {
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/card.md b/packages/docs/components/card.md
index 2e298a4f..7163d29a 100644
--- a/packages/docs/components/card.md
+++ b/packages/docs/components/card.md
@@ -780,6 +780,49 @@ Use `color` property to change the appearance of a card.
 </template>
 ```
 
+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>

From ef6acab80001237680db322782ef04221e851e36 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 16:07:19 +0100
Subject: [PATCH 14/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                    ^5.0.0-rc.2  →  ^5.0.0-rc-2
@rollup/plugin-typescript             ^11.1.5  →      ^11.1.6
@types/jest                          ^29.5.11  →     ^29.5.12
@typescript-eslint/eslint-plugin       ^7.1.1  →       ^7.3.1
@typescript-eslint/parser              ^7.1.1  →       ^7.3.1
@vue/test-utils                        ^2.4.3  →       ^2.4.5
eslint-plugin-vue                     ^9.22.0  →      ^9.23.0
rollup                                 ^4.9.2  →      ^4.13.0
ts-jest                               ^29.1.1  →      ^29.1.2
typescript                             ^5.3.3  →       ^5.4.3
vue                                    ^3.4.3  →      ^3.4.21
vue-docgen-cli                        ^4.67.0  →      ^4.78.0
---
 package.json                     |  6 +++---
 packages/coreui-vue/package.json | 16 ++++++++--------
 packages/docs/package.json       |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 2139943d..9173efda 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,14 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@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.22.0",
+    "eslint-plugin-vue": "^9.23.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
     "lerna": "^8.1.2",
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index e30b2abe..bd7fafa4 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,24 +41,24 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0-rc.2",
+    "@coreui/coreui": "^5.0.0-rc.3",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@types/jest": "^29.5.11",
-    "@vue/test-utils": "^2.4.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.9.2",
+    "rollup": "^4.13.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3",
-    "vue": "^3.4.3",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3",
+    "vue": "^3.4.21",
     "vue-types": "^5.1.1"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 8a508e54..a2df3ca1 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,7 +9,7 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc-2",
+    "@coreui/coreui": "^5.0.0-rc.3",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
@@ -19,7 +19,7 @@
     "@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",
+    "vue-docgen-cli": "^4.78.0",
     "vuepress": "2.0.0-rc.0"
   }
 }

From e526efd221c1364ec471b7d170a37a4b4727c83e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 16:19:21 +0100
Subject: [PATCH 15/92] docs: update content

---
 packages/docs/components/card.md     | 56 ++++++++++++++--------------
 packages/docs/components/dropdown.md | 10 ++---
 packages/docs/components/spinner.md  | 16 ++++----
 packages/docs/forms/layout.md        | 20 +++++-----
 packages/docs/forms/overview.md      |  4 +-
 5 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/packages/docs/components/card.md b/packages/docs/components/card.md
index 7163d29a..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>
 ```
@@ -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,7 +236,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>
 ```
@@ -249,7 +249,7 @@ Card headers can be styled by adding ex. `as="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>
 </CCard>
 :::
@@ -259,7 +259,7 @@ Card headers can be styled by adding ex. `as="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>
 </CCard>
 ```
@@ -293,7 +293,7 @@ Card headers can be styled by adding ex. `as="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-body-secondary">2 days ago</CCardFooter>
 </CCard>
@@ -304,7 +304,7 @@ Card headers can be styled by adding ex. `as="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-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>
 ```
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index 188211c7..da73b72e 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -578,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>
@@ -597,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>
@@ -640,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>
@@ -653,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>
@@ -673,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/spinner.md b/packages/docs/components/spinner.md
index c0d6e028..f6a9eaac 100644
--- a/packages/docs/components/spinner.md
+++ b/packages/docs/components/spinner.md
@@ -101,38 +101,38 @@ 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>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 :::
 ```vue
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" aria-hidden="true"/>
   Loading...
 </CButton>
 ```
 
 ::: demo
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
   Loading...
 </CButton>
 :::
 ```vue
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
 </CButton>
-<CButton disabled>
+<CButton color="primary" disabled>
   <CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
   Loading...
 </CButton>
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 59f2911b..d37133f6 100644
--- a/packages/docs/forms/overview.md
+++ b/packages/docs/forms/overview.md
@@ -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>
 ```

From 1860d59845b9f9438fcc594aebff3f18dafae879 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 23 Mar 2024 11:42:21 +0100
Subject: [PATCH 16/92] fix:  resolve "Argument of type 'string | undefined' is
 not assignable to parameter of type 'string'" warning

---
 .../src/components/accordion/index.ts         | 10 +++----
 .../coreui-vue/src/components/alert/index.ts  |  6 ++--
 .../coreui-vue/src/components/avatar/index.ts |  2 +-
 .../src/components/backdrop/index.ts          |  2 +-
 .../coreui-vue/src/components/badge/index.ts  |  2 +-
 .../src/components/breadcrumb/index.ts        |  4 +--
 .../src/components/button-group/index.ts      |  4 +--
 .../coreui-vue/src/components/button/index.ts |  2 +-
 .../src/components/callout/index.ts           |  2 +-
 .../coreui-vue/src/components/card/index.ts   | 22 +++++++-------
 .../src/components/carousel/index.ts          |  6 ++--
 .../src/components/close-button/index.ts      |  2 +-
 .../src/components/collapse/index.ts          |  2 +-
 .../CConditionalTeleport.ts                   |  2 +-
 .../components/conditional-teleport/index.ts  |  2 +-
 .../src/components/dropdown/CDropdown.ts      |  4 +--
 .../components/dropdown/CDropdownToggle.ts    |  2 +-
 .../src/components/dropdown/index.ts          | 12 ++++----
 .../coreui-vue/src/components/footer/index.ts |  2 +-
 .../coreui-vue/src/components/form/index.ts   | 29 +++++++++----------
 .../coreui-vue/src/components/grid/index.ts   |  6 ++--
 .../coreui-vue/src/components/header/index.ts | 12 ++++----
 .../coreui-vue/src/components/image/index.ts  |  2 +-
 .../coreui-vue/src/components/link/index.ts   |  2 +-
 .../src/components/list-group/index.ts        |  4 +--
 .../coreui-vue/src/components/modal/CModal.ts |  2 +-
 .../coreui-vue/src/components/modal/index.ts  | 10 +++----
 .../coreui-vue/src/components/nav/index.ts    | 12 ++++----
 .../coreui-vue/src/components/navbar/index.ts | 10 +++----
 .../src/components/offcanvas/index.ts         |  8 ++---
 .../src/components/pagination/index.ts        |  4 +--
 .../src/components/placeholder/index.ts       |  2 +-
 .../src/components/popover/CPopover.ts        |  2 +-
 .../src/components/popover/index.ts           |  2 +-
 .../src/components/progress/CProgress.ts      |  2 +-
 .../src/components/progress/index.ts          |  6 ++--
 .../src/components/sidebar/index.ts           | 12 ++++----
 .../src/components/spinner/index.ts           |  2 +-
 .../coreui-vue/src/components/table/index.ts  | 16 +++++-----
 .../coreui-vue/src/components/tabs/index.ts   |  4 +--
 .../coreui-vue/src/components/toast/index.ts  | 10 +++----
 .../src/components/tooltip/CTooltip.ts        |  2 +-
 .../src/components/tooltip/index.ts           |  2 +-
 .../src/components/widgets/index.ts           | 12 ++++----
 44 files changed, 131 insertions(+), 134 deletions(-)

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/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/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/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/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/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/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/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/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
index 44bc6660..48df4843 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/conditional-teleport/index.ts b/packages/coreui-vue/src/components/conditional-teleport/index.ts
index 249949b4..538edf16 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/index.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/index.ts
@@ -3,7 +3,7 @@ import { CConditionalTeleport } from './CConditionalTeleport'
 
 const CConditionalTeleportPlugin = {
   install: (app: App): void => {
-    app.component(CConditionalTeleport.name, CConditionalTeleport)
+    app.component(CConditionalTeleport.name as string, CConditionalTeleport)
   },
 }
 
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index dc6ca125..8f835633 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * 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-rc.2
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0-rc.3
      */
     teleport: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 2a02d18a..c64d4511 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0-rc.3
      */
     navLink: {
       type: Boolean,
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/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/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/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/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/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 1ee36c53..1c5c12e4 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0-rc.3
      */
     focus: {
       type: Boolean,
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/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/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/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/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/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 b472b9d2..908b0efb 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * 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-rc.2
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
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 26cf43eb..95b0c532 100644
--- a/packages/coreui-vue/src/components/progress/CProgress.ts
+++ b/packages/coreui-vue/src/components/progress/CProgress.ts
@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.0-rc.3
      */
     progressBarClassName: String,
     /**
diff --git a/packages/coreui-vue/src/components/progress/index.ts b/packages/coreui-vue/src/components/progress/index.ts
index 3d16c4f2..ae6fabfc 100644
--- a/packages/coreui-vue/src/components/progress/index.ts
+++ b/packages/coreui-vue/src/components/progress/index.ts
@@ -5,9 +5,9 @@ import { CProgressStacked } from './CProgressStacked'
 
 const CProgressPlugin = {
   install: (app: App): void => {
-    app.component(CProgress.name, CProgress)
-    app.component(CProgressBar.name, CProgressBar)
-    app.component(CProgressStacked.name, CProgressStacked)
+    app.component(CProgress.name as string, CProgress)
+    app.component(CProgressBar.name as string, CProgressBar)
+    app.component(CProgressStacked.name as string, CProgressStacked)
   },
 }
 
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/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/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 06607284..2182345d 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * 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-rc.2
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
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/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)
   },
 }
 

From 3dd0ce3a648a07c43c14bc9478ca207553ec0a62 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 23 Mar 2024 11:43:05 +0100
Subject: [PATCH 17/92] release: v5.0.0-rc.3

---
 README.md                                       |  2 +-
 lerna.json                                      |  2 +-
 packages/coreui-vue/package.json                |  2 +-
 packages/docs/api/badge/CBadge.api.md           | 17 +++++++++--------
 packages/docs/api/card/CCard.api.md             |  9 +++++----
 .../CConditionalTeleport.api.md                 |  2 +-
 packages/docs/api/dropdown/CDropdown.api.md     |  4 ++--
 .../docs/api/dropdown/CDropdownToggle.api.md    |  2 +-
 packages/docs/api/modal/CModal.api.md           |  2 +-
 packages/docs/api/popover/CPopover.api.md       |  2 +-
 packages/docs/api/progress/CProgress.api.md     |  2 +-
 packages/docs/api/tooltip/CTooltip.api.md       |  2 +-
 packages/docs/package.json                      |  2 +-
 13 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 3eec02ea..f4dc59ca 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/v5.0.0-rc.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.3.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`
diff --git a/lerna.json b/lerna.json
index 49a8b937..2a068bcd 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index bd7fafa4..474a16e6 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md
index b3c3e1ff..4ee02b81 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'`                                                                                                                                                                                                                                                                             | -       |
-| **as**         | 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'`, `'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'` | -       |
+| 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-rc.3+</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/card/CCard.api.md b/packages/docs/api/card/CCard.api.md
index facd1fe6..6f6734f7 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'`, `'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'` | -       |
+| 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-rc.3+</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/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index ece97230..743b1d0a 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -10,5 +10,5 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
 
 | Prop name                                                          | Description                                                                                     | Type                                         | Values | Default |
 | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
-| **container** <br><div class="badge bg-primary">v5.0.0-rc.2+</div> | An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | -      | 'body'  |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.3+</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/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 02de108d..8a5b1759 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -12,14 +12,14 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | **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-rc.2+</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'         |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.3+</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-rc.2+</div>  | Generates dropdown menu using Teleport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | false          |
+| **teleport** <br><div class="badge bg-primary">v5.0.0-rc.3+</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                                      | -                                                                                                                                                                                             | -              |
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 5d6c2b55..5c10b591 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 | **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-rc.2+</div> | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.                                                                                                           | boolean  | -                                                                                               | true     |
+| **nav-link** <br><div class="badge bg-primary">v5.0.0-rc.3+</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'  |
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index fec31d16..66efacda 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -13,7 +13,7 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
 | **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-rc.2+</div> | Puts the focus on the modal when shown.                                                                                            | boolean         | -                                                  | true    |
+| **focus** <br><div class="badge bg-primary">v5.0.0-rc.3+</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         | -                                                  | -       |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 3bfa8ba6..11cd30e9 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 | 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-rc.2+</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'                                   |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.3+</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'] |
diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md
index 2f03bcd8..821d6eef 100644
--- a/packages/docs/api/progress/CProgress.api.md
+++ b/packages/docs/api/progress/CProgress.api.md
@@ -13,7 +13,7 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress'
 | **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-rc.2+</div> | A string of all className you want applied to the <CProgressBar/> component.                                              | string  | -                                                                                               | -       |
+| **progress-bar-class-name** <br><div class="badge bg-primary">5.0.0-rc.3+</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'`                                                                                     | -       |
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index 169db23d..9794c42c 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 | 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-rc.2+</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'                                   |
+| **container** <br><div class="badge bg-primary">v5.0.0-rc.3+</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'] |
diff --git a/packages/docs/package.json b/packages/docs/package.json
index a2df3ca1..ebd6b72b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From d4d4ad9700338997712d2161e8eabfd48d89f1e7 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 16:42:33 +0100
Subject: [PATCH 18/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@typescript-eslint/eslint-plugin       ^7.3.1  →   ^7.4.0
@typescript-eslint/parser              ^7.3.1  →   ^7.4.0
eslint-plugin-vue                     ^9.23.0  →  ^9.24.0
@coreui/chartjs                   ^4.0.0-rc.0  →   ^4.0.0
@coreui/coreui                    ^5.0.0-rc.3  →   ^5.0.0
@coreui/vue-chartjs               ^3.0.0-rc.0  →   ^3.0.0
rollup                                ^4.13.0  →  ^4.13.2
vue-docgen-cli                        ^4.78.0  →  ^4.79.0
---
 package.json                     | 6 +++---
 packages/coreui-icons-vue        | 2 +-
 packages/coreui-vue-chartjs      | 2 +-
 packages/coreui-vue/package.json | 4 ++--
 packages/docs/package.json       | 8 ++++----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 9173efda..b8c9328f 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,14 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.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.23.0",
+    "eslint-plugin-vue": "^9.24.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
     "lerna": "^8.1.2",
diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue
index b5f44477..9de09384 160000
--- a/packages/coreui-icons-vue
+++ b/packages/coreui-icons-vue
@@ -1 +1 @@
-Subproject commit b5f44477ddae0e06bb5c9adedcdcde1d2aa95713
+Subproject commit 9de09384e7b0ece5196adf30b0f5e25cee77975c
diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs
index 4915760c..a3a42cab 160000
--- a/packages/coreui-vue-chartjs
+++ b/packages/coreui-vue-chartjs
@@ -1 +1 @@
-Subproject commit 4915760c5f87bd0106778d414288681edc086fa9
+Subproject commit a3a42cabd2b34dd1b1b78cbb72d5e6cdc41ba5cd
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 474a16e6..30e2a72a 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0-rc.3",
+    "@coreui/coreui": "^5.0.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.13.0",
+    "rollup": "^4.13.2",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.3",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index ebd6b72b..d33b8100 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -8,18 +8,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.3",
+    "@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": "^3.0.0-rc.0",
+    "@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.78.0",
+    "vue-docgen-cli": "^4.79.0",
     "vuepress": "2.0.0-rc.0"
   }
 }

From 9802ae6f6eeacabed910dece4e1f622c78c77571 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 16:49:47 +0100
Subject: [PATCH 19/92] release: v5.0.0

---
 README.md                                     |  2 +-
 lerna.json                                    |  2 +-
 packages/coreui-vue/package.json              |  2 +-
 .../coreui-vue/src/components/badge/CBadge.ts |  2 +-
 .../coreui-vue/src/components/card/CCard.ts   |  2 +-
 .../CConditionalTeleport.ts                   |  2 +-
 .../src/components/dropdown/CDropdown.ts      |  4 +--
 .../components/dropdown/CDropdownToggle.ts    |  2 +-
 .../coreui-vue/src/components/modal/CModal.ts |  2 +-
 .../src/components/popover/CPopover.ts        |  2 +-
 .../src/components/progress/CProgress.ts      |  2 +-
 .../src/components/tooltip/CTooltip.ts        |  2 +-
 packages/docs/api/badge/CBadge.api.md         | 18 +++++------
 packages/docs/api/card/CCard.api.md           | 10 +++----
 .../CConditionalTeleport.api.md               |  8 ++---
 packages/docs/api/dropdown/CDropdown.api.md   | 30 +++++++++----------
 .../docs/api/dropdown/CDropdownToggle.api.md  | 24 +++++++--------
 packages/docs/api/modal/CModal.api.md         | 26 ++++++++--------
 packages/docs/api/popover/CPopover.api.md     |  2 +-
 packages/docs/api/progress/CProgress.api.md   | 20 ++++++-------
 packages/docs/api/tooltip/CTooltip.api.md     |  2 +-
 packages/docs/package.json                    |  2 +-
 22 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index f4dc59ca..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/v5.0.0-rc.3.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`
diff --git a/lerna.json b/lerna.json
index 2a068bcd..194343e3 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 30e2a72a..f4134e45 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts
index 65e5936c..3802015d 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -50,7 +50,7 @@ const CBadge = defineComponent({
      * 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-rc.3
+     * @since 5.0.0
      */
     textBgColor: Color,
     /**
diff --git a/packages/coreui-vue/src/components/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts
index e63631fb..580dc207 100644
--- a/packages/coreui-vue/src/components/card/CCard.ts
+++ b/packages/coreui-vue/src/components/card/CCard.ts
@@ -15,7 +15,7 @@ const CCard = defineComponent({
      * 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-rc.3
+     * @since 5.0.0
      */
     textBgColor: Color,
     /**
diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
index 48df4843..8fd104a1 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 8f835633..97ef4fe5 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * 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-rc.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     teleport: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index c64d4511..33e96a35 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     navLink: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts
index 1c5c12e4..78a238b9 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     focus: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 908b0efb..a39aea63 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * 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-rc.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts
index 95b0c532..03c39ed3 100644
--- a/packages/coreui-vue/src/components/progress/CProgress.ts
+++ b/packages/coreui-vue/src/components/progress/CProgress.ts
@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.3
+     * @since 5.0.0
      */
     progressBarClassName: String,
     /**
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 2182345d..8ee54061 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * 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-rc.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md
index 4ee02b81..4d763c88 100644
--- a/packages/docs/api/badge/CBadge.api.md
+++ b/packages/docs/api/badge/CBadge.api.md
@@ -8,12 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge'
 
 #### 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 | -                                                                                                                                                                                                                                                                                                                                                                           | '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-rc.3+</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'` | -       |
+| 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/card/CCard.api.md b/packages/docs/api/card/CCard.api.md
index 6f6734f7..49c792f9 100644
--- a/packages/docs/api/card/CCard.api.md
+++ b/packages/docs/api/card/CCard.api.md
@@ -8,8 +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-bg-color** <br><div class="badge bg-primary">5.0.0-rc.3+</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'` | -       |
+| 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/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index 743b1d0a..66b3972f 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -8,7 +8,7 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
 
 #### Props
 
-| Prop name                                                          | Description                                                                                     | Type                                         | Values | Default |
-| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
-| **container** <br><div class="badge bg-primary">v5.0.0-rc.3+</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    |
+| 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/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 8a5b1759..3eaad39f 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +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 \| 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-rc.3+</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-rc.3+</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                                      | -                                                                                                                                                                                             | -              |
+| 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/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 5c10b591..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  |
-| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
-| **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-rc.3+</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'`                                                                          | -        |
+| 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/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 66efacda..582c2798 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -8,19 +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          | -                                                  | -       |
-| **focus** <br><div class="badge bg-primary">v5.0.0-rc.3+</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         | -                                                  | -       |
+| 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/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 11cd30e9..55a94fd7 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 | 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-rc.3+</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'                                   |
+| **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'] |
diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md
index 821d6eef..1236b6ba 100644
--- a/packages/docs/api/progress/CProgress.api.md
+++ b/packages/docs/api/progress/CProgress.api.md
@@ -8,13 +8,13 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress'
 
 #### Props
 
-| 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-rc.3+</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 | -                                                                                               | -       |
+| 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/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index 9794c42c..f8f3d672 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 | 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-rc.3+</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'                                   |
+| **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'] |
diff --git a/packages/docs/package.json b/packages/docs/package.json
index d33b8100..95f61218 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From 9debb3157355ba17bafadb134a57abd1f05ad154 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 12:57:55 +0200
Subject: [PATCH 20/92] docs: improve layout

---
 .../src/client/components/Banner.vue          |  48 +++++++
 .../src/client/components/OtherFrameworks.vue |  44 ++++++
 .../src/client/components/Page.vue            | 111 ---------------
 .../src/client/components/Toc.vue             |  36 +++++
 .../client/components/other_frameworks.json   |  78 +++++------
 .../src/client/layouts/Layout.vue             | 128 +++++++-----------
 .../client/styles/_component-examples.scss    |   5 +-
 .../src/client/styles/_layout.scss            |  50 ++++++-
 .../theme-coreui/src/client/styles/_toc.scss  |  49 ++++++-
 9 files changed, 316 insertions(+), 233 deletions(-)
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
 delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue

diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
new file mode 100644
index 00000000..e37c867a
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="pro_component"
+    class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
+  >
+    <h3 class="mb-4">CoreUI PRO Component</h3>
+    <p>
+      To use this component you must have a CoreUI PRO license. Buy the
+      <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
+      and get access to all PRO components, features, templates, and dedicated support.
+    </p>
+  </div>
+  <div
+    v-else
+    class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
+  >
+    <h3 class="mb-4">Support CoreUI Development</h3>
+    <p>
+      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.
+    </p>
+    <p>You can support our Open Source software development in the following ways:</p>
+    <ul>
+      <li>
+        Buy the
+        <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
+        and get access to PRO components, and dedicated support.
+      </li>
+      <li>
+        <a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get
+        your logo on BACKERS.md/README.md files or each site of this documentation
+      </li>
+      <li>
+        Give us a star ⭐️ on
+        <a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const pro_component = frontmatter.value.pro_component
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
new file mode 100644
index 00000000..755d7679
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
@@ -0,0 +1,44 @@
+<template>
+  <template v-if="frameworks">
+    <h2>Other frameworks</h2>
+    <p>
+      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+      components. To learn more please visit the following pages.
+    </p>
+    <ul>
+      <template v-for="framework in frameworks">
+        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
+          <li v-if="el !== 'vue'" :key="index">
+            <a :href="otherFrameworks[framework][el]"
+              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
+            >
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import jsonData from '../components/other_frameworks.json'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const props = defineProps({
+  pro_component: Boolean,
+})
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+  const frameworks = frontmatter.value.other_frameworks
+  ? frontmatter.value.other_frameworks.split(', ')
+  : false
+const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
+
+const humanize = (text: string) => {
+  const string = text
+    .split('-')
+    .reduce(
+      (accumulator, currentValue) =>
+        accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
+    )
+  return string[0].toUpperCase() + string.slice(1)
+}
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
deleted file mode 100755
index 4ae63055..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div
-    v-if="pro_component"
-    class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
-  >
-    <h3 class="mb-4">CoreUI PRO Component</h3>
-    <p>
-      To use this component you must have a CoreUI PRO license. Buy the
-      <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
-      and get access to all PRO components, features, templates, and dedicated support.
-    </p>
-  </div>
-  <div
-    v-else
-    class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
-  >
-    <h3 class="mb-4">Support CoreUI Development</h3>
-    <p>
-      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.
-    </p>
-    <p>You can support our Open Source software development in the following ways:</p>
-    <ul>
-      <li>
-        Buy the
-        <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
-        and get access to PRO components, and dedicated support.
-      </li>
-      <li>
-        <a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get
-        your logo on BACKERS.md/README.md files or each site of this documentation
-      </li>
-      <li>
-        Give us a star ⭐️ on
-        <a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
-      </li>
-    </ul>
-  </div>
-  <div class="theme-default-content">
-    <div class="content">
-      <h1>{{ title }}</h1>
-      <p class="docs-lead fs-4 fw-light">{{ description }}</p>
-      <Ads />
-      <template v-if="frameworks">
-        <h2>Other frameworks</h2>
-        <p>
-          CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
-          components. To learn more please visit the following pages.
-        </p>
-        <ul>
-          <template v-for="framework in frameworks">
-            <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
-              <li v-if="el !== 'vue'" :key="index">
-                <a :href="otherFrameworks[framework][el]"
-                  >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
-                >
-              </li>
-            </template>
-          </template>
-        </ul>
-      </template>
-      <Content />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { usePageFrontmatter } from '@vuepress/client'
-import type { DefaultThemeNormalPageFrontmatter } from '../../shared'
-import jsonData from './other_frameworks.json'
-
-import Ads from './Ads.vue'
-
-export default defineComponent({
-  name: 'Page',
-  components: {
-    Ads,
-  },
-  setup() {
-    const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
-    const title = frontmatter.value.title
-    const description = frontmatter.value.description
-    const pro_component = frontmatter.value.pro_component
-    const frameworks = frontmatter.value.other_frameworks
-      ? frontmatter.value.other_frameworks.split(', ')
-      : false
-    const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
-
-    const humanize = (text: string) => {
-      const string = text
-        .split('-')
-        .reduce(
-          (accumulator, currentValue) =>
-            accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
-        )
-      return string[0].toUpperCase() + string.slice(1)
-    }
-
-    return {
-      title,
-      description,
-      frameworks,
-      pro_component,
-      otherFrameworks,
-      humanize,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
new file mode 100644
index 00000000..bcb036d1
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+    <button
+      class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
+      type="button"
+      :aria-expanded="visible ? true : false"
+      aria-controls="tocContents"
+      @click="toggleVisible()"
+    >
+      On this page
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon d-md-none ms-2"
+        aria-hidden="true"
+        viewBox="0 0 512 512"
+      >
+        <polygon
+          fill="var(--ci-primary-color, currentColor)"
+          points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
+          class="ci-primary"
+        />
+      </svg>
+    </button>
+    <strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+    <CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
+      <Toc />
+    </CCollapse>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+const toggleVisible = () => {
+  visible.value = !visible.value
+}
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json b/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
index 32046bbd..df64148b 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
@@ -1,138 +1,138 @@
 {
   "accordion": {
-    "angular": "https://coreui.io/angular/docs/components/accordion",
+    "angular": "https://coreui.io/angular/docs/components/accordion/",
     "bootstrap": "https://coreui.io/docs/components/accordion/",
     "react": "https://coreui.io/react/docs/components/accordion/",
     "vue": "https://coreui.io/vue/docs/components/accordion.html"
   },
   "alert": {
-    "angular": "https://coreui.io/angular/docs/components/alert",
+    "angular": "https://coreui.io/angular/docs/components/alert/",
     "bootstrap": "https://coreui.io/docs/components/alerts/",
     "react": "https://coreui.io/react/docs/components/alert/",
     "vue": "https://coreui.io/vue/docs/components/alert.html"
   },
   "avatar": {
-    "angular": "https://coreui.io/angular/docs/components/avatar",
+    "angular": "https://coreui.io/angular/docs/components/avatar/",
     "bootstrap": "https://coreui.io/docs/components/avatar/",
     "react": "https://coreui.io/react/docs/components/avatar/",
     "vue": "https://coreui.io/vue/docs/components/avatar.html"
   },
   "badge": {
-    "angular": "https://coreui.io/angular/docs/components/badge",
+    "angular": "https://coreui.io/angular/docs/components/badge/",
     "bootstrap": "https://coreui.io/docs/components/badge/",
     "react": "https://coreui.io/react/docs/components/badge/",
     "vue": "https://coreui.io/vue/docs/components/badge.html"
   },
   "breadcrumb": {
-    "angular": "https://coreui.io/angular/docs/components/breadcrumb",
+    "angular": "https://coreui.io/angular/docs/components/breadcrumb/",
     "bootstrap": "https://coreui.io/docs/components/breadcrumb/",
     "react": "https://coreui.io/react/docs/components/breadcrumb/",
     "vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
   },
   "button": {
-    "angular": "https://coreui.io/angular/docs/components/button",
+    "angular": "https://coreui.io/angular/docs/components/button/",
     "bootstrap": "https://coreui.io/docs/components/buttons/",
     "react": "https://coreui.io/react/docs/components/button/",
     "vue": "https://coreui.io/vue/docs/components/button.html"
   },
   "button-group": {
-    "angular": "https://coreui.io/angular/docs/components/button-group",
+    "angular": "https://coreui.io/angular/docs/components/button-group/",
     "bootstrap": "https://coreui.io/docs/components/button-group/",
     "react": "https://coreui.io/react/docs/components/button-group/",
     "vue": "https://coreui.io/vue/docs/components/button-group.html"
   },
   "callout": {
-    "angular": "https://coreui.io/angular/docs/components/callout",
+    "angular": "https://coreui.io/angular/docs/components/callout/",
     "bootstrap": "https://coreui.io/docs/components/callout/",
     "react": "https://coreui.io/react/docs/components/callout/",
     "vue": "https://coreui.io/vue/docs/components/callout.html"
   },
   "card": {
-    "angular": "https://coreui.io/angular/docs/components/card",
+    "angular": "https://coreui.io/angular/docs/components/card/",
     "bootstrap": "https://coreui.io/docs/components/card/",
     "react": "https://coreui.io/react/docs/components/card/",
     "vue": "https://coreui.io/vue/docs/components/card.html"
   },
   "carousel": {
-    "angular": "https://coreui.io/angular/docs/components/carousel",
+    "angular": "https://coreui.io/angular/docs/components/carousel/",
     "bootstrap": "https://coreui.io/docs/components/carousel/",
     "react": "https://coreui.io/react/docs/components/carousel/",
     "vue": "https://coreui.io/vue/docs/components/carousel.html"
   },
   "checkbox": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/checkbox/",
     "vue": "https://coreui.io/vue/docs/forms/checkbox.html"
   },
   "close-button": {
-    "angular": "https://coreui.io/angular/docs/components/close-button",
+    "angular": "https://coreui.io/angular/docs/components/close-button/",
     "bootstrap": "https://coreui.io/docs/components/close-button/",
     "react": "https://coreui.io/react/docs/components/close-button/",
     "vue": "https://coreui.io/vue/docs/components/close-button.html"
   },
   "collapse": {
-    "angular": "https://coreui.io/angular/docs/components/collapse",
+    "angular": "https://coreui.io/angular/docs/components/collapse/",
     "bootstrap": "https://coreui.io/docs/components/collapse/",
     "react": "https://coreui.io/react/docs/components/collapse/",
     "vue": "https://coreui.io/vue/docs/components/collapse.html"
   },
   "dropdown": {
-    "angular": "https://coreui.io/angular/docs/components/dropdown",
+    "angular": "https://coreui.io/angular/docs/components/dropdown/",
     "bootstrap": "https://coreui.io/docs/components/dropdowns/",
     "react": "https://coreui.io/react/docs/components/dropdown/",
     "vue": "https://coreui.io/vue/docs/components/dropdown.html"
   },
   "footer": {
-    "angular": "https://coreui.io/angular/docs/components/footer",
+    "angular": "https://coreui.io/angular/docs/components/footer/",
     "bootstrap": "https://coreui.io/docs/components/footer/",
     "react": "https://coreui.io/react/docs/components/footer/",
     "vue": "https://coreui.io/vue/docs/components/footer.html"
   },
   "header": {
-    "angular": "https://coreui.io/angular/docs/components/header",
+    "angular": "https://coreui.io/angular/docs/components/header/",
     "bootstrap": "https://coreui.io/docs/components/header/",
     "react": "https://coreui.io/react/docs/components/header/",
     "vue": "https://coreui.io/vue/docs/components/header.html"
   },
   "icon": {
-    "angular": "https://coreui.io/angular/docs/components/icon",
+    "angular": "https://coreui.io/angular/docs/components/icon/",
     "bootstrap": "https://coreui.io/docs/components/icon/",
     "react": "https://coreui.io/react/docs/components/icon/",
     "vue": "https://coreui.io/vue/docs/components/icon.html"
   },
   "image": {
-    "angular": "https://coreui.io/angular/docs/components/image",
+    "angular": "https://coreui.io/angular/docs/components/image/",
     "bootstrap": "https://coreui.io/docs/content/images/",
     "react": "https://coreui.io/react/docs/components/image/",
     "vue": "https://coreui.io/vue/docs/components/image.html"
   },
   "input": {
-    "angular": "https://coreui.io/angular/docs/forms/input",
+    "angular": "https://coreui.io/angular/docs/forms/input/",
     "bootstrap": "https://coreui.io/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/input/",
     "vue": "https://coreui.io/vue/docs/forms/input.html"
   },
   "input-group": {
-    "angular": "https://coreui.io/angular/docs/forms/input-group",
+    "angular": "https://coreui.io/angular/docs/forms/input-group/",
     "bootstrap": "https://coreui.io/docs/forms/input-group/",
     "react": "https://coreui.io/react/docs/forms/input-group/",
     "vue": "https://coreui.io/vue/docs/forms/input-group.html"
   },
   "floating-labels": {
-    "angular": "https://coreui.io/angular/docs/forms/floating-labels",
+    "angular": "https://coreui.io/angular/docs/forms/floating-labels/",
     "bootstrap": "https://coreui.io/docs/forms/floating-labels/",
     "react": "https://coreui.io/react/docs/forms/floating-labels/",
     "vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
   },
   "list-group": {
-    "angular": "https://coreui.io/angular/docs/components/list-group",
+    "angular": "https://coreui.io/angular/docs/components/list-group/",
     "bootstrap": "https://coreui.io/docs/components/list-group/",
     "react": "https://coreui.io/react/docs/components/list-group/",
     "vue": "https://coreui.io/vue/docs/components/list-group.html"
   },
   "modal": {
-    "angular": "https://coreui.io/angular/docs/components/modal",
+    "angular": "https://coreui.io/angular/docs/components/modal/",
     "bootstrap": "https://coreui.io/docs/components/modal/",
     "react": "https://coreui.io/react/docs/components/modal/",
     "vue": "https://coreui.io/vue/docs/components/modal.html"
@@ -143,97 +143,97 @@
     "vue": "https://coreui.io/vue/docs/components/navbar.html"
   },
   "navs-tabs": {
-    "angular": "https://coreui.io/angular/docs/components/nav",
+    "angular": "https://coreui.io/angular/docs/components/nav/",
     "bootstrap": "https://coreui.io/docs/components/navs-tabs/",
     "react": "https://coreui.io/react/docs/components/navs-tabs/",
     "vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
   },
   "offcanvas": {
-    "angular": "https://coreui.io/angular/docs/components/offcanvas",
+    "angular": "https://coreui.io/angular/docs/components/offcanvas/",
     "bootstrap": "https://coreui.io/docs/components/offcanvas/",
     "react": "https://coreui.io/react/docs/components/offcanvas/",
     "vue": "https://coreui.io/vue/docs/components/offcanvas.html"
   },
   "pagination": {
-    "angular": "https://coreui.io/angular/docs/components/pagination",
+    "angular": "https://coreui.io/angular/docs/components/pagination/",
     "bootstrap": "https://coreui.io/docs/components/pagination/",
     "react": "https://coreui.io/react/docs/components/pagination/",
     "vue": "https://coreui.io/vue/docs/components/pagination.html"
   },
   "placeholder": {
-    "angular": "https://coreui.io/angular/docs/components/placeholder",
+    "angular": "https://coreui.io/angular/docs/components/placeholder/",
     "bootstrap": "https://coreui.io/docs/components/placeholders/",
     "react": "https://coreui.io/react/docs/components/placeholder/",
     "vue": "https://coreui.io/vue/docs/components/placeholder.html"
   },
   "popover": {
-    "angular": "https://coreui.io/angular/docs/components/popover",
+    "angular": "https://coreui.io/angular/docs/components/popover/",
     "bootstrap": "https://coreui.io/docs/components/popovers/",
     "react": "https://coreui.io/react/docs/components/popover/",
     "vue": "https://coreui.io/vue/docs/components/popover.html"
   },
   "progress": {
-    "angular": "https://coreui.io/angular/docs/components/progress",
+    "angular": "https://coreui.io/angular/docs/components/progress/",
     "bootstrap": "https://coreui.io/docs/components/progress/",
     "react": "https://coreui.io/react/docs/components/progress/",
     "vue": "https://coreui.io/vue/docs/components/progress.html"
   },
   "radio": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/radio/",
     "vue": "https://coreui.io/vue/docs/forms/radio.html"
   },
   "range": {
-    "angular": "https://coreui.io/angular/docs/forms/range",
+    "angular": "https://coreui.io/angular/docs/forms/range/",
     "bootstrap": "https://coreui.io/docs/forms/range/",
     "react": "https://coreui.io/react/docs/forms/range/",
     "vue": "https://coreui.io/vue/docs/forms/range.html"
   },
   "select": {
-    "angular": "https://coreui.io/angular/docs/forms/select",
+    "angular": "https://coreui.io/angular/docs/forms/select/",
     "bootstrap": "https://coreui.io/docs/forms/select/",
     "react": "https://coreui.io/react/docs/forms/select/",
     "vue": "https://coreui.io/vue/docs/forms/select.html"
   },
   "sidebar": {
-    "angular": "https://coreui.io/angular/docs/components/sidebar",
+    "angular": "https://coreui.io/angular/docs/components/sidebar/",
     "bootstrap": "https://coreui.io/docs/components/sidebar/",
     "react": "https://coreui.io/react/docs/components/sidebar/",
     "vue": "https://coreui.io/vue/docs/components/sidebar.html"
   },
   "spinner": {
-    "angular": "https://coreui.io/angular/docs/components/spinner",
+    "angular": "https://coreui.io/angular/docs/components/spinner/",
     "bootstrap": "https://coreui.io/docs/components/spinners/",
     "react": "https://coreui.io/react/docs/components/spinner/",
     "vue": "https://coreui.io/vue/docs/components/spinner.html"
   },
   "switch": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/switch/",
     "vue": "https://coreui.io/vue/docs/forms/switch.html"
   },
   "table": {
-    "angular": "https://coreui.io/angular/docs/components/table",
+    "angular": "https://coreui.io/angular/docs/components/table/",
     "bootstrap": "https://coreui.io/docs/content/tables/",
     "react": "https://coreui.io/react/docs/components/table/",
     "vue": "https://coreui.io/vue/docs/components/table.html"
   },
   "textarea": {
-    "angular": "https://coreui.io/angular/docs/forms/form-control",
+    "angular": "https://coreui.io/angular/docs/forms/form-control/",
     "bootstrap": "https://coreui.io/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/textarea/",
     "vue": "https://coreui.io/vue/docs/forms/textarea.html"
   },
   "toast": {
-    "angular": "https://coreui.io/angular/docs/components/toast",
+    "angular": "https://coreui.io/angular/docs/components/toast/",
     "bootstrap": "https://coreui.io/docs/components/toasts/",
     "react": "https://coreui.io/react/docs/components/toast/",
     "vue": "https://coreui.io/vue/docs/components/toast.html"
   },
   "tooltip": {
-    "angular": "https://coreui.io/angular/docs/components/tooltip",
+    "angular": "https://coreui.io/angular/docs/components/tooltip/",
     "bootstrap": "https://coreui.io/docs/components/tooltips/",
     "react": "https://coreui.io/react/docs/components/tooltip/",
     "vue": "https://coreui.io/vue/docs/components/tooltip.html"
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 24fdb74b..936b31c4 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
@@ -1,103 +1,73 @@
 <template>
   <div>
     <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
-    <div class="wrapper d-flex flex-column min-vh-100">
-      <Header
-        @toggle-sidebar="toggleSidebar(!isSidebarOpen)"
-      />
-      <div class="body flex-grow-1 px-3">
-        <CContainer lg>
-          <main class="docs-main">
-            <Transition
-              name="fade-slide-y"
-              mode="out-in"
-              @before-enter="onBeforeEnter"
-              @before-leave="onBeforeLeave"
-            >
-              <CRow>
-                <CCol :lg="9">
-                  <Page :key="page.path">
-                    <template #top>
-                      <slot name="page-top" />
-                    </template>
-                    <template #bottom>
-                      <slot name="page-bottom" />
-                    </template>
-                  </Page>
-                </CCol>
-                <CCol :lg="3">
-                  <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>
-                </CCol>
-              </CRow>
-            </Transition>
+    <div class="wrapper flex-grow-1">
+      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
+      <Transition
+        name="fade-slide-y"
+        mode="out-in"
+        @before-enter="onBeforeEnter"
+        @before-leave="onBeforeLeave"
+      >
+        <CContainer class="my-md-4 flex-grow-1" lg>
+          <main class="docs-main order-1">
+            <div class="docs-intro ps-lg-4">
+              <Banner />
+              <h1 className="docs-title" id="content">{{ title }}</h1>
+              <p class="docs-lead">{{ description }}</p>
+              <Ads />
+              <OtherFrameworks />
+            </div>
+            <Toc />
+            <div className="docs-content ps-lg-4"><Content /></div>
           </main>
         </CContainer>
-      </div>
+      </Transition>
       <Footer />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue'
-import { usePageData, usePageFrontmatter } from '@vuepress/client'
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { usePageFrontmatter } from '@vuepress/client'
 import docsearch from '@docsearch/js'
 import type { DefaultThemePageFrontmatter } from '../../shared'
+import Ads from '../components/Ads.vue'
+import Banner from '../components/Banner.vue'
 import Footer from '../components/Footer.vue'
 import Header from '../components/Header.vue'
-import Page from '../components/Page.vue'
+import OtherFrameworks from '../components/OtherFrameworks.vue'
 import Sidebar from '../components/Sidebar.vue'
+import Toc from '../components/Toc.vue'
 import { useScrollPromise } from '../composables'
 
-export default defineComponent({
-  name: 'Layout',
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
 
-  components: {
-    Footer,
-    Header,
-    Page,
-    Sidebar,
-  },
+// sidebar
+const isSidebarOpen = ref(true)
 
-  setup() {
-    const page = usePageData()
-    const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const toggleSidebar = (to?: boolean): void => {
+  isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
+}
 
-    // sidebar
-    const isSidebarOpen = ref(true)
+// handle scrollBehavior with transition
+const scrollPromise = useScrollPromise()
+const onBeforeEnter = scrollPromise.resolve
+const onBeforeLeave = scrollPromise.pending
 
-    const toggleSidebar = (to?: boolean): void => {
-      isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
-    }
+const title = frontmatter.value.title
+const description = frontmatter.value.description
 
-    // handle scrollBehavior with transition
-    const scrollPromise = useScrollPromise()
-    const onBeforeEnter = scrollPromise.resolve
-    const onBeforeLeave = scrollPromise.pending
-
-    onMounted(() => {
-      const searchElement = document.getElementById('docsearch') as HTMLElement
-      docsearch({
-        appId: 'RG8RW9GEH3',
-        apiKey: '4926b633296d71c6d727f7766170f82b',
-        indexName: 'coreuivue',
-        container: searchElement,
-        // @ts-ignore
-        debug: false,
-      })
-    })
-
-    return {
-      isSidebarOpen,
-      frontmatter,
-      page,
-      toggleSidebar,
-      onBeforeEnter,
-      onBeforeLeave,
-    }
-  },
+onMounted(() => {
+  const searchElement = document.getElementById('docsearch') as HTMLElement
+  docsearch({
+    appId: 'RG8RW9GEH3',
+    apiKey: '4926b633296d71c6d727f7766170f82b',
+    indexName: 'coreuivue',
+    container: searchElement,
+    // @ts-ignore
+    debug: false,
+  })
 })
 </script>
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 6561eaee..c0909660 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
@@ -374,19 +374,20 @@ div[class^="language-"],
 .highlight {
   position: relative;
   padding: .75rem ($cd-gutter-x * .5);
-  margin-bottom: 1rem;
+  margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5) ;
   border: 1px solid var(--cui-border-color);
   background-color: var(--cd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
+    margin-right: 0;
+    margin-left: 0;
     @include border-radius(var(--cui-border-radius));
   }
 
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
index 284eae98..2ee63995 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
@@ -3,4 +3,52 @@
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
-}
\ No newline at end of file
+
+  > .container-lg {
+    --cui-gutter-x: 3rem;
+  }
+}
+
+.docs-sidebar {
+  grid-area: sidebar;
+}
+
+.docs-main {
+  grid-area: main;
+
+  @include media-breakpoint-down(lg) {
+    max-width: 760px;
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+    gap: $grid-gutter-width;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
+  }
+}
+
+.docs-intro {
+  grid-area: intro;
+}
+
+.docs-toc {
+  grid-area: toc;
+}
+
+.docs-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
index fc1f0fee..8f6dc04d 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-type
+
 .docs-toc {
   @include media-breakpoint-up(lg) {
     position: sticky;
@@ -37,4 +39,49 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.docs-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: var(--cui-body-color);
+    border: 1px solid var(--cui-border-color);
+    @include border-radius(var(--cui-border-radius));
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--cui-primary);
+      background-color: var(--cui-body-bg);
+      border-color: var(--cui-primary);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
+    }
+  }
+}
+
+.docs-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      background-color: var(--cui-tertiary-bg);
+      border: 1px solid var(--cui-border-color);
+      @include border-radius(var(--cui-border-radius));
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}

From fc881ad0474ca57e209b5859f90c46b00feb64f3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 14:23:05 +0200
Subject: [PATCH 21/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                            ^5.0.0  →       ^5.0.1
@vuepress/plugin-active-header-links  2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-back-to-top          2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-container            2.0.0-rc.0  →  2.0.0-rc.28
@vuepress/plugin-prismjs              2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-register-components  2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-theme-data           2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-toc                  2.0.0-rc.0  →  2.0.0-rc.30
vuepress                              2.0.0-rc.0  →  2.0.0-rc.11
---
 packages/docs/package.json | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 95f61218..1795fdbe 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,17 +9,25 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@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",
+    "@vuepress/bundler-vite": "2.0.0-rc.11",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.30",
+    "@vuepress/plugin-back-to-top": "2.0.0-rc.30",
+    "@vuepress/plugin-container": "2.0.0-rc.28",
+    "@vuepress/plugin-git": "2.0.0-rc.30",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.30",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.30",
+    "@vuepress/plugin-register-components": "2.0.0-rc.30",
+    "@vuepress/plugin-toc": "2.0.0-rc.30",
     "markdown-it-include": "^2.0.0",
+    "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.0"
+    "vuepress": "2.0.0-rc.11"
   }
 }

From 1912045de18ba79118f0ebed75345ca0b935804d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 14:33:04 +0200
Subject: [PATCH 22/92] docs: improve theme

---
 packages/docs/.vuepress/config.ts             | 11 ++--
 .../src/assets/brand/coreui-vue.svg           |  0
 .../src/client/components/Ads.vue             |  0
 .../src/client/components/Banner.vue          |  0
 .../src/client/components/Callout.vue         |  0
 .../src/client/components/Footer.vue          |  3 +-
 .../src/client/components/Header.vue          |  0
 .../src/client/components/OtherFrameworks.vue |  1 +
 .../src/client/components/ScssDocs.vue        |  0
 .../src/client/components/Sidebar.vue         |  0
 .../src/client/components/SidebarNav.ts       |  0
 .../src/client/components/Toc.vue             |  0
 .../client/components/other_frameworks.json   |  0
 .../src/client/composables/index.ts           |  0
 .../src/client/composables/useNavLink.ts      |  0
 .../useResolveRouteWithRedirect.ts            |  0
 .../client/composables/useScrollPromise.ts    |  0
 .../src/client/composables/useSidebarItems.ts |  3 +-
 .../src/client/composables/useThemeData.ts    |  0
 .../{theme-coreui => }/src/client/config.ts   |  0
 .../{theme-coreui => }/src/client/index.ts    |  0
 .../src/client/layouts/404.vue                |  0
 .../src/client/layouts/Layout.vue             |  0
 .../src/client/layouts/Redirect.vue           |  0
 .../{theme-coreui => }/src/client/shim.d.ts   |  0
 .../src/client/styles/_ads.scss               |  0
 .../src/client/styles/_anchor.scss            |  0
 .../src/client/styles/_callouts.scss          |  0
 .../client/styles/_component-examples.scss    |  0
 .../src/client/styles/_footer.scss            |  0
 .../src/client/styles/_layout.scss            |  0
 .../src/client/styles/_prism.scss             |  0
 .../src/client/styles/_scrolling.scss         |  0
 .../src/client/styles/_search.scss            |  0
 .../src/client/styles/_sidebar.scss           |  0
 .../src/client/styles/_table-api.scss         |  0
 .../src/client/styles/_toc.scss               |  0
 .../src/client/styles/_variables.scss         |  0
 .../src/client/styles/custom-container.scss   |  0
 .../src/client/styles/index.scss              |  0
 .../src/node/defaultTheme.ts                  |  0
 .../{theme-coreui => }/src/node/index.ts      |  0
 .../node/utils/assignDefaultLocaleOptions.ts  |  0
 .../src/node/utils/index.ts                   |  0
 .../{theme-coreui => }/src/shared/index.ts    |  0
 .../{theme-coreui => }/src/shared/nav.ts      |  0
 .../{theme-coreui => }/src/shared/options.ts  |  0
 .../{theme-coreui => }/src/shared/page.ts     |  0
 .../{theme-coreui => }/templates/build.html   |  0
 .../docs/.vuepress/theme-coreui/package.json  | 52 -------------------
 50 files changed, 12 insertions(+), 58 deletions(-)
 rename packages/docs/.vuepress/{theme-coreui => }/src/assets/brand/coreui-vue.svg (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Ads.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Banner.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Callout.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Footer.vue (95%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Header.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/OtherFrameworks.vue (98%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/ScssDocs.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Sidebar.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/SidebarNav.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Toc.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/other_frameworks.json (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useNavLink.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useResolveRouteWithRedirect.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useScrollPromise.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useSidebarItems.ts (99%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useThemeData.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/config.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/404.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/Layout.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/Redirect.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/shim.d.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_ads.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_anchor.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_callouts.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_component-examples.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_footer.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_layout.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_prism.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_scrolling.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_search.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_sidebar.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_table-api.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_toc.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_variables.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/custom-container.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/index.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/defaultTheme.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/utils/assignDefaultLocaleOptions.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/utils/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/nav.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/options.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/page.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/templates/build.html (100%)
 delete mode 100755 packages/docs/.vuepress/theme-coreui/package.json

diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 4c55aee9..34678fec 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,7 +1,8 @@
 import { defineUserConfig } from 'vuepress'
+import { viteBundler } from '@vuepress/bundler-vite'
 import anchor from 'markdown-it-anchor'
 import include_plugin from 'markdown-it-include'
-import { defaultTheme } from './theme-coreui'
+import { defaultTheme } from './src/node/defaultTheme'
 
 import { containerPlugin } from '@vuepress/plugin-container'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -18,6 +19,10 @@ export default defineUserConfig({
   head: [
     ['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }],
   ],
+  bundler: viteBundler({
+    viteOptions: {},
+    vuePluginOptions: {},
+  }),
   markdown: {
     anchor: {
       permalink: anchor.permalink.ariaHidden({
@@ -79,8 +84,8 @@ export default defineUserConfig({
     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'),
+        Callout: path.resolve(__dirname, './src/client/components/Callout.vue'),
+        ScssDocs: path.resolve(__dirname, './src/client/components/ScssDocs.vue'),
       },
     }),
   ],
diff --git a/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg b/packages/docs/.vuepress/src/assets/brand/coreui-vue.svg
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg
rename to packages/docs/.vuepress/src/assets/brand/coreui-vue.svg
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Ads.vue b/packages/docs/.vuepress/src/client/components/Ads.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Ads.vue
rename to packages/docs/.vuepress/src/client/components/Ads.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue b/packages/docs/.vuepress/src/client/components/Banner.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
rename to packages/docs/.vuepress/src/client/components/Banner.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue b/packages/docs/.vuepress/src/client/components/Callout.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
rename to packages/docs/.vuepress/src/client/components/Callout.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue b/packages/docs/.vuepress/src/client/components/Footer.vue
similarity index 95%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
rename to packages/docs/.vuepress/src/client/components/Footer.vue
index ca00885f..848a8785 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
+++ b/packages/docs/.vuepress/src/client/components/Footer.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import pkg from './../../../../../package.json'
+import pkg from './../../../../package.json'
 export default defineComponent({
   name: 'Footer',
   setup () {
@@ -50,3 +50,4 @@ export default defineComponent({
   }
 })
 </script>
+../../../../package.json
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
rename to packages/docs/.vuepress/src/client/components/Header.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
similarity index 98%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
rename to packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
index 755d7679..f06b9959 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
+++ b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
@@ -42,3 +42,4 @@ const humanize = (text: string) => {
   return string[0].toUpperCase() + string.slice(1)
 }
 </script>
+./other_frameworks.json
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue
rename to packages/docs/.vuepress/src/client/components/ScssDocs.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
rename to packages/docs/.vuepress/src/client/components/Sidebar.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts
rename to packages/docs/.vuepress/src/client/components/SidebarNav.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
rename to packages/docs/.vuepress/src/client/components/Toc.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json b/packages/docs/.vuepress/src/client/components/other_frameworks.json
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
rename to packages/docs/.vuepress/src/client/components/other_frameworks.json
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts b/packages/docs/.vuepress/src/client/composables/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts
rename to packages/docs/.vuepress/src/client/composables/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useNavLink.ts b/packages/docs/.vuepress/src/client/composables/useNavLink.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useNavLink.ts
rename to packages/docs/.vuepress/src/client/composables/useNavLink.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useResolveRouteWithRedirect.ts b/packages/docs/.vuepress/src/client/composables/useResolveRouteWithRedirect.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useResolveRouteWithRedirect.ts
rename to packages/docs/.vuepress/src/client/composables/useResolveRouteWithRedirect.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useScrollPromise.ts b/packages/docs/.vuepress/src/client/composables/useScrollPromise.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useScrollPromise.ts
rename to packages/docs/.vuepress/src/client/composables/useScrollPromise.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
similarity index 99%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts
rename to packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
index 0cf89962..d68d9dad 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts
+++ b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
@@ -1,7 +1,6 @@
 import { usePageData, usePageFrontmatter } from '@vuepress/client'
 import type { PageHeader } from '@vuepress/client'
 import {
-  isArray,
   isPlainObject,
   isString,
   resolveLocalePath,
@@ -70,7 +69,7 @@ export const resolveSidebarItems = (
     return resolveAutoSidebarItems(sidebarDepth)
   }
 
-  if (isArray(sidebarConfig)) {
+  if (Array.isArray(sidebarConfig)) {
     return resolveArraySidebarItems(sidebarConfig, sidebarDepth)
   }
 
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts b/packages/docs/.vuepress/src/client/composables/useThemeData.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts
rename to packages/docs/.vuepress/src/client/composables/useThemeData.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/config.ts b/packages/docs/.vuepress/src/client/config.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/config.ts
rename to packages/docs/.vuepress/src/client/config.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/index.ts b/packages/docs/.vuepress/src/client/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/index.ts
rename to packages/docs/.vuepress/src/client/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue b/packages/docs/.vuepress/src/client/layouts/404.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue
rename to packages/docs/.vuepress/src/client/layouts/404.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
rename to packages/docs/.vuepress/src/client/layouts/Layout.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue b/packages/docs/.vuepress/src/client/layouts/Redirect.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue
rename to packages/docs/.vuepress/src/client/layouts/Redirect.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts b/packages/docs/.vuepress/src/client/shim.d.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts
rename to packages/docs/.vuepress/src/client/shim.d.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss b/packages/docs/.vuepress/src/client/styles/_ads.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss
rename to packages/docs/.vuepress/src/client/styles/_ads.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss b/packages/docs/.vuepress/src/client/styles/_anchor.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss
rename to packages/docs/.vuepress/src/client/styles/_anchor.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss b/packages/docs/.vuepress/src/client/styles/_callouts.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
rename to packages/docs/.vuepress/src/client/styles/_callouts.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
rename to packages/docs/.vuepress/src/client/styles/_component-examples.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss b/packages/docs/.vuepress/src/client/styles/_footer.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss
rename to packages/docs/.vuepress/src/client/styles/_footer.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss b/packages/docs/.vuepress/src/client/styles/_layout.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
rename to packages/docs/.vuepress/src/client/styles/_layout.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss b/packages/docs/.vuepress/src/client/styles/_prism.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss
rename to packages/docs/.vuepress/src/client/styles/_prism.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss b/packages/docs/.vuepress/src/client/styles/_scrolling.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss
rename to packages/docs/.vuepress/src/client/styles/_scrolling.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss b/packages/docs/.vuepress/src/client/styles/_search.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss
rename to packages/docs/.vuepress/src/client/styles/_search.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
rename to packages/docs/.vuepress/src/client/styles/_sidebar.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss b/packages/docs/.vuepress/src/client/styles/_table-api.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss
rename to packages/docs/.vuepress/src/client/styles/_table-api.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss b/packages/docs/.vuepress/src/client/styles/_toc.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
rename to packages/docs/.vuepress/src/client/styles/_toc.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/src/client/styles/_variables.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
rename to packages/docs/.vuepress/src/client/styles/_variables.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss b/packages/docs/.vuepress/src/client/styles/custom-container.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss
rename to packages/docs/.vuepress/src/client/styles/custom-container.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss b/packages/docs/.vuepress/src/client/styles/index.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
rename to packages/docs/.vuepress/src/client/styles/index.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts b/packages/docs/.vuepress/src/node/defaultTheme.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts
rename to packages/docs/.vuepress/src/node/defaultTheme.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/index.ts b/packages/docs/.vuepress/src/node/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/index.ts
rename to packages/docs/.vuepress/src/node/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/utils/assignDefaultLocaleOptions.ts b/packages/docs/.vuepress/src/node/utils/assignDefaultLocaleOptions.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/utils/assignDefaultLocaleOptions.ts
rename to packages/docs/.vuepress/src/node/utils/assignDefaultLocaleOptions.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/utils/index.ts b/packages/docs/.vuepress/src/node/utils/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/utils/index.ts
rename to packages/docs/.vuepress/src/node/utils/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/index.ts b/packages/docs/.vuepress/src/shared/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/index.ts
rename to packages/docs/.vuepress/src/shared/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/nav.ts b/packages/docs/.vuepress/src/shared/nav.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/nav.ts
rename to packages/docs/.vuepress/src/shared/nav.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/options.ts b/packages/docs/.vuepress/src/shared/options.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/options.ts
rename to packages/docs/.vuepress/src/shared/options.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/page.ts
rename to packages/docs/.vuepress/src/shared/page.ts
diff --git a/packages/docs/.vuepress/theme-coreui/templates/build.html b/packages/docs/.vuepress/templates/build.html
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/templates/build.html
rename to packages/docs/.vuepress/templates/build.html
diff --git a/packages/docs/.vuepress/theme-coreui/package.json b/packages/docs/.vuepress/theme-coreui/package.json
deleted file mode 100755
index 39655fd9..00000000
--- a/packages/docs/.vuepress/theme-coreui/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "@vuepress/theme-coreui",
-  "version": "1.0.0",
-  "description": "CoreUI for Vue.js docs theme",
-  "keywords": [
-    "vuepress-theme",
-    "vuepress",
-    "theme",
-    "default"
-  ],
-  "homepage": "https://github.com/coreui",
-  "bugs": {
-    "url": "https://github.com/coreui/coreui-vue/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/coreui/coreui-vue.git"
-  },
-  "license": "MIT",
-  "author": "Lukasz Holeczek",
-  "main": "src/node/index.ts",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "build": "tsc -b tsconfig.build.json",
-    "clean": "rimraf lib *.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{d.ts,vue,scss}\" lib"
-  },
-  "dependencies": {
-    "@vuepress/client": "2.0.0-beta.21",
-    "@vuepress/core": "2.0.0-beta.22",
-    "@vuepress/plugin-active-header-links": "2.0.0-beta.22",
-    "@vuepress/plugin-back-to-top": "2.0.0-beta.22",
-    "@vuepress/plugin-container": "2.0.0-beta.22",
-    "@vuepress/plugin-git": "2.0.0-beta.22",
-    "@vuepress/plugin-medium-zoom": "2.0.0-beta.22",
-    "@vuepress/plugin-nprogress": "2.0.0-beta.22",
-    "@vuepress/plugin-palette": "2.0.0-beta.22",
-    "@vuepress/plugin-prismjs": "2.0.0-beta.22",
-    "@vuepress/plugin-theme-data": "2.0.0-beta.22",
-    "@vuepress/shared": "2.0.0-beta.21",
-    "@vuepress/utils": "2.0.0-beta.21",
-    "sass": "^1.35.1",
-    "sass-loader": "^12.1.0",
-    "vue": "^3.1.4",
-    "vue-router": "^4.0.10"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

From d787ed5c571245982c38810aaecd70423353cd27 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:41:50 +0200
Subject: [PATCH 23/92] feat(CTabs): the initial release of the new react tabs
 component

---
 .../coreui-vue/src/components/tabs/CTab.ts    |  45 ++
 .../src/components/tabs/CTabList.ts           |  89 +++
 .../src/components/tabs/CTabPanel.ts          | 129 ++++
 .../coreui-vue/src/components/tabs/CTabs.ts   |  44 ++
 .../coreui-vue/src/components/tabs/index.ts   |  10 +-
 packages/docs/.vuepress/config.ts             |   4 +
 packages/docs/api/tabs/CTab.api.md            |  13 +
 packages/docs/api/tabs/CTabList.api.md        |  14 +
 packages/docs/api/tabs/CTabPanel.api.md       |  22 +
 packages/docs/api/tabs/CTabs.api.md           |  19 +
 packages/docs/components/tabs.md              | 579 +++++++++++++++---
 11 files changed, 866 insertions(+), 102 deletions(-)
 create mode 100644 packages/coreui-vue/src/components/tabs/CTab.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabList.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabPanel.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabs.ts
 create mode 100644 packages/docs/api/tabs/CTab.api.md
 create mode 100644 packages/docs/api/tabs/CTabList.api.md
 create mode 100644 packages/docs/api/tabs/CTabPanel.api.md
 create mode 100644 packages/docs/api/tabs/CTabs.api.md

diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
new file mode 100644
index 00000000..c7c54250
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -0,0 +1,45 @@
+import { defineComponent, h, inject, Ref } from 'vue'
+
+const CTab = defineComponent({
+  name: 'CTab',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+    const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
+
+    const isActive = () => props.itemKey === activeItemKey.value
+
+    return () =>
+      h(
+        'button',
+        {
+          class: [
+            'nav-link',
+            {
+              active: isActive(),
+            },
+          ],
+          id: `${id.value}${props.itemKey}-tab`,
+          role: 'tab',
+          tabindex: isActive() ? 0 : -1,
+          type: 'button',
+          'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
+          'aria-selected': isActive(),
+          onClick: () => setActiveItemKey(props.itemKey),
+          onFocus: () => setActiveItemKey(props.itemKey),
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTab }
diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
new file mode 100644
index 00000000..60028cd8
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -0,0 +1,89 @@
+import { defineComponent, h, ref } from 'vue'
+import { getNextActiveElement } from '../dropdown/utils'
+
+const CTabList = defineComponent({
+  name: 'CTabList',
+  props: {
+    /**
+     * Specify a layout type for component.
+     *
+     * @values 'fill', 'justified'
+     */
+    layout: {
+      type: String,
+      validator: (value: string) => {
+        return ['fill', 'justified'].includes(value)
+      },
+    },
+    /**
+     * Set the nav variant to tabs or pills.
+     *
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+      },
+    },
+  },
+  setup(props, { slots }) {
+    const tabListRef = ref<HTMLDivElement>()
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        tabListRef.value &&
+        (event.key === 'ArrowDown' ||
+          event.key === 'ArrowUp' ||
+          event.key === 'ArrowLeft' ||
+          event.key === 'ArrowRight' ||
+          event.key === 'Home' ||
+          event.key === 'End')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
+        const items: HTMLElement[] = Array.from(
+          tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+        )
+
+        let nextActiveElement
+
+        if (event.key === 'Home' || event.key === 'End') {
+          nextActiveElement = event.key === 'End' ? items.at(-1) : items[0]
+        } else {
+          nextActiveElement = getNextActiveElement(
+            items,
+            target,
+            event.key === 'ArrowDown' || event.key === 'ArrowRight',
+            true,
+          )
+        }
+
+        if (nextActiveElement) {
+          nextActiveElement.focus({ preventScroll: true })
+        }
+      }
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'nav',
+            {
+              [`nav-${props.layout}`]: props.layout,
+              [`nav-${props.variant}`]: props.variant,
+            },
+          ],
+          role: 'tablist',
+          onKeydown: (event) => handleKeydown(event),
+          ref: tabListRef,
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTabList }
diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
new file mode 100644
index 00000000..5e2609bf
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
@@ -0,0 +1,129 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  ref,
+  Ref,
+  RendererElement,
+  Transition,
+  vShow,
+  watch,
+  withDirectives,
+} from 'vue'
+
+import { executeAfterTransition } from '../../utils/transition'
+
+const CTabPanel = defineComponent({
+  name: 'CTabPanel',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+    /**
+     * Enable fade in and fade out transition.
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle the visibility of component.
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+
+    const tabPaneRef = ref()
+    const firstRender = ref(true)
+    const visible = ref()
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    watch(
+      activeItemKey,
+      () => {
+        visible.value = Boolean(activeItemKey.value === props.itemKey)
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const handleEnter = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('show')
+      setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
+        el.classList.add('show')
+      }, 1)
+    }
+
+    const handleLeave = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('hide')
+      el.classList.remove('show')
+      executeAfterTransition(() => done(), el as HTMLElement)
+    }
+
+    return () =>
+      h(
+        Transition,
+        {
+          onEnter: (el, done) => handleEnter(el, done),
+          onLeave: (el, done) => handleLeave(el, done),
+        },
+        () =>
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'tab-pane',
+                  {
+                    active: visible.value,
+                    fade: props.transition,
+                    show: firstRender.value && visible.value,
+                  },
+                ],
+                id: `${id.value}${props.itemKey}-tab-pane`,
+                role: 'tabpanel',
+                'aria-labelledby': `${id.value}${props.itemKey}-tab`,
+                tabindex: 0,
+                ref: tabPaneRef,
+              },
+              slots.default && slots.default(),
+            ),
+            [[vShow, visible.value]],
+          ),
+      )
+  },
+})
+
+export { CTabPanel }
diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts
new file mode 100644
index 00000000..e031153d
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabs.ts
@@ -0,0 +1,44 @@
+import { defineComponent, h, provide, ref, watch } from 'vue'
+import { getUID } from '../../utils'
+
+const CTabs = defineComponent({
+  name: 'CTabs',
+  props: {
+    /**
+     * The active item key.
+     */
+    activeItemKey: {
+      type: [Number, String],
+      required: true,
+    }
+  },
+  emits: [
+    /**
+     * The callback is fired when the active tab changes.
+     */
+    'change',
+  ],
+  setup(props, { slots, emit }) {
+    const uID = ref(getUID('t'))
+    const activeItemKey = ref(props.activeItemKey)
+    const setActiveItemKey = (key: string | number) => {
+      activeItemKey.value = key
+    }
+
+    watch(
+      () => props.activeItemKey,
+      (value) => {
+        activeItemKey.value = value
+        emit('change', value)
+      },
+    )
+
+    provide('activeItemKey', activeItemKey)
+    provide('id', uID)
+    provide('setActiveItemKey', setActiveItemKey)
+
+    return () => h('div', { class: 'tabs' }, slots.default && slots.default())
+  },
+})
+
+export { CTabs }
diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts
index 997480a5..7c848b03 100644
--- a/packages/coreui-vue/src/components/tabs/index.ts
+++ b/packages/coreui-vue/src/components/tabs/index.ts
@@ -1,12 +1,20 @@
 import { App } from 'vue'
+import { CTab } from './CTab'
 import { CTabContent } from './CTabContent'
+import { CTabList } from './CTabList'
 import { CTabPane } from './CTabPane'
+import { CTabPanel } from './CTabPanel'
+import { CTabs } from './CTabs'
 
 const CTabsPlugin = {
   install: (app: App): void => {
+    app.component(CTab.name as string, CTab)
     app.component(CTabContent.name as string, CTabContent)
+    app.component(CTabList.name as string, CTabList)
     app.component(CTabPane.name as string, CTabPane)
+    app.component(CTabPanel.name as string, CTabPanel)
+    app.component(CTabs.name as string, CTabs)
   },
 }
 
-export { CTabsPlugin, CTabContent, CTabPane }
+export { CTabsPlugin, CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs }
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 34678fec..932a5cf2 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -328,6 +328,10 @@ export default defineUserConfig({
             text: 'Table',
             link: `/components/table.html`,
           },
+          {
+            text: 'Tabs',
+            link: `/components/tabs.html`,
+          },
           {
             text: 'Toast',
             link: `/components/toast.html`,
diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md
new file mode 100644
index 00000000..ed8dc7b0
--- /dev/null
+++ b/packages/docs/api/tabs/CTab.api.md
@@ -0,0 +1,13 @@
+### CTab
+
+```jsx
+import { CTab } from '@coreui/vue'
+// or
+import CTab from '@coreui/vue/src/components/tabs/CTab'
+```
+
+#### Props
+
+| Prop name    | Description | Type           | Values | Default |
+| ------------ | ----------- | -------------- | ------ | ------- |
+| **item-key** | Item key.   | number\|string | -      | -       |
diff --git a/packages/docs/api/tabs/CTabList.api.md b/packages/docs/api/tabs/CTabList.api.md
new file mode 100644
index 00000000..68b9ca46
--- /dev/null
+++ b/packages/docs/api/tabs/CTabList.api.md
@@ -0,0 +1,14 @@
+### CTabList
+
+```jsx
+import { CTabList } from '@coreui/vue'
+// or
+import CTabList from '@coreui/vue/src/components/tabs/CTabList'
+```
+
+#### Props
+
+| Prop name   | Description                           | Type   | Values                                                   | Default |
+| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| **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/tabs/CTabPanel.api.md b/packages/docs/api/tabs/CTabPanel.api.md
new file mode 100644
index 00000000..bf254378
--- /dev/null
+++ b/packages/docs/api/tabs/CTabPanel.api.md
@@ -0,0 +1,22 @@
+### CTabPanel
+
+```jsx
+import { CTabPanel } from '@coreui/vue'
+// or
+import CTabPanel from '@coreui/vue/src/components/tabs/CTabPanel'
+```
+
+#### Props
+
+| Prop name      | Description                             | Type           | Values | Default |
+| -------------- | --------------------------------------- | -------------- | ------ | ------- |
+| **item-key**   | Item key.                               | number\|string | -      | -       |
+| **transition** | Enable fade in and fade out transition. | boolean        | -      | true    |
+| **visible**    | Toggle the visibility of component.     | boolean        | -      | false   |
+
+#### Events
+
+| Event name | Description                                              | Properties |
+| ---------- | -------------------------------------------------------- | ---------- |
+| **hide**   | Callback fired when the component requests to be hidden. |
+| **show**   | Callback fired when the component requests to be shown.  |
diff --git a/packages/docs/api/tabs/CTabs.api.md b/packages/docs/api/tabs/CTabs.api.md
new file mode 100644
index 00000000..4fea4982
--- /dev/null
+++ b/packages/docs/api/tabs/CTabs.api.md
@@ -0,0 +1,19 @@
+### CTabs
+
+```jsx
+import { CTabs } from '@coreui/vue'
+// or
+import CTabs from '@coreui/vue/src/components/tabs/CTabs'
+```
+
+#### Props
+
+| Prop name           | Description          | Type           | Values | Default |
+| ------------------- | -------------------- | -------------- | ------ | ------- |
+| **active-item-key** | The active item key. | number\|string | -      | -       |
+
+#### Events
+
+| Event name | Description                                        | Properties |
+| ---------- | -------------------------------------------------- | ---------- |
+| **change** | The callback is fired when the active tab changes. |
diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md
index 8da4e027..a7c06623 100644
--- a/packages/docs/components/tabs.md
+++ b/packages/docs/components/tabs.md
@@ -1,112 +1,489 @@
 ---
-title: CTabs
-description: 
-activeKey: 1
+title: Vue Tabs Components
+name: Tabs
+description: The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
+since: 5.1.0
 ---
 
-## Examples
-
-{{ $page.activeKey }}
-
-
-<CNav variant="tabs">
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=1">
-              Active
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=2">
-              Link
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=3">
-              Link
-            </CNavLink>
-          </CNavItem>
-        </CNav>
-        <CTabContent>
-          <CTabPane :visible="$page.activeKey == 1">
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 2">
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 3">
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          </CTabPane>
-        </CTabContent>
+## Example
 
+The basic Vue tabs example uses the `variant="tabs"` props to generate a tabbed interface.
 
+::: demo
+<CTabs activeItemKey="profile">
+  <CTabList variant="tabs">
+    <CTab itemKey="home">Home</CTab>
+    <CTab itemKey="profile">Profile</CTab>
+    <CTab itemKey="contact">Contact</CTab>
+    <CTab disabled itemKey="disabled">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
 ```vue
+<CTabs activeItemKey="profile">
+  <CTabList variant="tabs">
+    <CTab itemKey="home">Home</CTab>
+    <CTab itemKey="profile">Profile</CTab>
+    <CTab itemKey="contact">Contact</CTab>
+    <CTab disabled itemKey="disabled">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+
+## Available styles
+
+Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Unstyled
 
-        <CNav variant="tabs">
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=1">
-              Active
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=2">
-              Link
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=3">
-              Link
-            </CNavLink>
-          </CNavItem>
-        </CNav>
-        <CTabContent>
-          <CTabPane :visible="$page.activeKey == 1">
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 2">
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 3">
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          </CTabPane>
-        </CTabContent>
+If you don’t provide the `variant` prop, the component will default to a basic style.
 
+::: demo
+<CTabs activeItemKey="profile">
+  <CTabList>
+    <CTab itemKey="home">Home</CTab>
+    <CTab itemKey="profile">Profile</CTab>
+    <CTab itemKey="contact">Contact</CTab>
+    <CTab disabled itemKey="disabled">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs activeItemKey="profile">
+  <CTabList>
+    <CTab itemKey="home">Home</CTab>
+    <CTab itemKey="profile">Profile</CTab>
+    <CTab itemKey="contact">Contact</CTab>
+    <CTab disabled itemKey="disabled">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
 ```
 
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+::: demo
+<CTabs :activeItemKey=2>
+  <CTabList variant="pills">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey=2>
+  <CTabList variant="pills">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="underline">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="underline">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="underline-border">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="underline-border">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Fill and justify
+
+Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="fill">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile tab with longer content</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="fill">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile tab with longer content</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="justified">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="justified">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+## Accessibility
+
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+
+### WAI-ARIA Roles
+
+- The element that serves as the container for the set of tabs has the role `tablist`.
+- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
+- Each element that contains the content panel for a tab has the role `tabpanel`.
+- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
+- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
+- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
+- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
+
+Our Vue Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
+
+```jsx
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs">
+    <CTab id="home-tab" aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab id="profile-tab" aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab id="contact-tab" aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.
+
+### Keyboard Interaction
+
+**When focus enters the tab list:**
+
+<kbd>Tab</kbd>: It places focus on the active `tab` element.
+
+**When focus is on a tab element:**
+
+<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
+
+<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
+
+<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
+
+<kbd>Home</kbd>: Moves focus to the first tab.
+
+<kbd>End</kbd>: Moves focus to the last tab.
+
+## Customizing
+
+### CSS variables
+
+Vue tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = { 
+  '--my-css-var': 10,
+  '--my-another-css-var': "red" 
+}
+return <CTabs :style="vars">...</CTabs>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
+
+## API
 
-## Additional content
\ No newline at end of file
+!!!include(./api/tabs/CTab.api.md)!!!
+!!!include(./api/tabs/CTabContent.api.md)!!!
+!!!include(./api/tabs/CTabList.api.md)!!!
+!!!include(./api/tabs/CTabPanel.api.md)!!!
+!!!include(./api/tabs/CTabs.api.md)!!!
\ No newline at end of file

From 96cee23488500ba2c9b7a304fcce3c982f89f255 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:42:18 +0200
Subject: [PATCH 24/92] chore: add eslint comments

---
 packages/coreui-vue/src/components/dropdown/CDropdown.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 97ef4fe5..d171f90b 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -228,6 +228,7 @@ const CDropdown = defineComponent({
       ) {
         event.preventDefault()
         const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
           dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
         )

From 45a515d55c3b04cfedb5bc39261d0dc1439069b5 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:44:27 +0200
Subject: [PATCH 25/92] feat(CTabPane): add the `transition` property to enable
 control of fade animation on panels

---
 packages/coreui-vue/src/components/tabs/CTabPane.ts | 11 ++++++++++-
 packages/docs/api/tabs/CTabPane.api.md              |  7 ++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/coreui-vue/src/components/tabs/CTabPane.ts b/packages/coreui-vue/src/components/tabs/CTabPane.ts
index 9ff0050f..7614c346 100644
--- a/packages/coreui-vue/src/components/tabs/CTabPane.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabPane.ts
@@ -5,6 +5,15 @@ import { executeAfterTransition } from '../../utils/transition'
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
+    /**
+     * Enable fade in and fade out transition.
+     *
+     * @since 5.1.0
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -57,9 +66,9 @@ const CTabPane = defineComponent({
               {
                 class: [
                   'tab-pane',
-                  'fade',
                   {
                     active: props.visible,
+                    fade: props.transition,
                     show: firstRender.value && props.visible,
                   },
                 ],
diff --git a/packages/docs/api/tabs/CTabPane.api.md b/packages/docs/api/tabs/CTabPane.api.md
index 61e1db99..17eb0a59 100644
--- a/packages/docs/api/tabs/CTabPane.api.md
+++ b/packages/docs/api/tabs/CTabPane.api.md
@@ -8,9 +8,10 @@ import CTabPane from '@coreui/vue/src/components/tabs/CTabPane'
 
 #### Props
 
-| Prop name   | Description                         | Type    | Values | Default |
-| ----------- | ----------------------------------- | ------- | ------ | ------- |
-| **visible** | Toggle the visibility of component. | boolean | -      | false   |
+| Prop name                                                     | Description                             | Type    | Values | Default |
+| ------------------------------------------------------------- | --------------------------------------- | ------- | ------ | ------- |
+| **transition** <br><div class="badge bg-primary">5.1.0+</div> | Enable fade in and fade out transition. | boolean | -      | true    |
+| **visible**                                                   | Toggle the visibility of component.     | boolean | -      | false   |
 
 #### Events
 

From fc6f12bcc7bba1779f92eb4af2d2ad430a0e631c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:45:00 +0200
Subject: [PATCH 26/92] docs: update content

---
 packages/docs/getting-started/introduction.md | 66 +++++++++++++++++--
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index 369de935..c0a6a0f4 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -9,36 +9,74 @@ menu: Getting started
 
 ### Npm
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```bash
 npm install @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
 ```bash
 npm install @coreui/vue-pro @coreui/coreui-pro
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
+
 
 ### Yarn
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```bash
 yarn add @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
 ```bash
 yarn add @coreui/vue-pro @coreui/coreui-pro
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
 
 ## Using components
 
-```ts
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
+```js
 import { CAlert } from '@coreui/vue';
+```
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
-// CoreUI PRO version
+```js
 import { CAlert } from '@coreui/vue-pro';
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
+
 
 ## Stylesheets
 
@@ -48,12 +86,26 @@ Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS
 
 ###### Basic usage
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```js
 import '@coreui/coreui/dist/css/coreui.min.css'
+```
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
-// CoreUI PRO version
+```js
 import '@coreui/coreui-pro/dist/css/coreui.min.css'
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
 
 ### Bootstrap CSS files
 

From 0b77985f6184876ba6a7d94d35567a92ffe82e45 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:45:28 +0200
Subject: [PATCH 27/92] docs: update content

---
 .../docs/.vuepress/src/client/components/ScssDocs.vue    | 4 ++--
 .../.vuepress/src/client/styles/_component-examples.scss | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index ae622b73..dd9fb126 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -21,11 +21,11 @@ export default defineComponent({
       window.Prism.manual = true;
     }
 
-    const files = import.meta.glob(`../../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
+    const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
       as: 'raw',
       eager: true,
     })
-    const file = files[`../../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+    const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
 
     const captureStart = `// scss-docs-start ${props.capture}`
     const captureEnd = `// scss-docs-end ${props.capture}`
diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index c0909660..fbe5369c 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -2,6 +2,15 @@
 // Docs examples
 //
 
+.tab-content .tab-pane {
+  @include border-top-radius(0 !important);
+
+  .highlight, div[class^="language-"] {
+    border-top: 0 !important;
+    @include border-top-radius(0 !important);
+  }
+}
+
 .docs-example-snippet {
   border: solid var(--cui-border-color);
   border-width: 1px 0;

From ea7050aaabed47029a64157530e8fee0def3bf3e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:28:28 +0200
Subject: [PATCH 28/92] refactor(Utils): move `getNextActiveElement` from
 `CDropdown` utils to utils

---
 .../src/components/dropdown/CDropdown.ts      |  4 ++--
 .../src/components/dropdown/utils.ts          | 22 ------------------
 .../src/components/tabs/CTabList.ts           |  2 +-
 .../src/utils/getNextActiveElement.ts         | 23 +++++++++++++++++++
 packages/coreui-vue/src/utils/index.ts        |  3 ++-
 5 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 packages/coreui-vue/src/utils/getNextActiveElement.ts

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index d171f90b..32fe1ea0 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -3,10 +3,10 @@ import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
 import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
-import { getNextActiveElement, getPlacement } from './utils'
+import { getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts
index edddb0db..c9659636 100644
--- a/packages/coreui-vue/src/components/dropdown/utils.ts
+++ b/packages/coreui-vue/src/components/dropdown/utils.ts
@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   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,
diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
index 60028cd8..63b720f2 100644
--- a/packages/coreui-vue/src/components/tabs/CTabList.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, ref } from 'vue'
-import { getNextActiveElement } from '../dropdown/utils'
+import { getNextActiveElement } from '../../utils'
 
 const CTabList = defineComponent({
   name: 'CTabList',
diff --git a/packages/coreui-vue/src/utils/getNextActiveElement.ts b/packages/coreui-vue/src/utils/getNextActiveElement.ts
new file mode 100644
index 00000000..a80293ca
--- /dev/null
+++ b/packages/coreui-vue/src/utils/getNextActiveElement.ts
@@ -0,0 +1,23 @@
+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 default getNextActiveElement
diff --git a/packages/coreui-vue/src/utils/index.ts b/packages/coreui-vue/src/utils/index.ts
index 2bd39724..b478e8c2 100644
--- a/packages/coreui-vue/src/utils/index.ts
+++ b/packages/coreui-vue/src/utils/index.ts
@@ -1,6 +1,7 @@
+import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getUID from './getUID'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { getRTLPlacement, getUID, isInViewport, isRTL }
+export { getNextActiveElement, getRTLPlacement, getUID, isInViewport, isRTL }

From 2bfd026198175b4b55c15835c75f6ebbe9594b91 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:28:51 +0200
Subject: [PATCH 29/92] docs: improve responsive layout

---
 .../src/client/styles/_component-examples.scss     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index fbe5369c..aee50619 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -2,10 +2,18 @@
 // Docs examples
 //
 
-.tab-content .tab-pane {
-  @include border-top-radius(0 !important);
+.docs-code-tabs {
+  padding: 0 ($cd-gutter-x * .5);
+  margin: 0 ($cd-gutter-x * -.5);
+
+  @include media-breakpoint-up(md) {
+    padding: 0;
+    margin: 0;
+  }
+}
 
-  .highlight, div[class^="language-"] {
+.docs-code-tab-content {
+  .tab-pane div[class^="language-"] {
     border-top: 0 !important;
     @include border-top-radius(0 !important);
   }

From b8756f24f64c1821765349aad9c4167ca4be4cae Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:29:01 +0200
Subject: [PATCH 30/92] docs: update content

---
 .../client/components/other_frameworks.json   | 80 +++++++++----------
 packages/docs/getting-started/introduction.md | 16 ++--
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/other_frameworks.json b/packages/docs/.vuepress/src/client/components/other_frameworks.json
index df64148b..b9297930 100644
--- a/packages/docs/.vuepress/src/client/components/other_frameworks.json
+++ b/packages/docs/.vuepress/src/client/components/other_frameworks.json
@@ -1,240 +1,240 @@
 {
   "accordion": {
     "angular": "https://coreui.io/angular/docs/components/accordion/",
-    "bootstrap": "https://coreui.io/docs/components/accordion/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/accordion/",
     "react": "https://coreui.io/react/docs/components/accordion/",
     "vue": "https://coreui.io/vue/docs/components/accordion.html"
   },
   "alert": {
     "angular": "https://coreui.io/angular/docs/components/alert/",
-    "bootstrap": "https://coreui.io/docs/components/alerts/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/alerts/",
     "react": "https://coreui.io/react/docs/components/alert/",
     "vue": "https://coreui.io/vue/docs/components/alert.html"
   },
   "avatar": {
     "angular": "https://coreui.io/angular/docs/components/avatar/",
-    "bootstrap": "https://coreui.io/docs/components/avatar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/avatar/",
     "react": "https://coreui.io/react/docs/components/avatar/",
     "vue": "https://coreui.io/vue/docs/components/avatar.html"
   },
   "badge": {
     "angular": "https://coreui.io/angular/docs/components/badge/",
-    "bootstrap": "https://coreui.io/docs/components/badge/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/badge/",
     "react": "https://coreui.io/react/docs/components/badge/",
     "vue": "https://coreui.io/vue/docs/components/badge.html"
   },
   "breadcrumb": {
     "angular": "https://coreui.io/angular/docs/components/breadcrumb/",
-    "bootstrap": "https://coreui.io/docs/components/breadcrumb/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/breadcrumb/",
     "react": "https://coreui.io/react/docs/components/breadcrumb/",
     "vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
   },
   "button": {
     "angular": "https://coreui.io/angular/docs/components/button/",
-    "bootstrap": "https://coreui.io/docs/components/buttons/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/buttons/",
     "react": "https://coreui.io/react/docs/components/button/",
     "vue": "https://coreui.io/vue/docs/components/button.html"
   },
   "button-group": {
     "angular": "https://coreui.io/angular/docs/components/button-group/",
-    "bootstrap": "https://coreui.io/docs/components/button-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/button-group/",
     "react": "https://coreui.io/react/docs/components/button-group/",
     "vue": "https://coreui.io/vue/docs/components/button-group.html"
   },
   "callout": {
     "angular": "https://coreui.io/angular/docs/components/callout/",
-    "bootstrap": "https://coreui.io/docs/components/callout/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/callout/",
     "react": "https://coreui.io/react/docs/components/callout/",
     "vue": "https://coreui.io/vue/docs/components/callout.html"
   },
   "card": {
     "angular": "https://coreui.io/angular/docs/components/card/",
-    "bootstrap": "https://coreui.io/docs/components/card/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/card/",
     "react": "https://coreui.io/react/docs/components/card/",
     "vue": "https://coreui.io/vue/docs/components/card.html"
   },
   "carousel": {
     "angular": "https://coreui.io/angular/docs/components/carousel/",
-    "bootstrap": "https://coreui.io/docs/components/carousel/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/carousel/",
     "react": "https://coreui.io/react/docs/components/carousel/",
     "vue": "https://coreui.io/vue/docs/components/carousel.html"
   },
   "checkbox": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/checkbox/",
     "vue": "https://coreui.io/vue/docs/forms/checkbox.html"
   },
   "close-button": {
     "angular": "https://coreui.io/angular/docs/components/close-button/",
-    "bootstrap": "https://coreui.io/docs/components/close-button/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/close-button/",
     "react": "https://coreui.io/react/docs/components/close-button/",
     "vue": "https://coreui.io/vue/docs/components/close-button.html"
   },
   "collapse": {
     "angular": "https://coreui.io/angular/docs/components/collapse/",
-    "bootstrap": "https://coreui.io/docs/components/collapse/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/collapse/",
     "react": "https://coreui.io/react/docs/components/collapse/",
     "vue": "https://coreui.io/vue/docs/components/collapse.html"
   },
   "dropdown": {
     "angular": "https://coreui.io/angular/docs/components/dropdown/",
-    "bootstrap": "https://coreui.io/docs/components/dropdowns/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/dropdowns/",
     "react": "https://coreui.io/react/docs/components/dropdown/",
     "vue": "https://coreui.io/vue/docs/components/dropdown.html"
   },
   "footer": {
     "angular": "https://coreui.io/angular/docs/components/footer/",
-    "bootstrap": "https://coreui.io/docs/components/footer/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/footer/",
     "react": "https://coreui.io/react/docs/components/footer/",
     "vue": "https://coreui.io/vue/docs/components/footer.html"
   },
   "header": {
     "angular": "https://coreui.io/angular/docs/components/header/",
-    "bootstrap": "https://coreui.io/docs/components/header/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/header/",
     "react": "https://coreui.io/react/docs/components/header/",
     "vue": "https://coreui.io/vue/docs/components/header.html"
   },
   "icon": {
     "angular": "https://coreui.io/angular/docs/components/icon/",
-    "bootstrap": "https://coreui.io/docs/components/icon/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/icon/",
     "react": "https://coreui.io/react/docs/components/icon/",
     "vue": "https://coreui.io/vue/docs/components/icon.html"
   },
   "image": {
     "angular": "https://coreui.io/angular/docs/components/image/",
-    "bootstrap": "https://coreui.io/docs/content/images/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/content/images/",
     "react": "https://coreui.io/react/docs/components/image/",
     "vue": "https://coreui.io/vue/docs/components/image.html"
   },
   "input": {
     "angular": "https://coreui.io/angular/docs/forms/input/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/input/",
     "vue": "https://coreui.io/vue/docs/forms/input.html"
   },
   "input-group": {
     "angular": "https://coreui.io/angular/docs/forms/input-group/",
-    "bootstrap": "https://coreui.io/docs/forms/input-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/input-group/",
     "react": "https://coreui.io/react/docs/forms/input-group/",
     "vue": "https://coreui.io/vue/docs/forms/input-group.html"
   },
   "floating-labels": {
     "angular": "https://coreui.io/angular/docs/forms/floating-labels/",
-    "bootstrap": "https://coreui.io/docs/forms/floating-labels/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/floating-labels/",
     "react": "https://coreui.io/react/docs/forms/floating-labels/",
     "vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
   },
   "list-group": {
     "angular": "https://coreui.io/angular/docs/components/list-group/",
-    "bootstrap": "https://coreui.io/docs/components/list-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/list-group/",
     "react": "https://coreui.io/react/docs/components/list-group/",
     "vue": "https://coreui.io/vue/docs/components/list-group.html"
   },
   "modal": {
     "angular": "https://coreui.io/angular/docs/components/modal/",
-    "bootstrap": "https://coreui.io/docs/components/modal/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/modal/",
     "react": "https://coreui.io/react/docs/components/modal/",
     "vue": "https://coreui.io/vue/docs/components/modal.html"
   },
   "navbar": {
-    "bootstrap": "https://coreui.io/docs/components/navbar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/navbar/",
     "react": "https://coreui.io/react/docs/components/navbar/",
     "vue": "https://coreui.io/vue/docs/components/navbar.html"
   },
   "navs-tabs": {
     "angular": "https://coreui.io/angular/docs/components/nav/",
-    "bootstrap": "https://coreui.io/docs/components/navs-tabs/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/navs-tabs/",
     "react": "https://coreui.io/react/docs/components/navs-tabs/",
     "vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
   },
   "offcanvas": {
     "angular": "https://coreui.io/angular/docs/components/offcanvas/",
-    "bootstrap": "https://coreui.io/docs/components/offcanvas/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/offcanvas/",
     "react": "https://coreui.io/react/docs/components/offcanvas/",
     "vue": "https://coreui.io/vue/docs/components/offcanvas.html"
   },
   "pagination": {
     "angular": "https://coreui.io/angular/docs/components/pagination/",
-    "bootstrap": "https://coreui.io/docs/components/pagination/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/pagination/",
     "react": "https://coreui.io/react/docs/components/pagination/",
     "vue": "https://coreui.io/vue/docs/components/pagination.html"
   },
   "placeholder": {
     "angular": "https://coreui.io/angular/docs/components/placeholder/",
-    "bootstrap": "https://coreui.io/docs/components/placeholders/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/placeholders/",
     "react": "https://coreui.io/react/docs/components/placeholder/",
     "vue": "https://coreui.io/vue/docs/components/placeholder.html"
   },
   "popover": {
     "angular": "https://coreui.io/angular/docs/components/popover/",
-    "bootstrap": "https://coreui.io/docs/components/popovers/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/popovers/",
     "react": "https://coreui.io/react/docs/components/popover/",
     "vue": "https://coreui.io/vue/docs/components/popover.html"
   },
   "progress": {
     "angular": "https://coreui.io/angular/docs/components/progress/",
-    "bootstrap": "https://coreui.io/docs/components/progress/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/progress/",
     "react": "https://coreui.io/react/docs/components/progress/",
     "vue": "https://coreui.io/vue/docs/components/progress.html"
   },
   "radio": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/radio/",
     "vue": "https://coreui.io/vue/docs/forms/radio.html"
   },
   "range": {
     "angular": "https://coreui.io/angular/docs/forms/range/",
-    "bootstrap": "https://coreui.io/docs/forms/range/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/range/",
     "react": "https://coreui.io/react/docs/forms/range/",
     "vue": "https://coreui.io/vue/docs/forms/range.html"
   },
   "select": {
     "angular": "https://coreui.io/angular/docs/forms/select/",
-    "bootstrap": "https://coreui.io/docs/forms/select/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/select/",
     "react": "https://coreui.io/react/docs/forms/select/",
     "vue": "https://coreui.io/vue/docs/forms/select.html"
   },
   "sidebar": {
     "angular": "https://coreui.io/angular/docs/components/sidebar/",
-    "bootstrap": "https://coreui.io/docs/components/sidebar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/sidebar/",
     "react": "https://coreui.io/react/docs/components/sidebar/",
     "vue": "https://coreui.io/vue/docs/components/sidebar.html"
   },
   "spinner": {
     "angular": "https://coreui.io/angular/docs/components/spinner/",
-    "bootstrap": "https://coreui.io/docs/components/spinners/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/spinners/",
     "react": "https://coreui.io/react/docs/components/spinner/",
     "vue": "https://coreui.io/vue/docs/components/spinner.html"
   },
   "switch": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/switch/",
     "vue": "https://coreui.io/vue/docs/forms/switch.html"
   },
   "table": {
     "angular": "https://coreui.io/angular/docs/components/table/",
-    "bootstrap": "https://coreui.io/docs/content/tables/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/content/tables/",
     "react": "https://coreui.io/react/docs/components/table/",
     "vue": "https://coreui.io/vue/docs/components/table.html"
   },
   "textarea": {
     "angular": "https://coreui.io/angular/docs/forms/form-control/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/textarea/",
     "vue": "https://coreui.io/vue/docs/forms/textarea.html"
   },
   "toast": {
     "angular": "https://coreui.io/angular/docs/components/toast/",
-    "bootstrap": "https://coreui.io/docs/components/toasts/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/toasts/",
     "react": "https://coreui.io/react/docs/components/toast/",
     "vue": "https://coreui.io/vue/docs/components/toast.html"
   },
   "tooltip": {
     "angular": "https://coreui.io/angular/docs/components/tooltip/",
-    "bootstrap": "https://coreui.io/docs/components/tooltips/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/tooltips/",
     "react": "https://coreui.io/react/docs/components/tooltip/",
     "vue": "https://coreui.io/vue/docs/components/tooltip.html"
   }
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index c0a6a0f4..911e5bb2 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -10,11 +10,11 @@ menu: Getting started
 ### Npm
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```bash
@@ -34,11 +34,11 @@ npm install @coreui/vue-pro @coreui/coreui-pro
 ### Yarn
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```bash
@@ -57,11 +57,11 @@ yarn add @coreui/vue-pro @coreui/coreui-pro
 ## Using components
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```js
@@ -87,11 +87,11 @@ Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS
 ###### Basic usage
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```js

From 37eec0e3a742c33960f87723eba9d194c4fd282c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:12:14 +0200
Subject: [PATCH 31/92] docs: update layout

---
 .../.vuepress/src/client/components/ScssDocs.vue     |  2 +-
 .../docs/.vuepress/src/client/layouts/Layout.vue     | 12 ++++++++++--
 packages/docs/.vuepress/src/shared/page.ts           |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index dd9fb126..6004d20a 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -22,7 +22,7 @@ export default defineComponent({
     }
 
     const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
-      as: 'raw',
+      query: '?raw',
       eager: true,
     })
     const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 936b31c4..486d0064 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -13,8 +13,15 @@
           <main class="docs-main order-1">
             <div class="docs-intro ps-lg-4">
               <Banner />
-              <h1 className="docs-title" id="content">{{ title }}</h1>
-              <p class="docs-lead">{{ description }}</p>
+              <div v-if="name && name !== title" class="d-flex flex-column">
+                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
+                  {{ title }}
+                </h1>
+                <h2 class="docs-title order-1 h1">{{ name }}</h2>
+              </div>
+              <h1 v-else class="docs-title" id="content">
+                {{ title }}
+              </h1>
               <Ads />
               <OtherFrameworks />
             </div>
@@ -56,6 +63,7 @@ const scrollPromise = useScrollPromise()
 const onBeforeEnter = scrollPromise.resolve
 const onBeforeLeave = scrollPromise.pending
 
+const name = frontmatter.value.name
 const title = frontmatter.value.title
 const description = frontmatter.value.description
 
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 9feed30c..7e3bcdf5 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -9,6 +9,7 @@ export interface DefaultThemePageFrontmatter {
   home?: boolean
   navbar?: boolean
   pageClass?: string
+  name?: string
 }
 
 export interface DefaultThemeHomePageFrontmatter

From 897780e086e22d5006475e154c793be2da33f7e8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:12:25 +0200
Subject: [PATCH 32/92] docs: update content

---
 packages/docs/components/alert.md             | 1 +
 packages/docs/components/chart.md             | 1 +
 packages/docs/components/placeholder.md       | 1 +
 packages/docs/components/sidebar.md           | 1 +
 packages/docs/getting-started/introduction.md | 2 +-
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/docs/components/alert.md b/packages/docs/components/alert.md
index 8575ad96..7a757599 100644
--- a/packages/docs/components/alert.md
+++ b/packages/docs/components/alert.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Alert Component
+name: Alert
 description: Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
 other_frameworks: alert
 ---
diff --git a/packages/docs/components/chart.md b/packages/docs/components/chart.md
index 181f6635..d10a26d2 100644
--- a/packages/docs/components/chart.md
+++ b/packages/docs/components/chart.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Chart.js Component
+name: Chart.js
 description: Vue wrapper for Chart.js 3.0, the most popular charting library.
 ---
 
diff --git a/packages/docs/components/placeholder.md b/packages/docs/components/placeholder.md
index 658ca503..a18b0153 100644
--- a/packages/docs/components/placeholder.md
+++ b/packages/docs/components/placeholder.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Placeholder Component
+name: Placeholder
 description: Use loading vue placeholders for your components or pages to indicate something may still be loading.
 other_frameworks: placeholder
 ---
diff --git a/packages/docs/components/sidebar.md b/packages/docs/components/sidebar.md
index 1f32c9c6..b59d1f54 100644
--- a/packages/docs/components/sidebar.md
+++ b/packages/docs/components/sidebar.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Sidebar Component
+name: Sidebar
 description: Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
 other_frameworks: sidebar
 ---
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index 911e5bb2..405a039e 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Introduction
 name: Introduction
 description: CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project.
 menu: Getting started

From 18644600476c7088229bcb1f5cb9edff156d50ee Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:18:06 +0200
Subject: [PATCH 33/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                             ^5.0.1  →       ^5.0.2
@rollup/plugin-commonjs                   ^25.0.7  →      ^25.0.8
@typescript-eslint/eslint-plugin           ^7.4.0  →      ^7.11.0
@typescript-eslint/parser                  ^7.4.0  →      ^7.11.0
@vue/test-utils                            ^2.4.5  →       ^2.4.6
@vuepress/bundler-vite                2.0.0-rc.11  →  2.0.0-rc.12
@vuepress/plugin-active-header-links  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-back-to-top          2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-git                  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-prismjs              2.0.0-rc.30  →  2.0.0-rc.32
@vuepress/plugin-register-components  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-theme-data           2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-toc                  2.0.0-rc.30  →  2.0.0-rc.31
eslint-plugin-vue                         ^9.24.0  →      ^9.26.0
lerna                                      ^8.1.2  →       ^8.1.3
rollup                                    ^4.13.2  →      ^4.18.0
ts-jest                                   ^29.1.2  →      ^29.1.4
typescript                                 ^5.4.3  →       ^5.4.5
vue                                       ^3.4.21  →      ^3.4.27
vue-types                                  ^5.1.1  →       ^5.1.2
vuepress                              2.0.0-rc.11  →  2.0.0-rc.12
---
 package.json                     |  8 ++++----
 packages/coreui-vue/package.json | 16 ++++++++--------
 packages/docs/package.json       | 20 ++++++++++----------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index b8c9328f..f038380e 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,17 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.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-plugin-vue": "^9.26.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
-    "lerna": "^8.1.2",
+    "lerna": "^8.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5"
   }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index f4134e45..dad717e6 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,25 +41,25 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@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/test-utils": "^2.4.6",
     "@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": "^4.18.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.3",
-    "vue": "^3.4.21",
-    "vue-types": "^5.1.1"
+    "ts-jest": "^29.1.4",
+    "typescript": "^5.4.5",
+    "vue": "^3.4.27",
+    "vue-types": "^5.1.2"
   },
   "peerDependencies": {
     "vue": "^3.2.21"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 1795fdbe..cd89b42f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,25 +9,25 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.1",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
-    "@vuepress/bundler-vite": "2.0.0-rc.11",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.30",
-    "@vuepress/plugin-back-to-top": "2.0.0-rc.30",
+    "@vuepress/bundler-vite": "2.0.0-rc.12",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
+    "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
     "@vuepress/plugin-container": "2.0.0-rc.28",
-    "@vuepress/plugin-git": "2.0.0-rc.30",
-    "@vuepress/plugin-prismjs": "2.0.0-rc.30",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.30",
-    "@vuepress/plugin-register-components": "2.0.0-rc.30",
-    "@vuepress/plugin-toc": "2.0.0-rc.30",
+    "@vuepress/plugin-git": "2.0.0-rc.31",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.32",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.31",
+    "@vuepress/plugin-register-components": "2.0.0-rc.31",
+    "@vuepress/plugin-toc": "2.0.0-rc.31",
     "markdown-it-include": "^2.0.0",
     "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.11"
+    "vuepress": "2.0.0-rc.12"
   }
 }

From af5303f2722371283de290a4f09f2c688c7e4b99 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 29 May 2024 11:35:11 +0200
Subject: [PATCH 34/92] docs: update layout

---
 .../docs/.vuepress/src/client/components/ScssDocs.vue     | 8 ++++----
 packages/docs/.vuepress/src/client/layouts/Layout.vue     | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index 6004d20a..ba8b8fe6 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -15,14 +15,14 @@ export default defineComponent({
     file: String,
   },
   setup(props) {
-
     if (typeof window !== 'undefined') {
-      window.Prism = window.Prism || {};
-      window.Prism.manual = true;
+      window.Prism = window.Prism || {}
+      window.Prism.manual = true
     }
 
     const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
       query: '?raw',
+      import: 'default',
       eager: true,
     })
     const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
@@ -40,7 +40,7 @@ export default defineComponent({
             .replaceAll('\n  @', '\n@'),
           Prism.languages.scss,
           'scss',
-      )
+        )
       : null
     return {
       code,
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 486d0064..672cf9be 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -22,6 +22,7 @@
               <h1 v-else class="docs-title" id="content">
                 {{ title }}
               </h1>
+              <p class="docs-lead">{{ description }}</p>
               <Ads />
               <OtherFrameworks />
             </div>

From a2767fb0450eddf9ff08eeca65137f70db496815 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 11:12:59 +0200
Subject: [PATCH 35/92] docs: update theme

---
 packages/docs/.vuepress/client.ts             |  1 +
 packages/docs/.vuepress/config.ts             | 88 ++++++++-----------
 .../src/client/components/Banner.vue          | 16 ++--
 .../src/client/components/Callout.vue         | 41 ++++-----
 .../src/client/components/Footer.vue          | 17 +---
 .../src/client/components/Header.vue          | 29 ++----
 .../src/client/components/OtherFrameworks.vue | 42 ++++-----
 .../src/client/components/ScssDocs.vue        | 82 ++++++++---------
 .../src/client/components/Sidebar.vue         | 28 ++----
 .../.vuepress/src/client/components/Toc.vue   | 15 ++--
 .../docs/.vuepress/src/client/layouts/404.vue | 41 +++------
 .../.vuepress/src/client/layouts/Layout.vue   | 76 ++++++++--------
 .../docs/.vuepress/src/node/defaultTheme.ts   | 62 ++-----------
 packages/docs/.vuepress/src/shared/page.ts    | 27 +-----
 .../.vuepress/{ => src}/templates/build.html  |  0
 packages/docs/package.json                    |  8 +-
 16 files changed, 214 insertions(+), 359 deletions(-)
 rename packages/docs/.vuepress/{ => src}/templates/build.html (100%)

diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index b410c0a2..0ae21634 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -1,4 +1,5 @@
 import { defineClientConfig } from '@vuepress/client'
+
 import { CIcon } from '@coreui/icons-vue'
 import CChartPlugin from '@coreui/vue-chartjs'
 import CoreuiVue from '@coreui/vue/src/'
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 932a5cf2..abe4077c 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,14 +1,17 @@
 import { defineUserConfig } from 'vuepress'
 import { viteBundler } from '@vuepress/bundler-vite'
-import anchor from 'markdown-it-anchor'
-import include_plugin from 'markdown-it-include'
-import { defaultTheme } from './src/node/defaultTheme'
-
-import { containerPlugin } from '@vuepress/plugin-container'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
+import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 import { tocPlugin } from '@vuepress/plugin-toc'
 import { getDirname, path } from '@vuepress/utils'
+import anchor from 'markdown-it-anchor'
+import include_plugin from 'markdown-it-include'
+import { defaultTheme } from './src/node'
 
+import { fileURLToPath, URL } from 'url'
 const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({
@@ -16,22 +19,14 @@ export default defineUserConfig({
   lang: 'en-US',
   title: 'Vue UI Components · CoreUI',
   description: 'UI Components Library for Vue.js (Vue 3)',
-  head: [
-    ['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }],
-  ],
-  bundler: viteBundler({
-    viteOptions: {},
-    vuePluginOptions: {},
-  }),
+  head: [['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }]],
+  bundler: viteBundler(),
   markdown: {
     anchor: {
       permalink: anchor.permalink.ariaHidden({
         class: 'anchor-link',
-        placement: 'after'
-      })
-    },
-    code: {
-      lineNumbers: false,
+        placement: 'after',
+      }),
     },
   },
   extendsMarkdown: (md) => {
@@ -41,53 +36,42 @@ export default defineUserConfig({
       })
   },
   plugins: [
-    containerPlugin({
+    activeHeaderLinksPlugin({
+      headerLinkSelector: 'a.sidebar-item',
+      headerAnchorSelector: '.header-anchor',
+      // should greater than page transition duration
+      delay: 300,
+    }),
+    // backToTopPlugin(),
+    markdownContainerPlugin({
       type: 'demo',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded-top p-4">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+      before: (): string => `<div class="docs-example rounded-top p-4">\n`,
+      after: (): string => '</div>\n',
     }),
-    containerPlugin({
-      type: 'demo-rounded',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded p-4">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+    markdownContainerPlugin({
+      type: 'demo-bg-secondary',
+      before: (): string =>
+        `<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n`,
+      after: (): string => '</div>\n',
     }),
-    containerPlugin({
+    markdownContainerPlugin({
       type: 'demo-dark',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded-top p-4 bg-dark">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+      before: (): string => `<div class="docs-example rounded-top p-4 bg-dark">\n`,
+      after: (): string => '</div>\n',
     }),
-    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'
-        }
-      },
+    markdownContainerPlugin({
+      type: 'demo-rounded',
+      before: (): string => `<div class="docs-example rounded p-4">\n`,
+      after: (): string => '</div>\n',
     }),
-    tocPlugin({}),
+    prismjsPlugin(),
     registerComponentsPlugin({
       components: {
         Callout: path.resolve(__dirname, './src/client/components/Callout.vue'),
         ScssDocs: path.resolve(__dirname, './src/client/components/ScssDocs.vue'),
       },
     }),
+    tocPlugin({}),
   ],
   theme: defaultTheme({
     sidebar: [
diff --git a/packages/docs/.vuepress/src/client/components/Banner.vue b/packages/docs/.vuepress/src/client/components/Banner.vue
index e37c867a..ba150ac6 100644
--- a/packages/docs/.vuepress/src/client/components/Banner.vue
+++ b/packages/docs/.vuepress/src/client/components/Banner.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const pro_component = frontmatter.value.pro_component
+</script>
+
 <template>
   <div
     v-if="pro_component"
@@ -38,11 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script setup lang="ts">
-import { usePageFrontmatter } from '@vuepress/client'
-import type { DefaultThemePageFrontmatter } from '../../shared'
-
-const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
-const pro_component = frontmatter.value.pro_component
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/Callout.vue b/packages/docs/.vuepress/src/client/components/Callout.vue
index f3f3e8f1..da3b93d8 100644
--- a/packages/docs/.vuepress/src/client/components/Callout.vue
+++ b/packages/docs/.vuepress/src/client/components/Callout.vue
@@ -1,29 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  color: String,
+  title: String,
+})
+
+const className = [
+  'docs-callout',
+  {
+    [`docs-callout-${props.color}`]: props.color,
+  },
+]
+</script>
+
 <template>
-  <div :class="class">
-    <h5 v-if="title">{{ title }}</h5>
+  <div :class="className">
+    <h5 v-if="props.title">{{ props.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/src/client/components/Footer.vue b/packages/docs/.vuepress/src/client/components/Footer.vue
index 848a8785..d38e5749 100644
--- a/packages/docs/.vuepress/src/client/components/Footer.vue
+++ b/packages/docs/.vuepress/src/client/components/Footer.vue
@@ -35,19 +35,4 @@
       </p>
     </CContainer>
   </CFooter>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import pkg from './../../../../package.json'
-export default defineComponent({
-  name: 'Footer',
-  setup () {
-    const version = pkg.version
-    return {
-      version
-    }
-  }
-})
-</script>
-../../../../package.json
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
index ca3f0165..17ee1090 100644
--- a/packages/docs/.vuepress/src/client/components/Header.vue
+++ b/packages/docs/.vuepress/src/client/components/Header.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { useColorModes } from '@coreui/vue/src'
+
+const props = defineProps({
+  theme: String,
+})
+
+const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
+</script>
 <template>
   <CHeader class="mb-5 elevation-0 border-bottom" position="sticky">
     <CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
@@ -86,23 +95,3 @@
     </CButton>
   </CHeader>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useColorModes } from '@coreui/vue/src'
-
-export default defineComponent({
-  name: 'Header',
-  props: {
-    theme: String,
-  },
-  emits: ['toggle-sidebar'],
-  setup() {
-    const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
-    
-    return {
-      colorMode,
-      setColorMode,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
index f06b9959..b58ceed6 100644
--- a/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
+++ b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
@@ -1,23 +1,3 @@
-<template>
-  <template v-if="frameworks">
-    <h2>Other frameworks</h2>
-    <p>
-      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
-      components. To learn more please visit the following pages.
-    </p>
-    <ul>
-      <template v-for="framework in frameworks">
-        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
-          <li v-if="el !== 'vue'" :key="index">
-            <a :href="otherFrameworks[framework][el]"
-              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
-            >
-          </li>
-        </template>
-      </template>
-    </ul>
-  </template>
-</template>
 <script setup lang="ts">
 import { usePageFrontmatter } from '@vuepress/client'
 import jsonData from '../components/other_frameworks.json'
@@ -42,4 +22,24 @@ const humanize = (text: string) => {
   return string[0].toUpperCase() + string.slice(1)
 }
 </script>
-./other_frameworks.json
\ No newline at end of file
+
+<template>
+  <template v-if="frameworks">
+    <h2>Other frameworks</h2>
+    <p>
+      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+      components. To learn more please visit the following pages.
+    </p>
+    <ul>
+      <template v-for="framework in frameworks">
+        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
+          <li v-if="el !== 'vue'" :key="index">
+            <a :href="otherFrameworks[framework][el]"
+              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
+            >
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index ba8b8fe6..61a93fee 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -1,50 +1,44 @@
-<template>
-  <div class="highlight">
-    <pre class="prism-code language-scss" v-html="code" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import Prism from 'prismjs'
 import 'prismjs/components/prism-scss'
-export default defineComponent({
-  name: 'ScssDocs',
-  props: {
-    capture: String,
-    file: String,
-  },
-  setup(props) {
-    if (typeof window !== 'undefined') {
-      window.Prism = window.Prism || {}
-      window.Prism.manual = true
-    }
 
-    const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
-      query: '?raw',
-      import: 'default',
-      eager: true,
-    })
-    const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+const props = defineProps({
+  capture: String,
+  file: String,
+})
+
+if (typeof window !== 'undefined') {
+  window.Prism = window.Prism || {}
+  window.Prism.manual = true
+}
 
-    const captureStart = `// scss-docs-start ${props.capture}`
-    const captureEnd = `// scss-docs-end ${props.capture}`
-    const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
-    const captured = re.exec(file)
-    const section = captured && captured[1].trim()
-    const code = section
-      ? Prism.highlight(
-          section
-            .replaceAll('--#{$prefix}', '--cui-')
-            .replaceAll('\n  -', '\n-')
-            .replaceAll('\n  @', '\n@'),
-          Prism.languages.scss,
-          'scss',
-        )
-      : null
-    return {
-      code,
-    }
-  },
+const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
+  query: '?raw',
+  import: 'default',
+  eager: true,
 })
+
+const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+
+const captureStart = `// scss-docs-start ${props.capture}`
+const captureEnd = `// scss-docs-end ${props.capture}`
+const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
+const captured = re.exec(file)
+const section = captured && captured[1].trim()
+const code = section
+  ? Prism.highlight(
+      section
+        .replaceAll('--#{$prefix}', '--cui-')
+        .replaceAll('\n  -', '\n-')
+        .replaceAll('\n  @', '\n@'),
+      Prism.languages.scss,
+      'scss',
+    )
+  : null
 </script>
+
+<template>
+  <div class="highlight">
+    <pre class="prism-code language-scss" v-html="code" />
+  </div>
+</template>
diff --git a/packages/docs/.vuepress/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
index 6ad736e2..d05ff18f 100755
--- a/packages/docs/.vuepress/src/client/components/Sidebar.vue
+++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { useSidebarItems } from '../composables'
+import { SidebarNav } from './SidebarNav'
+
+const sidebarItems = useSidebarItems()
+</script>
+
 <template>
   <CSidebar position="fixed" size="lg" class="docs-sidebar border-end px-xl-4 elevation-0">
     <CSidebarBrand class="justify-content-start ps-3">
@@ -35,24 +42,3 @@
     <SidebarNav :items="sidebarItems" />
   </CSidebar>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useSidebarItems } from '../composables'
-import { SidebarNav } from './SidebarNav'
-
-export default defineComponent({
-  name: 'Sidebar',
-
-  components: {
-    SidebarNav,
-  },
-
-  setup() {
-    const sidebarItems = useSidebarItems()
-    return {
-      sidebarItems,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
index bcb036d1..074ca917 100644
--- a/packages/docs/.vuepress/src/client/components/Toc.vue
+++ b/packages/docs/.vuepress/src/client/components/Toc.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+const toggleVisible = () => {
+  visible.value = !visible.value
+}
+</script>
+
 <template>
   <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
     <button
@@ -27,10 +35,3 @@
     </CCollapse>
   </div>
 </template>
-<script setup lang="ts">
-import { ref } from 'vue'
-const visible = ref(false)
-const toggleVisible = () => {
-  visible.value = !visible.value
-}
-</script>
diff --git a/packages/docs/.vuepress/src/client/layouts/404.vue b/packages/docs/.vuepress/src/client/layouts/404.vue
index 1066e78c..b8315905 100755
--- a/packages/docs/.vuepress/src/client/layouts/404.vue
+++ b/packages/docs/.vuepress/src/client/layouts/404.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+import { useRouteLocale } from '@vuepress/client'
+import { useThemeLocaleData } from '../composables'
+
+const routeLocale = useRouteLocale()
+const themeLocale = useThemeLocaleData()
+
+const messages = themeLocale.value.notFound ?? ['Not Found']
+const getMsg = (): string => messages[Math.floor(Math.random() * messages.length)]
+const homeLink = themeLocale.value.home ?? routeLocale.value
+const homeText = themeLocale.value.backToHome ?? 'Back to home'
+</script>
+
 <template>
   <div class="theme-container">
     <div class="theme-default-content">
@@ -9,30 +23,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useRouteLocale } from '@vuepress/client'
-import { useThemeLocaleData } from '../composables'
-
-export default defineComponent({
-  name: '404',
-
-  setup() {
-    const routeLocale = useRouteLocale()
-    const themeLocale = useThemeLocaleData()
-
-    const messages = themeLocale.value.notFound ?? ['Not Found']
-    const getMsg = (): string =>
-      messages[Math.floor(Math.random() * messages.length)]
-    const homeLink = themeLocale.value.home ?? routeLocale.value
-    const homeText = themeLocale.value.backToHome ?? 'Back to home'
-
-    return {
-      getMsg,
-      homeLink,
-      homeText,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 672cf9be..75d6da70 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -1,41 +1,3 @@
-<template>
-  <div>
-    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
-    <div class="wrapper flex-grow-1">
-      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
-      <Transition
-        name="fade-slide-y"
-        mode="out-in"
-        @before-enter="onBeforeEnter"
-        @before-leave="onBeforeLeave"
-      >
-        <CContainer class="my-md-4 flex-grow-1" lg>
-          <main class="docs-main order-1">
-            <div class="docs-intro ps-lg-4">
-              <Banner />
-              <div v-if="name && name !== title" class="d-flex flex-column">
-                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
-                  {{ title }}
-                </h1>
-                <h2 class="docs-title order-1 h1">{{ name }}</h2>
-              </div>
-              <h1 v-else class="docs-title" id="content">
-                {{ title }}
-              </h1>
-              <p class="docs-lead">{{ description }}</p>
-              <Ads />
-              <OtherFrameworks />
-            </div>
-            <Toc />
-            <div className="docs-content ps-lg-4"><Content /></div>
-          </main>
-        </CContainer>
-      </Transition>
-      <Footer />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { usePageFrontmatter } from '@vuepress/client'
@@ -80,3 +42,41 @@ onMounted(() => {
   })
 })
 </script>
+
+<template>
+  <div>
+    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
+    <div class="wrapper flex-grow-1">
+      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
+      <Transition
+        name="fade-slide-y"
+        mode="out-in"
+        @before-enter="onBeforeEnter"
+        @before-leave="onBeforeLeave"
+      >
+        <CContainer class="my-md-4 flex-grow-1" lg>
+          <main class="docs-main order-1">
+            <div class="docs-intro ps-lg-4">
+              <Banner />
+              <div v-if="name && name !== title" class="d-flex flex-column">
+                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
+                  {{ title }}
+                </h1>
+                <h2 class="docs-title order-1 h1">{{ name }}</h2>
+              </div>
+              <h1 v-else class="docs-title" id="content">
+                {{ title }}
+              </h1>
+              <p class="docs-lead">{{ description }}</p>
+              <Ads />
+              <OtherFrameworks />
+            </div>
+            <Toc />
+            <div className="docs-content ps-lg-4"><Content /></div>
+          </main>
+        </CContainer>
+      </Transition>
+      <Footer />
+    </div>
+  </div>
+</template>
diff --git a/packages/docs/.vuepress/src/node/defaultTheme.ts b/packages/docs/.vuepress/src/node/defaultTheme.ts
index 0886fd22..0fe8ca5f 100755
--- a/packages/docs/.vuepress/src/node/defaultTheme.ts
+++ b/packages/docs/.vuepress/src/node/defaultTheme.ts
@@ -1,10 +1,12 @@
 import type { Page, Theme } from '@vuepress/core'
-import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
-import { prismjsPlugin } from '@vuepress/plugin-prismjs'
+
 import { themeDataPlugin } from '@vuepress/plugin-theme-data'
 import { fs, getDirname, path } from '@vuepress/utils'
-import type { DefaultThemeLocaleOptions, DefaultThemePluginsOptions } from '../shared'
+import type {
+  DefaultThemeLocaleOptions,
+  DefaultThemePageData,
+  DefaultThemePluginsOptions,
+} from '../shared'
 import { assignDefaultLocaleOptions } from './utils'
 
 const __dirname = getDirname(import.meta.url)
@@ -25,17 +27,7 @@ export const defaultTheme = ({
   return {
     name: '@vuepress/coreui-docs-theme',
 
-    templateBuild: path.resolve(__dirname, '../../templates/build.html'),
-
-    alias: {
-      // use alias to make all components replaceable
-      ...Object.fromEntries(
-        fs
-          .readdirSync(path.resolve(__dirname, '../client/components'))
-          .filter((file) => file.endsWith('.vue'))
-          .map((file) => [`@theme/${file}`, path.resolve(__dirname, '../client/components', file)]),
-      ),
-    },
+    templateBuild: path.resolve(__dirname, '../templates/build.html'),
 
     clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
 
@@ -46,44 +38,6 @@ export const defaultTheme = ({
       page.routeMeta.title = page.title
     },
 
-    // layouts: path.resolve(__dirname, '../client/layouts'),
-
-    // clientAppEnhanceFiles: path.resolve(__dirname, '../client/clientAppEnhance.ts'),
-
-    // clientAppSetupFiles: path.resolve(__dirname, '../client/clientAppSetup.ts'),
-
-    // // use the relative file path to generate edit link
-    // extendsPageData: ({ filePathRelative }) => ({ filePathRelative }),
-
-    plugins: [
-      // @vuepress/plugin-active-header-link
-      themePlugins.activeHeaderLinks !== false
-        ? activeHeaderLinksPlugin({
-            headerLinkSelector: 'a.sidebar-item',
-            headerAnchorSelector: '.header-anchor',
-            // should greater than page transition duration
-            delay: 300,
-          })
-        : [],
-
-      // @vuepress/plugin-back-to-top
-      themePlugins.backToTop !== false ? backToTopPlugin() : [],
-
-      // @vuepress/plugin-prismjs
-      themePlugins.prismjs !== false ? prismjsPlugin() : [],
-
-      // @vuepress/plugin-theme-data
-      themeDataPlugin({ themeData: localeOptions }),
-      // [
-      //   '@vuepress/active-header-links',
-      //   {
-      //     headerLinkSelector: 'a.sidebar-item',
-      //     headerAnchorSelector: '.anchor-link',
-      //   },
-      // ],
-      // ['@vuepress/back-to-top', themePlugins.backToTop !== false],
-      // ['@vuepress/prismjs', themePlugins.prismjs !== false],
-      // ['@vuepress/theme-data', { themeData: localeOptions }],
-    ],
+    plugins: [themeDataPlugin({ themeData: localeOptions })],
   }
 }
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 7e3bcdf5..64e5fe99 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -10,30 +10,11 @@ export interface DefaultThemePageFrontmatter {
   navbar?: boolean
   pageClass?: string
   name?: string
+  pro_component?: boolean
+  other_frameworks?: string
 }
 
-export interface DefaultThemeHomePageFrontmatter
-  extends DefaultThemePageFrontmatter {
-  home: true
-  heroImage?: string
-  heroAlt?: string
-  heroText?: string | null
-  tagline?: string | null
-  actions?: {
-    text: string
-    link: string
-    type?: 'primary' | 'secondary'
-  }[]
-  features?: {
-    title: string
-    details: string
-  }[]
-  footer?: string
-  footerHtml?: boolean
-}
-
-export interface DefaultThemeNormalPageFrontmatter
-  extends DefaultThemePageFrontmatter {
+export interface DefaultThemeNormalPageFrontmatter extends DefaultThemePageFrontmatter {
   home?: false
   editLink?: boolean
   lastUpdated?: boolean
@@ -42,6 +23,4 @@ export interface DefaultThemeNormalPageFrontmatter
   sidebarDepth?: number
   prev?: string | NavLink
   next?: string | NavLink
-  pro_component: boolean
-  other_frameworks?: string
 }
diff --git a/packages/docs/.vuepress/templates/build.html b/packages/docs/.vuepress/src/templates/build.html
similarity index 100%
rename from packages/docs/.vuepress/templates/build.html
rename to packages/docs/.vuepress/src/templates/build.html
diff --git a/packages/docs/package.json b/packages/docs/package.json
index cd89b42f..ef5215fd 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
-    "build": "vuepress build"
+    "build": "vuepress build --debug"
   },
   "license": "MIT",
   "devDependencies": {
@@ -17,14 +17,18 @@
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
     "@vuepress/bundler-vite": "2.0.0-rc.12",
+    "@vuepress/bundler-webpack": "2.0.0-rc.12",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
     "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
-    "@vuepress/plugin-container": "2.0.0-rc.28",
     "@vuepress/plugin-git": "2.0.0-rc.31",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
     "@vuepress/plugin-prismjs": "2.0.0-rc.32",
     "@vuepress/plugin-theme-data": "2.0.0-rc.31",
     "@vuepress/plugin-register-components": "2.0.0-rc.31",
     "@vuepress/plugin-toc": "2.0.0-rc.31",
+    "@vuepress/shared": "2.0.0-rc.12",
+    "@vuepress/utils": "2.0.0-rc.12",
+    "markdown-it-anchor": "^9.0.1",
     "markdown-it-include": "^2.0.0",
     "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",

From 9ec63704fbf4d7568e3d6986043a036355787724 Mon Sep 17 00:00:00 2001
From: Cesar <cesargb@gmail.com>
Date: Thu, 30 May 2024 15:21:13 +0200
Subject: [PATCH 36/92] Add the *as* property in the CFoooter component to use
 semantic tag

---
 .../src/components/footer/CFooter.ts          |  9 ++++++++-
 .../footer/__tests__/CFooter.spec.ts          | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts
index 81de0158..3f0d5fd2 100644
--- a/packages/coreui-vue/src/components/footer/CFooter.ts
+++ b/packages/coreui-vue/src/components/footer/CFooter.ts
@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CFooter = defineComponent({
   name: 'CFooter',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Place footer in non-static positions.
      *
@@ -18,7 +25,7 @@ const CFooter = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['footer', { [`footer-${props.position}`]: props.position }] },
         slots.default && slots.default(),
       )
diff --git a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
index 4a5ba536..35b914ca 100644
--- a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
+++ b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
@@ -19,6 +19,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'footer',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('footer-fixed')).toBe(true)
   })
 })
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('FOOTER')
+  })
+})

From 78f7c60c6b41d1024be6bb88ff5e22aaf1dec126 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 17:37:36 +0200
Subject: [PATCH 37/92] refactor(CPopover, CTabs, CTooltips): change to an
 SSR-friendly unique ID generator

---
 .../src/components/popover/CPopover.ts         |  7 ++++---
 .../coreui-vue/src/components/tabs/CTab.ts     |  4 ++--
 .../src/components/tabs/CTabPanel.ts           |  4 ++--
 .../coreui-vue/src/components/tabs/CTabs.ts    |  5 +++--
 .../src/components/tooltip/CTooltip.ts         |  7 ++++---
 packages/coreui-vue/src/composables/index.ts   |  3 ++-
 .../coreui-vue/src/composables/useUniqueId.ts  | 18 ++++++++++++++++++
 .../coreui-vue/src/directives/v-c-popover.ts   |  6 +++---
 .../coreui-vue/src/directives/v-c-tooltip.ts   |  6 +++---
 packages/docs/.vuepress/config.ts              |  2 --
 10 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 packages/coreui-vue/src/composables/useUniqueId.ts

diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index a39aea63..3690fa48 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -119,6 +119,7 @@ const CPopover = defineComponent({
     const popoverRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -149,7 +150,7 @@ const CPopover = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('popover')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {
diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
index c7c54250..05ce3fe4 100644
--- a/packages/coreui-vue/src/components/tabs/CTab.ts
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -28,11 +28,11 @@ const CTab = defineComponent({
               active: isActive(),
             },
           ],
-          id: `${id.value}${props.itemKey}-tab`,
+          id: `${props.itemKey}-tab-${id.value}`,
           role: 'tab',
           tabindex: isActive() ? 0 : -1,
           type: 'button',
-          'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
+          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
           'aria-selected': isActive(),
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
index 5e2609bf..a4d23e7d 100644
--- a/packages/coreui-vue/src/components/tabs/CTabPanel.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
@@ -112,9 +112,9 @@ const CTabPanel = defineComponent({
                     show: firstRender.value && visible.value,
                   },
                 ],
-                id: `${id.value}${props.itemKey}-tab-pane`,
+                id: `${props.itemKey}-tab-panel-${id.value}`,
                 role: 'tabpanel',
-                'aria-labelledby': `${id.value}${props.itemKey}-tab`,
+                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
                 tabindex: 0,
                 ref: tabPaneRef,
               },
diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts
index e031153d..112decfe 100644
--- a/packages/coreui-vue/src/components/tabs/CTabs.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabs.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, provide, ref, watch } from 'vue'
-import { getUID } from '../../utils'
+import { useUniqueId } from '../../composables'
 
 const CTabs = defineComponent({
   name: 'CTabs',
@@ -19,7 +19,8 @@ const CTabs = defineComponent({
     'change',
   ],
   setup(props, { slots, emit }) {
-    const uID = ref(getUID('t'))
+    const { getUID } = useUniqueId()
+    const uID = ref(getUID())
     const activeItemKey = ref(props.activeItemKey)
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 8ee54061..c982b3c8 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -115,6 +115,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -145,7 +146,7 @@ const CTooltip = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('tooltip')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {
diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts
index 4cee4c15..47572a5d 100644
--- a/packages/coreui-vue/src/composables/index.ts
+++ b/packages/coreui-vue/src/composables/index.ts
@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
+import { useUniqueId } from './useUniqueId'
 import { usePopper } from './usePopper'
 
-export { useColorModes, usePopper }
+export { useColorModes, useUniqueId, usePopper }
diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts
new file mode 100644
index 00000000..95810c31
--- /dev/null
+++ b/packages/coreui-vue/src/composables/useUniqueId.ts
@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+export const useUniqueId = (prefix: string = '') => {
+  const ids = ref<string[]>([])
+
+  const getUID = () => {
+    do {
+      prefix += Math.floor(Math.random() * 1_000_000)
+    } while (ids.value.includes(prefix))
+    
+    ids.value.push(prefix)
+    return prefix
+  }
+
+  return {
+    getUID,
+  }
+}
diff --git a/packages/coreui-vue/src/directives/v-c-popover.ts b/packages/coreui-vue/src/directives/v-c-popover.ts
index 41c22601..5e846244 100644
--- a/packages/coreui-vue/src/directives/v-c-popover.ts
+++ b/packages/coreui-vue/src/directives/v-c-popover.ts
@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
   const popover = document.createElement('div')
@@ -56,6 +55,7 @@ export default {
   name: 'c-popover',
   uid: '',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('popover')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const header = value.header ?? ''
@@ -77,7 +77,7 @@ export default {
       ],
     }
 
-    const uID = getUID('popover')
+    const uID = getUID()
     binding.arg = uID
     const popover = createPopoverElement(uID, header, content)
 
diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts
index 50903711..bf888042 100644
--- a/packages/coreui-vue/src/directives/v-c-tooltip.ts
+++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts
@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   const tooltip = document.createElement('div')
@@ -54,6 +53,7 @@ const toggleTooltipElement = (
 export default {
   name: 'c-tooltip',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('tooltip')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const trigger = value.trigger ?? 'hover'
@@ -74,7 +74,7 @@ export default {
       ],
     }
 
-    const uID = getUID('tooltip')
+    const uID = getUID()
     binding.arg = uID
     const tooltip = createTooltipElement(uID, content)
 
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index abe4077c..0ae26563 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,7 +1,6 @@
 import { defineUserConfig } from 'vuepress'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
 import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
 import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -11,7 +10,6 @@ import anchor from 'markdown-it-anchor'
 import include_plugin from 'markdown-it-include'
 import { defaultTheme } from './src/node'
 
-import { fileURLToPath, URL } from 'url'
 const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({

From fd9e5e3f3874f21f0784a762bba69cdb98ff8ce7 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 18:05:28 +0200
Subject: [PATCH 38/92] docs: update theme

---
 packages/coreui-vue/src/composables/index.ts |  4 ++--
 packages/docs/.vuepress/config.ts            | 10 ++++++++++
 packages/docs/.vuepress/src/shared/page.ts   |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts
index 47572a5d..4d78d30e 100644
--- a/packages/coreui-vue/src/composables/index.ts
+++ b/packages/coreui-vue/src/composables/index.ts
@@ -1,5 +1,5 @@
 import { useColorModes } from './useColorModes'
-import { useUniqueId } from './useUniqueId'
 import { usePopper } from './usePopper'
+import { useUniqueId } from './useUniqueId'
 
-export { useColorModes, useUniqueId, usePopper }
+export { useColorModes, usePopper, useUniqueId }
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 0ae26563..764793ab 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -70,6 +70,16 @@ export default defineUserConfig({
       },
     }),
     tocPlugin({}),
+    {
+      name: 'extendsPage',
+      extendsPage: (page) => {
+        const frontmatter = page.frontmatter
+
+        frontmatter.head = [
+          ['link', { rel: 'canonical', href: `https://coreui.io/vue/docs${page.path}` }],
+        ]
+      },
+    },
   ],
   theme: defaultTheme({
     sidebar: [
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 64e5fe99..40007b84 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -10,6 +10,7 @@ export interface DefaultThemePageFrontmatter {
   navbar?: boolean
   pageClass?: string
   name?: string
+  preview_component?: boolean
   pro_component?: boolean
   other_frameworks?: string
 }

From 1fd45ef8537a13c1a0b62df6861bc56c6e65d15f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 18:06:01 +0200
Subject: [PATCH 39/92] release: v5.1.0

---
 lerna.json                       | 2 +-
 packages/coreui-vue/package.json | 2 +-
 packages/docs/package.json       | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lerna.json b/lerna.json
index 194343e3..5ceaf54d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0",
+  "version": "5.1.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index dad717e6..2b94d01b 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index ef5215fd..1fc7b75b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
@@ -19,7 +19,6 @@
     "@vuepress/bundler-vite": "2.0.0-rc.12",
     "@vuepress/bundler-webpack": "2.0.0-rc.12",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
-    "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
     "@vuepress/plugin-git": "2.0.0-rc.31",
     "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
     "@vuepress/plugin-prismjs": "2.0.0-rc.32",

From 7f9805cce40f6a4a64351fda0de98e9fd7e3a29d Mon Sep 17 00:00:00 2001
From: Cesar <cesargb@gmail.com>
Date: Fri, 31 May 2024 13:28:49 +0200
Subject: [PATCH 40/92] Add the *as* property in the CHeader component to use
 semantic tag

---
 .../src/components/header/CHeader.ts          |  9 ++++++++-
 .../header/__tests__/CHeader.spec.ts          | 19 +++++++++++++++++++
 packages/docs/api/header/CHeader.api.md       |  9 +++++----
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/coreui-vue/src/components/header/CHeader.ts b/packages/coreui-vue/src/components/header/CHeader.ts
index 32ab0bf5..d1c23b45 100644
--- a/packages/coreui-vue/src/components/header/CHeader.ts
+++ b/packages/coreui-vue/src/components/header/CHeader.ts
@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CHeader = defineComponent({
   name: 'CHeader',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -31,7 +38,7 @@ const CHeader = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['header', { [`header-${props.position}`]: props.position }] },
         props.container
           ? h(
diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts
index 2bb30916..09ec0065 100644
--- a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts
+++ b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts
@@ -20,6 +20,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'header',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true)
   })
 })
+
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('HEADER')
+  })
+})
\ No newline at end of file
diff --git a/packages/docs/api/header/CHeader.api.md b/packages/docs/api/header/CHeader.api.md
index 0416d9ee..f47ab627 100644
--- a/packages/docs/api/header/CHeader.api.md
+++ b/packages/docs/api/header/CHeader.api.md
@@ -8,7 +8,8 @@ import CHeader from '@coreui/vue/src/components/header/CHeader'
 
 #### Props
 
-| Prop name     | Description                                            | Type            | Values                                                        | Default |
-| ------------- | ------------------------------------------------------ | --------------- | ------------------------------------------------------------- | ------- |
-| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | -       |
-| **position**  | Place header in non-static positions.                  | string          | `'fixed'`, `'sticky'`                                         | -       |
+| 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'   |
+| **container** | Defines optional container wrapping children elements.                                  | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | -       |
+| **position**  | Place header in non-static positions.                                                   | string          | `'fixed'`, `'sticky'`                                         | -       |

From b52f2ea6dbf6f83e7dece8325a9223b083efd8aa Mon Sep 17 00:00:00 2001
From: Cesar <cesargb@gmail.com>
Date: Fri, 31 May 2024 13:42:20 +0200
Subject: [PATCH 41/92] docs: add as property in CFooter api

---
 packages/docs/api/footer/CFooter.api.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/docs/api/footer/CFooter.api.md b/packages/docs/api/footer/CFooter.api.md
index b1eedef2..bc9337fe 100644
--- a/packages/docs/api/footer/CFooter.api.md
+++ b/packages/docs/api/footer/CFooter.api.md
@@ -8,6 +8,7 @@ import CFooter from '@coreui/vue/src/components/footer/CFooter'
 
 #### Props
 
-| Prop name    | Description                           | Type   | Values                | Default |
-| ------------ | ------------------------------------- | ------ | --------------------- | ------- |
-| **position** | Place footer in non-static positions. | string | `'fixed'`, `'sticky'` | -       |
+| 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'   |
+| **position** | Place footer in non-static positions.                                                   | string | `'fixed'`, `'sticky'` | -       |

From 0627839c115e1e1c931d9b7e1e6eaff848913555 Mon Sep 17 00:00:00 2001
From: atari <89896729+atari-sog@users.noreply.github.com>
Date: Mon, 24 Jun 2024 15:34:06 +0900
Subject: [PATCH 42/92] Update CFormSelect.api.md

Added 'selected' to the options.
---
 packages/docs/api/form/CFormSelect.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/api/form/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md
index 8d77c483..2637bffa 100644
--- a/packages/docs/api/form/CFormSelect.api.md
+++ b/packages/docs/api/form/CFormSelect.api.md
@@ -19,7 +19,7 @@ import CFormSelect from '@coreui/vue/src/components/form/CFormSelect'
 | **invalid**                                                         | Set component validation state to invalid.                                                                                                                                                                                                   | boolean              | -              | -       |
 | **label** <br><div class="badge bg-primary">4.3.0+</div>            | Add a caption for a component.                                                                                                                                                                                                               | string               | -              | -       |
 | **model-value**                                                     | The default name for a value passed using v-model.                                                                                                                                                                                           | string \| string[]   | -              | -       |
-| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
+| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`, `selected`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript', selected: true }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
 | **size**                                                            | Size the component small or large.                                                                                                                                                                                                           | string               | `'sm' \| 'lg'` | -       |
 | **text** <br><div class="badge bg-primary">4.3.0+</div>             | Add helper text to the component.                                                                                                                                                                                                            | string               | -              | -       |
 | **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.                                                                                                                                                                                             | boolean              | -              | -       |

From 3cdb3776aa7be02a6d2c1283246d7dae5418aaa3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 24 Jul 2024 12:56:06 +0200
Subject: [PATCH 43/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                             ^5.0.2  →       ^5.1.0
@docsearch/css                             ^3.6.0  →       ^3.6.1
@docsearch/js                              ^3.6.0  →       ^3.6.1
@rollup/plugin-commonjs                   ^25.0.8  →      ^26.0.1
@typescript-eslint/eslint-plugin          ^7.11.0  →      ^7.17.0
@typescript-eslint/parser                 ^7.11.0  →      ^7.17.0
@vuepress/bundler-vite                2.0.0-rc.12  →  2.0.0-rc.14
@vuepress/bundler-webpack             2.0.0-rc.12  →  2.0.0-rc.14
@vuepress/plugin-active-header-links  2.0.0-rc.31  →  2.0.0-rc.39
@vuepress/plugin-git                  2.0.0-rc.31  →  2.0.0-rc.38
@vuepress/plugin-markdown-container   2.0.0-rc.30  →  2.0.0-rc.37
@vuepress/plugin-prismjs              2.0.0-rc.32  →  2.0.0-rc.37
@vuepress/plugin-register-components  2.0.0-rc.31  →  2.0.0-rc.37
@vuepress/plugin-theme-data           2.0.0-rc.31  →  2.0.0-rc.39
@vuepress/plugin-toc                  2.0.0-rc.31  →  2.0.0-rc.39
@vuepress/shared                      2.0.0-rc.12  →  2.0.0-rc.14
@vuepress/utils                       2.0.0-rc.12  →  2.0.0-rc.14
eslint-plugin-prettier                     ^5.1.3  →       ^5.2.1
eslint-plugin-unicorn                     ^51.0.1  →      ^54.0.0
eslint-plugin-vue                         ^9.26.0  →      ^9.27.0
lerna                                      ^8.1.3  →       ^8.1.7
prettier                                   ^3.2.5  →       ^3.3.3
rollup                                    ^4.18.0  →      ^4.19.0
sass                                      ^1.77.2  →      ^1.77.8
ts-jest                                   ^29.1.4  →      ^29.2.3
typescript                                 ^5.4.5  →       ^5.5.4
vue                                       ^3.4.27  →      ^3.4.33
vue-types                                  ^5.1.2  →       ^5.1.3
vuepress                              2.0.0-rc.12  →  2.0.0-rc.14
---
 package.json                     | 14 +++++++-------
 packages/coreui-vue/package.json | 14 +++++++-------
 packages/docs/package.json       | 32 ++++++++++++++++----------------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f038380e..f732fb97 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": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.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.26.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "lerna": "^8.1.3",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "lerna": "^8.1.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5"
+    "prettier": "^3.3.3"
   }
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 2b94d01b..f663bbf2 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,11 +41,11 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.2",
+    "@coreui/coreui": "^5.1.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/jest": "^29.5.12",
@@ -54,12 +54,12 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.18.0",
+    "rollup": "^4.19.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5",
-    "vue": "^3.4.27",
-    "vue-types": "^5.1.2"
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4",
+    "vue": "^3.4.33",
+    "vue-types": "^5.1.3"
   },
   "peerDependencies": {
     "vue": "^3.2.21"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 1fc7b75b..629de096 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,28 +9,28 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.2",
+    "@coreui/coreui": "^5.1.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
-    "@docsearch/css": "^3.6.0",
-    "@docsearch/js": "^3.6.0",
-    "@vuepress/bundler-vite": "2.0.0-rc.12",
-    "@vuepress/bundler-webpack": "2.0.0-rc.12",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
-    "@vuepress/plugin-git": "2.0.0-rc.31",
-    "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
-    "@vuepress/plugin-prismjs": "2.0.0-rc.32",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.31",
-    "@vuepress/plugin-register-components": "2.0.0-rc.31",
-    "@vuepress/plugin-toc": "2.0.0-rc.31",
-    "@vuepress/shared": "2.0.0-rc.12",
-    "@vuepress/utils": "2.0.0-rc.12",
+    "@docsearch/css": "^3.6.1",
+    "@docsearch/js": "^3.6.1",
+    "@vuepress/bundler-vite": "2.0.0-rc.14",
+    "@vuepress/bundler-webpack": "2.0.0-rc.14",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.39",
+    "@vuepress/plugin-git": "2.0.0-rc.38",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.37",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.37",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.39",
+    "@vuepress/plugin-register-components": "2.0.0-rc.37",
+    "@vuepress/plugin-toc": "2.0.0-rc.39",
+    "@vuepress/shared": "2.0.0-rc.14",
+    "@vuepress/utils": "2.0.0-rc.14",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.77.2",
+    "sass": "^1.77.8",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.12"
+    "vuepress": "2.0.0-rc.14"
   }
 }

From 5f76520011c138b7cd4b530f6ad762ce21ae7c0b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 24 Jul 2024 13:11:12 +0200
Subject: [PATCH 44/92] docs: update `CAvatar` documentation

---
 .../client/styles/_component-examples.scss    |  5 ++
 packages/docs/components/avatar.md            | 73 ++++++++++++++++++-
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index aee50619..2e725c8f 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -90,6 +90,11 @@
     margin-left: .5rem;
   }
 
+  // Avatars
+  > .avatar + .avatar {
+    margin-left: .25rem;
+  }
+
   // Badges
   > .badge + .badge {
     margin-left: .25rem;
diff --git a/packages/docs/components/avatar.md b/packages/docs/components/avatar.md
index e94d7e27..02fb3b37 100644
--- a/packages/docs/components/avatar.md
+++ b/packages/docs/components/avatar.md
@@ -1,12 +1,14 @@
 ---
 title: Vue Avatar Component
 name: Avatar
-description: Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
+description: The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.
 other_frameworks: avatar
 ---
 
 ## Image avatars
 
+Showcase Vue avatars using images. These avatars are typically circular and can display user profile pictures.
+
 ::: demo
 <CAvatar :src="$withBase('/images/avatars/1.jpg')"/>
 <CAvatar :src="$withBase('/images/avatars/2.jpg')"/>
@@ -17,8 +19,11 @@ other_frameworks: avatar
 <CAvatar src="/images/avatars/2.jpg"/>
 <CAvatar src="/images/avatars/3.jpg"/>
 ```
+
 ## Letter avatars
 
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
 ::: demo
 <CAvatar color="primary" text-color="white">CUI</CAvatar>
 <CAvatar color="secondary">CUI</CAvatar>
@@ -30,6 +35,45 @@ other_frameworks: avatar
 <CAvatar color="warning" text-color="white">CUI</CAvatar>
 ```
 
+## Icons avatars 
+
+Incorporate icons within Vue avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
+::: demo
+<CAvatar color="info" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="success" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="danger" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+:::
+```vue
+<CAvatar color="info" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="success" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="danger" textColor="white">
+  <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+```
+
 ## Rounded avatars
 
 Use the `shape="rounded"` prop to make avatars squared with rounded corners.
@@ -66,20 +110,23 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
 ::: demo
 <CAvatar color="secondary" size="xl">CUI</CAvatar>
 <CAvatar color="secondary" size="lg">CUI</CAvatar>
+<CAvatar color="secondary" size="md">CUI</CAvatar>
 <CAvatar color="secondary">CUI</CAvatar>
 <CAvatar color="secondary" size="sm">CUI</CAvatar>
 :::
 ```vue
 <CAvatar color="secondary" size="xl">CUI</CAvatar>
 <CAvatar color="secondary" size="lg">CUI</CAvatar>
+<CAvatar color="secondary" size="md">CUI</CAvatar>
 <CAvatar color="secondary">CUI</CAvatar>
 <CAvatar color="secondary" size="sm">CUI</CAvatar>
 ```
 
 ## Avatars with status
 
-::: demo
+Add a status indicator to avatars using the `status` property to show online or offline status.
 
+::: demo
 <CAvatar :src="$withBase('/images/avatars/1.jpg')" status="success"/>
 <CAvatar color="secondary" status="danger">CUI</CAvatar>
 :::
@@ -88,6 +135,28 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
 <CAvatar color="secondary" status="danger">CUI</CAvatar>
 ```
 
+## Customizing
+
+### CSS variables
+
+Vue avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_avatar.scss" capture="avatar-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = {
+  '--my-css-var': 10,
+  '--my-another-css-var': 'red',
+}
+return <CAvatar style={vars}>...</CAvatar>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="avatar-variables"/>
+
 ## API
 
 !!!include(./api/avatar/CAvatar.api.md)!!!
\ No newline at end of file

From 51cf9a92d73de7abf205df5a5287228f495c3508 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 24 Jul 2024 15:45:53 +0200
Subject: [PATCH 45/92] refactor(CButton): improve colors and variants handling

---
 packages/coreui-vue/src/components/button/CButton.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts
index e918cbfc..287bfd12 100644
--- a/packages/coreui-vue/src/components/button/CButton.ts
+++ b/packages/coreui-vue/src/components/button/CButton.ts
@@ -93,8 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
-            props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
             {
+              [`btn-${props.color}`]: props.color && !props.variant,
+              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,
               disabled: props.disabled,

From 18c962df8ffbf3f1a9192e3219439ecda6f96283 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 25 Jul 2024 18:05:37 +0200
Subject: [PATCH 46/92] docs: update icons documentation

---
 packages/docs/.vuepress/client.ts             |   3 +-
 .../api/coreui-icons-vue/src/CIconSvg.api.md  |  17 ++
 packages/docs/components/icon.md              | 157 +++++++++++++++---
 packages/docs/package.json                    |   2 +-
 4 files changed, 158 insertions(+), 21 deletions(-)
 create mode 100644 packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md

diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index 0ae21634..0404f0fd 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -1,6 +1,6 @@
 import { defineClientConfig } from '@vuepress/client'
 
-import { CIcon } from '@coreui/icons-vue'
+import { CIcon, CIconSvg } from '@coreui/icons-vue'
 import CChartPlugin from '@coreui/vue-chartjs'
 import CoreuiVue from '@coreui/vue/src/'
 import '@coreui/coreui/scss/coreui.scss'
@@ -71,6 +71,7 @@ export default defineClientConfig({
     app.use(CoreuiVue)
     app.provide('icons', icons)
     app.component('CIcon', CIcon)
+    app.component('CIconSvg', CIconSvg)
     app.use(CChartPlugin),
     router.addRoute({ path: '', redirect: '/getting-started/introduction.html' })
   },
diff --git a/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md
new file mode 100644
index 00000000..1984a5a7
--- /dev/null
+++ b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md
@@ -0,0 +1,17 @@
+### CIconSvg
+
+```jsx
+import { CIconSvg } from '@coreui/icons-vue'
+// or
+import CIconSvg from '@coreui/icons-vue/src/CIconSvg'
+```
+
+#### Props
+
+| Prop name             | Description                                                                                       | Type                  | Values | Default |
+| --------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | ------ | ------- |
+| **custom-class-name** | Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.         | string\|array\|object | -      | -       |
+| **height**            | The height attribute defines the vertical length of an icon.                                      | number                | -      | -       |
+| **size**              | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | string                | -      | -       |
+| **title**             | Title tag content.                                                                                | string                | -      | -       |
+| **width**             | The width attribute defines the horizontal length of an icon.                                     | number                | -      | -       |
diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md
index d50d957e..10794fff 100644
--- a/packages/docs/components/icon.md
+++ b/packages/docs/components/icon.md
@@ -1,12 +1,12 @@
 ---
 title: Vue Icon Component
 name: Icon
-description: Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.
+description: Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.
 ---
 
 ## Installation
 
-If you want to use our icon component and our icons library you have to install two additional packages.
+To start using CoreUI Vue Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:
 
 ### Npm
 
@@ -27,7 +27,11 @@ yarn add @coreui/icons-vue
 
 ## Usage
 
-### Single icon
+Import vue.js icons using one of these two options:
+
+### Single Vue.js icon
+
+To use a single Vue.js icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
 
 ::: demo
 <CIcon :icon="icon.cilList" size="xl"/>
@@ -57,6 +61,8 @@ export default {
 
 ### All icons
 
+To use all icons available in the CoreUI Vue.js Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop.
+
 ```vue
 <template>
   <CIcon :icon="icon.cilList" size="xxl"/>
@@ -76,10 +82,9 @@ export default {
 }
 </script>
 ```
-
 ### Icons object
 
-This way you import your needed icons once and pass them to $root object on 'icons' key
+This way you import your needed Vue.js icons once and pass them to $root object on 'icons' key
 
 ```js
 // main.js / main.ts
@@ -114,13 +119,139 @@ app.component('CIcon', CIcon)
 app.mount('#app')
 
 ```
+
 Later anywhere in the app:
+
 ```vue
 <CIcon icon="cilArrowBottom" size="xxl"/>
 <CIcon icon="cil-arrow-bottom" size="xxl"/>
 ```
+
 You can pass the name of the icon both in camelCase and kebab-case
 
+### Color
+
+The CoreUI Vue Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs.
+
+#### Utility classes
+
+With some [color utility classes](https://coreui.io/docs/utilities/colors/), you may use color to convey message.
+
+::: demo
+<CIcon :icon="icon.cilList" size="xl" />
+<CIcon :icon="icon.cilList" class="text-primary" size="xl" />
+<CIcon :icon="icon.cilList" class="text-secondary" size="xl" />
+<CIcon :icon="icon.cilList" class="text-success" size="xl" />
+<CIcon :icon="icon.cilList" class="text-danger" size="xl" />
+<CIcon :icon="icon.cilList" class="text-warning" size="xl" />
+<CIcon :icon="icon.cilList" class="text-info" size="xl" />
+:::
+```vue
+::: demo
+<CIcon :icon="cilList" size="xl" />
+<CIcon :icon="cilList" class="text-primary" size="xl" />
+<CIcon :icon="cilList" class="text-secondary" size="xl" />
+<CIcon :icon="cilList" class="text-success" size="xl" />
+<CIcon :icon="cilList" class="text-danger" size="xl" />
+<CIcon :icon="cilList" class="text-warning" size="xl" />
+<CIcon :icon="cilList" class="text-info" size="xl" />
+:::
+```
+
+#### CSS Variables
+
+CoreUI Vue Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.
+
+::: demo
+<CIcon :icon="icon.cilList" size="xl" :style="{'--ci-primary-color': 'red'}" />
+<CIcon :icon="icon.cilList" size="xl" :style="{'--ci-primary-color': 'green'}" />
+:::
+```vue
+<CIcon :icon="cilList" size="xl" :style="{'--ci-primary-color': 'red'}" />
+<CIcon :icon="cilList" size="xl" :style="{'--ci-primary-color': 'green'}" />
+```
+
+### Sizing
+
+Set heights of vue icons using size property like `size="lg"` and `size="sm"`.
+
+::: demo
+<CIcon :icon="icon.cilList" size="sm" />
+<CIcon :icon="icon.cilList" />
+<CIcon :icon="icon.cilList" size="lg" />
+<CIcon :icon="icon.cilList" size="xl" />
+<CIcon :icon="icon.cilList" size="xxl" />
+<CIcon :icon="icon.cilList" size="3xl" />
+:::
+```vue
+<CIcon :icon="cilList" size="sm" />
+<CIcon :icon="cilList" />
+<CIcon :icon="cilList" size="lg" />
+<CIcon :icon="cilList" size="xl" />
+<CIcon :icon="cilList" size="xxl" />
+<CIcon :icon="cilList" size="3xl" />
+```
+
+### Custom SVG Icons
+
+The `<CIconSvg`> component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.
+
+::: demo
+<CIconSvg size="4xl">
+  <svg
+    viewBox="0 0 102 116"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g fill="#3C4B64" fillRule="nonzero">
+        <path
+          d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
+          id="Shape"
+        />
+        <path
+          d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
+          id="Path"
+        />
+      </g>
+    </g>
+  </svg>
+</CIconSvg>
+:::
+```vue
+<template>
+  <CIconSvg size="4xl">
+    <svg
+      viewBox="0 0 102 116"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g fill="#3C4B64" fillRule="nonzero">
+          <path
+            d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
+            id="Shape"
+          />
+          <path
+            d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
+            id="Path"
+          />
+        </g>
+      </g>
+    </svg>
+  </CIconSvg>
+</template>
+<script>
+  import { CIconSvg } from '@coreui/icons-vue';
+  export default {
+    components: {
+      CIconSvg
+    }
+  }
+</script>
+```
 
 ## Available icons
 
@@ -220,18 +351,6 @@ export default {
 
 ## API
 
-### CIcon
-
-```js
-import { CIcon } from '@coreui/icons-vue'
-```
+!!!include(./api/coreui-icons-vue/src/CIcon.api.md)!!!
 
-| 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 Vue 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                | -      | -       |
\ No newline at end of file
+!!!include(./api/coreui-icons-vue/src/CIconSvg.api.md)!!!
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 629de096..e402aea7 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -11,7 +11,7 @@
     "@coreui/chartjs": "^4.0.0",
     "@coreui/coreui": "^5.1.0",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-vue": "^2.0.0",
+    "@coreui/icons-vue": "^2.1.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.1",

From 408f69d6e3d5280a6b43a039d780a05e3517e64e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 26 Jul 2024 10:21:50 +0200
Subject: [PATCH 47/92] docs: improve icons documentation

---
 packages/docs/components/icon.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md
index 10794fff..1d71d1d9 100644
--- a/packages/docs/components/icon.md
+++ b/packages/docs/components/icon.md
@@ -290,7 +290,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
   <CTabPane role="tabpanel" aria-labelledby="linear-tab" :visible="tabPaneActiveKey === 1">
     <CRow v-if="tabPaneActiveKey === 1" :xs="{ cols: 3 }" :sm="{ cols: 4 }" :lg="{ cols: 5 }">
       <CCol class="mb-4" v-for="(i) in linearIcons">
-        <div class="p-3 py-4 mb-2 bg-light text-center rounded">
+        <div class="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
         <div class="text-body-secondary text-center pt-1 small">{{i}}</div>
@@ -300,7 +300,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
   <CTabPane role="tabpanel" aria-labelledby="brand-tab" :visible="tabPaneActiveKey === 2">
     <CRow v-if="tabPaneActiveKey === 2" :xs="{ cols: 3 }" :sm="{ cols: 4 }" :lg="{ cols: 5 }">
       <CCol class="mb-4" v-for="(i) in brandIcons">
-        <div class="p-3 py-4 mb-2 bg-light text-center rounded">
+        <div class="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
         <div class="text-body-secondary text-center pt-1 small">{{i}}</div>
@@ -310,7 +310,7 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
   <CTabPane role="tabpanel" aria-labelledby="flags-tab" :visible="tabPaneActiveKey === 3">
     <CRow v-if="tabPaneActiveKey === 3" :xs="{ cols: 3 }" :sm="{ cols: 4 }" :lg="{ cols: 5 }">
       <CCol class="mb-4" v-for="(i) in flagIcons">
-        <div class="p-3 py-4 mb-2 bg-light text-center rounded">
+        <div class="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
           <CIcon :icon="icon[i]" size="xxl"/>
         </div>
         <div class="text-body-secondary text-center pt-1 small">{{i}}</div>

From def19032f4a62226b152bb6c06c7543a61f1a5d6 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 26 Jul 2024 11:04:13 +0200
Subject: [PATCH 48/92] release: v5.2.0

---
 README.md                        |  3 +-
 lerna.json                       |  2 +-
 packages/coreui-vue/README.md    |  3 +-
 packages/coreui-vue/package.json |  2 +-
 packages/docs/README.md          | 80 --------------------------------
 packages/docs/package.json       |  2 +-
 6 files changed, 7 insertions(+), 85 deletions(-)
 delete mode 100644 packages/docs/README.md

diff --git a/README.md b/README.md
index 0a993209..355d7967 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/v5.0.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.2.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`
@@ -134,6 +134,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 - [Vue Progress](https://coreui.io/vue/docs/components/progress.html)
 - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html)
 - [Vue Range](https://coreui.io/vue/docs/forms/range.html)
+- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html)
 - [Vue Select](https://coreui.io/vue/docs/forms/select.html)
 - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html)
 - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO**
diff --git a/lerna.json b/lerna.json
index 5ceaf54d..f19238c5 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.1.0",
+  "version": "5.2.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index 8293a55c..24bc3f28 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.2.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`
@@ -134,6 +134,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 - [Vue Progress](https://coreui.io/vue/docs/components/progress.html)
 - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html)
 - [Vue Range](https://coreui.io/vue/docs/forms/range.html)
+- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html)
 - [Vue Select](https://coreui.io/vue/docs/forms/select.html)
 - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html)
 - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO**
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index f663bbf2..be156612 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/README.md b/packages/docs/README.md
deleted file mode 100644
index 54e0c48e..00000000
--- a/packages/docs/README.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: Redirect
-lang: en-US
-title: Title of this page
-description: Description of this page
----
-### Components:
-
-[ CAccordion ](./4.0/components/accordion.md)
-
-[ CAlert ](./4.0/components/alert.md)
-
-[ CAvatar ](./4.0/components/avatar.md)
-
-[ CBackdrop ](./4.0/components/backdrop.md)
-
-[ CBadge ](./4.0/components/badge.md)
-
-[ CBreadcrumb ](./4.0/components/breadcrumb.md)
-
-[ CButton ](./4.0/components/button.md)
-
-[ CButtonGroup ](./4.0/components/button-group.md)
-
-[ CCallout ](./4.0/components/callout.md)
-
-[ CCard ](./4.0/components/card.md)
-
-[ CCollapse ](./4.0/components/collapse.md)
-
-[ CDropdown ](./4.0/components/dropdown.md)
-
-[ CDropdown ](./4.0/components/dropdown.md)
-
-[ CFooter ](./4.0/components/footer.md)
-
-[ CForm ](./4.0/components/form.md)
-
-[ CGrid ](./4.0/components/grid.md)
-
-[ CHeader ](./4.0/components/header.md)
-
-[ CLink ](./4.0/components/link.md)
-
-[ CListGroup ](./4.0/components/list-group.md)
-
-[ CLoadingButton ](./4.0/components/loading-button.md)
-
-[ CModal ](./4.0/components/modal.md)
-
-[ CMultiSelect ](./4.0/components/multi-select.md)
-
-[ CNav ](./4.0/components/nav.md)
-
-[ CNavBar ](./4.0/components/navbar.md)
-
-[ COffcanvas ](./4.0/components/offcanvas.md)
-
-[ CPagination ](./4.0/components/pagination.md)
-
-[ CPopover ](./4.0/components/popover.md)
-
-[ CProgress ](./4.0/components/progress.md)
-
-[ CSidebar ](./4.0/components/sidebar.md)
-
-[ CSpinner ](./4.0/components/spinner.md)
-
-[ CTable ](./4.0/components/table.md)
-
-[ CTabs ](./4.0/components/tabs.md)
-
-[ CToast ](./4.0/components/toast.md)
-
-### Directives:
-
-
-[ CTooltip ](./4.0/directives/tooltip.md)
-
-[ CPopover ](./4.0/directives/popover.md)
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index e402aea7..3dfd25a2 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From 7626e30aaa69bd6ab1ba796d8dd8c04c62c178a6 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 29 Aug 2024 12:54:33 +0200
Subject: [PATCH 49/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                             ^5.1.0  →       ^5.1.2
@typescript-eslint/eslint-plugin          ^7.17.0  →       ^8.3.0
@typescript-eslint/parser                 ^7.17.0  →       ^8.3.0
@vuepress/bundler-vite                2.0.0-rc.14  →  2.0.0-rc.15
@vuepress/bundler-webpack             2.0.0-rc.14  →  2.0.0-rc.15
@vuepress/plugin-active-header-links  2.0.0-rc.39  →  2.0.0-rc.42
@vuepress/plugin-git                  2.0.0-rc.38  →  2.0.0-rc.42
@vuepress/plugin-markdown-container   2.0.0-rc.37  →  2.0.0-rc.42
@vuepress/plugin-register-components  2.0.0-rc.37  →  2.0.0-rc.42
@vuepress/plugin-theme-data           2.0.0-rc.39  →  2.0.0-rc.42
@vuepress/plugin-toc                  2.0.0-rc.39  →  2.0.0-rc.42
@vuepress/shared                      2.0.0-rc.14  →  2.0.0-rc.15
@vuepress/utils                       2.0.0-rc.14  →  2.0.0-rc.15
eslint-plugin-unicorn                     ^54.0.0  →      ^55.0.0
lerna                                      ^8.1.7  →       ^8.1.8
markdown-it-anchor                         ^9.0.1  →       ^9.1.0
rollup                                    ^4.19.0  →      ^4.21.1
ts-jest                                   ^29.2.3  →      ^29.2.5
vue                                       ^3.4.33  →      ^3.4.38
vuepress                              2.0.0-rc.14  →  2.0.0-rc.15
---
 package.json                     |  8 ++++----
 packages/coreui-vue/package.json |  8 ++++----
 packages/docs/package.json       | 26 +++++++++++++-------------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index f732fb97..41fbecce 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/vue3-jest": "29.2.6",
@@ -31,8 +31,8 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.27.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^54.0.0",
-    "lerna": "^8.1.7",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "lerna": "^8.1.8",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3"
   }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index be156612..95c382a3 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.1.0",
+    "@coreui/coreui": "^5.1.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
@@ -54,11 +54,11 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.19.0",
+    "rollup": "^4.21.1",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5.4",
-    "vue": "^3.4.33",
+    "vue": "^3.4.38",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 3dfd25a2..14f551b1 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,28 +9,28 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.1.0",
+    "@coreui/coreui": "^5.1.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.1.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.1",
     "@docsearch/js": "^3.6.1",
-    "@vuepress/bundler-vite": "2.0.0-rc.14",
-    "@vuepress/bundler-webpack": "2.0.0-rc.14",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.39",
-    "@vuepress/plugin-git": "2.0.0-rc.38",
-    "@vuepress/plugin-markdown-container": "2.0.0-rc.37",
+    "@vuepress/bundler-vite": "2.0.0-rc.15",
+    "@vuepress/bundler-webpack": "2.0.0-rc.15",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.42",
+    "@vuepress/plugin-git": "2.0.0-rc.42",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.42",
     "@vuepress/plugin-prismjs": "2.0.0-rc.37",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.39",
-    "@vuepress/plugin-register-components": "2.0.0-rc.37",
-    "@vuepress/plugin-toc": "2.0.0-rc.39",
-    "@vuepress/shared": "2.0.0-rc.14",
-    "@vuepress/utils": "2.0.0-rc.14",
-    "markdown-it-anchor": "^9.0.1",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.42",
+    "@vuepress/plugin-register-components": "2.0.0-rc.42",
+    "@vuepress/plugin-toc": "2.0.0-rc.42",
+    "@vuepress/shared": "2.0.0-rc.15",
+    "@vuepress/utils": "2.0.0-rc.15",
+    "markdown-it-anchor": "^9.1.0",
     "markdown-it-include": "^2.0.0",
     "sass": "^1.77.8",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.14"
+    "vuepress": "2.0.0-rc.15"
   }
 }

From d15e7054866c0f3719e8220324335ea070e6741a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 29 Aug 2024 14:13:12 +0200
Subject: [PATCH 50/92] feat(CModal): the `container` and `teleport` properties
 to enable appending the modal to a specific element

---
 .../coreui-vue/src/components/modal/CModal.ts | 68 +++++++++++++------
 packages/docs/api/modal/CModal.api.md         | 28 ++++----
 2 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts
index 78a238b9..e2e1947d 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -1,6 +1,7 @@
 import {
   defineComponent,
   h,
+  PropType,
   provide,
   ref,
   RendererElement,
@@ -11,6 +12,7 @@ import {
 } from 'vue'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalTeleport } from '../conditional-teleport'
 
 import { executeAfterTransition } from '../../utils/transition'
 
@@ -47,6 +49,15 @@ const CModal = defineComponent({
         return false
       },
     },
+    /**
+     * 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 5.3.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * A string of all className you want applied to the modal content component.
      */
@@ -54,7 +65,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     focus: {
       type: Boolean,
@@ -99,6 +110,15 @@ const CModal = defineComponent({
         return ['sm', 'lg', 'xl'].includes(value)
       },
     },
+    /**
+     * Generates modal using Teleport.
+     *
+     * @since 5.3.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
@@ -264,27 +284,37 @@ const CModal = defineComponent({
         ),
       )
 
-    return () => [
+    return () =>
       h(
-        Transition,
+        CConditionalTeleport,
         {
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          container: props.container,
+          teleport: props.teleport,
         },
-        () =>
-          props.unmountOnClose
-            ? visible.value && modal()
-            : withDirectives(modal(), [[vShow, visible.value]]),
-      ),
-      props.backdrop &&
-        h(CBackdrop, {
-          class: 'modal-backdrop',
-          visible: visible.value,
-        }),
-    ]
+        {
+          default: () => [
+            h(
+              Transition,
+              {
+                css: false,
+                onEnter: (el, done) => handleEnter(el, done),
+                onAfterEnter: () => handleAfterEnter(),
+                onLeave: (el, done) => handleLeave(el, done),
+                onAfterLeave: (el) => handleAfterLeave(el),
+              },
+              () =>
+                props.unmountOnClose
+                  ? visible.value && modal()
+                  : withDirectives(modal(), [[vShow, visible.value]]),
+            ),
+            props.backdrop &&
+              h(CBackdrop, {
+                class: 'modal-backdrop',
+                visible: visible.value,
+              }),
+          ],
+        },
+      )
   },
 })
 
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 582c2798..6f201012 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -8,19 +8,21 @@ 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          | -                                                  | -       |
-| **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         | -                                                  | -       |
+| 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    |
+| **container** <br><div class="badge bg-primary">5.3.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-class-name**                                       | A string of all className you want applied to the modal content component.                                                                         | string                                       | -                                                  | -       |
+| **focus** <br><div class="badge bg-primary">5.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'`                             | -       |
+| **teleport** <br><div class="badge bg-primary">5.3.0+</div>  | Generates modal using Teleport.                                                                                                                    | boolean                                      | -                                                  | false   |
+| **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
 

From 7cc0c88b9d1748d82ea1578300a229ec608b5b4a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 29 Aug 2024 14:17:40 +0200
Subject: [PATCH 51/92] docs: update API documentation

---
 .../CConditionalTeleport.ts                   |  2 +-
 .../src/components/dropdown/CDropdown.ts      |  4 +--
 .../components/dropdown/CDropdownToggle.ts    |  2 +-
 .../src/components/popover/CPopover.ts        |  2 +-
 .../src/components/tooltip/CTooltip.ts        |  2 +-
 .../CConditionalTeleport.api.md               |  8 ++---
 packages/docs/api/dropdown/CDropdown.api.md   | 30 +++++++++----------
 .../docs/api/dropdown/CDropdownToggle.api.md  | 24 +++++++--------
 packages/docs/api/form/CFormSelect.api.md     |  2 +-
 packages/docs/api/popover/CPopover.api.md     |  2 +-
 packages/docs/api/tooltip/CTooltip.api.md     |  2 +-
 11 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
index 8fd104a1..9207fb9a 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 32fe1ea0..679e5d6f 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * 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
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     teleport: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 33e96a35..17fd034b 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     navLink: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 3690fa48..03ade861 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * 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
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index c982b3c8..02ad416e 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * 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
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index 66b3972f..79b60043 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -8,7 +8,7 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
 
 #### 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    |
+| Prop name                                                    | Description                                                                                     | Type                                         | Values | Default |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
+| **container** <br><div class="badge bg-primary">5.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/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 3eaad39f..6d3bade5 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +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 \| 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                                      | -                                                                                                                                                                                             | -              |
+| 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">5.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">5.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/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 2c5e2d20..ddf79509 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  |
-| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
-| **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'`                                                                          | -        |
+| 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">5.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/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md
index 2637bffa..8d77c483 100644
--- a/packages/docs/api/form/CFormSelect.api.md
+++ b/packages/docs/api/form/CFormSelect.api.md
@@ -19,7 +19,7 @@ import CFormSelect from '@coreui/vue/src/components/form/CFormSelect'
 | **invalid**                                                         | Set component validation state to invalid.                                                                                                                                                                                                   | boolean              | -              | -       |
 | **label** <br><div class="badge bg-primary">4.3.0+</div>            | Add a caption for a component.                                                                                                                                                                                                               | string               | -              | -       |
 | **model-value**                                                     | The default name for a value passed using v-model.                                                                                                                                                                                           | string \| string[]   | -              | -       |
-| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`, `selected`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript', selected: true }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
+| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
 | **size**                                                            | Size the component small or large.                                                                                                                                                                                                           | string               | `'sm' \| 'lg'` | -       |
 | **text** <br><div class="badge bg-primary">4.3.0+</div>             | Add helper text to the component.                                                                                                                                                                                                            | string               | -              | -       |
 | **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.                                                                                                                                                                                             | boolean              | -              | -       |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 55a94fd7..725e4846 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 | 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'                                   |
+| **container** <br><div class="badge bg-primary">5.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'] |
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index f8f3d672..3b0cac97 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 | 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'                                   |
+| **container** <br><div class="badge bg-primary">5.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'] |

From 766700b8251336c0a559cb1c4f06c7c117852a41 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 30 Aug 2024 10:57:22 +0200
Subject: [PATCH 52/92] docs: migrate examples to `<script setup>`

---
 packages/docs/components/alert.md     | 108 ++--
 packages/docs/components/collapse.md  |  66 +-
 packages/docs/components/header.md    |  91 ++-
 packages/docs/components/icon.md      |  89 +--
 packages/docs/components/modal.md     | 213 +++----
 packages/docs/components/navbar.md    | 141 ++---
 packages/docs/components/navs-tabs.md |  45 +-
 packages/docs/components/offcanvas.md | 158 ++---
 packages/docs/components/popover.md   |  48 +-
 packages/docs/components/table.md     | 850 ++++++++++++--------------
 packages/docs/components/toast.md     |  59 +-
 packages/docs/components/tooltip.md   |  34 +-
 packages/docs/forms/checkbox.md       |  52 +-
 packages/docs/forms/radio.md          |  32 +-
 packages/docs/forms/validation.md     | 180 +++---
 15 files changed, 904 insertions(+), 1262 deletions(-)

diff --git a/packages/docs/components/alert.md b/packages/docs/components/alert.md
index 7a757599..96091ca9 100644
--- a/packages/docs/components/alert.md
+++ b/packages/docs/components/alert.md
@@ -19,7 +19,8 @@ Vue Alert is prepared for any length of text, as well as an optional close butto
 <CAlert color="light">A simple light alert—check it out!</CAlert>
 <CAlert color="dark">A simple dark alert—check it out!</CAlert>
 :::
-```markup
+
+```vue
 <CAlert color="primary">A simple primary alert—check it out!</CAlert>
 <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
 <CAlert color="success">A simple success alert—check it out!</CAlert>
@@ -38,9 +39,16 @@ Click the button below to show an alert (hidden with inline styles to start), th
 <CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
 <CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
 :::
-```markup
-<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
-<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
+
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const liveExampleVisible = ref(false)
+</script>
+<template>
+  <CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
+  <CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
+</template>
 ```
 
 ### Link color
@@ -48,32 +56,32 @@ Click the button below to show an alert (hidden with inline styles to start), th
 Use the `<CAlertLink>` component to immediately give matching colored links inside any alert.
 ::: demo
 <CAlert color="primary">
-  A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="secondary">
-  A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="success">
-  A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="danger">
-  A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="warning">
-  A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="info">
-  A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="light">
-  A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 <CAlert color="dark">
-  A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
 :::
 
-```markup
+```vue
 <CAlert color="primary">
   A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
@@ -106,14 +114,15 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
 
 ::: demo
 <CAlert color="success">
-  <CAlertHeading>Well done!</CAlertHeading>
+<CAlertHeading>Well done!</CAlertHeading>
+
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
   <hr />
   <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </CAlert>
 :::
 
-```markup
+```vue
 <CAlert color="success" v-bind:visible="true">
   <CAlertHeading>Well done!</CAlertHeading>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
@@ -121,21 +130,23 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
   <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </CAlert>
 ```
+
 ### Icons
 
 Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
 
 ::: demo
 <CAlert color="primary" class="d-flex align-items-center">
-  <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
-    <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
-  </svg>
+<svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
+<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
+</svg>
+
   <div>
     An example alert with an icon
   </div>
 </CAlert>
 :::
-```markup
+```vue
 <CAlert color="primary" class="d-flex align-items-center">
   <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
     <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
@@ -150,7 +161,8 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
 
 ::: demo
 <CAlert color="primary" class="d-flex align-items-center">
-  <CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
+<CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
+
   <div>
     An example alert with an icon
   </div>
@@ -174,7 +186,7 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
   </div>
 </CAlert>
 :::
-```markup
+```vue
 <CAlert color="primary" class="d-flex align-items-center">
   <CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
   <div>
@@ -216,7 +228,7 @@ Use `variant="solid"` to change contextual colors to solid.
 <CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
 :::
 
-```markup
+```vue
 <CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
 <CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
 <CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
@@ -232,42 +244,24 @@ Use `variant="solid"` to change contextual colors to solid.
 Alerts can also be easily dismissed. Just add the `dismissible` prop.
 
 ::: demo
-<CAlert color="warning" dismissible @close="alert">
+<CAlert color="warning" dismissible @close="message">
   <strong>Go right ahead</strong> and click that dimiss over there on the right.
 </CAlert>
 :::
 
-```markup
-<CAlert color="warning" dismissible @close="alert">
-  <strong>Go right ahead</strong> and click that dimiss over there on the right.
-</CAlert>
-
-<script>
-  export default {
-    methods: {
-      alert () {
-        alert("👋 Well, hi there! Thanks for dismissing me.")
-      },
-    }
+```vue
+<script setup>
+  const message = () => {
+    alert("👋 Well, hi there! Thanks for dismissing me.")
   }
 </script>
+<template>
+  <CAlert color="warning" dismissible @close="message">
+    <strong>Go right ahead</strong> and click that dimiss over there on the right.
+  </CAlert>
+</template>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        liveExampleVisible: false,
-      }
-    },
-    methods: {
-      alert () {
-        alert("👋 Well, hi there! Thanks for dismissing me.")
-      },
-    }
-  }
-</script>
-
 ## Customizing
 
 ### CSS variables
@@ -279,9 +273,9 @@ Vue alerts use local CSS variables on `.alert` for enhanced real-time customizat
 #### How to use CSS variables
 
 ```js
-const vars = { 
+const vars = {
   '--my-css-var': 10,
-  '--my-another-css-var': "red" 
+  '--my-another-css-var': "red"
 }
 return <CAlert :style="vars">...</CAlert>
 ```
@@ -294,4 +288,12 @@ return <CAlert :style="vars">...</CAlert>
 
 !!!include(./api/alert/CAlert.api.md)!!!
 
-!!!include(./api/alert/CAlertHeading.api.md)!!!
\ No newline at end of file
+!!!include(./api/alert/CAlertHeading.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const liveExampleVisible = ref(false)
+  const message = () => {
+    alert("👋 Well, hi there! Thanks for dismissing me.")
+  }
+</script>
diff --git a/packages/docs/components/collapse.md b/packages/docs/components/collapse.md
index 162b1a16..0dffb5d0 100644
--- a/packages/docs/components/collapse.md
+++ b/packages/docs/components/collapse.md
@@ -28,6 +28,10 @@ You can use a link or a button component.
 </CCollapse>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(false)
+</script>
 <template>
   <CButton color="primary" href="#" @click.prevent="visible = !visible">Link</CButton>
   <CButton color="primary" @click="visible = !visible">Button</CButton>
@@ -41,15 +45,6 @@ You can use a link or a button component.
     </CCard>
   </CCollapse>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visible: false,
-      }
-    }
-  }
-</script> 
 ```
 
 ## Horizontal
@@ -69,6 +64,10 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
 </div>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleHorizontal = ref(false)
+</script>
 <template>
   <CButton class="mb-3" color="primary" aria-expanded={visible} aria-controls="collapseWidthExample" @click="visibleHorizontal = !visibleHorizontal">Button</CButton>
   <div style="min-height: 120px">
@@ -81,15 +80,6 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
     </CCollapse>
   </div>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleHorizontal: false,
-      }
-    }
-  }
-</script>
 ```
 
 ## Multiple targets
@@ -132,6 +122,11 @@ A `<CButton>` can show and hide multiple elements.
 </CRow>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleA = ref(false)
+  const visibleB = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
   <CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
@@ -166,32 +161,17 @@ A `<CButton>` can show and hide multiple elements.
       </CCollapse>
     </CCol>
   </CRow>
-</template>  
-<script>
-  export default {
-    data() {
-      return { 
-        visibleA: false,
-        visibleB: false,
-      }
-    }
-  }
-</script>
+</template>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        visible: false,
-        visibleHorizontal: false,
-        visibleA: false,
-        visibleB: false,
-      }
-    }
-  }
-</script>
-
 ## API
 
-!!!include(./api/collapse/CCollapse.api.md)!!!
\ No newline at end of file
+!!!include(./api/collapse/CCollapse.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(false)
+  const visibleHorizontal = ref(false)
+  const visibleA = ref(false)
+  const visibleB = ref(false)
+</script>
\ No newline at end of file
diff --git a/packages/docs/components/header.md b/packages/docs/components/header.md
index 5094d15c..8c45d6a3 100644
--- a/packages/docs/components/header.md
+++ b/packages/docs/components/header.md
@@ -68,60 +68,42 @@ Here's an example of all the sub-components included in a responsive light-theme
 </CHeader>
 :::
 ```vue
-<CHeader>
-  <CContainer fluid>
-    <CHeaderBrand href="#">Header</CHeaderBrand>
-    <CHeaderToggler @click="visible = !visible" />
-    <CCollapse class="header-collapse" :visible="visible">
-      <CHeaderNav>
-        <CNavItem>
-          <CNavLink href="#" active>
-            Home
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">Link</CNavLink>
-        </CNavItem>
-        <CDropdown togglerText="Dropdown" variant="nav-item">
-          <CDropdownItem href="#">Action</CDropdownItem>
-          <CDropdownItem href="#">Another action</CDropdownItem>
-          <CDropdownItem href="#">Something else here</CDropdownItem>
-        </CDropdown>
-        <CNavItem>
-          <CNavLink href="#" disabled>
-            Disabled
-          </CNavLink>
-        </CNavItem>
-      </CHeaderNav>
-      <!-- <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form> -->
-    </CCollapse>
-  </CContainer>
-</CHeader>
-<script>
-  export default {
-    data() {
-      return { 
-        visible: true,
-      }
-    }
-  }
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(true)
 </script>
+<template>
+  <CHeader>
+    <CContainer fluid>
+      <CHeaderBrand href="#">Header</CHeaderBrand>
+      <CHeaderToggler @click="visible = !visible" />
+      <CCollapse class="header-collapse" :visible="visible">
+        <CHeaderNav>
+          <CNavItem>
+            <CNavLink href="#" active>
+              Home
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Link</CNavLink>
+          </CNavItem>
+          <CDropdown togglerText="Dropdown" variant="nav-item">
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+          </CDropdown>
+          <CNavItem>
+            <CNavLink href="#" disabled>
+              Disabled
+            </CNavLink>
+          </CNavItem>
+        </CHeaderNav>
+      </CCollapse>
+    </CContainer>
+  </CHeader>
+</template>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        visible: true,
-      }
-    }
-  }
-</script>
-
-
 ## Customizing
 
 ### CSS variables
@@ -150,4 +132,9 @@ return <CHeader :style="vars">...</CHeader>
 
 !!!include(./api/header/CHeaderBrand.api.md)!!!
 
-!!!include(./api/header/CHeaderNav.api.md)!!!
\ No newline at end of file
+!!!include(./api/header/CHeaderNav.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(true)
+</script>
diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md
index 1d71d1d9..a68ced42 100644
--- a/packages/docs/components/icon.md
+++ b/packages/docs/components/icon.md
@@ -42,20 +42,9 @@ To use a single Vue.js icon, import the `<CIcon>` component and the desired icon
   <CIcon :icon="cilList" size="xl"/>
   <CIcon :icon="cilShieldAlt" size="xl"/>
 </template>
-<script>
-import { CIcon } from '@coreui/icons-vue';
-import { cilList, cilShieldAlt } from '@coreui/icons';
-export default {
-  components: {
-    CIcon
-  },
-  setup() {
-    return {
-      cilList,
-      cilShieldAlt,
-    }
-  }
-}
+<script setup>
+  import { CIcon } from '@coreui/icons-vue';
+  import { cilList, cilShieldAlt } from '@coreui/icons';
 </script>
 ```
 
@@ -67,21 +56,12 @@ To use all icons available in the CoreUI Vue.js Icons package, import the CIcon
 <template>
   <CIcon :icon="icon.cilList" size="xxl"/>
 </template>
-<script>
-import { CIcon } from '@coreui/icons-vue';
-import * as icon from '@coreui/icons';
-export default {
-  components: {
-    CIcon
-  },
-  setup() {
-    return {
-      icon,
-    }
-  }
-}
+<script setup>
+  import { CIcon } from '@coreui/icons-vue';
+  import * as icon from '@coreui/icons';
 </script>
 ```
+
 ### Icons object
 
 This way you import your needed Vue.js icons once and pass them to $root object on 'icons' key
@@ -147,7 +127,6 @@ With some [color utility classes](https://coreui.io/docs/utilities/colors/), you
 <CIcon :icon="icon.cilList" class="text-info" size="xl" />
 :::
 ```vue
-::: demo
 <CIcon :icon="cilList" size="xl" />
 <CIcon :icon="cilList" class="text-primary" size="xl" />
 <CIcon :icon="cilList" class="text-secondary" size="xl" />
@@ -155,7 +134,6 @@ With some [color utility classes](https://coreui.io/docs/utilities/colors/), you
 <CIcon :icon="cilList" class="text-danger" size="xl" />
 <CIcon :icon="cilList" class="text-warning" size="xl" />
 <CIcon :icon="cilList" class="text-info" size="xl" />
-:::
 ```
 
 #### CSS Variables
@@ -220,6 +198,9 @@ The `<CIconSvg`> component allows you to add custom SVG icons to your applicatio
 </CIconSvg>
 :::
 ```vue
+<script setup>
+  import { CIconSvg } from '@coreui/icons-vue';
+</script>
 <template>
   <CIconSvg size="4xl">
     <svg
@@ -243,14 +224,6 @@ The `<CIconSvg`> component allows you to add custom SVG icons to your applicatio
     </svg>
   </CIconSvg>
 </template>
-<script>
-  import { CIconSvg } from '@coreui/icons-vue';
-  export default {
-    components: {
-      CIconSvg
-    }
-  }
-</script>
 ```
 
 ## Available icons
@@ -319,38 +292,22 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats
   </CTabPane>
 </CTabContent>
 
-<script>
-import { ref } from 'vue'
-import { CIcon } from '@coreui/icons-vue';
-import * as icon from '@coreui/icons';
-export default {
-  components: {
-    CIcon
-  },
-  setup() {
-    const linearIcons = ['cilAccountLogout', 'cilActionRedo', 'cilActionUndo', 'cilAddressBook', 'cilAirplaneModeOff', 'cilAirplaneMode', 'cilAirplay', 'cilAlarm', 'cilAlbum', 'cilAlignCenter', 'cilAlignLeft', 'cilAlignRight', 'cilAmericanFootball', 'cilAnimal', 'cilAperture', 'cilApple', 'cilApplicationsSettings', 'cilApplications', 'cilAppsSettings', 'cilApps', 'cilArrowBottom', 'cilArrowCircleBottom', 'cilArrowCircleLeft', 'cilArrowCircleRight', 'cilArrowCircleTop', 'cilArrowLeft', 'cilArrowRight', 'cilArrowThickBottom', 'cilArrowThickFromBottom', 'cilArrowThickFromLeft', 'cilArrowThickFromRight', 'cilArrowThickFromTop', 'cilArrowThickLeft', 'cilArrowThickRight', 'cilArrowThickToBottom', 'cilArrowThickToLeft', 'cilArrowThickToRight', 'cilArrowThickToTop', 'cilArrowThickTop', 'cilArrowTop', 'cilAssistiveListeningSystem', 'cilAsteriskCircle', 'cilAsterisk', 'cilAt', 'cilAudioDescription', 'cilAudioSpectrum', 'cilAudio', 'cilAvTimer', 'cilBabyCarriage', 'cilBaby', 'cilBackspace', 'cilBadge', 'cilBalanceScale', 'cilBan', 'cilBank', 'cilBarChart', 'cilBarcode', 'cilBaseball', 'cilBasket', 'cilBasketball', 'cilBath', 'cilBathroom', 'cilBattery0', 'cilBattery3', 'cilBattery5', 'cilBatteryAlert', 'cilBatteryEmpty', 'cilBatteryFull', 'cilBatterySlash', 'cilBeachAccess', 'cilBeaker', 'cilBed', 'cilBellExclamation', 'cilBell', 'cilBike', 'cilBirthdayCake', 'cilBlind', 'cilBluetooth', 'cilBlurCircular', 'cilBlurLinear', 'cilBlur', 'cilBoatAlt', 'cilBold', 'cilBoltCircle', 'cilBolt', 'cilBook', 'cilBookmark', 'cilBorderAll', 'cilBorderBottom', 'cilBorderClear', 'cilBorderHorizontal', 'cilBorderInner', 'cilBorderLeft', 'cilBorderOuter', 'cilBorderRight', 'cilBorderStyle', 'cilBorderTop', 'cilBorderVertical', 'cilBowling', 'cilBraille', 'cilBriefcase', 'cilBrightness', 'cilBritishPound', 'cilBrowser', 'cilBrushAlt', 'cilBrush', 'cilBug', 'cilBuilding', 'cilBullhorn', 'cilBurger', 'cilBurn', 'cilBusAlt', 'cilCalculator', 'cilCalendarCheck', 'cilCalendar', 'cilCameraControl', 'cilCameraRoll', 'cilCamera', 'cilCarAlt', 'cilCaretBottom', 'cilCaretLeft', 'cilCaretRight', 'cilCaretTop', 'cilCart', 'cilCash', 'cilCasino', 'cilCast', 'cilCat', 'cilCc', 'cilCenterFocus', 'cilChartLine', 'cilChartPie', 'cilChart', 'cilChatBubble', 'cilCheckAlt', 'cilCheckCircle', 'cilCheck', 'cilChevronBottom', 'cilChevronCircleDownAlt', 'cilChevronCircleLeftAlt', 'cilChevronCircleRightAlt', 'cilChevronCircleUpAlt', 'cilChevronDoubleDown', 'cilChevronDoubleLeft', 'cilChevronDoubleRight', 'cilChevronDoubleUp', 'cilChevronLeft', 'cilChevronRight', 'cilChevronTop', 'cilChildFriendly', 'cilChild', 'cilCircle', 'cilClearAll', 'cilClipboard', 'cilClock', 'cilClone', 'cilClosedCaptioning', 'cilCloudDownload', 'cilCloudUpload', 'cilCloud', 'cilCloudy', 'cilCode', 'cilCoffee', 'cilCog', 'cilColorBorder', 'cilColorFill', 'cilColorPalette', 'cilColumns', 'cilCommand', 'cilCommentBubble', 'cilCommentSquare', 'cilCompass', 'cilCompress', 'cilContact', 'cilContrast', 'cilControl', 'cilCopy', 'cilCouch', 'cilCreditCard', 'cilCropRotate', 'cilCrop', 'cilCursorMove', 'cilCursor', 'cilCut', 'cilDataTransferDown', 'cilDataTransferUp', 'cilDeaf', 'cilDelete', 'cilDescription', 'cilDevices', 'cilDialpad', 'cilDiamond', 'cilDinner', 'cilDisabled', 'cilDog', 'cilDollar', 'cilDoor', 'cilDoubleQuoteSansLeft', 'cilDoubleQuoteSansRight', 'cilDrinkAlcohol', 'cilDrink', 'cilDrop', 'cilEco', 'cilEducation', 'cilElevator', 'cilEnvelopeClosed', 'cilEnvelopeLetter', 'cilEnvelopeOpen', 'cilEqualizer', 'cilEthernet', 'cilEuro', 'cilExcerpt', 'cilExitToApp', 'cilExpandDown', 'cilExpandLeft', 'cilExpandRight', 'cilExpandUp', 'cilExposure', 'cilExternalLink', 'cilEyedropper', 'cilFaceDead', 'cilFace', 'cilFactorySlash', 'cilFactory', 'cilFastfood', 'cilFax', 'cilFeaturedPlaylist', 'cilFile', 'cilFilterFrames', 'cilFilterPhoto', 'cilFilterSquare', 'cilFilterX', 'cilFilter', 'cilFindInPage', 'cilFingerprint', 'cilFire', 'cilFlagAlt', 'cilFlightTakeoff', 'cilFlipToBack', 'cilFlipToFront', 'cilFlip', 'cilFlower', 'cilFolderOpen', 'cilFolder', 'cilFont', 'cilFootball', 'cilFork', 'cilFridge', 'cilFrown', 'cilFullscreenExit', 'cilFullscreen', 'cilFunctionsAlt', 'cilFunctions', 'cilGamepad', 'cilGarage', 'cilGem', 'cilGif', 'cilGift', 'cilGlobeAlt', 'cilGolfAlt', 'cilGolf', 'cilGradient', 'cilGrain', 'cilGraph', 'cilGridSlash', 'cilGrid', 'cilGroup', 'cilHamburgerMenu', 'cilHandPointDown', 'cilHandPointLeft', 'cilHandPointRight', 'cilHandPointUp', 'cilHappy', 'cilHd', 'cilHdr', 'cilHeader', 'cilHeadphones', 'cilHealing', 'cilHeart', 'cilHighlighter', 'cilHighligt', 'cilHistory', 'cilHome', 'cilHospital', 'cilHotTub', 'cilHouse', 'cilHttps', 'cilImageBroken', 'cilImagePlus', 'cilImage', 'cilInbox', 'cilIndentDecrease', 'cilIndentIncrease', 'cilIndustrySlash', 'cilIndustry', 'cilInfinity', 'cilInfo', 'cilInputHdmi', 'cilInputPower', 'cilInput', 'cilInstitution', 'cilItalic', 'cilJustifyCenter', 'cilJustifyLeft', 'cilJustifyRight', 'cilKeyboard', 'cilLan', 'cilLanguage', 'cilLaptop', 'cilLayers', 'cilLeaf', 'cilLemon', 'cilLevelDown', 'cilLevelUp', 'cilLibraryAdd', 'cilLibraryBuilding', 'cilLibrary', 'cilLifeRing', 'cilLightbulb', 'cilLineSpacing', 'cilLineStyle', 'cilLineWeight', 'cilLinkAlt', 'cilLinkBroken', 'cilLink', 'cilListFilter', 'cilListHighPriority', 'cilListLowPriority', 'cilListNumberedRtl', 'cilListNumbered', 'cilListRich', 'cilList', 'cilLocationPin', 'cilLockLocked', 'cilLockUnlocked', 'cilLocomotive', 'cilLoop1', 'cilLoopCircular', 'cilLoop', 'cilLowVision', 'cilMagnifyingGlass', 'cilMap', 'cilMediaEject', 'cilMediaPause', 'cilMediaPlay', 'cilMediaRecord', 'cilMediaSkipBackward', 'cilMediaSkipForward', 'cilMediaStepBackward', 'cilMediaStepForward', 'cilMediaStop', 'cilMedicalCross', 'cilMeh', 'cilMemory', 'cilMenu', 'cilMic', 'cilMicrophone', 'cilMinus', 'cilMobileLandscape', 'cilMobile', 'cilMoney', 'cilMonitor', 'cilMoodBad', 'cilMoodGood', 'cilMoodVeryBad', 'cilMoodVeryGood', 'cilMoon', 'cilMouse', 'cilMouthSlash', 'cilMove', 'cilMovie', 'cilMugTea', 'cilMug', 'cilMusicNote', 'cilNewspaper', 'cilNoteAdd', 'cilNotes', 'cilObjectGroup', 'cilObjectUngroup', 'cilOpacity', 'cilOpentype', 'cilOptions', 'cilPaintBucket', 'cilPaint', 'cilPaperPlane', 'cilPaperclip', 'cilParagraph', 'cilPaw', 'cilPenAlt', 'cilPenNib', 'cilPen', 'cilPencil', 'cilPeople', 'cilPhone', 'cilPin', 'cilPizza', 'cilPlant', 'cilPlaylistAdd', 'cilPlus', 'cilPool', 'cilPowerStandby', 'cilPregnant', 'cilPrint', 'cilPushchair', 'cilPuzzle', 'cilQrCode', 'cilRain', 'cilRectangle', 'cilRecycle', 'cilReload', 'cilReportSlash', 'cilResizeBoth', 'cilResizeHeight', 'cilResizeWidth', 'cilRestaurant', 'cilRoom', 'cilRouter', 'cilRowing', 'cilRss', 'cilRuble', 'cilRunning', 'cilSad', 'cilSatelite', 'cilSave', 'cilSchool', 'cilScreenDesktop', 'cilScreenSmartphone', 'cilScrubber', 'cilSearch', 'cilSend', 'cilSettings', 'cilShareAll', 'cilShareAlt', 'cilShareBoxed', 'cilShare', 'cilShieldAlt', 'cilShortText', 'cilShower', 'cilSignLanguage', 'cilSignalCellular0', 'cilSignalCellular3', 'cilSignalCellular4', 'cilSim', 'cilSitemap', 'cilSmilePlus', 'cilSmile', 'cilSmokeFree', 'cilSmokeSlash', 'cilSmoke', 'cilSmokingRoom', 'cilSnowflake', 'cilSoccer', 'cilSofa', 'cilSortAlphaDown', 'cilSortAlphaUp', 'cilSortAscending', 'cilSortDescending', 'cilSortNumericDown', 'cilSortNumericUp', 'cilSpa', 'cilSpaceBar', 'cilSpeak', 'cilSpeaker', 'cilSpeech', 'cilSpeedometer', 'cilSpreadsheet', 'cilSquare', 'cilStarHalf', 'cilStar', 'cilStorage', 'cilStream', 'cilStrikethrough', 'cilSun', 'cilSwapHorizontal', 'cilSwapVertical', 'cilSwimming', 'cilSync', 'cilTablet', 'cilTag', 'cilTags', 'cilTask', 'cilTaxi', 'cilTennisBall', 'cilTennis', 'cilTerminal', 'cilTerrain', 'cilTextShapes', 'cilTextSize', 'cilTextSquare', 'cilTextStrike', 'cilText', 'cilThumbDown', 'cilThumbUp', 'cilToggleOff', 'cilToggleOn', 'cilToilet', 'cilTouchApp', 'cilTransfer', 'cilTranslate', 'cilTrash', 'cilTriangle', 'cilTruck', 'cilTv', 'cilUnderline', 'cilUsb', 'cilUserFemale', 'cilUserFollow', 'cilUserPlus', 'cilUserUnfollow', 'cilUserX', 'cilUser', 'cilVector', 'cilVerticalAlignBottom', 'cilVerticalAlignCenter', 'cilVerticalAlignTop', 'cilVideo', 'cilVideogame', 'cilViewColumn', 'cilViewModule', 'cilViewQuilt', 'cilViewStream', 'cilVoiceOverRecord', 'cilVoice', 'cilVolumeHigh', 'cilVolumeLow', 'cilVolumeOff', 'cilWalk', 'cilWallet', 'cilWallpaper', 'cilWarning', 'cilWatch', 'cilWc', 'cilWeightlifitng', 'cilWheelchair', 'cilWifiSignal0', 'cilWifiSignal1', 'cilWifiSignal2', 'cilWifiSignal3', 'cilWifiSignal4', 'cilWifiSignalOff', 'cilWindowMaximize', 'cilWindowMinimize', 'cilWindowRestore', 'cilWindow', 'cilWrapText', 'cilXCircle', 'cilX', 'cilYen', 'cilZoomIn', 'cilZoomOut', 'cilZoom']
-
-    const brandIcons = ['cib500px5', 'cib500px', 'cibAboutMe', 'cibAbstract', 'cibAcm', 'cibAddthis', 'cibAdguard', 'cibAdobeAcrobatReader', 'cibAdobeAfterEffects', 'cibAdobeAudition', 'cibAdobeCreativeCloud', 'cibAdobeDreamweaver', 'cibAdobeIllustrator', 'cibAdobeIndesign', 'cibAdobeLightroomClassic', 'cibAdobeLightroom', 'cibAdobePhotoshop', 'cibAdobePremiere', 'cibAdobeTypekit', 'cibAdobeXd', 'cibAdobe', 'cibAirbnb', 'cibAlgolia', 'cibAlipay', 'cibAllocine', 'cibAmazonAws', 'cibAmazonPay', 'cibAmazon', 'cibAmd', 'cibAmericanExpress', 'cibAnaconda', 'cibAnalogue', 'cibAndroidAlt', 'cibAndroid', 'cibAngellist', 'cibAngularUniversal', 'cibAngular', 'cibAnsible', 'cibApacheAirflow', 'cibApacheFlink', 'cibApacheSpark', 'cibApache', 'cibAppStoreIos', 'cibAppStore', 'cibAppleMusic', 'cibApplePay', 'cibApplePodcasts', 'cibApple', 'cibAppveyor', 'cibAral', 'cibArchLinux', 'cibArchiveOfOurOwn', 'cibArduino', 'cibArtstation', 'cibArxiv', 'cibAsana', 'cibAtAndT', 'cibAtlassian', 'cibAtom', 'cibAudible', 'cibAurelia', 'cibAuth0', 'cibAutomatic', 'cibAutotask', 'cibAventrix', 'cibAzureArtifacts', 'cibAzureDevops', 'cibAzurePipelines', 'cibBabel', 'cibBaidu', 'cibBamboo', 'cibBancontact', 'cibBandcamp', 'cibBasecamp', 'cibBathasu', 'cibBehance', 'cibBigCartel', 'cibBing', 'cibBit', 'cibBitbucket', 'cibBitcoin', 'cibBitdefender', 'cibBitly', 'cibBlackberry', 'cibBlender', 'cibBloggerB', 'cibBlogger', 'cibBluetoothB', 'cibBluetooth', 'cibBoeing', 'cibBoost', 'cibBootstrap', 'cibBower', 'cibBrandAi', 'cibBrave', 'cibBtc', 'cibBuddy', 'cibBuffer', 'cibBuyMeACoffee', 'cibBuysellads', 'cibBuzzfeed', 'cibC', 'cibCakephp', 'cibCampaignMonitor', 'cibCanva', 'cibCashapp', 'cibCassandra', 'cibCastro', 'cibCcAmazonPay', 'cibCcAmex', 'cibCcApplePay', 'cibCcDinersClub', 'cibCcDiscover', 'cibCcJcb', 'cibCcMastercard', 'cibCcPaypal', 'cibCcStripe', 'cibCcVisa', 'cibCentos', 'cibCevo', 'cibChase', 'cibChef', 'cibChromecast', 'cibCircle', 'cibCircleci', 'cibCirrusci', 'cibCisco', 'cibCivicrm', 'cibClockify', 'cibClojure', 'cibCloudbees', 'cibCloudflare', 'cibCmake', 'cibCoOp', 'cibCodacy', 'cibCodeClimate', 'cibCodecademy', 'cibCodecov', 'cibCodeigniter', 'cibCodepen', 'cibCoderwall', 'cibCodesandbox', 'cibCodeship', 'cibCodewars', 'cibCodio', 'cibCoffeescript', 'cibCommonWorkflowLanguage', 'cibComposer', 'cibCondaForge', 'cibConekta', 'cibConfluence', 'cibCoreuiC', 'cibCoreui', 'cibCoursera', 'cibCoveralls', 'cibCpanel', 'cibCplusplus', 'cibCreativeCommonsBy', 'cibCreativeCommonsNcEu', 'cibCreativeCommonsNcJp', 'cibCreativeCommonsNc', 'cibCreativeCommonsNd', 'cibCreativeCommonsPdAlt', 'cibCreativeCommonsPd', 'cibCreativeCommonsRemix', 'cibCreativeCommonsSa', 'cibCreativeCommonsSamplingPlus', 'cibCreativeCommonsSampling', 'cibCreativeCommonsShare', 'cibCreativeCommonsZero', 'cibCreativeCommons', 'cibCrunchbase', 'cibCrunchyroll', 'cibCss3Shiled', 'cibCss3', 'cibCsswizardry', 'cibD3Js', 'cibDailymotion', 'cibDashlane', 'cibDazn', 'cibDblp', 'cibDebian', 'cibDeepin', 'cibDeezer', 'cibDelicious', 'cibDell', 'cibDeno', 'cibDependabot', 'cibDesignerNews', 'cibDevTo', 'cibDeviantart', 'cibDevrant', 'cibDiaspora', 'cibDigg', 'cibDigitalOcean', 'cibDiscord', 'cibDiscourse', 'cibDiscover', 'cibDisqus', 'cibDisroot', 'cibDjango', 'cibDocker', 'cibDocusign', 'cibDotNet', 'cibDraugiemLv', 'cibDribbble', 'cibDrone', 'cibDropbox', 'cibDrupal', 'cibDtube', 'cibDuckduckgo', 'cibDynatrace', 'cibEbay', 'cibEclipseide', 'cibElasticCloud', 'cibElasticSearch', 'cibElasticStack', 'cibElastic', 'cibElectron', 'cibElementary', 'cibEleventy', 'cibEllo', 'cibElsevier', 'cibEmlakjet', 'cibEmpirekred', 'cibEnvato', 'cibEpicGames', 'cibEpson', 'cibEsea', 'cibEslint', 'cibEthereum', 'cibEtsy', 'cibEventStore', 'cibEventbrite', 'cibEvernote', 'cibEverplaces', 'cibEvry', 'cibExercism', 'cibExpertsExchange', 'cibExpo', 'cibEyeem', 'cibFSecure', 'cibFacebookF', 'cibFacebook', 'cibFaceit', 'cibFandango', 'cibFavro', 'cibFeathub', 'cibFedex', 'cibFedora', 'cibFeedly', 'cibFidoAlliance', 'cibFigma', 'cibFilezilla', 'cibFirebase', 'cibFitbit', 'cibFlask', 'cibFlattr', 'cibFlickr', 'cibFlipboard', 'cibFlutter', 'cibFnac', 'cibFoursquare', 'cibFramer', 'cibFreebsd', 'cibFreecodecamp', 'cibFurAffinity', 'cibFurryNetwork', 'cibGarmin', 'cibGatsby', 'cibGauges', 'cibGenius', 'cibGentoo', 'cibGeocaching', 'cibGerrit', 'cibGg', 'cibGhost', 'cibGimp', 'cibGit', 'cibGitea', 'cibGithub', 'cibGitkraken', 'cibGitlab', 'cibGitpod', 'cibGitter', 'cibGlassdoor', 'cibGlitch', 'cibGmail', 'cibGnuPrivacyGuard', 'cibGnuSocial', 'cibGnu', 'cibGo', 'cibGodotEngine', 'cibGogCom', 'cibGoldenline', 'cibGoodreads', 'cibGoogleAds', 'cibGoogleAllo', 'cibGoogleAnalytics', 'cibGoogleChrome', 'cibGoogleCloud', 'cibGoogleKeep', 'cibGooglePay', 'cibGooglePlay', 'cibGooglePodcasts', 'cibGoogle', 'cibGooglesCholar', 'cibGovUk', 'cibGradle', 'cibGrafana', 'cibGraphcool', 'cibGraphql', 'cibGrav', 'cibGravatar', 'cibGreenkeeper', 'cibGreensock', 'cibGroovy', 'cibGroupon', 'cibGrunt', 'cibGulp', 'cibGumroad', 'cibGumtree', 'cibHabr', 'cibHackaday', 'cibHackerearth', 'cibHackerone', 'cibHackerrank', 'cibHackhands', 'cibHackster', 'cibHappycow', 'cibHashnode', 'cibHaskell', 'cibHatenaBookmark', 'cibHaxe', 'cibHelm', 'cibHere', 'cibHeroku', 'cibHexo', 'cibHighly', 'cibHipchat', 'cibHitachi', 'cibHockeyapp', 'cibHomify', 'cibHootsuite', 'cibHotjar', 'cibHouzz', 'cibHp', 'cibHtml5Shield', 'cibHtml5', 'cibHtmlacademy', 'cibHuawei', 'cibHubspot', 'cibHulu', 'cibHumbleBundle', 'cibIata', 'cibIbm', 'cibIcloud', 'cibIconjar', 'cibIcq', 'cibIdeal', 'cibIfixit', 'cibImdb', 'cibIndeed', 'cibInkscape', 'cibInstacart', 'cibInstagram', 'cibInstapaper', 'cibIntel', 'cibIntellijidea', 'cibIntercom', 'cibInternetExplorer', 'cibInvision', 'cibIonic', 'cibIssuu', 'cibItchIo', 'cibJabber', 'cibJava', 'cibJavascript', 'cibJekyll', 'cibJenkins', 'cibJest', 'cibJet', 'cibJetbrains', 'cibJira', 'cibJoomla', 'cibJquery', 'cibJs', 'cibJsdelivr', 'cibJsfiddle', 'cibJson', 'cibJupyter', 'cibJustgiving', 'cibKaggle', 'cibKaios', 'cibKaspersky', 'cibKentico', 'cibKeras', 'cibKeybase', 'cibKeycdn', 'cibKhanAcademy', 'cibKibana', 'cibKickstarter', 'cibKik', 'cibKirby', 'cibKlout', 'cibKnown', 'cibKoFi', 'cibKodi', 'cibKoding', 'cibKotlin', 'cibKrita', 'cibKubernetes', 'cibLanyrd', 'cibLaravelHorizon', 'cibLaravelNova', 'cibLaravel', 'cibLastFm', 'cibLatex', 'cibLaunchpad', 'cibLeetcode', 'cibLenovo', 'cibLess', 'cibLetsEncrypt', 'cibLetterboxd', 'cibLgtm', 'cibLiberapay', 'cibLibrarything', 'cibLibreoffice', 'cibLine', 'cibLinkedinIn', 'cibLinkedin', 'cibLinuxFoundation', 'cibLinuxMint', 'cibLinux', 'cibLivejournal', 'cibLivestream', 'cibLogstash', 'cibLua', 'cibLumen', 'cibLyft', 'cibMacys', 'cibMagento', 'cibMagisk', 'cibMailRu', 'cibMailchimp', 'cibMakerbot', 'cibManjaro', 'cibMarkdown', 'cibMarketo', 'cibMastercard', 'cibMastodon', 'cibMaterialDesign', 'cibMathworks', 'cibMatrix', 'cibMattermost', 'cibMatternet', 'cibMaxcdn', 'cibMcafee', 'cibMediaTemple', 'cibMediafire', 'cibMediumM', 'cibMedium', 'cibMeetup', 'cibMega', 'cibMendeley', 'cibMessenger', 'cibMeteor', 'cibMicroBlog', 'cibMicrogenetics', 'cibMicrosoftEdge', 'cibMicrosoft', 'cibMinetest', 'cibMinutemailer', 'cibMix', 'cibMixcloud', 'cibMixer', 'cibMojang', 'cibMonero', 'cibMongodb', 'cibMonkeytie', 'cibMonogram', 'cibMonzo', 'cibMoo', 'cibMozillaFirefox', 'cibMozilla', 'cibMusescore', 'cibMxlinux', 'cibMyspace', 'cibMysql', 'cibNativescript', 'cibNec', 'cibNeo4J', 'cibNetflix', 'cibNetlify', 'cibNextJs', 'cibNextcloud', 'cibNextdoor', 'cibNginx', 'cibNim', 'cibNintendo3Ds', 'cibNintendoGamecube', 'cibNintendoSwitch', 'cibNintendo', 'cibNodeJs', 'cibNodeRed', 'cibNodemon', 'cibNokia', 'cibNotion', 'cibNpm', 'cibNucleo', 'cibNuget', 'cibNuxtJs', 'cibNvidia', 'cibOcaml', 'cibOctave', 'cibOctopusDeploy', 'cibOculus', 'cibOdnoklassniki', 'cibOpenAccess', 'cibOpenCollective', 'cibOpenId', 'cibOpenSourceInitiative', 'cibOpenstreetmap', 'cibOpensuse', 'cibOpenvpn', 'cibOpera', 'cibOpsgenie', 'cibOracle', 'cibOrcid', 'cibOrigin', 'cibOsi', 'cibOsmc', 'cibOvercast', 'cibOverleaf', 'cibOvh', 'cibPagekit', 'cibPalantir', 'cibPandora', 'cibPantheon', 'cibPatreon', 'cibPaypal', 'cibPeriscope', 'cibPhp', 'cibPicartoTv', 'cibPinboard', 'cibPingdom', 'cibPingup', 'cibPinterestP', 'cibPinterest', 'cibPivotaltracker', 'cibPlangrid', 'cibPlayerMe', 'cibPlayerfm', 'cibPlaystation', 'cibPlaystation3', 'cibPlaystation4', 'cibPlesk', 'cibPlex', 'cibPluralsight', 'cibPlurk', 'cibPocket', 'cibPostgresql', 'cibPostman', 'cibPostwoman', 'cibPowershell', 'cibPrettier', 'cibPrismic', 'cibProbot', 'cibProcesswire', 'cibProductHunt', 'cibProtoIo', 'cibProtonmail', 'cibProxmox', 'cibPypi', 'cibPython', 'cibPytorch', 'cibQgis', 'cibQiita', 'cibQq', 'cibQualcomm', 'cibQuantcast', 'cibQuantopian', 'cibQuarkus', 'cibQuora', 'cibQwiklabs', 'cibQzone', 'cibR', 'cibRadiopublic', 'cibRails', 'cibRaspberryPi', 'cibReact', 'cibReadTheDocs', 'cibReadme', 'cibRealm', 'cibReason', 'cibRedbubble', 'cibRedditAlt', 'cibReddit', 'cibRedhat', 'cibRedis', 'cibRedux', 'cibRenren', 'cibReverbnation', 'cibRiot', 'cibRipple', 'cibRiseup', 'cibRollupJs', 'cibRoots', 'cibRoundcube', 'cibRss', 'cibRstudio', 'cibRuby', 'cibRubygems', 'cibRunkeeper', 'cibRust', 'cibSafari', 'cibSahibinden', 'cibSalesforce', 'cibSaltstack', 'cibSamsungPay', 'cibSamsung', 'cibSap', 'cibSassAlt', 'cibSass', 'cibSaucelabs', 'cibScala', 'cibScaleway', 'cibScribd', 'cibScrutinizerci', 'cibSeagate', 'cibSega', 'cibSellfy', 'cibSemaphoreci', 'cibSensu', 'cibSentry', 'cibServerFault', 'cibShazam', 'cibShell', 'cibShopify', 'cibShowpad', 'cibSiemens', 'cibSignal', 'cibSinaWeibo', 'cibSitepoint', 'cibSketch', 'cibSkillshare', 'cibSkyliner', 'cibSkype', 'cibSlack', 'cibSlashdot', 'cibSlickpic', 'cibSlides', 'cibSlideshare', 'cibSmashingmagazine', 'cibSnapchat', 'cibSnapcraft', 'cibSnyk', 'cibSociety6', 'cibSocketIo', 'cibSogou', 'cibSolus', 'cibSongkick', 'cibSonos', 'cibSoundcloud', 'cibSourceforge', 'cibSourcegraph', 'cibSpacemacs', 'cibSpacex', 'cibSparkfun', 'cibSparkpost', 'cibSpdx', 'cibSpeakerDeck', 'cibSpectrum', 'cibSpotify', 'cibSpotlight', 'cibSpreaker', 'cibSpring', 'cibSprint', 'cibSquarespace', 'cibStackbit', 'cibStackexchange', 'cibStackoverflow', 'cibStackpath', 'cibStackshare', 'cibStadia', 'cibStatamic', 'cibStaticman', 'cibStatuspage', 'cibSteam', 'cibSteem', 'cibSteemit', 'cibStitcher', 'cibStorify', 'cibStorybook', 'cibStrapi', 'cibStrava', 'cibStripeS', 'cibStripe', 'cibStubhub', 'cibStumbleupon', 'cibStyleshare', 'cibStylus', 'cibSublimeText', 'cibSubversion', 'cibSuperuser', 'cibSvelte', 'cibSvg', 'cibSwagger', 'cibSwarm', 'cibSwift', 'cibSymantec', 'cibSymfony', 'cibSynology', 'cibTMobile', 'cibTableau', 'cibTails', 'cibTapas', 'cibTeamviewer', 'cibTed', 'cibTeespring', 'cibTelegramPlane', 'cibTelegram', 'cibTencentQq', 'cibTencentWeibo', 'cibTensorflow', 'cibTerraform', 'cibTesla', 'cibTheMighty', 'cibTheMovieDatabase', 'cibTidal', 'cibTiktok', 'cibTinder', 'cibTodoist', 'cibToggl', 'cibTopcoder', 'cibToptal', 'cibTor', 'cibToshiba', 'cibTrainerroad', 'cibTrakt', 'cibTravisci', 'cibTreehouse', 'cibTrello', 'cibTripadvisor', 'cibTrulia', 'cibTumblr', 'cibTwilio', 'cibTwitch', 'cibTwitter', 'cibTwoo', 'cibTypescript', 'cibTypo3', 'cibUber', 'cibUbisoft', 'cibUblockOrigin', 'cibUbuntu', 'cibUdacity', 'cibUdemy', 'cibUikit', 'cibUmbraco', 'cibUnity', 'cibUnrealEngine', 'cibUnsplash', 'cibUntappd', 'cibUpwork', 'cibUsb', 'cibV8', 'cibVagrant', 'cibVenmo', 'cibVerizon', 'cibViadeo', 'cibViber', 'cibVim', 'cibVimeoV', 'cibVimeo', 'cibVine', 'cibVirb', 'cibVisa', 'cibVisualStudioCode', 'cibVisualStudio', 'cibVk', 'cibVlc', 'cibVsco', 'cibVueJs', 'cibWattpad', 'cibWeasyl', 'cibWebcomponentsOrg', 'cibWebpack', 'cibWebstorm', 'cibWechat', 'cibWhatsapp', 'cibWhenIWork', 'cibWii', 'cibWiiu', 'cibWikipedia', 'cibWindows', 'cibWire', 'cibWireguard', 'cibWix', 'cibWolframLanguage', 'cibWolframMathematica', 'cibWolfram', 'cibWordpress', 'cibWpengine', 'cibXPack', 'cibXbox', 'cibXcode', 'cibXero', 'cibXiaomi', 'cibXing', 'cibXrp', 'cibXsplit', 'cibYCombinator', 'cibYahoo', 'cibYammer', 'cibYandex', 'cibYarn', 'cibYelp', 'cibYoutube', 'cibZalando', 'cibZapier', 'cibZeit', 'cibZendesk', 'cibZerply', 'cibZillow', 'cibZingat', 'cibZoom', 'cibZorin', 'cibZulip']
-    
-    const flagIcons = ['cifAd', 'cifAe', 'cifAf', 'cifAg', 'cifAl', 'cifAm', 'cifAo', 'cifAr', 'cifAt', 'cifAu', 'cifAz', 'cifBa', 'cifBb', 'cifBd', 'cifBe', 'cifBf', 'cifBg', 'cifBh', 'cifBi', 'cifBj', 'cifBn', 'cifBo', 'cifBr', 'cifBs', 'cifBt', 'cifBw', 'cifBy', 'cifBz', 'cifCa', 'cifCd', 'cifCf', 'cifCg', 'cifCh', 'cifCi', 'cifCl', 'cifCm', 'cifCn', 'cifCo', 'cifCr', 'cifCu', 'cifCv', 'cifCy', 'cifCz', 'cifDe', 'cifDj', 'cifDk', 'cifDm', 'cifDo', 'cifDz', 'cifEc', 'cifEe', 'cifEg', 'cifEr', 'cifEs', 'cifEt', 'cifFi', 'cifFj', 'cifFm', 'cifFr', 'cifGa', 'cifGb', 'cifGd', 'cifGe', 'cifGh', 'cifGm', 'cifGn', 'cifGq', 'cifGr', 'cifGt', 'cifGw', 'cifGy', 'cifHk', 'cifHn', 'cifHr', 'cifHt', 'cifHu', 'cifId', 'cifIe', 'cifIl', 'cifIn', 'cifIq', 'cifIr', 'cifIs', 'cifIt', 'cifJm', 'cifJo', 'cifJp', 'cifKe', 'cifKg', 'cifKh', 'cifKi', 'cifKm', 'cifKn', 'cifKp', 'cifKr', 'cifKw', 'cifKz', 'cifLa', 'cifLb', 'cifLc', 'cifLi', 'cifLk', 'cifLr', 'cifLs', 'cifLt', 'cifLu', 'cifLv', 'cifLy', 'cifMa', 'cifMc', 'cifMd', 'cifMe', 'cifMg', 'cifMh', 'cifMk', 'cifMl', 'cifMm', 'cifMn', 'cifMr', 'cifMt', 'cifMu', 'cifMv', 'cifMw', 'cifMx', 'cifMy', 'cifMz', 'cifNa', 'cifNe', 'cifNg', 'cifNi', 'cifNl', 'cifNo', 'cifNp', 'cifNr', 'cifNu', 'cifNz', 'cifOm', 'cifPa', 'cifPe', 'cifPg', 'cifPh', 'cifPk', 'cifPl', 'cifPt', 'cifPw', 'cifPy', 'cifQa', 'cifRo', 'cifRs', 'cifRu', 'cifRw', 'cifSa', 'cifSb', 'cifSc', 'cifSd', 'cifSe', 'cifSg', 'cifSi', 'cifSk', 'cifSl', 'cifSm', 'cifSn', 'cifSo', 'cifSr', 'cifSs', 'cifSt', 'cifSv', 'cifSy', 'cifSz', 'cifTd', 'cifTg', 'cifTh', 'cifTj', 'cifTl', 'cifTm', 'cifTn', 'cifTo', 'cifTr', 'cifTt', 'cifTv', 'cifTw', 'cifTz', 'cifUa', 'cifUg', 'cifUs', 'cifUy', 'cifUz', 'cifVa', 'cifVc', 'cifVe', 'cifVn', 'cifWs', 'cifXk', 'cifYe', 'cifZa', 'cifZm', 'cifZw']
+## API
 
+!!!include(./api/coreui-icons-vue/src/CIcon.api.md)!!!
 
-    const tabPaneActiveKey = ref(1)
-    
-    return {
-      tabPaneActiveKey,
-      linearIcons,
-      brandIcons,
-      flagIcons,
-      icon,
-    }
-  }
-}
-</script> 
+!!!include(./api/coreui-icons-vue/src/CIconSvg.api.md)!!!
 
+<script setup>
+  import { ref } from 'vue'
+  import { CIcon } from '@coreui/icons-vue';
+  import * as icon from '@coreui/icons';
 
-## API
+  const linearIcons = ['cilAccountLogout', 'cilActionRedo', 'cilActionUndo', 'cilAddressBook', 'cilAirplaneModeOff', 'cilAirplaneMode', 'cilAirplay', 'cilAlarm', 'cilAlbum', 'cilAlignCenter', 'cilAlignLeft', 'cilAlignRight', 'cilAmericanFootball', 'cilAnimal', 'cilAperture', 'cilApple', 'cilApplicationsSettings', 'cilApplications', 'cilAppsSettings', 'cilApps', 'cilArrowBottom', 'cilArrowCircleBottom', 'cilArrowCircleLeft', 'cilArrowCircleRight', 'cilArrowCircleTop', 'cilArrowLeft', 'cilArrowRight', 'cilArrowThickBottom', 'cilArrowThickFromBottom', 'cilArrowThickFromLeft', 'cilArrowThickFromRight', 'cilArrowThickFromTop', 'cilArrowThickLeft', 'cilArrowThickRight', 'cilArrowThickToBottom', 'cilArrowThickToLeft', 'cilArrowThickToRight', 'cilArrowThickToTop', 'cilArrowThickTop', 'cilArrowTop', 'cilAssistiveListeningSystem', 'cilAsteriskCircle', 'cilAsterisk', 'cilAt', 'cilAudioDescription', 'cilAudioSpectrum', 'cilAudio', 'cilAvTimer', 'cilBabyCarriage', 'cilBaby', 'cilBackspace', 'cilBadge', 'cilBalanceScale', 'cilBan', 'cilBank', 'cilBarChart', 'cilBarcode', 'cilBaseball', 'cilBasket', 'cilBasketball', 'cilBath', 'cilBathroom', 'cilBattery0', 'cilBattery3', 'cilBattery5', 'cilBatteryAlert', 'cilBatteryEmpty', 'cilBatteryFull', 'cilBatterySlash', 'cilBeachAccess', 'cilBeaker', 'cilBed', 'cilBellExclamation', 'cilBell', 'cilBike', 'cilBirthdayCake', 'cilBlind', 'cilBluetooth', 'cilBlurCircular', 'cilBlurLinear', 'cilBlur', 'cilBoatAlt', 'cilBold', 'cilBoltCircle', 'cilBolt', 'cilBook', 'cilBookmark', 'cilBorderAll', 'cilBorderBottom', 'cilBorderClear', 'cilBorderHorizontal', 'cilBorderInner', 'cilBorderLeft', 'cilBorderOuter', 'cilBorderRight', 'cilBorderStyle', 'cilBorderTop', 'cilBorderVertical', 'cilBowling', 'cilBraille', 'cilBriefcase', 'cilBrightness', 'cilBritishPound', 'cilBrowser', 'cilBrushAlt', 'cilBrush', 'cilBug', 'cilBuilding', 'cilBullhorn', 'cilBurger', 'cilBurn', 'cilBusAlt', 'cilCalculator', 'cilCalendarCheck', 'cilCalendar', 'cilCameraControl', 'cilCameraRoll', 'cilCamera', 'cilCarAlt', 'cilCaretBottom', 'cilCaretLeft', 'cilCaretRight', 'cilCaretTop', 'cilCart', 'cilCash', 'cilCasino', 'cilCast', 'cilCat', 'cilCc', 'cilCenterFocus', 'cilChartLine', 'cilChartPie', 'cilChart', 'cilChatBubble', 'cilCheckAlt', 'cilCheckCircle', 'cilCheck', 'cilChevronBottom', 'cilChevronCircleDownAlt', 'cilChevronCircleLeftAlt', 'cilChevronCircleRightAlt', 'cilChevronCircleUpAlt', 'cilChevronDoubleDown', 'cilChevronDoubleLeft', 'cilChevronDoubleRight', 'cilChevronDoubleUp', 'cilChevronLeft', 'cilChevronRight', 'cilChevronTop', 'cilChildFriendly', 'cilChild', 'cilCircle', 'cilClearAll', 'cilClipboard', 'cilClock', 'cilClone', 'cilClosedCaptioning', 'cilCloudDownload', 'cilCloudUpload', 'cilCloud', 'cilCloudy', 'cilCode', 'cilCoffee', 'cilCog', 'cilColorBorder', 'cilColorFill', 'cilColorPalette', 'cilColumns', 'cilCommand', 'cilCommentBubble', 'cilCommentSquare', 'cilCompass', 'cilCompress', 'cilContact', 'cilContrast', 'cilControl', 'cilCopy', 'cilCouch', 'cilCreditCard', 'cilCropRotate', 'cilCrop', 'cilCursorMove', 'cilCursor', 'cilCut', 'cilDataTransferDown', 'cilDataTransferUp', 'cilDeaf', 'cilDelete', 'cilDescription', 'cilDevices', 'cilDialpad', 'cilDiamond', 'cilDinner', 'cilDisabled', 'cilDog', 'cilDollar', 'cilDoor', 'cilDoubleQuoteSansLeft', 'cilDoubleQuoteSansRight', 'cilDrinkAlcohol', 'cilDrink', 'cilDrop', 'cilEco', 'cilEducation', 'cilElevator', 'cilEnvelopeClosed', 'cilEnvelopeLetter', 'cilEnvelopeOpen', 'cilEqualizer', 'cilEthernet', 'cilEuro', 'cilExcerpt', 'cilExitToApp', 'cilExpandDown', 'cilExpandLeft', 'cilExpandRight', 'cilExpandUp', 'cilExposure', 'cilExternalLink', 'cilEyedropper', 'cilFaceDead', 'cilFace', 'cilFactorySlash', 'cilFactory', 'cilFastfood', 'cilFax', 'cilFeaturedPlaylist', 'cilFile', 'cilFilterFrames', 'cilFilterPhoto', 'cilFilterSquare', 'cilFilterX', 'cilFilter', 'cilFindInPage', 'cilFingerprint', 'cilFire', 'cilFlagAlt', 'cilFlightTakeoff', 'cilFlipToBack', 'cilFlipToFront', 'cilFlip', 'cilFlower', 'cilFolderOpen', 'cilFolder', 'cilFont', 'cilFootball', 'cilFork', 'cilFridge', 'cilFrown', 'cilFullscreenExit', 'cilFullscreen', 'cilFunctionsAlt', 'cilFunctions', 'cilGamepad', 'cilGarage', 'cilGem', 'cilGif', 'cilGift', 'cilGlobeAlt', 'cilGolfAlt', 'cilGolf', 'cilGradient', 'cilGrain', 'cilGraph', 'cilGridSlash', 'cilGrid', 'cilGroup', 'cilHamburgerMenu', 'cilHandPointDown', 'cilHandPointLeft', 'cilHandPointRight', 'cilHandPointUp', 'cilHappy', 'cilHd', 'cilHdr', 'cilHeader', 'cilHeadphones', 'cilHealing', 'cilHeart', 'cilHighlighter', 'cilHighligt', 'cilHistory', 'cilHome', 'cilHospital', 'cilHotTub', 'cilHouse', 'cilHttps', 'cilImageBroken', 'cilImagePlus', 'cilImage', 'cilInbox', 'cilIndentDecrease', 'cilIndentIncrease', 'cilIndustrySlash', 'cilIndustry', 'cilInfinity', 'cilInfo', 'cilInputHdmi', 'cilInputPower', 'cilInput', 'cilInstitution', 'cilItalic', 'cilJustifyCenter', 'cilJustifyLeft', 'cilJustifyRight', 'cilKeyboard', 'cilLan', 'cilLanguage', 'cilLaptop', 'cilLayers', 'cilLeaf', 'cilLemon', 'cilLevelDown', 'cilLevelUp', 'cilLibraryAdd', 'cilLibraryBuilding', 'cilLibrary', 'cilLifeRing', 'cilLightbulb', 'cilLineSpacing', 'cilLineStyle', 'cilLineWeight', 'cilLinkAlt', 'cilLinkBroken', 'cilLink', 'cilListFilter', 'cilListHighPriority', 'cilListLowPriority', 'cilListNumberedRtl', 'cilListNumbered', 'cilListRich', 'cilList', 'cilLocationPin', 'cilLockLocked', 'cilLockUnlocked', 'cilLocomotive', 'cilLoop1', 'cilLoopCircular', 'cilLoop', 'cilLowVision', 'cilMagnifyingGlass', 'cilMap', 'cilMediaEject', 'cilMediaPause', 'cilMediaPlay', 'cilMediaRecord', 'cilMediaSkipBackward', 'cilMediaSkipForward', 'cilMediaStepBackward', 'cilMediaStepForward', 'cilMediaStop', 'cilMedicalCross', 'cilMeh', 'cilMemory', 'cilMenu', 'cilMic', 'cilMicrophone', 'cilMinus', 'cilMobileLandscape', 'cilMobile', 'cilMoney', 'cilMonitor', 'cilMoodBad', 'cilMoodGood', 'cilMoodVeryBad', 'cilMoodVeryGood', 'cilMoon', 'cilMouse', 'cilMouthSlash', 'cilMove', 'cilMovie', 'cilMugTea', 'cilMug', 'cilMusicNote', 'cilNewspaper', 'cilNoteAdd', 'cilNotes', 'cilObjectGroup', 'cilObjectUngroup', 'cilOpacity', 'cilOpentype', 'cilOptions', 'cilPaintBucket', 'cilPaint', 'cilPaperPlane', 'cilPaperclip', 'cilParagraph', 'cilPaw', 'cilPenAlt', 'cilPenNib', 'cilPen', 'cilPencil', 'cilPeople', 'cilPhone', 'cilPin', 'cilPizza', 'cilPlant', 'cilPlaylistAdd', 'cilPlus', 'cilPool', 'cilPowerStandby', 'cilPregnant', 'cilPrint', 'cilPushchair', 'cilPuzzle', 'cilQrCode', 'cilRain', 'cilRectangle', 'cilRecycle', 'cilReload', 'cilReportSlash', 'cilResizeBoth', 'cilResizeHeight', 'cilResizeWidth', 'cilRestaurant', 'cilRoom', 'cilRouter', 'cilRowing', 'cilRss', 'cilRuble', 'cilRunning', 'cilSad', 'cilSatelite', 'cilSave', 'cilSchool', 'cilScreenDesktop', 'cilScreenSmartphone', 'cilScrubber', 'cilSearch', 'cilSend', 'cilSettings', 'cilShareAll', 'cilShareAlt', 'cilShareBoxed', 'cilShare', 'cilShieldAlt', 'cilShortText', 'cilShower', 'cilSignLanguage', 'cilSignalCellular0', 'cilSignalCellular3', 'cilSignalCellular4', 'cilSim', 'cilSitemap', 'cilSmilePlus', 'cilSmile', 'cilSmokeFree', 'cilSmokeSlash', 'cilSmoke', 'cilSmokingRoom', 'cilSnowflake', 'cilSoccer', 'cilSofa', 'cilSortAlphaDown', 'cilSortAlphaUp', 'cilSortAscending', 'cilSortDescending', 'cilSortNumericDown', 'cilSortNumericUp', 'cilSpa', 'cilSpaceBar', 'cilSpeak', 'cilSpeaker', 'cilSpeech', 'cilSpeedometer', 'cilSpreadsheet', 'cilSquare', 'cilStarHalf', 'cilStar', 'cilStorage', 'cilStream', 'cilStrikethrough', 'cilSun', 'cilSwapHorizontal', 'cilSwapVertical', 'cilSwimming', 'cilSync', 'cilTablet', 'cilTag', 'cilTags', 'cilTask', 'cilTaxi', 'cilTennisBall', 'cilTennis', 'cilTerminal', 'cilTerrain', 'cilTextShapes', 'cilTextSize', 'cilTextSquare', 'cilTextStrike', 'cilText', 'cilThumbDown', 'cilThumbUp', 'cilToggleOff', 'cilToggleOn', 'cilToilet', 'cilTouchApp', 'cilTransfer', 'cilTranslate', 'cilTrash', 'cilTriangle', 'cilTruck', 'cilTv', 'cilUnderline', 'cilUsb', 'cilUserFemale', 'cilUserFollow', 'cilUserPlus', 'cilUserUnfollow', 'cilUserX', 'cilUser', 'cilVector', 'cilVerticalAlignBottom', 'cilVerticalAlignCenter', 'cilVerticalAlignTop', 'cilVideo', 'cilVideogame', 'cilViewColumn', 'cilViewModule', 'cilViewQuilt', 'cilViewStream', 'cilVoiceOverRecord', 'cilVoice', 'cilVolumeHigh', 'cilVolumeLow', 'cilVolumeOff', 'cilWalk', 'cilWallet', 'cilWallpaper', 'cilWarning', 'cilWatch', 'cilWc', 'cilWeightlifitng', 'cilWheelchair', 'cilWifiSignal0', 'cilWifiSignal1', 'cilWifiSignal2', 'cilWifiSignal3', 'cilWifiSignal4', 'cilWifiSignalOff', 'cilWindowMaximize', 'cilWindowMinimize', 'cilWindowRestore', 'cilWindow', 'cilWrapText', 'cilXCircle', 'cilX', 'cilYen', 'cilZoomIn', 'cilZoomOut', 'cilZoom']
 
-!!!include(./api/coreui-icons-vue/src/CIcon.api.md)!!!
+  const brandIcons = ['cib500px5', 'cib500px', 'cibAboutMe', 'cibAbstract', 'cibAcm', 'cibAddthis', 'cibAdguard', 'cibAdobeAcrobatReader', 'cibAdobeAfterEffects', 'cibAdobeAudition', 'cibAdobeCreativeCloud', 'cibAdobeDreamweaver', 'cibAdobeIllustrator', 'cibAdobeIndesign', 'cibAdobeLightroomClassic', 'cibAdobeLightroom', 'cibAdobePhotoshop', 'cibAdobePremiere', 'cibAdobeTypekit', 'cibAdobeXd', 'cibAdobe', 'cibAirbnb', 'cibAlgolia', 'cibAlipay', 'cibAllocine', 'cibAmazonAws', 'cibAmazonPay', 'cibAmazon', 'cibAmd', 'cibAmericanExpress', 'cibAnaconda', 'cibAnalogue', 'cibAndroidAlt', 'cibAndroid', 'cibAngellist', 'cibAngularUniversal', 'cibAngular', 'cibAnsible', 'cibApacheAirflow', 'cibApacheFlink', 'cibApacheSpark', 'cibApache', 'cibAppStoreIos', 'cibAppStore', 'cibAppleMusic', 'cibApplePay', 'cibApplePodcasts', 'cibApple', 'cibAppveyor', 'cibAral', 'cibArchLinux', 'cibArchiveOfOurOwn', 'cibArduino', 'cibArtstation', 'cibArxiv', 'cibAsana', 'cibAtAndT', 'cibAtlassian', 'cibAtom', 'cibAudible', 'cibAurelia', 'cibAuth0', 'cibAutomatic', 'cibAutotask', 'cibAventrix', 'cibAzureArtifacts', 'cibAzureDevops', 'cibAzurePipelines', 'cibBabel', 'cibBaidu', 'cibBamboo', 'cibBancontact', 'cibBandcamp', 'cibBasecamp', 'cibBathasu', 'cibBehance', 'cibBigCartel', 'cibBing', 'cibBit', 'cibBitbucket', 'cibBitcoin', 'cibBitdefender', 'cibBitly', 'cibBlackberry', 'cibBlender', 'cibBloggerB', 'cibBlogger', 'cibBluetoothB', 'cibBluetooth', 'cibBoeing', 'cibBoost', 'cibBootstrap', 'cibBower', 'cibBrandAi', 'cibBrave', 'cibBtc', 'cibBuddy', 'cibBuffer', 'cibBuyMeACoffee', 'cibBuysellads', 'cibBuzzfeed', 'cibC', 'cibCakephp', 'cibCampaignMonitor', 'cibCanva', 'cibCashapp', 'cibCassandra', 'cibCastro', 'cibCcAmazonPay', 'cibCcAmex', 'cibCcApplePay', 'cibCcDinersClub', 'cibCcDiscover', 'cibCcJcb', 'cibCcMastercard', 'cibCcPaypal', 'cibCcStripe', 'cibCcVisa', 'cibCentos', 'cibCevo', 'cibChase', 'cibChef', 'cibChromecast', 'cibCircle', 'cibCircleci', 'cibCirrusci', 'cibCisco', 'cibCivicrm', 'cibClockify', 'cibClojure', 'cibCloudbees', 'cibCloudflare', 'cibCmake', 'cibCoOp', 'cibCodacy', 'cibCodeClimate', 'cibCodecademy', 'cibCodecov', 'cibCodeigniter', 'cibCodepen', 'cibCoderwall', 'cibCodesandbox', 'cibCodeship', 'cibCodewars', 'cibCodio', 'cibCoffeescript', 'cibCommonWorkflowLanguage', 'cibComposer', 'cibCondaForge', 'cibConekta', 'cibConfluence', 'cibCoreuiC', 'cibCoreui', 'cibCoursera', 'cibCoveralls', 'cibCpanel', 'cibCplusplus', 'cibCreativeCommonsBy', 'cibCreativeCommonsNcEu', 'cibCreativeCommonsNcJp', 'cibCreativeCommonsNc', 'cibCreativeCommonsNd', 'cibCreativeCommonsPdAlt', 'cibCreativeCommonsPd', 'cibCreativeCommonsRemix', 'cibCreativeCommonsSa', 'cibCreativeCommonsSamplingPlus', 'cibCreativeCommonsSampling', 'cibCreativeCommonsShare', 'cibCreativeCommonsZero', 'cibCreativeCommons', 'cibCrunchbase', 'cibCrunchyroll', 'cibCss3Shiled', 'cibCss3', 'cibCsswizardry', 'cibD3Js', 'cibDailymotion', 'cibDashlane', 'cibDazn', 'cibDblp', 'cibDebian', 'cibDeepin', 'cibDeezer', 'cibDelicious', 'cibDell', 'cibDeno', 'cibDependabot', 'cibDesignerNews', 'cibDevTo', 'cibDeviantart', 'cibDevrant', 'cibDiaspora', 'cibDigg', 'cibDigitalOcean', 'cibDiscord', 'cibDiscourse', 'cibDiscover', 'cibDisqus', 'cibDisroot', 'cibDjango', 'cibDocker', 'cibDocusign', 'cibDotNet', 'cibDraugiemLv', 'cibDribbble', 'cibDrone', 'cibDropbox', 'cibDrupal', 'cibDtube', 'cibDuckduckgo', 'cibDynatrace', 'cibEbay', 'cibEclipseide', 'cibElasticCloud', 'cibElasticSearch', 'cibElasticStack', 'cibElastic', 'cibElectron', 'cibElementary', 'cibEleventy', 'cibEllo', 'cibElsevier', 'cibEmlakjet', 'cibEmpirekred', 'cibEnvato', 'cibEpicGames', 'cibEpson', 'cibEsea', 'cibEslint', 'cibEthereum', 'cibEtsy', 'cibEventStore', 'cibEventbrite', 'cibEvernote', 'cibEverplaces', 'cibEvry', 'cibExercism', 'cibExpertsExchange', 'cibExpo', 'cibEyeem', 'cibFSecure', 'cibFacebookF', 'cibFacebook', 'cibFaceit', 'cibFandango', 'cibFavro', 'cibFeathub', 'cibFedex', 'cibFedora', 'cibFeedly', 'cibFidoAlliance', 'cibFigma', 'cibFilezilla', 'cibFirebase', 'cibFitbit', 'cibFlask', 'cibFlattr', 'cibFlickr', 'cibFlipboard', 'cibFlutter', 'cibFnac', 'cibFoursquare', 'cibFramer', 'cibFreebsd', 'cibFreecodecamp', 'cibFurAffinity', 'cibFurryNetwork', 'cibGarmin', 'cibGatsby', 'cibGauges', 'cibGenius', 'cibGentoo', 'cibGeocaching', 'cibGerrit', 'cibGg', 'cibGhost', 'cibGimp', 'cibGit', 'cibGitea', 'cibGithub', 'cibGitkraken', 'cibGitlab', 'cibGitpod', 'cibGitter', 'cibGlassdoor', 'cibGlitch', 'cibGmail', 'cibGnuPrivacyGuard', 'cibGnuSocial', 'cibGnu', 'cibGo', 'cibGodotEngine', 'cibGogCom', 'cibGoldenline', 'cibGoodreads', 'cibGoogleAds', 'cibGoogleAllo', 'cibGoogleAnalytics', 'cibGoogleChrome', 'cibGoogleCloud', 'cibGoogleKeep', 'cibGooglePay', 'cibGooglePlay', 'cibGooglePodcasts', 'cibGoogle', 'cibGooglesCholar', 'cibGovUk', 'cibGradle', 'cibGrafana', 'cibGraphcool', 'cibGraphql', 'cibGrav', 'cibGravatar', 'cibGreenkeeper', 'cibGreensock', 'cibGroovy', 'cibGroupon', 'cibGrunt', 'cibGulp', 'cibGumroad', 'cibGumtree', 'cibHabr', 'cibHackaday', 'cibHackerearth', 'cibHackerone', 'cibHackerrank', 'cibHackhands', 'cibHackster', 'cibHappycow', 'cibHashnode', 'cibHaskell', 'cibHatenaBookmark', 'cibHaxe', 'cibHelm', 'cibHere', 'cibHeroku', 'cibHexo', 'cibHighly', 'cibHipchat', 'cibHitachi', 'cibHockeyapp', 'cibHomify', 'cibHootsuite', 'cibHotjar', 'cibHouzz', 'cibHp', 'cibHtml5Shield', 'cibHtml5', 'cibHtmlacademy', 'cibHuawei', 'cibHubspot', 'cibHulu', 'cibHumbleBundle', 'cibIata', 'cibIbm', 'cibIcloud', 'cibIconjar', 'cibIcq', 'cibIdeal', 'cibIfixit', 'cibImdb', 'cibIndeed', 'cibInkscape', 'cibInstacart', 'cibInstagram', 'cibInstapaper', 'cibIntel', 'cibIntellijidea', 'cibIntercom', 'cibInternetExplorer', 'cibInvision', 'cibIonic', 'cibIssuu', 'cibItchIo', 'cibJabber', 'cibJava', 'cibJavascript', 'cibJekyll', 'cibJenkins', 'cibJest', 'cibJet', 'cibJetbrains', 'cibJira', 'cibJoomla', 'cibJquery', 'cibJs', 'cibJsdelivr', 'cibJsfiddle', 'cibJson', 'cibJupyter', 'cibJustgiving', 'cibKaggle', 'cibKaios', 'cibKaspersky', 'cibKentico', 'cibKeras', 'cibKeybase', 'cibKeycdn', 'cibKhanAcademy', 'cibKibana', 'cibKickstarter', 'cibKik', 'cibKirby', 'cibKlout', 'cibKnown', 'cibKoFi', 'cibKodi', 'cibKoding', 'cibKotlin', 'cibKrita', 'cibKubernetes', 'cibLanyrd', 'cibLaravelHorizon', 'cibLaravelNova', 'cibLaravel', 'cibLastFm', 'cibLatex', 'cibLaunchpad', 'cibLeetcode', 'cibLenovo', 'cibLess', 'cibLetsEncrypt', 'cibLetterboxd', 'cibLgtm', 'cibLiberapay', 'cibLibrarything', 'cibLibreoffice', 'cibLine', 'cibLinkedinIn', 'cibLinkedin', 'cibLinuxFoundation', 'cibLinuxMint', 'cibLinux', 'cibLivejournal', 'cibLivestream', 'cibLogstash', 'cibLua', 'cibLumen', 'cibLyft', 'cibMacys', 'cibMagento', 'cibMagisk', 'cibMailRu', 'cibMailchimp', 'cibMakerbot', 'cibManjaro', 'cibMarkdown', 'cibMarketo', 'cibMastercard', 'cibMastodon', 'cibMaterialDesign', 'cibMathworks', 'cibMatrix', 'cibMattermost', 'cibMatternet', 'cibMaxcdn', 'cibMcafee', 'cibMediaTemple', 'cibMediafire', 'cibMediumM', 'cibMedium', 'cibMeetup', 'cibMega', 'cibMendeley', 'cibMessenger', 'cibMeteor', 'cibMicroBlog', 'cibMicrogenetics', 'cibMicrosoftEdge', 'cibMicrosoft', 'cibMinetest', 'cibMinutemailer', 'cibMix', 'cibMixcloud', 'cibMixer', 'cibMojang', 'cibMonero', 'cibMongodb', 'cibMonkeytie', 'cibMonogram', 'cibMonzo', 'cibMoo', 'cibMozillaFirefox', 'cibMozilla', 'cibMusescore', 'cibMxlinux', 'cibMyspace', 'cibMysql', 'cibNativescript', 'cibNec', 'cibNeo4J', 'cibNetflix', 'cibNetlify', 'cibNextJs', 'cibNextcloud', 'cibNextdoor', 'cibNginx', 'cibNim', 'cibNintendo3Ds', 'cibNintendoGamecube', 'cibNintendoSwitch', 'cibNintendo', 'cibNodeJs', 'cibNodeRed', 'cibNodemon', 'cibNokia', 'cibNotion', 'cibNpm', 'cibNucleo', 'cibNuget', 'cibNuxtJs', 'cibNvidia', 'cibOcaml', 'cibOctave', 'cibOctopusDeploy', 'cibOculus', 'cibOdnoklassniki', 'cibOpenAccess', 'cibOpenCollective', 'cibOpenId', 'cibOpenSourceInitiative', 'cibOpenstreetmap', 'cibOpensuse', 'cibOpenvpn', 'cibOpera', 'cibOpsgenie', 'cibOracle', 'cibOrcid', 'cibOrigin', 'cibOsi', 'cibOsmc', 'cibOvercast', 'cibOverleaf', 'cibOvh', 'cibPagekit', 'cibPalantir', 'cibPandora', 'cibPantheon', 'cibPatreon', 'cibPaypal', 'cibPeriscope', 'cibPhp', 'cibPicartoTv', 'cibPinboard', 'cibPingdom', 'cibPingup', 'cibPinterestP', 'cibPinterest', 'cibPivotaltracker', 'cibPlangrid', 'cibPlayerMe', 'cibPlayerfm', 'cibPlaystation', 'cibPlaystation3', 'cibPlaystation4', 'cibPlesk', 'cibPlex', 'cibPluralsight', 'cibPlurk', 'cibPocket', 'cibPostgresql', 'cibPostman', 'cibPostwoman', 'cibPowershell', 'cibPrettier', 'cibPrismic', 'cibProbot', 'cibProcesswire', 'cibProductHunt', 'cibProtoIo', 'cibProtonmail', 'cibProxmox', 'cibPypi', 'cibPython', 'cibPytorch', 'cibQgis', 'cibQiita', 'cibQq', 'cibQualcomm', 'cibQuantcast', 'cibQuantopian', 'cibQuarkus', 'cibQuora', 'cibQwiklabs', 'cibQzone', 'cibR', 'cibRadiopublic', 'cibRails', 'cibRaspberryPi', 'cibReact', 'cibReadTheDocs', 'cibReadme', 'cibRealm', 'cibReason', 'cibRedbubble', 'cibRedditAlt', 'cibReddit', 'cibRedhat', 'cibRedis', 'cibRedux', 'cibRenren', 'cibReverbnation', 'cibRiot', 'cibRipple', 'cibRiseup', 'cibRollupJs', 'cibRoots', 'cibRoundcube', 'cibRss', 'cibRstudio', 'cibRuby', 'cibRubygems', 'cibRunkeeper', 'cibRust', 'cibSafari', 'cibSahibinden', 'cibSalesforce', 'cibSaltstack', 'cibSamsungPay', 'cibSamsung', 'cibSap', 'cibSassAlt', 'cibSass', 'cibSaucelabs', 'cibScala', 'cibScaleway', 'cibScribd', 'cibScrutinizerci', 'cibSeagate', 'cibSega', 'cibSellfy', 'cibSemaphoreci', 'cibSensu', 'cibSentry', 'cibServerFault', 'cibShazam', 'cibShell', 'cibShopify', 'cibShowpad', 'cibSiemens', 'cibSignal', 'cibSinaWeibo', 'cibSitepoint', 'cibSketch', 'cibSkillshare', 'cibSkyliner', 'cibSkype', 'cibSlack', 'cibSlashdot', 'cibSlickpic', 'cibSlides', 'cibSlideshare', 'cibSmashingmagazine', 'cibSnapchat', 'cibSnapcraft', 'cibSnyk', 'cibSociety6', 'cibSocketIo', 'cibSogou', 'cibSolus', 'cibSongkick', 'cibSonos', 'cibSoundcloud', 'cibSourceforge', 'cibSourcegraph', 'cibSpacemacs', 'cibSpacex', 'cibSparkfun', 'cibSparkpost', 'cibSpdx', 'cibSpeakerDeck', 'cibSpectrum', 'cibSpotify', 'cibSpotlight', 'cibSpreaker', 'cibSpring', 'cibSprint', 'cibSquarespace', 'cibStackbit', 'cibStackexchange', 'cibStackoverflow', 'cibStackpath', 'cibStackshare', 'cibStadia', 'cibStatamic', 'cibStaticman', 'cibStatuspage', 'cibSteam', 'cibSteem', 'cibSteemit', 'cibStitcher', 'cibStorify', 'cibStorybook', 'cibStrapi', 'cibStrava', 'cibStripeS', 'cibStripe', 'cibStubhub', 'cibStumbleupon', 'cibStyleshare', 'cibStylus', 'cibSublimeText', 'cibSubversion', 'cibSuperuser', 'cibSvelte', 'cibSvg', 'cibSwagger', 'cibSwarm', 'cibSwift', 'cibSymantec', 'cibSymfony', 'cibSynology', 'cibTMobile', 'cibTableau', 'cibTails', 'cibTapas', 'cibTeamviewer', 'cibTed', 'cibTeespring', 'cibTelegramPlane', 'cibTelegram', 'cibTencentQq', 'cibTencentWeibo', 'cibTensorflow', 'cibTerraform', 'cibTesla', 'cibTheMighty', 'cibTheMovieDatabase', 'cibTidal', 'cibTiktok', 'cibTinder', 'cibTodoist', 'cibToggl', 'cibTopcoder', 'cibToptal', 'cibTor', 'cibToshiba', 'cibTrainerroad', 'cibTrakt', 'cibTravisci', 'cibTreehouse', 'cibTrello', 'cibTripadvisor', 'cibTrulia', 'cibTumblr', 'cibTwilio', 'cibTwitch', 'cibTwitter', 'cibTwoo', 'cibTypescript', 'cibTypo3', 'cibUber', 'cibUbisoft', 'cibUblockOrigin', 'cibUbuntu', 'cibUdacity', 'cibUdemy', 'cibUikit', 'cibUmbraco', 'cibUnity', 'cibUnrealEngine', 'cibUnsplash', 'cibUntappd', 'cibUpwork', 'cibUsb', 'cibV8', 'cibVagrant', 'cibVenmo', 'cibVerizon', 'cibViadeo', 'cibViber', 'cibVim', 'cibVimeoV', 'cibVimeo', 'cibVine', 'cibVirb', 'cibVisa', 'cibVisualStudioCode', 'cibVisualStudio', 'cibVk', 'cibVlc', 'cibVsco', 'cibVueJs', 'cibWattpad', 'cibWeasyl', 'cibWebcomponentsOrg', 'cibWebpack', 'cibWebstorm', 'cibWechat', 'cibWhatsapp', 'cibWhenIWork', 'cibWii', 'cibWiiu', 'cibWikipedia', 'cibWindows', 'cibWire', 'cibWireguard', 'cibWix', 'cibWolframLanguage', 'cibWolframMathematica', 'cibWolfram', 'cibWordpress', 'cibWpengine', 'cibXPack', 'cibXbox', 'cibXcode', 'cibXero', 'cibXiaomi', 'cibXing', 'cibXrp', 'cibXsplit', 'cibYCombinator', 'cibYahoo', 'cibYammer', 'cibYandex', 'cibYarn', 'cibYelp', 'cibYoutube', 'cibZalando', 'cibZapier', 'cibZeit', 'cibZendesk', 'cibZerply', 'cibZillow', 'cibZingat', 'cibZoom', 'cibZorin', 'cibZulip']
+    
+  const flagIcons = ['cifAd', 'cifAe', 'cifAf', 'cifAg', 'cifAl', 'cifAm', 'cifAo', 'cifAr', 'cifAt', 'cifAu', 'cifAz', 'cifBa', 'cifBb', 'cifBd', 'cifBe', 'cifBf', 'cifBg', 'cifBh', 'cifBi', 'cifBj', 'cifBn', 'cifBo', 'cifBr', 'cifBs', 'cifBt', 'cifBw', 'cifBy', 'cifBz', 'cifCa', 'cifCd', 'cifCf', 'cifCg', 'cifCh', 'cifCi', 'cifCl', 'cifCm', 'cifCn', 'cifCo', 'cifCr', 'cifCu', 'cifCv', 'cifCy', 'cifCz', 'cifDe', 'cifDj', 'cifDk', 'cifDm', 'cifDo', 'cifDz', 'cifEc', 'cifEe', 'cifEg', 'cifEr', 'cifEs', 'cifEt', 'cifFi', 'cifFj', 'cifFm', 'cifFr', 'cifGa', 'cifGb', 'cifGd', 'cifGe', 'cifGh', 'cifGm', 'cifGn', 'cifGq', 'cifGr', 'cifGt', 'cifGw', 'cifGy', 'cifHk', 'cifHn', 'cifHr', 'cifHt', 'cifHu', 'cifId', 'cifIe', 'cifIl', 'cifIn', 'cifIq', 'cifIr', 'cifIs', 'cifIt', 'cifJm', 'cifJo', 'cifJp', 'cifKe', 'cifKg', 'cifKh', 'cifKi', 'cifKm', 'cifKn', 'cifKp', 'cifKr', 'cifKw', 'cifKz', 'cifLa', 'cifLb', 'cifLc', 'cifLi', 'cifLk', 'cifLr', 'cifLs', 'cifLt', 'cifLu', 'cifLv', 'cifLy', 'cifMa', 'cifMc', 'cifMd', 'cifMe', 'cifMg', 'cifMh', 'cifMk', 'cifMl', 'cifMm', 'cifMn', 'cifMr', 'cifMt', 'cifMu', 'cifMv', 'cifMw', 'cifMx', 'cifMy', 'cifMz', 'cifNa', 'cifNe', 'cifNg', 'cifNi', 'cifNl', 'cifNo', 'cifNp', 'cifNr', 'cifNu', 'cifNz', 'cifOm', 'cifPa', 'cifPe', 'cifPg', 'cifPh', 'cifPk', 'cifPl', 'cifPt', 'cifPw', 'cifPy', 'cifQa', 'cifRo', 'cifRs', 'cifRu', 'cifRw', 'cifSa', 'cifSb', 'cifSc', 'cifSd', 'cifSe', 'cifSg', 'cifSi', 'cifSk', 'cifSl', 'cifSm', 'cifSn', 'cifSo', 'cifSr', 'cifSs', 'cifSt', 'cifSv', 'cifSy', 'cifSz', 'cifTd', 'cifTg', 'cifTh', 'cifTj', 'cifTl', 'cifTm', 'cifTn', 'cifTo', 'cifTr', 'cifTt', 'cifTv', 'cifTw', 'cifTz', 'cifUa', 'cifUg', 'cifUs', 'cifUy', 'cifUz', 'cifVa', 'cifVc', 'cifVe', 'cifVn', 'cifWs', 'cifXk', 'cifYe', 'cifZa', 'cifZm', 'cifZw']
 
-!!!include(./api/coreui-icons-vue/src/CIconSvg.api.md)!!!
\ No newline at end of file
+  const tabPaneActiveKey = ref(1)
+</script> 
\ No newline at end of file
diff --git a/packages/docs/components/modal.md b/packages/docs/components/modal.md
index 72ea1b66..07e19ad8 100644
--- a/packages/docs/components/modal.md
+++ b/packages/docs/components/modal.md
@@ -60,7 +60,11 @@ Toggle a working modal demo by clicking the button below. It will slide down and
   </CModalFooter>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleLiveDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
   <CModal 
@@ -80,15 +84,6 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleLiveDemo: false,
-      }
-    }
-  }
-</script>
 ```
 ### Static backdrop
 
@@ -114,7 +109,11 @@ If you set `backdrop` property to `static`, your modal will behave as though the
   </CModalFooter>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleStaticBackdropDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
   <CModal 
@@ -135,15 +134,6 @@ If you set `backdrop` property to `static`, your modal will behave as though the
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleStaticBackdropDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Scrolling long content
@@ -248,7 +238,11 @@ When modals become too long for the user's viewport or device, they scroll indep
   </CModalBody>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleScrollingLongContentDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
   <CModal 
@@ -347,15 +341,6 @@ When modals become too long for the user's viewport or device, they scroll indep
     </CModalBody>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleScrollingLongContentDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 You can also create a scrollable modal that allows scroll the modal body by adding `scrollable` prop.
@@ -459,7 +444,11 @@ You can also create a scrollable modal that allows scroll the modal body by addi
   </CModalBody>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleScrollableDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
   <CModal
@@ -559,15 +548,6 @@ You can also create a scrollable modal that allows scroll the modal body by addi
     </CModalBody>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleScrollableDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Vertically centered
@@ -596,7 +576,11 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
   </CModalFooter>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleVerticallyCenteredDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
   <CModal
@@ -619,15 +603,6 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleVerticallyCenteredDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ::: demo
@@ -653,7 +628,11 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
   </CModalFooter>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleVerticallyCenteredScrollableDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
   <CModal 
@@ -677,15 +656,6 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleVerticallyCenteredScrollableDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Tooltips and popovers
@@ -719,7 +689,11 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
   </CModalFooter>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleTooltipsAndPopoversDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleTooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
   <CModal
@@ -747,15 +721,6 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleTooltipsAndPopoversDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Toggle between modals
@@ -811,6 +776,11 @@ Toggle between multiple modals with some clever placement of the `visible` props
 </CModal>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleToggleBetweenModalsDemo1 = ref(false)
+  const visibleToggleBetweenModalsDemo2 = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleToggleBetweenModalsDemo1 = true }">Open first modal</CButton>
   <CModal
@@ -859,16 +829,6 @@ Toggle between multiple modals with some clever placement of the `visible` props
     </CModalFooter>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleToggleBetweenModalsDemo1: false,
-        visibleToggleBetweenModalsDemo2: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Change animation
@@ -968,7 +928,13 @@ Modals have three optional sizes, available via modifier classes to be placed on
   </CModalBody>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const xlDemo = ref(false)
+  const lgDemo = ref(false)
+  const smDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
   <CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
@@ -1013,17 +979,6 @@ Modals have three optional sizes, available via modifier classes to be placed on
     </CModalBody>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        xlDemo: false,
-        lgDemo: false,
-        smDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
 ## Fullscreen Modal
@@ -1151,7 +1106,16 @@ Another override is the option to pop up a modal that covers the user viewport,
   </CModalBody>
 </CModal>
 :::
-``` vue
+```vue
+<script setup>
+  import { ref } from 'vue'
+  const fullscreenDemo = ref(false)
+  const fullscreenSmDemo = ref(false)
+  const fullscreenMdDemo = ref(false)
+  const fullscreenLgDemo = ref(false)
+  const fullscreenXlDemo = ref(false)
+  const fullscreenXxlDemo = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
   <CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
@@ -1238,49 +1202,8 @@ Another override is the option to pop up a modal that covers the user viewport,
     </CModalBody>
   </CModal>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        fullscreenDemo: false,
-        fullscreenSmDemo: false,
-        fullscreenMdDemo: false,
-        fullscreenLgDemo: false,
-        fullscreenXlDemo: false,
-        fullscreenXxlDemo: false,
-      }
-    }
-  }
-</script>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        visibleLiveDemo: false,
-        visibleStaticBackdropDemo: false,
-        visibleScrollingLongContentDemo: false,
-        visibleScrollableDemo: false,
-        visibleVerticallyCenteredDemo: false,
-        visibleVerticallyCenteredScrollableDemo: false,
-        visibleTooltipsAndPopoversDemo: false,
-        visibleToggleBetweenModalsDemo1: false,
-        visibleToggleBetweenModalsDemo2: false,
-        xlDemo: false,
-        lgDemo: false,
-        smDemo: false,
-        fullscreenDemo: false,
-        fullscreenSmDemo: false,
-        fullscreenMdDemo: false,
-        fullscreenLgDemo: false,
-        fullscreenXlDemo: false,
-        fullscreenXxlDemo: false,
-      }
-    }
-  }
-</script>
-
 ## Customizing
 
 ### CSS variables
@@ -1318,3 +1241,25 @@ return <CModal :style="vars">...</CModal>
 !!!include(./api/modal/CModalHeader.api.md)!!!
 
 !!!include(./api/modal/CModalTitle.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const visibleLiveDemo = ref(false)
+  const visibleStaticBackdropDemo = ref(false)
+  const visibleScrollingLongContentDemo = ref(false)
+  const visibleScrollableDemo = ref(false)
+  const visibleVerticallyCenteredDemo = ref(false)
+  const visibleVerticallyCenteredScrollableDemo = ref(false)
+  const visibleTooltipsAndPopoversDemo = ref(false)
+  const visibleToggleBetweenModalsDemo1 = ref(false)
+  const visibleToggleBetweenModalsDemo2 = ref(false)
+  const xlDemo = ref(false)
+  const lgDemo = ref(false)
+  const smDemo = ref(false)
+  const fullscreenDemo = ref(false)
+  const fullscreenSmDemo = ref(false)
+  const fullscreenMdDemo = ref(false)
+  const fullscreenLgDemo = ref(false)
+  const fullscreenXlDemo = ref(false)
+  const fullscreenXxlDemo = ref(false)
+</script>
diff --git a/packages/docs/components/navbar.md b/packages/docs/components/navbar.md
index 4c32c36d..ce2e636a 100644
--- a/packages/docs/components/navbar.md
+++ b/packages/docs/components/navbar.md
@@ -59,42 +59,48 @@ Here's an example of all the sub-components included in a responsive light-theme
 </CNavbar>
 :::
 ```vue
-<CNavbar expand="lg" color-scheme="light" class="bg-light">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
-    <CNavbarToggler @click="visible = !visible"/>
-    <CCollapse class="navbar-collapse" :visible="visible">
-      <CNavbarNav>
-        <CNavItem>
-          <CNavLink href="#" active>
-            Home
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">Link</CNavLink>
-        </CNavItem>
-        <CDropdown variant="nav-item" :popper="false">
-          <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownDivider />
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-        <CNavItem>
-          <CNavLink href="#" disabled>
-            Disabled
-          </CNavLink>
-        </CNavItem>
-      </CNavbarNav>
-      <CForm class="d-flex">
-        <CFormInput type="search" class="me-2" placeholder="Search"/>
-        <CButton type="submit" color="success" variant="outline">Search</CButton>
-      </CForm>
-    </CCollapse>
-  </CContainer>
-</CNavbar>
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(true)
+</script>
+<template>
+  <CNavbar expand="lg" color-scheme="light" class="bg-light">
+    <CContainer fluid>
+      <CNavbarBrand href="#">Navbar</CNavbarBrand>
+      <CNavbarToggler @click="visible = !visible"/>
+      <CCollapse class="navbar-collapse" :visible="visible">
+        <CNavbarNav>
+          <CNavItem>
+            <CNavLink href="#" active>
+              Home
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Link</CNavLink>
+          </CNavItem>
+          <CDropdown variant="nav-item" :popper="false">
+            <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem href="#">Action</CDropdownItem>
+              <CDropdownItem href="#">Another action</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem href="#">Something else here</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <CNavItem>
+            <CNavLink href="#" disabled>
+              Disabled
+            </CNavLink>
+          </CNavItem>
+        </CNavbarNav>
+        <CForm class="d-flex">
+          <CFormInput type="search" class="me-2" placeholder="Search"/>
+          <CButton type="submit" color="success" variant="outline">Search</CButton>
+        </CForm>
+      </CCollapse>
+    </CContainer>
+  </CNavbar>
+</template>
 ```
 
 ### Brand
@@ -998,6 +1004,10 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 </CNavbar>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleExternalContent = ref(false)
+</script>
 <template>
   <CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent" data-coreui-theme="dark">
     <div class="bg-dark p-4">
@@ -1015,15 +1025,6 @@ Sometimes you want to use the collapse plugin to trigger a container element for
     </CContainer>
   </CNavbar>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleExternalContent: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Offcanvas
@@ -1083,6 +1084,10 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
 </CNavbar>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleOffcanvas = ref(false)
+</script>
 <template>
   <CNavbar colorScheme="light" class="bg-light">
     <CContainer fluid>
@@ -1133,15 +1138,6 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
     </CContainer>
   </CNavbar>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleOffcanvas: false,
-      }
-    }
-  }
-</script>
 ```
 
 To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
@@ -1197,6 +1193,10 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 </CNavbar>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleOffcanvas2 = ref(false)
+</script>
 <template>
   <CNavbar colorScheme="light" class="bg-light" expand="xxl">
     <CContainer fluid>
@@ -1247,31 +1247,8 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
     </CContainer>
   </CNavbar>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleOffcanvas2: false,
-      }
-    }
-  }
-</script>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        visible: true,
-        visibleExternalContent: false,
-        visibleOffcanvas: false,
-        visibleOffcanvas2: false,
-      }
-    }
-  }
-</script>
-
-
 ## Customizing
 
 ### CSS variables
@@ -1320,4 +1297,12 @@ Variables for the [dark navbar](#color-schemes):
 
 !!!include(./api/navbar/CNavbarBrand.api.md)!!!
 
-!!!include(./api/navbar/CNavbarNav.api.md)!!!
\ No newline at end of file
+!!!include(./api/navbar/CNavbarNav.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(true)
+  const visibleExternalContent = ref(false)
+  const visibleOffcanvas = ref(false)
+  const visibleOffcanvas2 = ref(false)
+</script>
\ No newline at end of file
diff --git a/packages/docs/components/navs-tabs.md b/packages/docs/components/navs-tabs.md
index 543ac981..1452f180 100644
--- a/packages/docs/components/navs-tabs.md
+++ b/packages/docs/components/navs-tabs.md
@@ -702,6 +702,10 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, as this c
 </CTabContent>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const tabPaneActiveKey = ref(1)
+</script>
 <template>
   <CNav variant="tabs" role="tablist">
     <CNavItem>
@@ -761,15 +765,6 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, as this c
     </CTabPane>
   </CTabContent>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        tabPaneActiveKey: 1,
-      }
-    }
-  }
-</script>
 ```
 
 The tabs also works with pills.
@@ -834,6 +829,10 @@ The tabs also works with pills.
 </CTabContent>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const tabPanePillsActiveKey = ref(1)
+</script>
 <template>
   <CNav variant="tabs" role="tablist">
     <CNavItem>
@@ -893,28 +892,8 @@ The tabs also works with pills.
     </CTabPane>
   </CTabContent>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        tabPanePillsActiveKey: 1,
-      }
-    }
-  }
-</script>
 ```
 
-<script>
-  export default {
-    data() {
-      return { 
-        tabPaneActiveKey: 1,
-        tabPanePillsActiveKey: 1,
-      }
-    }
-  }
-</script>
-
 ## Customizing
 
 ### CSS variables
@@ -957,4 +936,10 @@ return <CNav :style="vars">...</CNav>
 
 `CNavItem` and `CNavLink` have the same properties. If you set the `href` property on `CNavItem` then, `CNavLink` will be generated inside `CNavItem`.
 
-!!!include(./api/nav/CNavLink.api.md)!!!
\ No newline at end of file
+!!!include(./api/nav/CNavLink.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const tabPaneActiveKey = ref(1)
+  const tabPanePillsActiveKey = ref(1)
+</script>
\ No newline at end of file
diff --git a/packages/docs/components/offcanvas.md b/packages/docs/components/offcanvas.md
index 71b3a2f0..a39696ba 100644
--- a/packages/docs/components/offcanvas.md
+++ b/packages/docs/components/offcanvas.md
@@ -28,16 +28,18 @@ Below is an offcanvas example that is shown by default (via `:visible="true"`).
 </div>
 :::
 ```vue
-<COffcanvas :backdrop="false" 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 Bootstrap component or
-    custom elements here.
-  </COffcanvasBody>
-</COffcanvas>
+<template>
+  <COffcanvas :backdrop="false" 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 Bootstrap component or
+      custom elements here.
+    </COffcanvasBody>
+  </COffcanvas>
+</template>
 ```
 
 ### Live demo
@@ -61,6 +63,10 @@ Use the buttons below to show and hide an offcanvas component.
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visible = !visible }">Toggle offcanvas</CButton>
   <COffcanvas placement="start" :visible="visible" @hide="() => { visible = !visible }">
@@ -74,15 +80,6 @@ Use the buttons below to show and hide an offcanvas component.
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visible: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Body scrolling
@@ -102,6 +99,11 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(false)
+  const visibleScrolling = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleScrolling = !visibleScrolling }">Enable body scrolling</CButton>
   <COffcanvas :backdrop="false" placement="start" scroll :visible="visibleScrolling" @hide="() => { visibleScrolling = !visibleScrolling }">
@@ -114,15 +116,6 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleScrolling: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Body scrolling and backdrop
@@ -142,6 +135,10 @@ You can also enable `<body>` scrolling with a visible backdrop.
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleWithBothOptions = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleWithBothOptions = !visibleWithBothOptions }">Enable both scrolling &amp; backdrop</CButton>
   <COffcanvas placement="start" scroll :visible="visibleWithBothOptions" @hide="() => { visibleWithBothOptions = !visibleWithBothOptions }">
@@ -154,15 +151,6 @@ You can also enable `<body>` scrolling with a visible backdrop.
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return {
-        visibleWithBothOptions: false,
-      }
-    }
-  }
-</script>
 ```
 
 ### Static backdrop
@@ -182,6 +170,10 @@ If you set a `backdrop` to `static`, your Vue offcanvas component will not close
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleWithStaticBackdrop = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }">Toggle static offcanvas</CButton>
   <COffcanvas backdrop="static" placement="start" :visible="visibleWithStaticBackdrop" @hide="() => { visibleWithStaticBackdrop = !visibleWithStaticBackdrop }">
@@ -194,15 +186,6 @@ If you set a `backdrop` to `static`, your Vue offcanvas component will not close
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleWithStaticBackdrop: false,
-      }
-    }
-  }
-</script>
 ```
 
 ## Dark offcanvas
@@ -255,6 +238,10 @@ For example, `responsive="lg"` hides content in an offcanvas below the lg breakp
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleResponsiveBackdrop = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleResponsiveBackdrop = !visibleResponsiveBackdrop }">Toggle static offcanvas</CButton>
   <CAlert class="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
@@ -268,15 +255,6 @@ For example, `responsive="lg"` hides content in an offcanvas below the lg breakp
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleResponsiveBackdrop: false,
-      }
-    }
-  }
-</script>
 ```
 
 
@@ -305,6 +283,10 @@ Try the top, right, and bottom examples out below.
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleTop = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleTop = !visibleTop }">Toggle top offcanvas</CButton>
   <COffcanvas placement="top" :visible="visibleTop" @hide="() => { visibleTop = !visibleTop }">
@@ -318,15 +300,6 @@ Try the top, right, and bottom examples out below.
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleTop: false,
-      }
-    }
-  }
-</script>
 ```
 
 ::: demo
@@ -343,6 +316,10 @@ Try the top, right, and bottom examples out below.
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleEnd = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleEnd = !visibleEnd }">Toggle right offcanvas</CButton>
   <COffcanvas placement="end" :visible="visibleEnd" @hide="() => { visibleEnd = !visibleEnd }">
@@ -356,15 +333,6 @@ Try the top, right, and bottom examples out below.
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleEnd: false,
-      }
-    }
-  }
-</script>
 ```
 
 ::: demo
@@ -381,6 +349,10 @@ Try the top, right, and bottom examples out below.
 </COffcanvas>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const visibleBottom = ref(false)
+</script>
 <template>
   <CButton color="primary" @click="() => { visibleBottom = !visibleBottom }">Toggle bottom offcanvas</CButton>
   <COffcanvas placement="bottom" :visible="visibleBottom" @hide="() => { visibleBottom = !visibleBottom }">
@@ -394,38 +366,12 @@ Try the top, right, and bottom examples out below.
     </COffcanvasBody>
   </COffcanvas>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-        visibleBottom: false,
-      }
-    }
-  }
-</script>
 ```
 
 ## Accessibility
 
 Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.
 
-<script>
-  export default {
-    data() {
-      return { 
-        visible: false,
-        visibleTop: false,
-        visibleEnd: false,
-        visibleBottom: false,
-        visibleScrolling: false,
-        visibleResponsiveBackdrop: false,
-        visibleWithStaticBackdrop: false,
-        visibleWithBothOptions: false,
-      }
-    }
-  }
-</script>
-
 ## Customizing
 
 ### CSS variables
@@ -452,4 +398,16 @@ return <COffcanvas :style="vars">...</COffcanvas>
 
 !!!include(./api/offcanvas/COffcanvas.api.md)!!!
 
-!!!include(./api/offcanvas/COffcanvasTitle.api.md)!!!
\ No newline at end of file
+!!!include(./api/offcanvas/COffcanvasTitle.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const visible = ref(false)
+  const visibleTop = ref(false)
+  const visibleEnd = ref(false)
+  const visibleBottom = ref(false)
+  const visibleScrolling = ref(false)
+  const visibleResponsiveBackdrop = ref(false)
+  const visibleWithStaticBackdrop = ref(false)
+  const visibleWithBothOptions = ref(false)
+</script>
\ No newline at end of file
diff --git a/packages/docs/components/popover.md b/packages/docs/components/popover.md
index 0fcf964a..d758ad80 100644
--- a/packages/docs/components/popover.md
+++ b/packages/docs/components/popover.md
@@ -116,6 +116,16 @@ You can customize the appearance of popovers using [CSS variables](#css-variable
 </CPopover>
 :::
 ```vue
+<script setup>
+  const customPopoverStyle = {
+    '--cui-popover-max-width': '200px',
+    '--cui-popover-border-color': 'var(--cui-primary)',
+    '--cui-popover-header-bg': 'var(--cui-primary)',
+    '--cui-popover-header-color': 'var(--cui-white)',
+    '--cui-popover-body-padding-x': '1rem',
+    '--cui-popover-body-padding-y': '.5rem',
+  }
+</script>
 <template>
   <CPopover
     content="This popover is themed via CSS variables."
@@ -128,22 +138,6 @@ You can customize the appearance of popovers using [CSS variables](#css-variable
     </template>
   </CPopover>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-       customPopoverStyle: {
-          '--cui-popover-max-width': '200px',
-          '--cui-popover-border-color': 'var(--cui-primary)',
-          '--cui-popover-header-bg': 'var(--cui-primary)',
-          '--cui-popover-header-color': 'var(--cui-white)',
-          '--cui-popover-body-padding-x': '1rem',
-          '--cui-popover-body-padding-y': '.5rem',
-        }
-      }
-    }
-  }
-</script>
 ```
 
 ## Usage
@@ -207,19 +201,13 @@ return <CPopover :style="vars">...</CPopover>
 
 !!!include(./api/popover/CPopover.api.md)!!!
 
-<script>
-  export default {
-    data() {
-      return { 
-       customPopoverStyle: {
-          '--cui-popover-max-width': '200px',
-          '--cui-popover-border-color': 'var(--cui-primary)',
-          '--cui-popover-header-bg': 'var(--cui-primary)',
-          '--cui-popover-header-color': 'var(--cui-white)',
-          '--cui-popover-body-padding-x': '1rem',
-          '--cui-popover-body-padding-y': '.5rem',
-        }
-      }
-    }
+<script setup>
+  const customPopoverStyle = {
+    '--cui-popover-max-width': '200px',
+    '--cui-popover-border-color': 'var(--cui-primary)',
+    '--cui-popover-header-bg': 'var(--cui-primary)',
+    '--cui-popover-header-color': 'var(--cui-white)',
+    '--cui-popover-body-padding-x': '1rem',
+    '--cui-popover-body-padding-y': '.5rem',
   }
 </script>
\ No newline at end of file
diff --git a/packages/docs/components/table.md b/packages/docs/components/table.md
index 56512d57..06994d69 100644
--- a/packages/docs/components/table.md
+++ b/packages/docs/components/table.md
@@ -17,62 +17,55 @@ Using the most basic table CoreUI, here's how `<CTable>`-based tables look in Co
 
 In version **4.5.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/vue/docs/components/smart-table.html).
 
-
 ```vue
+<script setup>
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+</script>
 <template>
   <CTable :columns="columns" :items="items" />
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        columns: [
-          {
-            key: 'id',
-            label: '#',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'class',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_1',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_2',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-        ],
-        items: [
-          {
-            id: 1,
-            class: 'Mark',
-            heading_1: 'Otto',
-            heading_2: '@mdo',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 2,
-            class: 'Jacob',
-            heading_1: 'Thornton',
-            heading_2: '@fat',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 3,
-            class: 'Larry the Bird',
-            heading_2: '@twitter',
-            _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-          },
-        ]
-      }
-    },
-  }
-</script>
 ```
 
 You can also put all table components together manually as hitherto.
@@ -116,6 +109,7 @@ Use contextual classes to color tables, table rows or individual cells.
 ::: demo
 <CTable :columns="columnsVariantExample" :items="itemsVariantExample" />
 :::
+
 ```vue
 <CTable>
   <CTableHead>
@@ -178,86 +172,80 @@ Use contextual classes to color tables, table rows or individual cells.
 Since version **4.5.0** also this way.
 
 ```vue
+<script setup>
+  const columnsVariantExample = [
+    { key: 'class', _props: { scope: 'col' } },
+    { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
+    { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
+  ]
+  const itemsVariantExample = [
+    {
+      class: 'Default',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+    },
+    {
+      class: 'Primary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'primary' },
+    },
+    {
+      class: 'Secondary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'secondary' },
+    },
+    {
+      class: 'Success',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'success' },
+    },
+    {
+      class: 'Danger',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'danger' },
+    },
+    {
+      class: 'Warning',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'warning' },
+    },
+    {
+      class: 'Info',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'info' },
+    },
+    {
+      class: 'Light',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'light' },
+    },
+    {
+      class: 'Dark',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'dark' },
+    },
+  ]
+</script>
 <template>
   <CTable :columns="columnsVariantExample" :items="itemsVariantExample" />
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        columnsVariantExample: [
-          { key: 'class', _props: { scope: 'col' } },
-          { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-          { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-        ],
-        itemsVariantExample: [
-          {
-            class: 'Default',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-          },
-          {
-            class: 'Primary',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'primary' },
-          },
-          {
-            class: 'Secondary',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'secondary' },
-          },
-          {
-            class: 'Success',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'success' },
-          },
-          {
-            class: 'Danger',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'danger' },
-          },
-          {
-            class: 'Warning',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'warning' },
-          },
-          {
-            class: 'Info',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'info' },
-          },
-          {
-            class: 'Light',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'light' },
-          },
-          {
-            class: 'Dark',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'dark' },
-          },
-        ]
-      }
-    },
-  }
-</script>
 ```
 
 ## Accented tables
@@ -701,61 +689,55 @@ Highlight a table row or cell by adding a `active` property.
 As mentioned before since version **4.5.0** we have two ways to generate tables, also with custom properties for rows, and cells.
 
 ```vue
+<script setup>
+  const columnsActiveTableExample = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const itemsActiveTableExample = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _props: { active: true },
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+    },
+  ]
+</script>
 <template>
   <CTable :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        columnsActiveTableExample: [
-          {
-            key: 'id',
-            label: '#',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'class',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_1',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_2',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-        ],
-        itemsActiveTableExample: [
-          {
-            id: 1,
-            class: 'Mark',
-            heading_1: 'Otto',
-            heading_2: '@mdo',
-            _props: { active: true },
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 2,
-            class: 'Jacob',
-            heading_1: 'Thornton',
-            heading_2: '@fat',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 3,
-            class: 'Larry the Bird',
-            heading_2: '@twitter',
-            _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-          },
-        ],
-      }
-    },
-  }
-</script>
 ```
 
 ```vue
@@ -794,61 +776,55 @@ As mentioned before since version **4.5.0** we have two ways to generate tables,
 <CTable color="dark" :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
 :::
 ```vue
+<script setup>
+  const columnsActiveTableExample = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const itemsActiveTableExample = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _props: { active: true },
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+    },
+  ]
+</script>
 <template>
   <CTable color="dark" :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        columnsActiveTableExample: [
-          {
-            key: 'id',
-            label: '#',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'class',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_1',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_2',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-        ],
-        itemsActiveTableExample: [
-          {
-            id: 1,
-            class: 'Mark',
-            heading_1: 'Otto',
-            heading_2: '@mdo',
-            _props: { active: true },
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 2,
-            class: 'Jacob',
-            heading_1: 'Thornton',
-            heading_2: '@fat',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 3,
-            class: 'Larry the Bird',
-            heading_2: '@twitter',
-            _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-          },
-        ],
-      }
-    },
-  }
-</script>
 ```
 
 ## Table borders
@@ -1148,19 +1124,13 @@ Similar to tables and dark tables, use the modifier prop `color="light"` or `col
 If you generate a table using the new method incorporated in version **4.5.0**, you have to use tableHeadProps property to pass properties to the table header component.
 
 ```vue
+<script setup>
+  const columns = [ ... ]
+  const items = [ ... ]
+</script>
 <template>
   <CTable :columns="columns" :items="items" :tableHeadProps="{ color: 'light' }" />
 </template>
-<script>
- export default {
-    data: () => {
-      return {
-        columns: [ ... ],
-        items: [ ... ]
-      }
-    },
-  }
-</script>
 ```
 
 ::: demo
@@ -1208,19 +1178,13 @@ If you generate a table using the new method incorporated in version **4.5.0**,
 Starting from version **4.5.0** also this way.
 
 ```vue
+<script setup>
+  const columns = [ ... ]
+  const items = [ ... ]
+</script>
 <template>
   <CTable :columns="columns" :items="items" :tableHeadProps="{ color: 'dark' }" />
 </template>
-<script>
- export default {
-    data: () => {
-      return {
-        columns: [ ... ],
-        items: [ ... ]
-      }
-    },
-  }
-</script>
 ```
 
 ### Table foot
@@ -1278,25 +1242,19 @@ Starting from version **4.5.0** also this way.
 Starting from version **4.5.0** also this way.
 
 ```vue
+<script setup>
+  const columns = [ ... ]
+  const footer = [
+    'Footer',
+    'Footer',
+    'Footer',
+    'Footer',
+  ]
+  const items = [ ... ]
+</script>
 <template>
   <CTable :columns="columns" :footer="footer" :items="items" :tableHeadProps="{ color: 'dark' }" />
 </template>
-<script>
- export default {
-    data: () => {
-      return {
-        columns: [ ... ],
-        footer: [
-          'Footer',
-          'Footer',
-          'Footer',
-          'Footer',
-        ],
-        items: [ ... ]
-      }
-    },
-  }
-</script>
 ```
 
 ### Captions
@@ -1351,19 +1309,13 @@ A `<CTableCaption>` functions like a heading for a table. It helps users with sc
 Starting from version **4.5.0** also this way.
 
 ```vue
+<script setup>
+  const columns = [ ... ]
+  const items = [ ... ]
+</script>
 <template>
   <CTable caption="List of users" :columns="columns" :items="items"  />
 </template>
-<script>
- export default {
-    data: () => {
-      return {
-        columns: [ ... ],
-        items: [ ... ]
-      }
-    },
-  }
-</script>
 ```
 
 You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.
@@ -1438,19 +1390,13 @@ You can also put the `<CTableCaption>` on the top of the table with `caption="to
 Since version **4.5.0** also this way.
 
 ```vue
+<script setup>
+  const columns = [ ... ]
+  const items = [ ... ]
+</script>
 <template>
   <CTable captionTop="List of users" :columns="columns" :items="items"  />
 </template>
-<script>
- export default {
-    data: () => {
-      return {
-        columns: [ ... ],
-        items: [ ... ]
-      }
-    },
-  }
-</script>
 ```
 ## Responsive tables
 
@@ -1804,171 +1750,6 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t
 </CTable>
 ```
 
-<script>
-  export default {
-    data: () => {
-      return {
-        columns: [
-          {
-            key: 'id',
-            label: '#',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'class',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_1',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_2',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-        ],
-        items: [
-          {
-            id: 1,
-            class: 'Mark',
-            heading_1: 'Otto',
-            heading_2: '@mdo',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 2,
-            class: 'Jacob',
-            heading_1: 'Thornton',
-            heading_2: '@fat',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 3,
-            class: 'Larry the Bird',
-            heading_2: '@twitter',
-            _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-          },
-        ],
-        columnsActiveTableExample: [
-          {
-            key: 'id',
-            label: '#',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'class',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_1',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-          {
-            key: 'heading_2',
-            label: 'Heading',
-            _props: { scope: 'col' },
-          },
-        ],
-        itemsActiveTableExample: [
-          {
-            id: 1,
-            class: 'Mark',
-            heading_1: 'Otto',
-            heading_2: '@mdo',
-            _props: { active: true },
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 2,
-            class: 'Jacob',
-            heading_1: 'Thornton',
-            heading_2: '@fat',
-            _cellProps: { id: { scope: 'row' } },
-          },
-          {
-            id: 3,
-            class: 'Larry the Bird',
-            heading_2: '@twitter',
-            _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-          },
-        ],
-        columnsVariantExample: [
-          { key: 'class', _props: { scope: 'col' } },
-          { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-          { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-        ],
-        itemsVariantExample: [
-          {
-            class: 'Default',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-          },
-          {
-            class: 'Primary',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'primary' },
-          },
-          {
-            class: 'Secondary',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'secondary' },
-          },
-          {
-            class: 'Success',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'success' },
-          },
-          {
-            class: 'Danger',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'danger' },
-          },
-          {
-            class: 'Warning',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'warning' },
-          },
-          {
-            class: 'Info',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'info' },
-          },
-          {
-            class: 'Light',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'light' },
-          },
-          {
-            class: 'Dark',
-            heading_1: 'Cell',
-            heading_2: 'Cell',
-            _cellProps: { class: { scope: 'row' } },
-            _props: { color: 'dark' },
-          },
-        ]
-      }
-    },
-  }
-</script>
-
 ## API
 
 !!!include(./api/table/CTable.api.md)!!!
@@ -1983,4 +1764,163 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t
 
 !!!include(./api/table/CTableHeaderCell.api.md)!!!
 
-!!!include(./api/table/CTableRow.api.md)!!!
\ No newline at end of file
+!!!include(./api/table/CTableRow.api.md)!!!
+
+<script setup>
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+  const columnsActiveTableExample = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const itemsActiveTableExample = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _props: { active: true },
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+    },
+  ]
+  const columnsVariantExample = [
+    { key: 'class', _props: { scope: 'col' } },
+    { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
+    { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
+  ]
+  const itemsVariantExample = [
+    {
+      class: 'Default',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+    },
+    {
+      class: 'Primary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'primary' },
+    },
+    {
+      class: 'Secondary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'secondary' },
+    },
+    {
+      class: 'Success',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'success' },
+    },
+    {
+      class: 'Danger',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'danger' },
+    },
+    {
+      class: 'Warning',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'warning' },
+    },
+    {
+      class: 'Info',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'info' },
+    },
+    {
+      class: 'Light',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'light' },
+    },
+    {
+      class: 'Dark',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'dark' },
+    },
+  ]
+</script>
diff --git a/packages/docs/components/toast.md b/packages/docs/components/toast.md
index 8f6e1b76..906a5fad 100644
--- a/packages/docs/components/toast.md
+++ b/packages/docs/components/toast.md
@@ -78,6 +78,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 </CToaster>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const toasts = ref([])
+  const createToast = () => {
+    toasts.value.push({
+      title: 'new toast',
+      content: 'Lorem ipsum dolor cet emit'
+    })
+  }
+</script>
 <template>
   <CButton color="primary" @click="createToast">Send a toast</CButton>
   <CToaster class="p-3" placement="top-end">
@@ -92,44 +102,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
     </CToast>
   </CToaster>
 </template>
-<script>
-  export default {
-    data() {
-      return {
-        toasts: []
-      }
-    },
-    methods: {
-      createToast() {
-        this.toasts.push({
-          title: 'new toast',
-          content: 'Lorem ipsum dolor cet emit'
-        })
-      }
-    }
-  }
-</script>
 ```
 
-<script>
-  export default {
-    data() {
-      return {
-        toasts: []
-      }
-    },
-    
-    methods: {
-      createToast() {
-        this.toasts.push({
-          title: 'new toast',
-          content: 'Lorem ipsum dolor cet emit'
-        })
-      }
-    }
-  }
-</script>
-
 ### Translucent
 
 Toasts are slightly translucent to blend in with what's below them.
@@ -363,4 +337,15 @@ return <CToast :style="vars">...</CToast>
 
 !!!include(./api/toast/CToastHeader.api.md)!!!
 
-!!!include(./api/toast/CToaster.api.md)!!!
\ No newline at end of file
+!!!include(./api/toast/CToaster.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const toasts = ref([])
+  const createToast = () => {
+    toasts.value.push({
+      title: 'new toast',
+      content: 'Lorem ipsum dolor cet emit'
+    })
+  }
+</script>
\ No newline at end of file
diff --git a/packages/docs/components/tooltip.md b/packages/docs/components/tooltip.md
index 52a00c1d..b10c61e9 100644
--- a/packages/docs/components/tooltip.md
+++ b/packages/docs/components/tooltip.md
@@ -114,7 +114,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
 <CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>
 ```
 
-### Custom popovers
+### Custom tooltips
 
 You can customize the appearance of tooltips using [CSS variables](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
 
@@ -125,11 +125,16 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable
   :style="customTooltipStyle"
 >
   <template #toggler="{ id, on }">
-    <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
+    <CButton color="secondary" :aria-describedby="id" v-on="on">Custom tooltip</CButton>
   </template>
 </CTooltip>
 :::
 ```vue
+<script setup>
+  const customTooltipStyle = {
+    '--cui-tooltip-bg': 'var(--cui-primary)',
+  }
+</script>
 <template>
   <CTooltip
     content="This top tooltip is themed via CSS variables."
@@ -137,21 +142,10 @@ You can customize the appearance of tooltips using [CSS variables](#css-variable
     :style="customTooltipStyle"
   >
     <template #toggler="{ id, on }">
-      <CButton color="secondary" :aria-describedby="id" v-on="on">Custom popover</CButton>
+      <CButton color="secondary" :aria-describedby="id" v-on="on">Custom tooltip</CButton>
     </template>
   </CTooltip>
 </template>
-<script>
-  export default {
-    data() {
-      return { 
-       customTooltipStyle: {
-          '--cui-tooltip-bg': 'var(--cui-primary)',
-        }
-      }
-    }
-  }
-</script>
 ```
 
 ## Usage
@@ -206,14 +200,8 @@ return <CTooltip :style="vars">...</CTooltip>
 
 !!!include(./api/tooltip/CTooltip.api.md)!!!
 
-<script>
-  export default {
-    data() {
-      return { 
-       customTooltipStyle: {
-          '--cui-tooltip-bg': 'var(--cui-primary)',
-        }
-      }
-    }
+<script setup>
+  const customTooltipStyle = {
+    '--cui-tooltip-bg': 'var(--cui-primary)',
   }
 </script>
\ No newline at end of file
diff --git a/packages/docs/forms/checkbox.md b/packages/docs/forms/checkbox.md
index 9b2273e0..3b6ecb4b 100644
--- a/packages/docs/forms/checkbox.md
+++ b/packages/docs/forms/checkbox.md
@@ -29,21 +29,14 @@ Single checkbox, boolean value.
 <div>Checked: {{checked}}</div>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const checked = ref(true)
+</script>
 <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.
@@ -55,39 +48,18 @@ We can also bind multiple checkboxes to the same array.
 <div>Checked names: {{checkedNames}}</div>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const checkedNames = ref(['Andrew'])
+</script>
 <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.
@@ -211,4 +183,10 @@ Different variants of button, such at the various outlined styles, are supported
 
 ## API
 
-!!!include(./api/form/CFormCheck.api.md)!!!
\ No newline at end of file
+!!!include(./api/form/CFormCheck.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const checked = ref(true)
+  const checkedNames = ref(['Andrew'])
+</script>
\ No newline at end of file
diff --git a/packages/docs/forms/radio.md b/packages/docs/forms/radio.md
index 938663c7..c52d2a02 100644
--- a/packages/docs/forms/radio.md
+++ b/packages/docs/forms/radio.md
@@ -33,6 +33,10 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 <div>Picked: {{ picked }}</div>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const picked = ref('Four')
+</script>
 <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"/>
@@ -41,31 +45,8 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
   <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
@@ -170,3 +151,8 @@ Different variants of button, such at the various outlined styles, are supported
 ## API
 
 !!!include(./api/form/CFormCheck.api.md)!!!
+
+<script setup>
+  import { ref } from 'vue'
+  const picked = ref('Four')
+</script>
diff --git a/packages/docs/forms/validation.md b/packages/docs/forms/validation.md
index 5aa00714..3dff05d3 100644
--- a/packages/docs/forms/validation.md
+++ b/packages/docs/forms/validation.md
@@ -8,13 +8,13 @@ description: Provide valuable, actionable feedback to your users with HTML5 form
 
 For custom CoreUI form validation messages, you'll need to add the `novalidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
 
-Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. 
+Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.
 
 ::: demo
-<CForm 
-  class="row g-3 needs-validation" 
-  novalidate 
-  :validated="validatedCustom01" 
+<CForm
+  class="row g-3 needs-validation"
+  novalidate
+  :validated="validatedCustom01"
   @submit="handleSubmitCustom01"
 >
   <CCol md="4">
@@ -91,6 +91,18 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
 </CForm>
 :::
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const validatedCustom01 = ref()
+  const handleSubmitCustom01 = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    validatedCustom01.value = true
+  }
+</script>
 <template>
   <CForm 
     class="row g-3 needs-validation" 
@@ -171,25 +183,6 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     </CCol>
   </CForm>
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        validatedCustom01: null,
-      }
-    },
-    methods: {
-      handleSubmitCustom01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedCustom01 = true
-      },
-    }
-  }
-</script> 
 ```
 
 ## Browser defaults
@@ -245,9 +238,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
       label="State"
       required
     >
-      <option selected="" disabled="" value="">
-        Choose...
-      </option>
+      <option selected="" disabled="" value="">Choose...</option>
       <option>...</option>
     </CFormSelect>
   </CCol>
@@ -273,6 +264,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   </CCol>
 </CForm>
 :::
+
 ```vue
 <CForm class="row g-3">
   <CCol md="4">
@@ -434,6 +426,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
   </CCol>
 </CForm>
 :::
+
 ```vue
 <CForm class="row g-3 needs-validation">
   <CCol md="4">
@@ -532,7 +525,7 @@ Validation styles are available for the following form controls and components:
       label="Textarea"
       placeholder="Required example textarea"
       required
-    ></CFormTextarea>
+    />
   </div>
   <CFormCheck
     class="mb-3"
@@ -594,7 +587,7 @@ Validation styles are available for the following form controls and components:
       label="Textarea"
       placeholder="Required example textarea"
       required
-    ></CFormTextarea>
+    />
   </div>
   <CFormCheck
     class="mb-3"
@@ -706,9 +699,7 @@ If your form layout allows it, you can swap the text for the tooltip to display
       required
       tooltipFeedback
     >
-      <option selected="" disabled="" value="">
-        Choose...
-      </option>
+      <option selected="" disabled="" value="">Choose...</option>
       <option>...</option>
     </CFormSelect>
   </CCol>
@@ -727,39 +718,55 @@ If your form layout allows it, you can swap the text for the tooltip to display
   </CCol>
 </CForm>
 :::
+
 ```vue
+<script setup>
+  import { ref } from 'vue'
+  const validatedTooltip01 = ref()
+  const handleSubmitTooltip01 = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    
+    validatedTooltip01.value = true
+  }
+</script>
 <template>
-  <CForm class="row g-3 needs-validation" novalidate :validated="validatedTooltip01" @submit="handleSubmitTooltip01">
+  <CForm
+    class="row g-3 needs-validation"
+    novalidate
+    :validated="validatedTooltip01"
+    @submit="handleSubmitTooltip01"
+  >
     <CCol md="4" class="position-relative">
       <CFormLabel for="validationTooltip01">Email</CFormLabel>
-      <CFormInput id="validationTooltip01" value="Mark" required/>
-      <CFormFeedback tooltip valid>
-        Looks good!
-      </CFormFeedback>
+      <CFormInput id="validationTooltip01" value="Mark" required />
+      <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
     </CCol>
     <CCol md="4" class="position-relative">
       <CFormLabel for="validationTooltip02">Email</CFormLabel>
-      <CFormInput id="validationTooltip02" value="Otto" required/>
-      <CFormFeedback tooltip valid>
-        Looks good!
-      </CFormFeedback>
+      <CFormInput id="validationTooltip02" value="Otto" required />
+      <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
     </CCol>
     <CCol md="4" class="position-relative">
       <CFormLabel for="validationTooltipUsername">Username</CFormLabel>
       <CInputGroup class="has-validation">
         <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-        <CFormInput id="validationTooltipUsername" value="" aria-describedby="inputGroupPrepend" required/>
-        <CFormFeedback tooltip invalid>
-        Please choose a username.
-        </CFormFeedback>
+        <CFormInput
+          id="validationTooltipUsername"
+          value=""
+          aria-describedby="inputGroupPrepend"
+          required
+        />
+        <CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
       </CInputGroup>
     </CCol>
     <CCol md="6" class="position-relative">
       <CFormLabel for="validationTooltip03">City</CFormLabel>
-      <CFormInput id="validationTooltip03" required/>
-      <CFormFeedback tooltip invalid>
-        Please provide a valid city.
-      </CFormFeedback>
+      <CFormInput id="validationTooltip03" required />
+      <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
     </CCol>
     <CCol md="3" class="position-relative">
       <CFormLabel for="validationTooltip04">City</CFormLabel>
@@ -767,41 +774,18 @@ If your form layout allows it, you can swap the text for the tooltip to display
         <option disabled value="">Choose...</option>
         <option>...</option>
       </CFormSelect>
-      <CFormFeedback tooltip invalid>
-        Please provide a valid city.
-      </CFormFeedback>
+      <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
     </CCol>
     <CCol md="3" class="position-relative">
       <CFormLabel for="validationTooltip05">City</CFormLabel>
-      <CFormInput id="validationTooltip05" required/>
-      <CFormFeedback tooltip invalid>
-        Please provide a valid zip.
-      </CFormFeedback>
+      <CFormInput id="validationTooltip05" required />
+      <CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
     </CCol>
     <CCol xs="12" class="position-relative">
       <CButton color="primary" type="submit">Submit form</CButton>
     </CCol>
   </CForm>
 </template>
-<script>
-  export default {
-    data: () => {
-      return {
-        validatedTooltip01: null,
-      }
-    },
-    methods: {
-      handleSubmitTooltip01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedTooltip01 = true
-      }
-    }
-  }
-</script>
 ```
 
 ## Customizing
@@ -842,31 +826,25 @@ Used to iterate over `$form-validation-states` map values to generate our valida
 
 <ScssDocs file="forms/_validation.scss" capture="form-validation-states-loop" />
 
-<script>
-  export default {
-    data: () => {
-      return {
-        validatedCustom01: null,
-        validatedTooltip01: null,
-      }
-    },
-    methods: {
-      handleSubmitCustom01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedCustom01 = true
-      },
-      handleSubmitTooltip01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedTooltip01 = true
-      }
+<script setup>
+  import { ref } from 'vue'
+  const validatedCustom01 = ref()
+  const validatedTooltip01 = ref()
+  const handleSubmitCustom01 = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
     }
+    validatedCustom01.value = true
   }
-</script>
\ No newline at end of file
+  const handleSubmitTooltip01 = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    
+    validatedTooltip01.value = true
+  }
+</script>

From 78ef39b7f250327019f7862ced568e5a692deb38 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 30 Aug 2024 15:19:16 +0200
Subject: [PATCH 53/92] docs: update theme

---
 packages/docs/.vuepress/config.ts             |  4 +--
 .../src/client/components/Sidebar.vue         |  5 +---
 .../src/client/components/SidebarNav.ts       | 26 ++++++++-----------
 .../src/client/composables/useSidebarItems.ts | 23 ++++++++--------
 4 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 764793ab..ea00ecf0 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -21,9 +21,9 @@ export default defineUserConfig({
   bundler: viteBundler(),
   markdown: {
     anchor: {
-      permalink: anchor.permalink.ariaHidden({
+      permalink: anchor.permalink.linkInsideHeader({
         class: 'anchor-link',
-        placement: 'after',
+        placement: 'after'
       }),
     },
   },
diff --git a/packages/docs/.vuepress/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
index d05ff18f..49581af1 100755
--- a/packages/docs/.vuepress/src/client/components/Sidebar.vue
+++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useSidebarItems } from '../composables'
 import { SidebarNav } from './SidebarNav'
-
-const sidebarItems = useSidebarItems()
 </script>
 
 <template>
@@ -39,6 +36,6 @@ const sidebarItems = useSidebarItems()
         </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
-    <SidebarNav :items="sidebarItems" />
+    <SidebarNav />
   </CSidebar>
 </template>
diff --git a/packages/docs/.vuepress/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
index 09184a1e..ba1b4a81 100755
--- a/packages/docs/.vuepress/src/client/components/SidebarNav.ts
+++ b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
@@ -1,14 +1,15 @@
 import { defineComponent, h, computed, onMounted, ref } from 'vue'
-import type { VNode } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { ResolvedSidebarItem } from '../../shared'
-
+import { useRoute } from 'vuepress/client'
+import { RouterLink} from 'vue-router'
+import { useSidebarItems } from '../composables'
 import { withBase } from '@vuepress/client'
-
 import { CBadge, CNavGroup, CNavItem, CSidebarNav } from '@coreui/vue/src/'
 import { CIcon } from '@coreui/icons-vue'
 
+import type { VNode } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ResolvedSidebarItem } from '../../shared'
+
 const normalizePath = (path: string): string =>
   decodeURI(path)
     .replace(/#.*$/, '')
@@ -43,13 +44,8 @@ const isActiveItem = (route: RouteLocationNormalizedLoaded, item: ResolvedSideba
 
 const SidebarNav = defineComponent({
   name: 'SidebarNav',
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-  },
-  setup(props) {
+  setup() {
+    const sidebarItems = useSidebarItems()
     const route = useRoute()
     const firstRender = ref(true)
 
@@ -57,7 +53,7 @@ const SidebarNav = defineComponent({
       firstRender.value = false
     })
 
-    const renderItem = (item: ResolvedSidebarItem): VNode => {
+    const renderItem = (item: any): VNode => {
       if (item.children && !item.link.includes('.html')) {
         const visible = computed(() => item.children.some((child) => isActiveItem(route, child)))
 
@@ -122,7 +118,7 @@ const SidebarNav = defineComponent({
       CSidebarNav,
       {},
       {
-        default: () => props.items.map((item: any) => renderItem(item)),
+        default: () => sidebarItems.value.map((item: any) => renderItem(item)),
       }
     )
     },
diff --git a/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
index d68d9dad..cc9aa7b6 100755
--- a/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
+++ b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
@@ -143,19 +143,20 @@ export const resolveArraySidebarItems = (
       }
     }
 
+    // TODO: check if we need this
     // if the sidebar item is current page and children is not set
     // use headers of current page as children
-    if (childItem.link === route.path) {
-      // skip h1 header
-      const headers =
-        page.value.headers[0]?.level === 1
-          ? page.value.headers[0].children
-          : page.value.headers
-      return {
-        ...childItem,
-        children: headersToSidebarItemChildren(headers, sidebarDepth),
-      }
-    }
+    // if (childItem.link === route.path) {
+    //   // skip h1 header
+    //   const headers =
+    //     page.value.headers[0]?.level === 1
+    //       ? page.value.headers[0].children
+    //       : page.value.headers
+    //   return {
+    //     ...childItem,
+    //     children: headersToSidebarItemChildren(headers, sidebarDepth),
+    //   }
+    // }
 
     return childItem
   }

From 618df56d6cd42a9dd35c5505533eaa44ae349a41 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 31 Aug 2024 16:47:46 +0200
Subject: [PATCH 54/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rollup  ^4.21.1  →  ^4.21.2
---
 packages/coreui-vue/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 95c382a3..aa206e17 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -54,7 +54,7 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.21.1",
+    "rollup": "^4.21.2",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.5.4",

From 00b2fd986c902541ab90c2d3cc944b9bb796837f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 31 Aug 2024 16:48:38 +0200
Subject: [PATCH 55/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/icons-vue  ^2.1.0  →  ^2.2.0
---
 packages/docs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 14f551b1..c45ad56a 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -11,7 +11,7 @@
     "@coreui/chartjs": "^4.0.0",
     "@coreui/coreui": "^5.1.2",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-vue": "^2.1.0",
+    "@coreui/icons-vue": "^2.2.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.1",

From 3e8537d8b6ac2353b6b53ada331f6ef9eff0d604 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 31 Aug 2024 16:52:21 +0200
Subject: [PATCH 56/92] release: v5.3.0

---
 README.md                        | 2 +-
 lerna.json                       | 2 +-
 packages/coreui-icons-vue        | 2 +-
 packages/coreui-vue/README.md    | 2 +-
 packages/coreui-vue/package.json | 2 +-
 packages/docs/package.json       | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 355d7967..31114030 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/v5.2.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.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`
diff --git a/lerna.json b/lerna.json
index f19238c5..8e4098d4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.2.0",
+  "version": "5.3.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue
index 9de09384..be8961e2 160000
--- a/packages/coreui-icons-vue
+++ b/packages/coreui-icons-vue
@@ -1 +1 @@
-Subproject commit 9de09384e7b0ece5196adf30b0f5e25cee77975c
+Subproject commit be8961e2115c0c86a1be72e4d0ea176c69ed4740
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index 24bc3f28..1ecdf9ed 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.2.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.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`
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index aa206e17..0bd4aee3 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index c45ad56a..0495b5e1 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From e579fd7d84250dc8c0379ebbfce39f95291aa3bd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 14 Sep 2024 12:58:05 +0200
Subject: [PATCH 57/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@types/jest                              ^29.5.12  →     ^29.5.13
@typescript-eslint/eslint-plugin           ^8.3.0  →       ^8.5.0
@typescript-eslint/parser                  ^8.3.0  →       ^8.5.0
@vuepress/plugin-active-header-links  2.0.0-rc.42  →  2.0.0-rc.43
@vuepress/plugin-git                  2.0.0-rc.42  →  2.0.0-rc.43
@vuepress/plugin-markdown-container   2.0.0-rc.42  →  2.0.0-rc.43
@vuepress/plugin-theme-data           2.0.0-rc.42  →  2.0.0-rc.43
@vuepress/plugin-toc                  2.0.0-rc.42  →  2.0.0-rc.43
eslint-plugin-vue                         ^9.27.0  →      ^9.28.0
markdown-it-anchor                         ^9.1.0  →       ^9.2.0
rollup                                    ^4.21.2  →      ^4.21.3
sass                                      ^1.77.8  →      ^1.78.0
typescript                                 ^5.5.4  →       ^5.6.2
vue                                       ^3.4.38  →       ^3.5.5
---
 package.json                     |  6 +++---
 packages/coreui-vue/package.json |  8 ++++----
 packages/docs/package.json       | 14 +++++++-------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 41fbecce..baa6b2a6 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,14 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.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.2.1",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "lerna": "^8.1.8",
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 0bd4aee3..1a2070c6 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -48,17 +48,17 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.21.2",
+    "rollup": "^4.21.3",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.5.4",
-    "vue": "^3.4.38",
+    "typescript": "^5.6.2",
+    "vue": "^3.5.5",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 0495b5e1..fd51348c 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -18,18 +18,18 @@
     "@docsearch/js": "^3.6.1",
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.42",
-    "@vuepress/plugin-git": "2.0.0-rc.42",
-    "@vuepress/plugin-markdown-container": "2.0.0-rc.42",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.43",
+    "@vuepress/plugin-git": "2.0.0-rc.43",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.43",
     "@vuepress/plugin-prismjs": "2.0.0-rc.37",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.42",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.43",
     "@vuepress/plugin-register-components": "2.0.0-rc.42",
-    "@vuepress/plugin-toc": "2.0.0-rc.42",
+    "@vuepress/plugin-toc": "2.0.0-rc.43",
     "@vuepress/shared": "2.0.0-rc.15",
     "@vuepress/utils": "2.0.0-rc.15",
-    "markdown-it-anchor": "^9.1.0",
+    "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "vue-docgen-cli": "^4.79.0",
     "vuepress": "2.0.0-rc.15"
   }

From 2f96ef25cd5191c1c9ae0ebbeb31ae484dfe57e3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 15 Sep 2024 15:10:27 +0200
Subject: [PATCH 58/92] refactor: update shared props types handling

---
 .../src/components/form/CFormControlWrapper.ts      | 11 ++++++++++-
 .../coreui-vue/src/components/form/CFormInput.ts    |  4 +++-
 .../coreui-vue/src/components/form/CFormSelect.ts   |  4 +++-
 .../coreui-vue/src/components/form/CFormTextarea.ts |  4 +++-
 packages/coreui-vue/src/components/nav/CNavItem.ts  |  9 +++++++--
 .../coreui-vue/src/components/toast/CToastClose.ts  |  8 +++++++-
 .../coreui-vue/src/components/toast/CToastHeader.ts | 13 ++-----------
 7 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
index e4aee290..6bd12e19 100644
--- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
+++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
@@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
+type CFormControlValidationProps = InstanceType<typeof CFormControlValidation>['$props']
+
+interface CFormControlWrapperProps {
+  floatingLabel?: string
+  id?: string
+  label?: string
+  text?: string
+}
+
 const CFormControlWrapper = defineComponent({
   name: 'CFormControlWrapper',
   inheritAttrs: false,
@@ -32,7 +41,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props, { slots }) {
+  setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,
diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts
index 68746233..8dbe4eca 100644
--- a/packages/coreui-vue/src/components/form/CFormInput.ts
+++ b/packages/coreui-vue/src/components/form/CFormInput.ts
@@ -130,7 +130,9 @@ const CFormInput = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts
index b3086b60..23bd7b1b 100644
--- a/packages/coreui-vue/src/components/form/CFormSelect.ts
+++ b/packages/coreui-vue/src/components/form/CFormSelect.ts
@@ -119,7 +119,9 @@ const CFormSelect = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts
index a953991d..42a8a732 100644
--- a/packages/coreui-vue/src/components/form/CFormTextarea.ts
+++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts
@@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 3ed139c7..3dd133a7 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -2,6 +2,12 @@ import { defineComponent, h } from 'vue'
 
 import { CNavLink } from './CNavLink'
 
+type CNavLinkProps = Omit<InstanceType<typeof CNavLink>['$props'], 'as'>
+
+interface CNavItemProps {
+  as: string
+}
+
 const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
@@ -14,12 +20,11 @@ const CNavItem = defineComponent({
       default: 'li',
     },
   },
-  setup(props, { slots }) {
+  setup(props: CNavLinkProps & CNavItemProps, { slots }) {
     return () =>
       h(
         props.as,
         {
-          as: props.component,
           class: 'nav-item',
         },
         props.href
diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts
index b00e8dd1..6bdbf6a1 100644
--- a/packages/coreui-vue/src/components/toast/CToastClose.ts
+++ b/packages/coreui-vue/src/components/toast/CToastClose.ts
@@ -1,6 +1,12 @@
 import { defineComponent, h, inject } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+type CCloseButtonProps = InstanceType<typeof CCloseButton>['$props']
+
+interface CToastCloseProps {
+  as: string
+}
+
 const CToastClose = defineComponent({
   name: 'CToastClose',
   props: {
@@ -16,7 +22,7 @@ const CToastClose = defineComponent({
      */
     'close',
   ],
-  setup(props, { slots, emit }) {
+  setup(props: CToastCloseProps & CCloseButtonProps, { slots, emit }) {
     // eslint-disable-next-line no-unused-vars
     const updateVisible = inject('updateVisible') as (visible: boolean) => void
     const handleClose = () => {
diff --git a/packages/coreui-vue/src/components/toast/CToastHeader.ts b/packages/coreui-vue/src/components/toast/CToastHeader.ts
index 74fbc651..3f822da0 100644
--- a/packages/coreui-vue/src/components/toast/CToastHeader.ts
+++ b/packages/coreui-vue/src/components/toast/CToastHeader.ts
@@ -9,20 +9,11 @@ const CToastHeader = defineComponent({
      */
     closeButton: Boolean,
   },
-  emits: [
-    /**
-     * Event called after clicking the close button.
-     */
-    'close',
-  ],
-  setup(props, { slots, emit }) {
+  setup(props, { slots }) {
     return () =>
       h('div', { class: 'toast-header' }, [
         slots.default && slots.default(),
-        props.closeButton &&
-          h(CToastClose, {
-            onClose: () => emit('close'),
-          }),
+        props.closeButton && h(CToastClose),
       ])
   },
 })

From e0239fdd8886aebc305ed33f88ce97001fc7769a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 15 Sep 2024 15:17:40 +0200
Subject: [PATCH 59/92] fix(CToastClose): allow passing a custom component as a
 prop

---
 packages/coreui-vue/src/components/toast/CToastClose.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts
index 6bdbf6a1..cd7f4360 100644
--- a/packages/coreui-vue/src/components/toast/CToastClose.ts
+++ b/packages/coreui-vue/src/components/toast/CToastClose.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, inject } from 'vue'
+import { defineComponent, h, inject, resolveComponent } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
 type CCloseButtonProps = InstanceType<typeof CCloseButton>['$props']
@@ -32,7 +32,7 @@ const CToastClose = defineComponent({
     return () =>
       props.as
         ? h(
-            props.as,
+            resolveComponent(props.as),
             {
               onClick: () => {
                 handleClose()

From 69a05dd4e4aa7443aa9fdf37fa3bef6954c2c545 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 16 Sep 2024 10:05:50 +0200
Subject: [PATCH 60/92] refactor: update shared props types handling

---
 packages/coreui-vue/package.json                      |  2 +-
 .../src/components/form/CFormControlWrapper.ts        | 11 ++++++-----
 packages/coreui-vue/src/components/nav/CNavItem.ts    |  7 +++----
 .../coreui-vue/src/components/toast/CToastClose.ts    |  8 ++++----
 packages/coreui-vue/src/utils/ComponentProps.ts       |  6 ++++++
 packages/docs/build/docgen.config.js                  |  3 ++-
 6 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 packages/coreui-vue/src/utils/ComponentProps.ts

diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 1a2070c6..c72d1a45 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -62,6 +62,6 @@
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
-    "vue": "^3.2.21"
+    "vue": "^3.5.0"
   }
 }
diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
index 6bd12e19..bdecc2ff 100644
--- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
+++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
@@ -4,9 +4,9 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
-type CFormControlValidationProps = InstanceType<typeof CFormControlValidation>['$props']
+import type { ComponentProps } from '../../utils/ComponentProps'
 
-interface CFormControlWrapperProps {
+interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
   floatingLabel?: string
   id?: string
   label?: string
@@ -27,7 +27,9 @@ const CFormControlWrapper = defineComponent({
     /**
      * @ignore
      */
-    id: String,
+    id: {
+      type: String,
+    },
     /**
      * Add a caption for a component.
      *
@@ -41,7 +43,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) {
+  setup(props: CFormControlWrapperProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,
@@ -50,7 +52,6 @@ const CFormControlWrapper = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          floatingLabel: props.floatingLabel,
           invalid: props.invalid,
           tooltipFeedback: props.tooltipFeedback,
           valid: props.valid,
diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 3dd133a7..1774dcba 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -1,10 +1,9 @@
 import { defineComponent, h } from 'vue'
-
 import { CNavLink } from './CNavLink'
 
-type CNavLinkProps = Omit<InstanceType<typeof CNavLink>['$props'], 'as'>
+import type { ComponentProps } from '../../utils/ComponentProps'
 
-interface CNavItemProps {
+interface CNavItemProps extends ComponentProps<typeof CNavLink> {
   as: string
 }
 
@@ -20,7 +19,7 @@ const CNavItem = defineComponent({
       default: 'li',
     },
   },
-  setup(props: CNavLinkProps & CNavItemProps, { slots }) {
+  setup(props: CNavItemProps, { slots }) {
     return () =>
       h(
         props.as,
diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts
index cd7f4360..a190e323 100644
--- a/packages/coreui-vue/src/components/toast/CToastClose.ts
+++ b/packages/coreui-vue/src/components/toast/CToastClose.ts
@@ -1,10 +1,10 @@
 import { defineComponent, h, inject, resolveComponent } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
-type CCloseButtonProps = InstanceType<typeof CCloseButton>['$props']
+import type { ComponentProps } from '../../utils/ComponentProps'
 
-interface CToastCloseProps {
-  as: string
+interface CCloseButtonProps extends ComponentProps<typeof CCloseButton> {
+  as?: string
 }
 
 const CToastClose = defineComponent({
@@ -22,7 +22,7 @@ const CToastClose = defineComponent({
      */
     'close',
   ],
-  setup(props: CToastCloseProps & CCloseButtonProps, { slots, emit }) {
+  setup(props: CCloseButtonProps, { slots, emit }) {
     // eslint-disable-next-line no-unused-vars
     const updateVisible = inject('updateVisible') as (visible: boolean) => void
     const handleClose = () => {
diff --git a/packages/coreui-vue/src/utils/ComponentProps.ts b/packages/coreui-vue/src/utils/ComponentProps.ts
new file mode 100644
index 00000000..5bd3991c
--- /dev/null
+++ b/packages/coreui-vue/src/utils/ComponentProps.ts
@@ -0,0 +1,6 @@
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+
+export type ComponentProps<T> =
+  T extends DefineComponent<ExtractPropTypes<infer Props>, any, any>
+    ? ExtractPublicPropTypes<Props>
+    : never
diff --git a/packages/docs/build/docgen.config.js b/packages/docs/build/docgen.config.js
index e4c71f24..7d654712 100644
--- a/packages/docs/build/docgen.config.js
+++ b/packages/docs/build/docgen.config.js
@@ -8,7 +8,8 @@ module.exports = {
   components: [
     '**/[A-Z]*.ts',
     '!**/[A-Z]*.d.ts',
-    '!**/[A-Z]*.spec.ts'
+    '!**/[A-Z]*.spec.ts',
+    '!**/ComponentProps.ts',
   ],
   outDir: 'api', // folder to save components docs in (relative to the current working directry)
   getDocFileName: (componentPath) =>

From cab04c286beaa5c27a6dfcb6aa4c02e088a2508a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 16 Sep 2024 14:00:15 +0200
Subject: [PATCH 61/92] refactor(CPopover, CTabs, CTooltips): migrate from
 `useUniqueId` to `useId`

---
 .../src/components/popover/CPopover.ts           | 16 ++++++----------
 packages/coreui-vue/src/components/tabs/CTab.ts  |  6 +++---
 .../coreui-vue/src/components/tabs/CTabPanel.ts  |  7 +++----
 packages/coreui-vue/src/components/tabs/CTabs.ts |  8 +++-----
 .../src/components/tooltip/CTooltip.ts           | 16 ++++++----------
 .../coreui-vue/src/composables/useUniqueId.ts    |  2 +-
 6 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 03ade861..300f876a 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -1,8 +1,8 @@
-import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { useUniqueId, usePopper } from '../../composables'
+import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
 import { getRTLPlacement } from '../../utils'
@@ -117,10 +117,10 @@ const CPopover = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
-    const uID = ref()
     const visible = ref(props.visible)
-    const { getUID } = useUniqueId('popover')
+
     const { initPopper, destroyPopper } = usePopper()
+    const uniqueId = `popover-${useId()}`
 
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -149,10 +149,6 @@ const CPopover = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
-    onMounted(() => {
-      uID.value = getUID()
-    })
-
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -212,7 +208,7 @@ const CPopover = defineComponent({
                       },
                       attrs.class,
                     ],
-                    id: uID.value,
+                    id: uniqueId,
                     ref: popoverRef,
                     role: 'tooltip',
                   },
@@ -241,7 +237,7 @@ const CPopover = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
-          id: visible.value ? uID.value : null,
+          id: visible.value ? uniqueId : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),
diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
index 05ce3fe4..b2b178bf 100644
--- a/packages/coreui-vue/src/components/tabs/CTab.ts
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -13,7 +13,7 @@ const CTab = defineComponent({
   },
   setup(props, { slots }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
-    const id = inject('id') as Ref<number | string>
+    const id = inject('id')
     const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
 
     const isActive = () => props.itemKey === activeItemKey.value
@@ -28,11 +28,11 @@ const CTab = defineComponent({
               active: isActive(),
             },
           ],
-          id: `${props.itemKey}-tab-${id.value}`,
+          id: `${props.itemKey}-tab-${id}`,
           role: 'tab',
           tabindex: isActive() ? 0 : -1,
           type: 'button',
-          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
+          'aria-controls': `${props.itemKey}-tab-panel-${id}`,
           'aria-selected': isActive(),
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
index a4d23e7d..3182e74f 100644
--- a/packages/coreui-vue/src/components/tabs/CTabPanel.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
@@ -50,8 +50,7 @@ const CTabPanel = defineComponent({
   ],
   setup(props, { slots, emit }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
-    const id = inject('id') as Ref<number | string>
-
+    const id = inject('id')
     const tabPaneRef = ref()
     const firstRender = ref(true)
     const visible = ref()
@@ -112,9 +111,9 @@ const CTabPanel = defineComponent({
                     show: firstRender.value && visible.value,
                   },
                 ],
-                id: `${props.itemKey}-tab-panel-${id.value}`,
+                id: `${props.itemKey}-tab-panel-${id}`,
                 role: 'tabpanel',
-                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
+                'aria-labelledby': `${props.itemKey}-tab-${id}`,
                 tabindex: 0,
                 ref: tabPaneRef,
               },
diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts
index 112decfe..b61908c2 100644
--- a/packages/coreui-vue/src/components/tabs/CTabs.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabs.ts
@@ -1,5 +1,4 @@
-import { defineComponent, h, provide, ref, watch } from 'vue'
-import { useUniqueId } from '../../composables'
+import { defineComponent, h, provide, ref, useId, watch } from 'vue'
 
 const CTabs = defineComponent({
   name: 'CTabs',
@@ -19,9 +18,8 @@ const CTabs = defineComponent({
     'change',
   ],
   setup(props, { slots, emit }) {
-    const { getUID } = useUniqueId()
-    const uID = ref(getUID())
     const activeItemKey = ref(props.activeItemKey)
+    const uniqueId = useId()
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
     }
@@ -35,7 +33,7 @@ const CTabs = defineComponent({
     )
 
     provide('activeItemKey', activeItemKey)
-    provide('id', uID)
+    provide('id', uniqueId)
     provide('setActiveItemKey', setActiveItemKey)
 
     return () => h('div', { class: 'tabs' }, slots.default && slots.default())
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 02ad416e..6fe15d0e 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -1,8 +1,8 @@
-import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { useUniqueId, usePopper } from '../../composables'
+import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
 import { getRTLPlacement } from '../../utils'
@@ -113,10 +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 { getUID } = useUniqueId('popover')
+
     const { initPopper, destroyPopper } = usePopper()
+    const uniqueId = `tooltip-${useId()}`
 
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -145,10 +145,6 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
-    onMounted(() => {
-      uID.value = getUID()
-    })
-
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -208,7 +204,7 @@ const CTooltip = defineComponent({
                       },
                       attrs.class,
                     ],
-                    id: uID.value,
+                    id: uniqueId,
                     ref: tooltipRef,
                     role: 'tooltip',
                   },
@@ -229,7 +225,7 @@ const CTooltip = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
-          id: visible.value ? uID.value : null,
+          id: visible.value ? uniqueId : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),
diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts
index 95810c31..e6f724a9 100644
--- a/packages/coreui-vue/src/composables/useUniqueId.ts
+++ b/packages/coreui-vue/src/composables/useUniqueId.ts
@@ -7,7 +7,7 @@ export const useUniqueId = (prefix: string = '') => {
     do {
       prefix += Math.floor(Math.random() * 1_000_000)
     } while (ids.value.includes(prefix))
-    
+
     ids.value.push(prefix)
     return prefix
   }

From 26656bf73070e34ee705ab4de5cce132a3e7e522 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 16 Sep 2024 14:01:24 +0200
Subject: [PATCH 62/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

vue  ^3.5.5  →  ^3.5.6
---
 packages/coreui-vue/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index c72d1a45..d21995b1 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -58,7 +58,7 @@
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.2",
-    "vue": "^3.5.5",
+    "vue": "^3.5.6",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {

From 97e58d72a5f37a0ff7fb8556b0fc2c43d89a2309 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 18 Sep 2024 21:40:54 +0200
Subject: [PATCH 63/92] fix(CTabs): add missing `disabled` prop

---
 packages/coreui-vue/src/components/tabs/CTab.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
index b2b178bf..1c7d8763 100644
--- a/packages/coreui-vue/src/components/tabs/CTab.ts
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -3,6 +3,10 @@ import { defineComponent, h, inject, Ref } from 'vue'
 const CTab = defineComponent({
   name: 'CTab',
   props: {
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
     /**
      * Item key.
      */
@@ -34,6 +38,7 @@ const CTab = defineComponent({
           type: 'button',
           'aria-controls': `${props.itemKey}-tab-panel-${id}`,
           'aria-selected': isActive(),
+          disabled: props.disabled,
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
         },

From 02c1c3a29fee878177563d0f41e0c5b1eff3f1e3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 18 Sep 2024 23:06:31 +0200
Subject: [PATCH 64/92] docs: update content

---
 packages/docs/components/tabs.md | 104 +++++++++++++++----------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md
index a7c06623..fcb3dd2a 100644
--- a/packages/docs/components/tabs.md
+++ b/packages/docs/components/tabs.md
@@ -76,16 +76,16 @@ If you don’t provide the `variant` prop, the component will default to a basic
     <CTab disabled itemKey="disabled">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="p-3" itemKey="home">
+    <CTabPanel class="p-3" itemKey="home">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="profile">
+    <CTabPanel class="p-3" itemKey="profile">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="contact">
+    <CTabPanel class="p-3" itemKey="contact">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="disabled">
+    <CTabPanel class="p-3" itemKey="disabled">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -100,16 +100,16 @@ If you don’t provide the `variant` prop, the component will default to a basic
     <CTab disabled itemKey="disabled">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="p-3" itemKey="home">
+    <CTabPanel class="p-3" itemKey="home">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="profile">
+    <CTabPanel class="p-3" itemKey="profile">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="contact">
+    <CTabPanel class="p-3" itemKey="contact">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="p-3" itemKey="disabled">
+    <CTabPanel class="p-3" itemKey="disabled">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -129,16 +129,16 @@ Take that same code, but use `variant="pills"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -153,16 +153,16 @@ Take that same code, but use `variant="pills"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -182,16 +182,16 @@ Take that same code, but use `variant="underline"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -206,16 +206,16 @@ Take that same code, but use `variant="underline"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -235,16 +235,16 @@ Take that same code, but use `variant="underline-border"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -259,16 +259,16 @@ Take that same code, but use `variant="underline-border"` instead:
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -288,16 +288,16 @@ Force your `<CTabs>`'s contents to extend the full available width one of two mo
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -312,16 +312,16 @@ Force your `<CTabs>`'s contents to extend the full available width one of two mo
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -339,16 +339,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -363,16 +363,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
     <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>
@@ -404,16 +404,16 @@ Our Vue Tabs component automatically manages all `role="..."` and `aria-` attrib
     <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
   </CTabList>
   <CTabContent>
-    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
+    <CTabPanel id="home-tab-pane" class="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
       Home tab content
     </CTabPanel>
-    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
+    <CTabPanel id="profile-tab-pane" class="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
       Profile tab content
     </CTabPanel>
-    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
+    <CTabPanel id="contact-tab-pane" class="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
       Contact tab content
     </CTabPanel>
-    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
+    <CTabPanel id="disabled-tab-pane" class="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
       Disabled tab content
     </CTabPanel>
   </CTabContent>

From 5d42d8ad1a8139b8c0bcc0250a2eeda721fc71b3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 22 Sep 2024 14:57:08 +0200
Subject: [PATCH 65/92] docs: update API documentation

---
 packages/coreui-icons-vue                       | 2 +-
 packages/coreui-vue-chartjs                     | 2 +-
 packages/coreui-vue/src/components/tabs/CTab.ts | 2 ++
 packages/docs/api/tabs/CTab.api.md              | 7 ++++---
 packages/docs/api/toast/CToastHeader.api.md     | 6 ------
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue
index be8961e2..009583d5 160000
--- a/packages/coreui-icons-vue
+++ b/packages/coreui-icons-vue
@@ -1 +1 @@
-Subproject commit be8961e2115c0c86a1be72e4d0ea176c69ed4740
+Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911
diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs
index a3a42cab..f3b8364d 160000
--- a/packages/coreui-vue-chartjs
+++ b/packages/coreui-vue-chartjs
@@ -1 +1 @@
-Subproject commit a3a42cabd2b34dd1b1b78cbb72d5e6cdc41ba5cd
+Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041
diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
index 1c7d8763..5eb4c513 100644
--- a/packages/coreui-vue/src/components/tabs/CTab.ts
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -5,6 +5,8 @@ const CTab = defineComponent({
   props: {
     /**
      * Toggle the disabled state for the component.
+     *
+     * @since 5.4.0
      */
     disabled: Boolean,
     /**
diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md
index ed8dc7b0..7cdff394 100644
--- a/packages/docs/api/tabs/CTab.api.md
+++ b/packages/docs/api/tabs/CTab.api.md
@@ -8,6 +8,7 @@ import CTab from '@coreui/vue/src/components/tabs/CTab'
 
 #### Props
 
-| Prop name    | Description | Type           | Values | Default |
-| ------------ | ----------- | -------------- | ------ | ------- |
-| **item-key** | Item key.   | number\|string | -      | -       |
+| Prop name                                                   | Description                                  | Type           | Values | Default |
+| ----------------------------------------------------------- | -------------------------------------------- | -------------- | ------ | ------- |
+| **disabled** <br><div class="badge bg-primary">5.4.0+</div> | Toggle the disabled state for the component. | boolean        | -      | -       |
+| **item-key**                                                | Item key.                                    | number\|string | -      | -       |
diff --git a/packages/docs/api/toast/CToastHeader.api.md b/packages/docs/api/toast/CToastHeader.api.md
index fdd97dc8..a8ff8638 100644
--- a/packages/docs/api/toast/CToastHeader.api.md
+++ b/packages/docs/api/toast/CToastHeader.api.md
@@ -11,9 +11,3 @@ import CToastHeader from '@coreui/vue/src/components/toast/CToastHeader'
 | Prop name        | Description                                     | Type    | Values | Default |
 | ---------------- | ----------------------------------------------- | ------- | ------ | ------- |
 | **close-button** | Automatically add a close button to the header. | boolean | -      | -       |
-
-#### Events
-
-| Event name | Description                                   | Properties |
-| ---------- | --------------------------------------------- | ---------- |
-| **close**  | Event called after clicking the close button. |

From f9a48545538f131f0111754d74a12e688d525185 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 22 Sep 2024 15:12:08 +0200
Subject: [PATCH 66/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@typescript-eslint/eslint-plugin           ^8.5.0  →       ^8.6.0
@typescript-eslint/parser                  ^8.5.0  →       ^8.6.0
@vuepress/plugin-active-header-links  2.0.0-rc.43  →  2.0.0-rc.47
@vuepress/plugin-git                  2.0.0-rc.43  →  2.0.0-rc.44
@vuepress/plugin-register-components  2.0.0-rc.42  →  2.0.0-rc.44
@vuepress/plugin-theme-data           2.0.0-rc.43  →  2.0.0-rc.47
@vuepress/plugin-toc                  2.0.0-rc.43  →  2.0.0-rc.47
sass                                      ^1.78.0  →      ^1.79.3
rollup                                    ^4.21.3  →      ^4.22.4
vue                                        ^3.5.6  →       ^3.5.8
---
 package.json                     |  4 ++--
 packages/coreui-vue/package.json |  4 ++--
 packages/docs/package.json       | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index baa6b2a6..a8e640de 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/vue3-jest": "29.2.6",
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index d21995b1..ac5ee56c 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -54,11 +54,11 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.21.3",
+    "rollup": "^4.22.4",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.2",
-    "vue": "^3.5.6",
+    "vue": "^3.5.8",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index fd51348c..65e97cb8 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -18,18 +18,18 @@
     "@docsearch/js": "^3.6.1",
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.43",
-    "@vuepress/plugin-git": "2.0.0-rc.43",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.47",
+    "@vuepress/plugin-git": "2.0.0-rc.44",
     "@vuepress/plugin-markdown-container": "2.0.0-rc.43",
     "@vuepress/plugin-prismjs": "2.0.0-rc.37",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.43",
-    "@vuepress/plugin-register-components": "2.0.0-rc.42",
-    "@vuepress/plugin-toc": "2.0.0-rc.43",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.47",
+    "@vuepress/plugin-register-components": "2.0.0-rc.44",
+    "@vuepress/plugin-toc": "2.0.0-rc.47",
     "@vuepress/shared": "2.0.0-rc.15",
     "@vuepress/utils": "2.0.0-rc.15",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.78.0",
+    "sass": "^1.79.3",
     "vue-docgen-cli": "^4.79.0",
     "vuepress": "2.0.0-rc.15"
   }

From 20a9dd2cca60f19d0e76ba6d00e315008f383478 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 22 Sep 2024 18:25:34 +0200
Subject: [PATCH 67/92] release: v5.4.0

---
 README.md                        | 2 +-
 lerna.json                       | 2 +-
 packages/coreui-vue/README.md    | 2 +-
 packages/coreui-vue/package.json | 2 +-
 packages/docs/package.json       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 31114030..8999a03d 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/v5.3.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.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`
diff --git a/lerna.json b/lerna.json
index 8e4098d4..a5830df9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.3.0",
+  "version": "5.4.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index 1ecdf9ed..32c3cc2a 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.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`
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index ac5ee56c..f6d14f23 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 65e97cb8..e164bbd8 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From c47645c0905330aac61588d3cc25946beb541cef Mon Sep 17 00:00:00 2001
From: Sreesanth <48680973+Sreesanth46@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:44:18 +0530
Subject: [PATCH 68/92] docs: add key for looped contents

---
 packages/docs/components/dropdown.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index da73b72e..cc321091 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -65,7 +65,7 @@ And with `<a>` elements:
 The best part is you can do this with any button variant, too:
 
 ::: demo
-<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
   <CDropdown :color="item" :togglerText="item" variant="btn-group">
     <CDropdownToggle :color="item">{{item}}</CDropdownToggle>
     <CDropdownMenu>
@@ -77,7 +77,7 @@ The best part is you can do this with any button variant, too:
 </template>
 :::
 ```vue
-<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
   <CDropdown :color="item" :togglerText="item" variant="btn-group">
     <CDropdownToggle :color="item">{{togglerText}}</CDropdownToggle>
     <CDropdownMenu>
@@ -96,7 +96,7 @@ Similarly, create split button dropdowns with virtually the same markup as singl
 We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
 
 ::: demo
-<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
   <CDropdown :color="item" :togglerText="item" variant="btn-group">
     <CButton :color="item">{{ item }}</CButton>
     <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
@@ -109,7 +109,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 </template>
 :::
 ```vue
-<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
   <CDropdown :color="item" :togglerText="item" variant="btn-group">
     <CButton :color="item">{{ item }}</CButton>
     <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
@@ -724,4 +724,4 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:
 
 !!!include(./api/dropdown/CDropdownMenu.api.md)!!!
 
-!!!include(./api/dropdown/CDropdownToggle.api.md)!!!
\ No newline at end of file
+!!!include(./api/dropdown/CDropdownToggle.api.md)!!!

From 6ca1ec92f90ef607850a552cb7a5b31a8122caae Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 29 Oct 2024 01:47:06 +0100
Subject: [PATCH 69/92] fix(CNavItem): `as` is now not a required property

---
 packages/coreui-vue/src/components/nav/CNavItem.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 1774dcba..48290ba7 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -10,7 +10,10 @@ interface CNavItemProps extends ComponentProps<typeof CNavLink> {
 const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
-    ...CNavLink.props,
+    /**
+     * 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.
      */
@@ -18,6 +21,14 @@ const CNavItem = defineComponent({
       type: String,
       default: 'li',
     },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * @ignore
+     */
+    href: String,
   },
   setup(props: CNavItemProps, { slots }) {
     return () =>

From 1c3a3959dfa0f25cc554f4bbac551c7bf238e77a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 29 Oct 2024 12:41:12 +0100
Subject: [PATCH 70/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                             ^5.1.2  →       ^5.2.0
@docsearch/css                             ^3.6.1  →       ^3.6.2
@docsearch/js                              ^3.6.1  →       ^3.6.2
@rollup/plugin-commonjs                   ^26.0.1  →      ^28.0.1
@rollup/plugin-node-resolve               ^15.2.3  →      ^15.3.0
@rollup/plugin-typescript                 ^11.1.6  →      ^12.1.1
@types/jest                              ^29.5.13  →     ^29.5.14
@typescript-eslint/eslint-plugin           ^8.6.0  →      ^8.12.1
@typescript-eslint/parser                  ^8.6.0  →      ^8.12.1
@vue/eslint-config-prettier                ^9.0.0  →      ^10.1.0
@vue/eslint-config-typescript             ^13.0.0  →      ^14.1.3
@vuepress/bundler-vite                2.0.0-rc.15  →  2.0.0-rc.18
@vuepress/bundler-webpack             2.0.0-rc.15  →  2.0.0-rc.18
@vuepress/plugin-active-header-links  2.0.0-rc.47  →  2.0.0-rc.55
@vuepress/plugin-git                  2.0.0-rc.44  →  2.0.0-rc.56
@vuepress/plugin-markdown-container   2.0.0-rc.43  →  2.0.0-rc.54
@vuepress/plugin-register-components  2.0.0-rc.44  →  2.0.0-rc.54
@vuepress/plugin-theme-data           2.0.0-rc.47  →  2.0.0-rc.57
@vuepress/plugin-toc                  2.0.0-rc.47  →  2.0.0-rc.55
@vuepress/shared                      2.0.0-rc.15  →  2.0.0-rc.18
@vuepress/utils                       2.0.0-rc.15  →  2.0.0-rc.18
eslint                                     8.57.0  →       9.13.0
eslint-plugin-unicorn                     ^55.0.0  →      ^56.0.0
eslint-plugin-vue                         ^9.28.0  →      ^9.30.0
rollup                                    ^4.22.4  →      ^4.24.2
sass                                      ^1.79.3  →      ^1.80.4
typescript                                 ^5.6.2  →       ^5.6.3
vue                                        ^3.5.8  →      ^3.5.12
vuepress                              2.0.0-rc.15  →  2.0.0-rc.18
---
 packages/coreui-vue/package.json | 16 ++++++++--------
 packages/docs/package.json       | 30 +++++++++++++++---------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index f6d14f23..44bdc2b6 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,24 +41,24 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.1.2",
+    "@coreui/coreui": "^5.2.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^29.5.13",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.22.4",
+    "rollup": "^4.24.2",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2",
-    "vue": "^3.5.8",
+    "typescript": "^5.6.3",
+    "vue": "^3.5.12",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index e164bbd8..9064fb22 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,28 +9,28 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.1.2",
+    "@coreui/coreui": "^5.2.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.2.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
-    "@docsearch/css": "^3.6.1",
-    "@docsearch/js": "^3.6.1",
-    "@vuepress/bundler-vite": "2.0.0-rc.15",
-    "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.47",
-    "@vuepress/plugin-git": "2.0.0-rc.44",
-    "@vuepress/plugin-markdown-container": "2.0.0-rc.43",
+    "@docsearch/css": "^3.6.2",
+    "@docsearch/js": "^3.6.2",
+    "@vuepress/bundler-vite": "2.0.0-rc.18",
+    "@vuepress/bundler-webpack": "2.0.0-rc.18",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.55",
+    "@vuepress/plugin-git": "2.0.0-rc.56",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.54",
     "@vuepress/plugin-prismjs": "2.0.0-rc.37",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.47",
-    "@vuepress/plugin-register-components": "2.0.0-rc.44",
-    "@vuepress/plugin-toc": "2.0.0-rc.47",
-    "@vuepress/shared": "2.0.0-rc.15",
-    "@vuepress/utils": "2.0.0-rc.15",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.57",
+    "@vuepress/plugin-register-components": "2.0.0-rc.54",
+    "@vuepress/plugin-toc": "2.0.0-rc.55",
+    "@vuepress/shared": "2.0.0-rc.18",
+    "@vuepress/utils": "2.0.0-rc.18",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.79.3",
+    "sass": "^1.80.4",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.15"
+    "vuepress": "2.0.0-rc.18"
   }
 }

From 741c27b7db9077a9156a2e75342930b20a82aa94 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 29 Oct 2024 12:45:45 +0100
Subject: [PATCH 71/92] release: v5.4.1

---
 README.md                             | 2 +-
 lerna.json                            | 2 +-
 packages/coreui-vue/README.md         | 2 +-
 packages/coreui-vue/package.json      | 2 +-
 packages/docs/api/nav/CNavItem.api.md | 8 +++++---
 packages/docs/package.json            | 2 +-
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 8999a03d..e21d4f28 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/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.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`
diff --git a/lerna.json b/lerna.json
index a5830df9..6fea4400 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.4.0",
+  "version": "5.4.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index 32c3cc2a..d422298c 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.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`
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 44bdc2b6..02a7b5e2 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/api/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index 2a2d63d1..bba531c6 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -8,6 +8,8 @@ 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'    |
+| 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'    |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 9064fb22..43b43f9c 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From 342ba880f1a601b5ed4bfe6541b3ed3def1320c8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 16 Nov 2024 12:10:42 +0100
Subject: [PATCH 72/92] refactor(CNavItem): pass anchor attributes to the
 internal element if the href attribute is set

---
 packages/coreui-vue/src/components/nav/CNavItem.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 48290ba7..e660c01a 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -5,10 +5,12 @@ import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CNavItemProps extends ComponentProps<typeof CNavLink> {
   as: string
+  class: string
 }
 
 const CNavItem = defineComponent({
   name: 'CNavItem',
+  inheritAttrs: false,
   props: {
     /**
      * Toggle the active state for the component.
@@ -21,6 +23,10 @@ const CNavItem = defineComponent({
       type: String,
       default: 'li',
     },
+    /**
+     * A string of all className you want applied to the component.
+     */
+    class: String,
     /**
      * Toggle the disabled state for the component.
      */
@@ -30,17 +36,18 @@ const CNavItem = defineComponent({
      */
     href: String,
   },
-  setup(props: CNavItemProps, { slots }) {
+  setup(props: CNavItemProps, { attrs, slots }) {
     return () =>
       h(
         props.as,
         {
-          class: 'nav-item',
+          class: ['nav-item', props.class],
         },
         props.href
           ? h(
               CNavLink,
               {
+                ...attrs,
                 active: props.active,
                 disabled: props.disabled,
                 href: props.href,

From 8c2827790d607a449aeafc821a80d7848a8438ba Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Jan 2025 22:39:15 +0100
Subject: [PATCH 73/92] refactor(CAccordion): improve component accessibility

---
 .../src/components/accordion/CAccordionBody.ts     |  3 ++-
 .../src/components/accordion/CAccordionButton.ts   |  4 +++-
 .../src/components/accordion/CAccordionItem.ts     | 14 +++++++++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
index 4a8d83ff..c8907021 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts
@@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse'
 const CAccordionBody = defineComponent({
   name: 'CAccordionBody',
   setup(_, { slots }) {
+    const id = inject('id')
     const visible = inject('visible') as Ref<boolean>
     return () =>
       h(
         CCollapse,
-        { class: 'accordion-collapse', visible: visible.value },
+        { class: 'accordion-collapse', id, visible: visible.value },
         {
           default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()),
         },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
index 69ab7a00..f9820b4a 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts
@@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue'
 const CAccordionButton = defineComponent({
   name: 'CAccordionButton',
   setup(_, { slots }) {
+    const id = inject('id') as string
     const toggleVisibility = inject('toggleVisibility') as () => void
     const visible = inject('visible') as Ref<boolean>
 
@@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({
         'button',
         {
           type: 'button',
-          'aria-expanded': !visible.value,
+          'aria-control': id,
+          'aria-expanded': visible.value,
           class: ['accordion-button', { ['collapsed']: !visible.value }],
           onClick: () => toggleVisibility(),
         },
diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
index 20575085..f2ebe594 100644
--- a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
+++ b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts
@@ -1,8 +1,12 @@
-import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue'
+import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue'
 
 const CAccordionItem = defineComponent({
   name: 'CAccordionItem',
   props: {
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: String,
     /**
      * The item key.
      */
@@ -13,16 +17,20 @@ const CAccordionItem = defineComponent({
     const alwaysOpen = inject('alwaysOpen') as boolean
     const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
 
-    const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11))
+    const id = props.id ?? useId()
+    const itemKey = ref(props.itemKey ?? id)
     const visible = ref(Boolean(activeItemKey.value === itemKey.value))
 
     watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value)))
 
     const toggleVisibility = () => {
       visible.value = !visible.value
-      !alwaysOpen && visible && setActiveItemKey(itemKey.value)
+      if (!alwaysOpen && visible) {
+        setActiveItemKey(itemKey.value)
+      }
     }
 
+    provide('id', id)
     provide('visible', visible)
     provide('toggleVisibility', toggleVisibility)
 

From 7a65f3674bca057e74196736d8d052f7c765034b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Jan 2025 22:46:32 +0100
Subject: [PATCH 74/92] fix(CNavGroup): add the missing href attribute to the
 toggler

---
 packages/coreui-vue/src/components/nav/CNavGroup.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/nav/CNavGroup.ts b/packages/coreui-vue/src/components/nav/CNavGroup.ts
index 2c83ccdf..7c45bd7c 100644
--- a/packages/coreui-vue/src/components/nav/CNavGroup.ts
+++ b/packages/coreui-vue/src/components/nav/CNavGroup.ts
@@ -41,7 +41,10 @@ const CNavGroup = defineComponent({
 
     onMounted(() => {
       visible.value = props.visible
-      props.visible && navGroupRef.value.classList.add('show')
+      if (props.visible) {
+        navGroupRef.value.classList.add('show')
+      }
+
       emit('visible-change', visible.value)
     })
 
@@ -60,7 +63,8 @@ const CNavGroup = defineComponent({
       emit('visible-change', visible.value)
     })
 
-    const handleTogglerClick = () => {
+    const handleTogglerClick = (event: Event) => {
+      event.preventDefault()
       visible.value = !visible.value
       emit('visible-change', visible.value)
     }
@@ -111,6 +115,7 @@ const CNavGroup = defineComponent({
               'a',
               {
                 class: ['nav-link', 'nav-group-toggle'],
+                href: '#',
                 onClick: handleTogglerClick,
               },
               slots.togglerContent && slots.togglerContent(),

From 0f0a66d2dce66b99e449484a38fdb09550f00ea2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:10:59 +0100
Subject: [PATCH 75/92] build: upgrade ESLint to v9.x

---
 .eslintignore     |  3 --
 .eslintrc.js      | 75 ----------------------------------------------
 eslint.config.mjs | 76 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      | 18 +++++------
 4 files changed, 84 insertions(+), 88 deletions(-)
 delete mode 100644 .eslintignore
 delete mode 100644 .eslintrc.js
 create mode 100644 eslint.config.mjs

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 1846284b..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/dist/**
-/docs/**
-.eslintrc.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index a0662dcd..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * 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'],
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:prettier/recommended',
-    'plugin:unicorn/recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/eslint-config-prettier',
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'unicorn/filename-case': 'off',
-    'unicorn/no-array-for-each': 'off',
-    'unicorn/no-null': 'off',
-    'unicorn/prefer-dom-node-append': 'off',
-    'unicorn/prefer-export-from': 'off',
-    'unicorn/prefer-query-selector': 'off',
-    'unicorn/prevent-abbreviations': 'off',
-    '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/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..3cee3965
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,76 @@
+import eslint from '@eslint/js'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import typescriptEslint from 'typescript-eslint'
+
+export default typescriptEslint.config(
+  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs', 'eslint.config.mjs'] },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      ...eslintPluginVue.configs['flat/recommended'],
+      eslintPluginUnicorn.configs['flat/recommended'],
+    ],
+    files: ['packages/**/src/**/*.{js,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        parser: typescriptEslint.parser,
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/no-array-for-each': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/prefer-dom-node-append': 'off',
+      'unicorn/prefer-export-from': 'off',
+      'unicorn/prefer-query-selector': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+      'vue/require-default-prop': 'off',
+    },
+  },
+  {
+    files: ['**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'module',
+    },
+  },
+  {
+    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
+  },
+  {
+    files: ['packages/docs/build/**'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'commonjs',
+    },
+    rules: {
+      'no-console': 'off',
+      strict: 'error',
+    },
+  },
+  eslintPluginPrettierRecommended,
+)
diff --git a/package.json b/package.json
index a8e640de..37eb604e 100644
--- a/package.json
+++ b/package.json
@@ -17,23 +17,21 @@
     "lib:build": "lerna run --scope \"@coreui/vue\" build --stream",
     "lib:test": "lerna run --scope \"@coreui/vue\" test --stream",
     "lib:test:update": "lerna run --scope \"@coreui/vue\" test:update --stream",
-    "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"",
+    "lint": "eslint",
     "test": "npm-run-all charts:test icons:test lib:test",
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.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.2.1",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
     "lerna": "^8.1.8",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "typescript-eslint": "^8.19.1"
   }
 }

From ad4bfdfdb99fae7b710b688089731c33812ce742 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:17:13 +0100
Subject: [PATCH 76/92] build: migrate `.prettierrc.js` to `eslint.config.mjs`

---
 .prettierrc.js      |  7 -------
 eslint.config.mjs   |  4 ++--
 prettier.config.mjs | 13 +++++++++++++
 3 files changed, 15 insertions(+), 9 deletions(-)
 delete mode 100644 .prettierrc.js
 create mode 100644 prettier.config.mjs

diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 415ca057..00000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  semi: false,
-  trailingComma: "all",
-  singleQuote: true,
-  printWidth: 100,
-  tabWidth: 2
-};
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3cee3965..15164bf5 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,7 +6,7 @@ import globals from 'globals'
 import typescriptEslint from 'typescript-eslint'
 
 export default typescriptEslint.config(
-  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs', 'eslint.config.mjs'] },
+  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs'] },
   {
     extends: [
       eslint.configs.recommended,
@@ -44,7 +44,7 @@ export default typescriptEslint.config(
         ...globals.node,
       },
 
-      ecmaVersion: 5,
+      ecmaVersion: 'latest',
       sourceType: 'module',
     },
   },
diff --git a/prettier.config.mjs b/prettier.config.mjs
new file mode 100644
index 00000000..6e0ae723
--- /dev/null
+++ b/prettier.config.mjs
@@ -0,0 +1,13 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {
+  printWidth: 100,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+};
+
+export default config;
\ No newline at end of file

From 83d380c315404eb6152cfed0b2d687a82507fed1 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:18:14 +0100
Subject: [PATCH 77/92] chore: dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lerna     ^8.1.8  →  ^8.1.9
prettier  ^3.3.3  →  ^3.4.2
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 37eb604e..9b945921 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
-    "lerna": "^8.1.8",
+    "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "typescript-eslint": "^8.19.1"
   }
 }

From 9eb188014652f1c912900539e2aa3145f5123edc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:19:46 +0100
Subject: [PATCH 78/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@rollup/plugin-commonjs      ^28.0.1  →  ^28.0.2
@rollup/plugin-node-resolve  ^15.3.0  →  ^16.0.0
@rollup/plugin-typescript    ^12.1.1  →  ^12.1.2
rollup                       ^4.24.2  →  ^4.30.1
typescript                    ^5.6.3  →   ^5.7.2
vue                          ^3.5.12  →  ^3.5.13
---
 packages/coreui-vue/package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 02a7b5e2..bc94fec7 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -45,20 +45,20 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.24.2",
+    "rollup": "^4.30.1",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3",
-    "vue": "^3.5.12",
+    "typescript": "^5.7.2",
+    "vue": "^3.5.13",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {

From 9ffefe651379f6a02b7f9748811b83ee4095c125 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:23:55 +0100
Subject: [PATCH 79/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@docsearch/css                             ^3.6.2  →       ^3.8.2
@docsearch/js                              ^3.6.2  →       ^3.8.2
@vuepress/bundler-vite                2.0.0-rc.18  →  2.0.0-rc.19
@vuepress/bundler-webpack             2.0.0-rc.18  →  2.0.0-rc.19
@vuepress/plugin-active-header-links  2.0.0-rc.55  →  2.0.0-rc.69
@vuepress/plugin-git                  2.0.0-rc.56  →  2.0.0-rc.68
@vuepress/plugin-markdown-container   2.0.0-rc.54  →  2.0.0-rc.66
@vuepress/plugin-register-components  2.0.0-rc.54  →  2.0.0-rc.66
@vuepress/plugin-theme-data           2.0.0-rc.57  →  2.0.0-rc.69
@vuepress/plugin-toc                  2.0.0-rc.55  →  2.0.0-rc.66
@vuepress/shared                      2.0.0-rc.18  →  2.0.0-rc.19
@vuepress/utils                       2.0.0-rc.18  →  2.0.0-rc.19
sass                                      ^1.80.4  →      ^1.83.1
vuepress                              2.0.0-rc.18  →  2.0.0-rc.19
---
 packages/docs/package.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 43b43f9c..45028b48 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -14,23 +14,23 @@
     "@coreui/icons-vue": "^2.2.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
-    "@docsearch/css": "^3.6.2",
-    "@docsearch/js": "^3.6.2",
-    "@vuepress/bundler-vite": "2.0.0-rc.18",
-    "@vuepress/bundler-webpack": "2.0.0-rc.18",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.55",
-    "@vuepress/plugin-git": "2.0.0-rc.56",
-    "@vuepress/plugin-markdown-container": "2.0.0-rc.54",
+    "@docsearch/css": "^3.8.2",
+    "@docsearch/js": "^3.8.2",
+    "@vuepress/bundler-vite": "2.0.0-rc.19",
+    "@vuepress/bundler-webpack": "2.0.0-rc.19",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.69",
+    "@vuepress/plugin-git": "2.0.0-rc.68",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.66",
     "@vuepress/plugin-prismjs": "2.0.0-rc.37",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.57",
-    "@vuepress/plugin-register-components": "2.0.0-rc.54",
-    "@vuepress/plugin-toc": "2.0.0-rc.55",
-    "@vuepress/shared": "2.0.0-rc.18",
-    "@vuepress/utils": "2.0.0-rc.18",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.69",
+    "@vuepress/plugin-register-components": "2.0.0-rc.66",
+    "@vuepress/plugin-toc": "2.0.0-rc.66",
+    "@vuepress/shared": "2.0.0-rc.19",
+    "@vuepress/utils": "2.0.0-rc.19",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.80.4",
+    "sass": "^1.83.1",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.18"
+    "vuepress": "2.0.0-rc.19"
   }
 }

From 8b7e683d8eb50ca3a030d2b05ede1cf9e2c4bf75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:37:43 +0100
Subject: [PATCH 80/92] chore: update the current year

---
 LICENSE | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/LICENSE b/LICENSE
index f19fc729..fbb053e0 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 creativeLabs Łukasz Holeczek
+Copyright (c) 2025 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.

From 49180937bf5172e80f3fb2a578db44012cff1b80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Wed, 8 Jan 2025 11:38:12 +0100
Subject: [PATCH 81/92] chore: update the current year

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e21d4f28..3d4aab99 100644
--- a/README.md
+++ b/README.md
@@ -227,4 +227,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and license
 
-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/).
+Copyright 2025 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/).

From 9f310bb700dee6f30dab3748de333a605127d0fc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 6 May 2025 13:45:48 +0200
Subject: [PATCH 82/92] build: add .prettierc for docgen cli

---
 packages/docs/.prettierrc                         |  8 ++++++++
 packages/docs/api/accordion/CAccordionItem.api.md |  7 ++++---
 packages/docs/api/form/CFormControlWrapper.api.md | 11 ++++++-----
 packages/docs/api/nav/CNavItem.api.md             |  1 +
 4 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 packages/docs/.prettierrc

diff --git a/packages/docs/.prettierrc b/packages/docs/.prettierrc
new file mode 100644
index 00000000..53e4559d
--- /dev/null
+++ b/packages/docs/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2
+  
+}
diff --git a/packages/docs/api/accordion/CAccordionItem.api.md b/packages/docs/api/accordion/CAccordionItem.api.md
index 753acd83..3e07d5aa 100644
--- a/packages/docs/api/accordion/CAccordionItem.api.md
+++ b/packages/docs/api/accordion/CAccordionItem.api.md
@@ -8,6 +8,7 @@ import CAccordionItem from '@coreui/vue/src/components/accordion/CAccordionItem'
 
 #### Props
 
-| Prop name    | Description   | Type           | Values | Default |
-| ------------ | ------------- | -------------- | ------ | ------- |
-| **item-key** | The item key. | number\|string | -      | -       |
+| Prop name    | Description                                                                                   | Type           | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------------- | -------------- | ------ | ------- |
+| **id**       | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string         | -      | -       |
+| **item-key** | The item key.                                                                                 | number\|string | -      | -       |
diff --git a/packages/docs/api/form/CFormControlWrapper.api.md b/packages/docs/api/form/CFormControlWrapper.api.md
index c4d97891..ebce3a46 100644
--- a/packages/docs/api/form/CFormControlWrapper.api.md
+++ b/packages/docs/api/form/CFormControlWrapper.api.md
@@ -8,8 +8,9 @@ import CFormControlWrapper from '@coreui/vue/src/components/form/CFormControlWra
 
 #### Props
 
-| Prop name                                                         | Description                                                                                                                                         | Type   | Values | Default |
-| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **floating-label** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | -      | -       |
-| **label** <br><div class="badge bg-primary">4.3.0+</div>          | Add a caption for a component.                                                                                                                      | string | -      | -       |
-| **text** <br><div class="badge bg-primary">4.3.0+</div>           | Add helper text to the component.                                                                                                                   | string | -      | -       |
+| Prop name                                                              | Description                                                                                                                                         | Type   | Values | Default |
+| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **floating-class-name** <br><div class="badge bg-primary">5.5.0+</div> | A string of all className you want applied to the floating label wrapper.                                                                           | string | -      | -       |
+| **floating-label** <br><div class="badge bg-primary">4.3.0+</div>      | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | -      | -       |
+| **label** <br><div class="badge bg-primary">4.3.0+</div>               | Add a caption for a component.                                                                                                                      | string | -      | -       |
+| **text** <br><div class="badge bg-primary">4.3.0+</div>                | Add helper text to the component.                                                                                                                   | string | -      | -       |
diff --git a/packages/docs/api/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index bba531c6..788b3792 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -12,4 +12,5 @@ import CNavItem from '@coreui/vue/src/components/nav/CNavItem'
 | ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
 | **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'    |
+| **class**    | A string of all className you want applied to the component.                            | string  | -      | -       |
 | **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |

From c43c76b9d991041b19ad06912469585031236928 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 6 May 2025 13:48:40 +0200
Subject: [PATCH 83/92] feat(CFormControlWrapper): allow passing class names to
 the CFormFloaging component

---
 .../components/form/CFormControlWrapper.ts    | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
index bdecc2ff..0ed3d195 100644
--- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
+++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts
@@ -7,6 +7,7 @@ import { CFormText } from './CFormText'
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
+  floatingClassName?: string
   floatingLabel?: string
   id?: string
   label?: string
@@ -18,6 +19,12 @@ const CFormControlWrapper = defineComponent({
   inheritAttrs: false,
   props: {
     ...CFormControlValidation.props,
+    /**
+     * A string of all className you want applied to the floating label wrapper.
+     *
+     * @since 5.5.0
+     */
+    floatingClassName: String,
     /**
      * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
      *
@@ -69,29 +76,36 @@ const CFormControlWrapper = defineComponent({
 
     return () =>
       props.floatingLabel
-        ? h(CFormFloating, () => [
-            slots.default && slots.default(),
-            h(
-              CFormLabel,
-              {
-                for: props.id,
-              },
-              {
-                default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
-              },
-            ),
-            (props.text || slots.text) &&
+        ? h(
+            CFormFloating,
+            {
+              class: props.floatingClassName,
+            },
+            () => [
+              slots.default && slots.default(),
               h(
-                CFormText,
+                CFormLabel,
                 {
-                  id: props.describedby,
+                  for: props.id,
                 },
                 {
-                  default: () => (slots.text && slots.text()) || props.text,
+                  default: () =>
+                    (slots.label && slots.label()) || props.label || props.floatingLabel,
                 },
               ),
-            formControlValidation(),
-          ])
+              (props.text || slots.text) &&
+                h(
+                  CFormText,
+                  {
+                    id: props.describedby,
+                  },
+                  {
+                    default: () => (slots.text && slots.text()) || props.text,
+                  },
+                ),
+              formControlValidation(),
+            ],
+          )
         : [
             (props.label || slots.label) &&
               h(

From e024754a69ab46b041d781de23c0401cfed8bcdd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 6 May 2025 14:05:22 +0200
Subject: [PATCH 84/92] chore: clean-up

---
 prettier.config.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/prettier.config.mjs b/prettier.config.mjs
index 6e0ae723..c901ceaf 100644
--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -8,6 +8,6 @@ const config = {
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'es5',
-};
+}
 
-export default config;
\ No newline at end of file
+export default config

From ed1b8df741c2d37a1da4a854d72557e48491384c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 12:12:02 +0200
Subject: [PATCH 85/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                ^5.2.0  →   ^5.4.0
@docsearch/css                ^3.8.2  →   ^3.9.0
@docsearch/js                 ^3.8.2  →   ^3.9.0
@rollup/plugin-commonjs      ^28.0.2  →  ^28.0.3
@rollup/plugin-node-resolve  ^16.0.0  →  ^16.0.1
eslint                       ^9.17.0  →  ^9.28.0
eslint-config-prettier        ^9.1.0  →  ^10.1.5
eslint-plugin-prettier        ^5.2.1  →   ^5.4.1
eslint-plugin-unicorn        ^56.0.1  →  ^59.0.1
eslint-plugin-vue            ^9.32.0  →  ^10.1.0
globals                     ^15.14.0  →  ^16.2.0
lerna                         ^8.1.9  →   ^8.2.2
prettier                      ^3.4.2  →   ^3.5.3
rollup                       ^4.30.1  →  ^4.41.1
sass                         ^1.83.1  →  ^1.89.1
ts-jest                      ^29.2.5  →  ^29.3.4
typescript                    ^5.7.2  →   ^5.8.3
typescript-eslint            ^8.19.1  →  ^8.33.1
vue                          ^3.5.13  →  ^3.5.16
vue-types                     ^5.1.3  →   ^6.0.0
---
 package.json                                  |  18 +-
 packages/coreui-vue/package.json              |  16 +-
 .../src/components/stepper/CStepper.ts        | 266 ++++++++++++++++++
 .../stepper/__tests__/CBadge.spec.ts          |  39 +++
 .../__snapshots__/CBadge.spec.ts.snap         |  15 +
 .../src/components/stepper/index.ts           |  10 +
 .../src/components/stepper/types.ts           |  20 ++
 packages/docs/package.json                    |   8 +-
 8 files changed, 371 insertions(+), 21 deletions(-)
 create mode 100644 packages/coreui-vue/src/components/stepper/CStepper.ts
 create mode 100644 packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
 create mode 100644 packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
 create mode 100644 packages/coreui-vue/src/components/stepper/index.ts
 create mode 100644 packages/coreui-vue/src/components/stepper/types.ts

diff --git a/package.json b/package.json
index 9b945921..7b5343e7 100644
--- a/package.json
+++ b/package.json
@@ -23,15 +23,15 @@
   },
   "devDependencies": {
     "@vue/vue3-jest": "29.2.6",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "globals": "^15.14.0",
-    "lerna": "^8.1.9",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-vue": "^10.1.0",
+    "globals": "^16.2.0",
+    "lerna": "^8.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
-    "typescript-eslint": "^8.19.1"
+    "prettier": "^3.5.3",
+    "typescript-eslint": "^8.33.1"
   }
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index bc94fec7..7cbb6585 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,12 +41,12 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.2.0",
+    "@coreui/coreui": "^5.4.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/jest": "^29.5.14",
     "@vue/test-utils": "^2.4.6",
@@ -54,12 +54,12 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.30.1",
+    "rollup": "^4.41.1",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
-    "vue": "^3.5.13",
-    "vue-types": "^5.1.3"
+    "ts-jest": "^29.3.4",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.16",
+    "vue-types": "^6.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
diff --git a/packages/coreui-vue/src/components/stepper/CStepper.ts b/packages/coreui-vue/src/components/stepper/CStepper.ts
new file mode 100644
index 00000000..42df9bf4
--- /dev/null
+++ b/packages/coreui-vue/src/components/stepper/CStepper.ts
@@ -0,0 +1,266 @@
+// CStepper.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  watch,
+  computed,
+  nextTick,
+  onMounted,
+  toRefs,
+  shallowRef,
+  watchEffect,
+} from 'vue'
+import { CCollapse } from '../collapse'
+import type { StepperStepData, StepperStepValidationResult } from './types'
+
+export const CStepper = defineComponent({
+  name: 'CStepper',
+  inheritAttrs: false,
+  props: {
+    modelValue: Number,
+    defaultActiveStepIndex: {
+      type: Number,
+      default: 0,
+    },
+    layout: {
+      type: String as () => 'horizontal' | 'vertical',
+      default: 'horizontal',
+    },
+    linear: {
+      type: Boolean,
+      default: true,
+    },
+    steps: {
+      type: Array as () => StepperStepData[],
+      required: true,
+    },
+    stepButtonLayout: {
+      type: String as () => 'horizontal' | 'vertical',
+      default: 'horizontal',
+    },
+    validation: {
+      type: Boolean,
+      default: true,
+    },
+    id: String,
+  },
+  emits: ['update:modelValue', 'finish', 'reset', 'stepChange', 'stepValidationComplete'],
+  setup(props, { emit, slots, attrs, expose }) {
+    const { modelValue, defaultActiveStepIndex, validation, steps, layout, linear } = toRefs(props)
+
+    const activeStepIndex = ref<number>(modelValue.value ?? defaultActiveStepIndex.value ?? 0)
+    const isControlled = computed(() => modelValue.value !== undefined)
+    const isFinished = ref(false)
+    const stepsRef = ref<HTMLOListElement | null>(null)
+    const stepButtonRefs = shallowRef<(HTMLButtonElement | null)[]>([])
+
+    watch(modelValue, (val) => {
+      if (val !== undefined) activeStepIndex.value = val
+    })
+
+    watch(activeStepIndex, (val) => {
+      if (isControlled.value) emit('update:modelValue', val)
+    })
+
+    const isStepValid = (index: number): boolean => {
+      if (!validation.value) return true
+
+      const form = steps.value[index]?.formRef?.value
+      if (!form) return true
+
+      const valid = form.checkValidity()
+      emit('stepValidationComplete', { stepNumber: index + 1, isValid: valid })
+      if (!valid) form.reportValidity()
+      return valid
+    }
+
+    const setActiveStep = (index: number, bypassValidation = false) => {
+      if (index < 0 || index >= steps.value.length || index === activeStepIndex.value) return
+      if (!bypassValidation && index > activeStepIndex.value && !isStepValid(activeStepIndex.value))
+        return
+
+      activeStepIndex.value = index
+      emit('stepChange', index + 1)
+    }
+
+    const next = () => {
+      if (activeStepIndex.value < steps.value.length - 1) {
+        setActiveStep(activeStepIndex.value + 1)
+      } else {
+        finish()
+      }
+    }
+
+    const prev = () => {
+      if (activeStepIndex.value > 0) {
+        setActiveStep(activeStepIndex.value - 1, true)
+      }
+    }
+
+    const finish = () => {
+      if (activeStepIndex.value === steps.value.length - 1 && isStepValid(activeStepIndex.value)) {
+        isFinished.value = true
+        emit('finish')
+      }
+    }
+
+    const reset = () => {
+      if (validation.value) {
+        steps.value.forEach((s) => s.formRef?.value?.reset?.())
+      }
+      activeStepIndex.value = defaultActiveStepIndex.value
+      isFinished.value = false
+      emit('reset')
+      emit('stepChange', defaultActiveStepIndex.value)
+      nextTick(() => {
+        stepButtonRefs.value[defaultActiveStepIndex.value]?.focus()
+      })
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const buttons = stepButtonRefs.value
+      const current = event.target as HTMLButtonElement
+      const index = buttons.findIndex((b) => b === current)
+      if (index === -1) return
+
+      let nextIndex = index
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          nextIndex = (index + 1) % buttons.length
+          break
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          nextIndex = (index - 1 + buttons.length) % buttons.length
+          break
+        case 'Home':
+          nextIndex = 0
+          break
+        case 'End':
+          nextIndex = buttons.length - 1
+          break
+        default:
+          return
+      }
+
+      event.preventDefault()
+      buttons[nextIndex]?.focus()
+    }
+
+    expose({ next, prev, finish, reset })
+
+    return () => {
+      const isVertical = layout.value === 'vertical'
+      stepButtonRefs.value = []
+
+      return h(
+        'div',
+        {
+          ...attrs,
+          class: ['stepper', { 'stepper-vertical': isVertical }, attrs.class],
+        },
+        [
+          h(
+            'ol',
+            {
+              class: 'stepper-steps',
+              role: 'tablist',
+              'aria-orientation': isVertical ? 'vertical' : 'horizontal',
+              onKeydown: handleKeyDown,
+              ref: stepsRef,
+            },
+            steps.value.map((step, index) => {
+              const isActive = !isFinished.value && index === activeStepIndex.value
+              const isComplete = isFinished.value || index < activeStepIndex.value
+              const isDisabled =
+                isFinished.value || (linear.value && index > activeStepIndex.value + 1)
+              const stepId = `step-${props.id || 'stepper'}-${index}`
+              const panelId = `panel-${props.id || 'stepper'}-${index}`
+
+              return h(
+                'li',
+                {
+                  key: index,
+                  class: ['stepper-step', props.stepButtonLayout],
+                  role: 'presentation',
+                },
+                [
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      class: ['stepper-step-button', { active: isActive, complete: isComplete }],
+                      disabled: isDisabled,
+                      id: stepId,
+                      role: 'tab',
+                      'aria-selected': isActive,
+                      tabindex: isActive ? 0 : -1,
+                      'aria-controls': step.content ? panelId : undefined,
+                      onClick: () =>
+                        setActiveStep(index, !linear.value || index <= activeStepIndex.value),
+                      ref: (el) => (stepButtonRefs.value[index] = el as HTMLButtonElement),
+                    },
+                    [
+                      h('span', { class: 'stepper-step-indicator' }, [
+                        isComplete
+                          ? h('span', { class: 'stepper-step-indicator-icon' })
+                          : h(
+                              'span',
+                              { class: 'stepper-step-indicator-text' },
+                              step.indicator ?? index + 1
+                            ),
+                      ]),
+                      h('span', { class: 'stepper-step-label' }, step.label),
+                    ]
+                  ),
+                  index < steps.value.length - 1 && h('div', { class: 'stepper-step-connector' }),
+                  step.content &&
+                    isVertical &&
+                    h(
+                      CCollapse,
+                      {
+                        class: 'stepper-step-content',
+                        id: panelId,
+                        role: 'tabpanel',
+                        visible: isActive,
+                        'aria-hidden': !isActive,
+                        'aria-labelledby': stepId,
+                        'aria-live': 'polite',
+                      },
+                      () => step.content
+                    ),
+                ]
+              )
+            })
+          ),
+          !isVertical &&
+            steps.value.some((s) => s.content != null) &&
+            h(
+              'div',
+              { class: 'stepper-content' },
+              steps.value.map((step, index) => {
+                const isActive = !isFinished.value && index === activeStepIndex.value
+                const stepId = `step-${props.id || 'stepper'}-${index}`
+                const panelId = `panel-${props.id || 'stepper'}-${index}`
+
+                return h(
+                  'div',
+                  {
+                    key: index,
+                    id: panelId,
+                    role: 'tabpanel',
+                    'aria-hidden': !isActive,
+                    'aria-labelledby': stepId,
+                    'aria-live': 'polite',
+                    class: ['stepper-pane', { active: isActive, show: isActive }],
+                  },
+                  step.content
+                )
+              })
+            ),
+        ]
+      )
+    }
+  },
+})
diff --git a/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts b/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
new file mode 100644
index 00000000..4d132901
--- /dev/null
+++ b/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils'
+import { CBadge as Component } from '../../'
+
+const ComponentName = 'CBadge'
+const wrapper = shallowMount(Component)
+const customWrapper = shallowMount(Component, {
+  props: {
+    color: 'success',
+  },
+  attrs: {
+    class: 'bazinga',
+  },
+  slots: {
+    default: 'Hello World!',
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly with slot', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('has a prope class names', () => {
+    expect(customWrapper.classes('bazinga')).toBe(true)
+    expect(customWrapper.classes('badge')).toBe(true)
+    expect(customWrapper.classes('bg-success')).toBe(true)
+  })
+  it('default slot contains text', () => {
+    expect(customWrapper.text()).toBe('Hello World!')
+  })
+})
diff --git a/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap b/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
new file mode 100644
index 00000000..249fb4fd
--- /dev/null
+++ b/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CBadge component renders correctly 1`] = `
+<span
+  class="badge"
+/>
+`;
+
+exports[`Loads and display CBadge component renders correctly with slot 1`] = `
+<span
+  class="badge bg-success bazinga"
+>
+  Hello World!
+</span>
+`;
diff --git a/packages/coreui-vue/src/components/stepper/index.ts b/packages/coreui-vue/src/components/stepper/index.ts
new file mode 100644
index 00000000..93b9c047
--- /dev/null
+++ b/packages/coreui-vue/src/components/stepper/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CStepper } from './CStepper'
+
+const CStepperPlugin = {
+  install: (app: App): void => {
+    app.component(CStepper.name as string, CStepper)
+  },
+}
+
+export { CStepper, CStepperPlugin }
diff --git a/packages/coreui-vue/src/components/stepper/types.ts b/packages/coreui-vue/src/components/stepper/types.ts
new file mode 100644
index 00000000..a2cc6bcf
--- /dev/null
+++ b/packages/coreui-vue/src/components/stepper/types.ts
@@ -0,0 +1,20 @@
+import type { VNode, Ref } from 'vue'
+
+export interface StepperRef {
+  next: () => void
+  prev: () => void
+  finish: () => void
+  reset: () => void
+}
+
+export interface StepperStepData {
+  indicator?: VNode
+  label: VNode
+  content?: VNode
+  formRef?: Ref<HTMLFormElement | null> // Opcjonalny ref do walidacji
+}
+
+export type StepperStepValidationResult = {
+  stepNumber: number
+  isValid: boolean
+}
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 45028b48..10463eb4 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,13 +9,13 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.2.0",
+    "@coreui/coreui": "^5.4.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.2.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
-    "@docsearch/css": "^3.8.2",
-    "@docsearch/js": "^3.8.2",
+    "@docsearch/css": "^3.9.0",
+    "@docsearch/js": "^3.9.0",
     "@vuepress/bundler-vite": "2.0.0-rc.19",
     "@vuepress/bundler-webpack": "2.0.0-rc.19",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.69",
@@ -29,7 +29,7 @@
     "@vuepress/utils": "2.0.0-rc.19",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.83.1",
+    "sass": "^1.89.1",
     "vue-docgen-cli": "^4.79.0",
     "vuepress": "2.0.0-rc.19"
   }

From f0ad650a7d7318a23e7eeb95494d14e69eb294d7 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 12:31:48 +0200
Subject: [PATCH 86/92] feat(CButton): add support for unthemed outline and
 ghost buttons

---
 .../src/components/button/CButton.ts          |  2 +-
 packages/docs/components/button.md            | 43 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts
index 287bfd12..70f7e90d 100644
--- a/packages/coreui-vue/src/components/button/CButton.ts
+++ b/packages/coreui-vue/src/components/button/CButton.ts
@@ -93,9 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
+            props.variant && props.color ? `btn-${props.variant}-${props.color}` : `btn-${props.variant}`,
             {
               [`btn-${props.color}`]: props.color && !props.variant,
-              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,
               disabled: props.disabled,
diff --git a/packages/docs/components/button.md b/packages/docs/components/button.md
index 0f9a8428..fe592e77 100644
--- a/packages/docs/components/button.md
+++ b/packages/docs/components/button.md
@@ -63,7 +63,27 @@ If you're using `<CButton>` component as `<a>` elements that are used to trigger
 
 ## Outline buttons
 
-If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
+### Base outline style
+
+The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.
+
+::: demo
+<CButton variant="outline">Base outline button</CButton>
+<CButton variant="outline" active>Active state</CButton>
+<CButton variant="outline" disabled>Disabled state</CButton>
+:::
+```vue
+<CButton variant="outline">Base outline button</CButton>
+<CButton variant="outline" active>Active state</CButton>
+<CButton variant="outline" disabled>Disabled state</CButton>
+```
+
+These Vue buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.
+
+
+### Themed outline variants
+
+If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors.
 
 ::: demo
 <CButton color="primary" variant="outline">Primary</CButton>
@@ -86,10 +106,31 @@ If you need a button, but without the strong background colors. Set `variant="ou
 <CButton color="dark" variant="outline">Dark</CButton>
 ```
 
+These outline variants of our Vue.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.
+
 ## Ghost buttons
 
+### Base ghost style
+
+Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These Vue buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.
+
+They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.
+
 If you need a ghost variant of button, set `variant="ghost"` prop to remove all background colors.
 
+::: demo
+<CButton variant="ghost">Base ghost button</CButton>
+<CButton variant="ghost" active>Active state</CButton>
+<CButton variant="ghost" disabled>Disabled state</CButton>
+:::
+```vue
+<CButton variant="ghost">Base ghost button</CButton>
+<CButton variant="ghost" active>Active state</CButton>
+<CButton variant="ghost" disabled>Disabled state</CButton>
+```
+
+To apply theme colors to Vue ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.
+
 ::: demo
 <CButton color="primary" variant="ghost">Primary</CButton>
 <CButton color="secondary" variant="ghost">Secondary</CButton>

From 5c26db6c43209bde854564f0777faf6932b199aa Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 12:41:22 +0200
Subject: [PATCH 87/92] feat(CNav): add enclosed variants

---
 .../coreui-vue/src/components/nav/CNav.ts     |  5 +-
 packages/docs/api/tabs/CTabList.api.md        |  8 +-
 packages/docs/components/navs-tabs.md         | 90 +++++++++++++++++++
 3 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/packages/coreui-vue/src/components/nav/CNav.ts b/packages/coreui-vue/src/components/nav/CNav.ts
index 922603e9..6b5b7384 100644
--- a/packages/coreui-vue/src/components/nav/CNav.ts
+++ b/packages/coreui-vue/src/components/nav/CNav.ts
@@ -24,12 +24,12 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     * @values 'enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },
@@ -40,6 +40,7 @@ const CNav = defineComponent({
         {
           class: [
             'nav',
+            props.variant === 'enclosed-pills' && 'nav-enclosed',
             {
               [`nav-${props.layout}`]: props.layout,
               [`nav-${props.variant}`]: props.variant,
diff --git a/packages/docs/api/tabs/CTabList.api.md b/packages/docs/api/tabs/CTabList.api.md
index 68b9ca46..c12138af 100644
--- a/packages/docs/api/tabs/CTabList.api.md
+++ b/packages/docs/api/tabs/CTabList.api.md
@@ -8,7 +8,7 @@ import CTabList from '@coreui/vue/src/components/tabs/CTabList'
 
 #### Props
 
-| Prop name   | Description                           | Type   | Values                                                   | Default |
-| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
-| **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'` | -       |
+| Prop name   | Description                           | Type   | Values                                                                                     | Default |
+| ----------- | ------------------------------------- | ------ | ------------------------------------------------------------------------------------------ | ------- |
+| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                                                    | -       |
+| **variant** | Set the nav variant to tabs or pills. | string | `'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/components/navs-tabs.md b/packages/docs/components/navs-tabs.md
index 1452f180..9ad84051 100644
--- a/packages/docs/components/navs-tabs.md
+++ b/packages/docs/components/navs-tabs.md
@@ -402,6 +402,96 @@ Take that same code, but use `variant="underline-border"` instead:
 </CNav>
 ```
 
+### Enclosed
+
+Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
+
+::: demo
+<CNav variant="enclosed">
+  <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="enclosed">
+  <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>
+```
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+::: demo
+<CNav variant="enclosed-pills">
+  <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="enclosed-pills">
+  <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.

From 7826e36392c5524a5b827e33992d05c0512e09d0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 12:56:23 +0200
Subject: [PATCH 88/92] feat(CTabs): add enclosed variants

---
 .../src/components/tabs/CTabList.ts           |   5 +-
 packages/docs/api/nav/CNav.api.md             |  10 +-
 packages/docs/components/tabs.md              | 106 ++++++++++++++++++
 3 files changed, 114 insertions(+), 7 deletions(-)

diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
index 63b720f2..d73bb17d 100644
--- a/packages/coreui-vue/src/components/tabs/CTabList.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -18,12 +18,12 @@ const CTabList = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     * @values 'enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },
@@ -72,6 +72,7 @@ const CTabList = defineComponent({
         {
           class: [
             'nav',
+            props.variant === 'enclosed-pills' && 'nav-enclosed',
             {
               [`nav-${props.layout}`]: props.layout,
               [`nav-${props.variant}`]: props.variant,
diff --git a/packages/docs/api/nav/CNav.api.md b/packages/docs/api/nav/CNav.api.md
index deda7877..37c9f02c 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 |
-| ----------- | --------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------- | ------- |
-| **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'` | -       |
+| 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 | `'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md
index fcb3dd2a..33b8a72d 100644
--- a/packages/docs/components/tabs.md
+++ b/packages/docs/components/tabs.md
@@ -275,6 +275,112 @@ Take that same code, but use `variant="underline-border"` instead:
 </CTabs>
 ```
 
+### Enclosed
+
+Use the `variant="enclosed"` class to give your tab items a subtle border and rounded styling.
+
+::: demo
+<CTabs :activeItemKey="1">
+  <CTabList variant="enclosed">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="1">
+  <CTabList variant="enclosed-pills">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each tab item, using pill-shaped borders and smoother outlines.
+
+::: demo
+<CTabs :activeItemKey="1">
+  <CTabList variant="enclosed-pills">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="1">
+  <CTabList variant="enclosed-pills">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
 ### Fill and justify
 
 Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.

From 1b0ed7177caec29f7960b82cdd92dbc7c5b0e07b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 12:57:49 +0200
Subject: [PATCH 89/92] chore: clean-up

---
 .../src/components/stepper/CStepper.ts        | 266 ------------------
 .../stepper/__tests__/CBadge.spec.ts          |  39 ---
 .../__snapshots__/CBadge.spec.ts.snap         |  15 -
 .../src/components/stepper/index.ts           |  10 -
 .../src/components/stepper/types.ts           |  20 --
 packages/docs/api/stepper/CStepper.api.md     |  22 ++
 6 files changed, 22 insertions(+), 350 deletions(-)
 delete mode 100644 packages/coreui-vue/src/components/stepper/CStepper.ts
 delete mode 100644 packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
 delete mode 100644 packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
 delete mode 100644 packages/coreui-vue/src/components/stepper/index.ts
 delete mode 100644 packages/coreui-vue/src/components/stepper/types.ts
 create mode 100644 packages/docs/api/stepper/CStepper.api.md

diff --git a/packages/coreui-vue/src/components/stepper/CStepper.ts b/packages/coreui-vue/src/components/stepper/CStepper.ts
deleted file mode 100644
index 42df9bf4..00000000
--- a/packages/coreui-vue/src/components/stepper/CStepper.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-// CStepper.ts
-import {
-  defineComponent,
-  h,
-  ref,
-  watch,
-  computed,
-  nextTick,
-  onMounted,
-  toRefs,
-  shallowRef,
-  watchEffect,
-} from 'vue'
-import { CCollapse } from '../collapse'
-import type { StepperStepData, StepperStepValidationResult } from './types'
-
-export const CStepper = defineComponent({
-  name: 'CStepper',
-  inheritAttrs: false,
-  props: {
-    modelValue: Number,
-    defaultActiveStepIndex: {
-      type: Number,
-      default: 0,
-    },
-    layout: {
-      type: String as () => 'horizontal' | 'vertical',
-      default: 'horizontal',
-    },
-    linear: {
-      type: Boolean,
-      default: true,
-    },
-    steps: {
-      type: Array as () => StepperStepData[],
-      required: true,
-    },
-    stepButtonLayout: {
-      type: String as () => 'horizontal' | 'vertical',
-      default: 'horizontal',
-    },
-    validation: {
-      type: Boolean,
-      default: true,
-    },
-    id: String,
-  },
-  emits: ['update:modelValue', 'finish', 'reset', 'stepChange', 'stepValidationComplete'],
-  setup(props, { emit, slots, attrs, expose }) {
-    const { modelValue, defaultActiveStepIndex, validation, steps, layout, linear } = toRefs(props)
-
-    const activeStepIndex = ref<number>(modelValue.value ?? defaultActiveStepIndex.value ?? 0)
-    const isControlled = computed(() => modelValue.value !== undefined)
-    const isFinished = ref(false)
-    const stepsRef = ref<HTMLOListElement | null>(null)
-    const stepButtonRefs = shallowRef<(HTMLButtonElement | null)[]>([])
-
-    watch(modelValue, (val) => {
-      if (val !== undefined) activeStepIndex.value = val
-    })
-
-    watch(activeStepIndex, (val) => {
-      if (isControlled.value) emit('update:modelValue', val)
-    })
-
-    const isStepValid = (index: number): boolean => {
-      if (!validation.value) return true
-
-      const form = steps.value[index]?.formRef?.value
-      if (!form) return true
-
-      const valid = form.checkValidity()
-      emit('stepValidationComplete', { stepNumber: index + 1, isValid: valid })
-      if (!valid) form.reportValidity()
-      return valid
-    }
-
-    const setActiveStep = (index: number, bypassValidation = false) => {
-      if (index < 0 || index >= steps.value.length || index === activeStepIndex.value) return
-      if (!bypassValidation && index > activeStepIndex.value && !isStepValid(activeStepIndex.value))
-        return
-
-      activeStepIndex.value = index
-      emit('stepChange', index + 1)
-    }
-
-    const next = () => {
-      if (activeStepIndex.value < steps.value.length - 1) {
-        setActiveStep(activeStepIndex.value + 1)
-      } else {
-        finish()
-      }
-    }
-
-    const prev = () => {
-      if (activeStepIndex.value > 0) {
-        setActiveStep(activeStepIndex.value - 1, true)
-      }
-    }
-
-    const finish = () => {
-      if (activeStepIndex.value === steps.value.length - 1 && isStepValid(activeStepIndex.value)) {
-        isFinished.value = true
-        emit('finish')
-      }
-    }
-
-    const reset = () => {
-      if (validation.value) {
-        steps.value.forEach((s) => s.formRef?.value?.reset?.())
-      }
-      activeStepIndex.value = defaultActiveStepIndex.value
-      isFinished.value = false
-      emit('reset')
-      emit('stepChange', defaultActiveStepIndex.value)
-      nextTick(() => {
-        stepButtonRefs.value[defaultActiveStepIndex.value]?.focus()
-      })
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const buttons = stepButtonRefs.value
-      const current = event.target as HTMLButtonElement
-      const index = buttons.findIndex((b) => b === current)
-      if (index === -1) return
-
-      let nextIndex = index
-      switch (event.key) {
-        case 'ArrowRight':
-        case 'ArrowDown':
-          nextIndex = (index + 1) % buttons.length
-          break
-        case 'ArrowLeft':
-        case 'ArrowUp':
-          nextIndex = (index - 1 + buttons.length) % buttons.length
-          break
-        case 'Home':
-          nextIndex = 0
-          break
-        case 'End':
-          nextIndex = buttons.length - 1
-          break
-        default:
-          return
-      }
-
-      event.preventDefault()
-      buttons[nextIndex]?.focus()
-    }
-
-    expose({ next, prev, finish, reset })
-
-    return () => {
-      const isVertical = layout.value === 'vertical'
-      stepButtonRefs.value = []
-
-      return h(
-        'div',
-        {
-          ...attrs,
-          class: ['stepper', { 'stepper-vertical': isVertical }, attrs.class],
-        },
-        [
-          h(
-            'ol',
-            {
-              class: 'stepper-steps',
-              role: 'tablist',
-              'aria-orientation': isVertical ? 'vertical' : 'horizontal',
-              onKeydown: handleKeyDown,
-              ref: stepsRef,
-            },
-            steps.value.map((step, index) => {
-              const isActive = !isFinished.value && index === activeStepIndex.value
-              const isComplete = isFinished.value || index < activeStepIndex.value
-              const isDisabled =
-                isFinished.value || (linear.value && index > activeStepIndex.value + 1)
-              const stepId = `step-${props.id || 'stepper'}-${index}`
-              const panelId = `panel-${props.id || 'stepper'}-${index}`
-
-              return h(
-                'li',
-                {
-                  key: index,
-                  class: ['stepper-step', props.stepButtonLayout],
-                  role: 'presentation',
-                },
-                [
-                  h(
-                    'button',
-                    {
-                      type: 'button',
-                      class: ['stepper-step-button', { active: isActive, complete: isComplete }],
-                      disabled: isDisabled,
-                      id: stepId,
-                      role: 'tab',
-                      'aria-selected': isActive,
-                      tabindex: isActive ? 0 : -1,
-                      'aria-controls': step.content ? panelId : undefined,
-                      onClick: () =>
-                        setActiveStep(index, !linear.value || index <= activeStepIndex.value),
-                      ref: (el) => (stepButtonRefs.value[index] = el as HTMLButtonElement),
-                    },
-                    [
-                      h('span', { class: 'stepper-step-indicator' }, [
-                        isComplete
-                          ? h('span', { class: 'stepper-step-indicator-icon' })
-                          : h(
-                              'span',
-                              { class: 'stepper-step-indicator-text' },
-                              step.indicator ?? index + 1
-                            ),
-                      ]),
-                      h('span', { class: 'stepper-step-label' }, step.label),
-                    ]
-                  ),
-                  index < steps.value.length - 1 && h('div', { class: 'stepper-step-connector' }),
-                  step.content &&
-                    isVertical &&
-                    h(
-                      CCollapse,
-                      {
-                        class: 'stepper-step-content',
-                        id: panelId,
-                        role: 'tabpanel',
-                        visible: isActive,
-                        'aria-hidden': !isActive,
-                        'aria-labelledby': stepId,
-                        'aria-live': 'polite',
-                      },
-                      () => step.content
-                    ),
-                ]
-              )
-            })
-          ),
-          !isVertical &&
-            steps.value.some((s) => s.content != null) &&
-            h(
-              'div',
-              { class: 'stepper-content' },
-              steps.value.map((step, index) => {
-                const isActive = !isFinished.value && index === activeStepIndex.value
-                const stepId = `step-${props.id || 'stepper'}-${index}`
-                const panelId = `panel-${props.id || 'stepper'}-${index}`
-
-                return h(
-                  'div',
-                  {
-                    key: index,
-                    id: panelId,
-                    role: 'tabpanel',
-                    'aria-hidden': !isActive,
-                    'aria-labelledby': stepId,
-                    'aria-live': 'polite',
-                    class: ['stepper-pane', { active: isActive, show: isActive }],
-                  },
-                  step.content
-                )
-              })
-            ),
-        ]
-      )
-    }
-  },
-})
diff --git a/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts b/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
deleted file mode 100644
index 4d132901..00000000
--- a/packages/coreui-vue/src/components/stepper/__tests__/CBadge.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import { CBadge as Component } from '../../'
-
-const ComponentName = 'CBadge'
-const wrapper = shallowMount(Component)
-const customWrapper = shallowMount(Component, {
-  props: {
-    color: 'success',
-  },
-  attrs: {
-    class: 'bazinga',
-  },
-  slots: {
-    default: 'Hello World!',
-  },
-})
-
-describe(`Loads and display ${ComponentName} component`, () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('renders correctly', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-  it('renders correctly with slot', () => {
-    expect(customWrapper.element).toMatchSnapshot()
-  })
-})
-
-describe(`Customize ${ComponentName} component`, () => {
-  it('has a prope class names', () => {
-    expect(customWrapper.classes('bazinga')).toBe(true)
-    expect(customWrapper.classes('badge')).toBe(true)
-    expect(customWrapper.classes('bg-success')).toBe(true)
-  })
-  it('default slot contains text', () => {
-    expect(customWrapper.text()).toBe('Hello World!')
-  })
-})
diff --git a/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap b/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
deleted file mode 100644
index 249fb4fd..00000000
--- a/packages/coreui-vue/src/components/stepper/__tests__/__snapshots__/CBadge.spec.ts.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loads and display CBadge component renders correctly 1`] = `
-<span
-  class="badge"
-/>
-`;
-
-exports[`Loads and display CBadge component renders correctly with slot 1`] = `
-<span
-  class="badge bg-success bazinga"
->
-  Hello World!
-</span>
-`;
diff --git a/packages/coreui-vue/src/components/stepper/index.ts b/packages/coreui-vue/src/components/stepper/index.ts
deleted file mode 100644
index 93b9c047..00000000
--- a/packages/coreui-vue/src/components/stepper/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { App } from 'vue'
-import { CStepper } from './CStepper'
-
-const CStepperPlugin = {
-  install: (app: App): void => {
-    app.component(CStepper.name as string, CStepper)
-  },
-}
-
-export { CStepper, CStepperPlugin }
diff --git a/packages/coreui-vue/src/components/stepper/types.ts b/packages/coreui-vue/src/components/stepper/types.ts
deleted file mode 100644
index a2cc6bcf..00000000
--- a/packages/coreui-vue/src/components/stepper/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { VNode, Ref } from 'vue'
-
-export interface StepperRef {
-  next: () => void
-  prev: () => void
-  finish: () => void
-  reset: () => void
-}
-
-export interface StepperStepData {
-  indicator?: VNode
-  label: VNode
-  content?: VNode
-  formRef?: Ref<HTMLFormElement | null> // Opcjonalny ref do walidacji
-}
-
-export type StepperStepValidationResult = {
-  stepNumber: number
-  isValid: boolean
-}
diff --git a/packages/docs/api/stepper/CStepper.api.md b/packages/docs/api/stepper/CStepper.api.md
new file mode 100644
index 00000000..e13e9c9a
--- /dev/null
+++ b/packages/docs/api/stepper/CStepper.api.md
@@ -0,0 +1,22 @@
+### CStepper
+
+```jsx
+import { CStepper } from '@coreui/vue'
+// or
+import CStepper from '@coreui/vue/src/components/stepper/CStepper'
+```
+
+#### Props
+
+| Prop name | Description | Type | Values | Default |
+| --------- | ----------- | ---- | ------ | ------- |
+
+#### Events
+
+| Event name                   | Description | Properties |
+| ---------------------------- | ----------- | ---------- |
+| **update:modelValue**        |             |
+| **finish**                   |             |
+| **reset**                    |             |
+| **step-change**              |             |
+| **step-validation-complete** |             |

From c54eae4e17e98c94fbbb88f3a9453cc89c8cc333 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 4 Jun 2025 13:11:21 +0200
Subject: [PATCH 90/92] release: v5.5.0

---
 README.md                        | 2 +-
 lerna.json                       | 2 +-
 packages/coreui-vue/README.md    | 2 +-
 packages/coreui-vue/package.json | 2 +-
 packages/docs/package.json       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3d4aab99..86647480 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/v5.4.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.5.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`
diff --git a/lerna.json b/lerna.json
index 6fea4400..8b1ec4d7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.4.1",
+  "version": "5.5.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index d422298c..a1cfd697 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.5.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`
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 7cbb6585..39b08b3a 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 10463eb4..e190d802 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

From 0f0e550bdd626bb7867662545be5826a1927458c Mon Sep 17 00:00:00 2001
From: Jared Lewis <17649602+jrd-lewis@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:51:32 -0400
Subject: [PATCH 91/92] Update CButton.ts

---
 packages/coreui-vue/src/components/button/CButton.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts
index 70f7e90d..ebb3d8c0 100644
--- a/packages/coreui-vue/src/components/button/CButton.ts
+++ b/packages/coreui-vue/src/components/button/CButton.ts
@@ -93,8 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
-            props.variant && props.color ? `btn-${props.variant}-${props.color}` : `btn-${props.variant}`,
             {
+              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
+              [`btn-${props.variant}`]: !props.color && props.variant,
               [`btn-${props.color}`]: props.color && !props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,

From 39b9c5a2020a42ae8a7cab684f14418f304362e7 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 9 Aug 2025 15:32:04 +0200
Subject: [PATCH 92/92] docs: update the list of available components

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 86647480..ee29f9de 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 - [Vue Accordion](https://coreui.io/vue/docs/components/accordion.html)
 - [Vue Alert](https://coreui.io/vue/docs/components/alert.html)
+- [Vue Autocomplete](https://coreui.io/vue/docs/forms/autocomplete.html) **PRO**
 - [Vue Avatar](https://coreui.io/vue/docs/components/avatar.html)
 - [Vue Badge](https://coreui.io/vue/docs/components/badge.html)
 - [Vue Breadcrumb](https://coreui.io/vue/docs/components/breadcrumb.html)
@@ -134,12 +135,14 @@ import "bootstrap/dist/css/bootstrap.min.css";
 - [Vue Progress](https://coreui.io/vue/docs/components/progress.html)
 - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html)
 - [Vue Range](https://coreui.io/vue/docs/forms/range.html)
+- [Vue Range Slider](https://coreui.io/vue/docs/forms/range-slider.html) **PRO**
 - [Vue Rating](https://coreui.io/vue/docs/forms/rating.html)
 - [Vue Select](https://coreui.io/vue/docs/forms/select.html)
 - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html)
 - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO**
 - [Vue Smart Table](https://coreui.io/vue/docs/components/smart-table.html) **PRO**
 - [Vue Spinner](https://coreui.io/vue/docs/components/spinner.html)
+- [Vue Stepper](https://coreui.io/vue/docs/forms/stepper.html) **PRO**
 - [Vue Switch](https://coreui.io/vue/docs/forms/switch.html)
 - [Vue Table](https://coreui.io/vue/docs/components/table.html)
 - [Vue Textarea](https://coreui.io/vue/docs/forms/textarea.html)