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 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] 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 7/7] 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",