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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index d171f90b..32fe1ea0 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -3,10 +3,10 @@ import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
 import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
-import { getNextActiveElement, getPlacement } from './utils'
+import { getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts
index edddb0db..c9659636 100644
--- a/packages/coreui-vue/src/components/dropdown/utils.ts
+++ b/packages/coreui-vue/src/components/dropdown/utils.ts
@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
 export const getPlacement = (
   placement: Placement,
   direction: string | undefined,
diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
index 60028cd8..63b720f2 100644
--- a/packages/coreui-vue/src/components/tabs/CTabList.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, ref } from 'vue'
-import { getNextActiveElement } from '../dropdown/utils'
+import { getNextActiveElement } from '../../utils'
 
 const CTabList = defineComponent({
   name: 'CTabList',
diff --git a/packages/coreui-vue/src/utils/getNextActiveElement.ts b/packages/coreui-vue/src/utils/getNextActiveElement.ts
new file mode 100644
index 00000000..a80293ca
--- /dev/null
+++ b/packages/coreui-vue/src/utils/getNextActiveElement.ts
@@ -0,0 +1,23 @@
+const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export default getNextActiveElement
diff --git a/packages/coreui-vue/src/utils/index.ts b/packages/coreui-vue/src/utils/index.ts
index 2bd39724..b478e8c2 100644
--- a/packages/coreui-vue/src/utils/index.ts
+++ b/packages/coreui-vue/src/utils/index.ts
@@ -1,6 +1,7 @@
+import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getUID from './getUID'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { getRTLPlacement, getUID, isInViewport, isRTL }
+export { getNextActiveElement, getRTLPlacement, getUID, isInViewport, isRTL }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/docs/api/footer/CFooter.api.md b/packages/docs/api/footer/CFooter.api.md
index b1eedef2..bc9337fe 100644
--- a/packages/docs/api/footer/CFooter.api.md
+++ b/packages/docs/api/footer/CFooter.api.md
@@ -8,6 +8,7 @@ import CFooter from '@coreui/vue/src/components/footer/CFooter'
 
 #### Props
 
-| Prop name    | Description                           | Type   | Values                | Default |
-| ------------ | ------------------------------------- | ------ | --------------------- | ------- |
-| **position** | Place footer in non-static positions. | string | `'fixed'`, `'sticky'` | -       |
+| Prop name    | Description                                                                             | Type   | Values                | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------ | --------------------- | ------- |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string | -                     | 'div'   |
+| **position** | Place footer in non-static positions.                                                   | string | `'fixed'`, `'sticky'` | -       |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts
index 78a238b9..e2e1947d 100644
--- a/packages/coreui-vue/src/components/modal/CModal.ts
+++ b/packages/coreui-vue/src/components/modal/CModal.ts
@@ -1,6 +1,7 @@
 import {
   defineComponent,
   h,
+  PropType,
   provide,
   ref,
   RendererElement,
@@ -11,6 +12,7 @@ import {
 } from 'vue'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalTeleport } from '../conditional-teleport'
 
 import { executeAfterTransition } from '../../utils/transition'
 
@@ -47,6 +49,15 @@ const CModal = defineComponent({
         return false
       },
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since 5.3.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * A string of all className you want applied to the modal content component.
      */
@@ -54,7 +65,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     focus: {
       type: Boolean,
@@ -99,6 +110,15 @@ const CModal = defineComponent({
         return ['sm', 'lg', 'xl'].includes(value)
       },
     },
+    /**
+     * Generates modal using Teleport.
+     *
+     * @since 5.3.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
@@ -264,27 +284,37 @@ const CModal = defineComponent({
         ),
       )
 
-    return () => [
+    return () =>
       h(
-        Transition,
+        CConditionalTeleport,
         {
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          container: props.container,
+          teleport: props.teleport,
         },
-        () =>
-          props.unmountOnClose
-            ? visible.value && modal()
-            : withDirectives(modal(), [[vShow, visible.value]]),
-      ),
-      props.backdrop &&
-        h(CBackdrop, {
-          class: 'modal-backdrop',
-          visible: visible.value,
-        }),
-    ]
+        {
+          default: () => [
+            h(
+              Transition,
+              {
+                css: false,
+                onEnter: (el, done) => handleEnter(el, done),
+                onAfterEnter: () => handleAfterEnter(),
+                onLeave: (el, done) => handleLeave(el, done),
+                onAfterLeave: (el) => handleAfterLeave(el),
+              },
+              () =>
+                props.unmountOnClose
+                  ? visible.value && modal()
+                  : withDirectives(modal(), [[vShow, visible.value]]),
+            ),
+            props.backdrop &&
+              h(CBackdrop, {
+                class: 'modal-backdrop',
+                visible: visible.value,
+              }),
+          ],
+        },
+      )
   },
 })
 
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 582c2798..6f201012 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -8,19 +8,21 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
 
 #### Props
 
-| Prop name                                                 | Description                                                                                                                        | Type            | Values                                             | Default |
-| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
-| **alignment**                                             | Align the modal in the center or top of the screen.                                                                                | string          | `'top'`, `'center'`                                | 'top'   |
-| **backdrop**                                              | Apply a backdrop on body while offcanvas is open.                                                                                  | boolean\|string | `boolean \| 'static'`                              | true    |
-| **content-class-name**                                    | A string of all className you want applied to the modal content component.                                                         | string          | -                                                  | -       |
-| **focus** <br><div class="badge bg-primary">v5.0.0+</div> | Puts the focus on the modal when shown.                                                                                            | boolean         | -                                                  | true    |
-| **fullscreen**                                            | Set modal to covers the entire user viewport                                                                                       | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | -       |
-| **keyboard**                                              | Closes the modal when escape key is pressed.                                                                                       | boolean         | -                                                  | true    |
-| **scrollable**                                            | Create a scrollable modal that allows scrolling the modal body.                                                                    | boolean         | -                                                  | -       |
-| **size**                                                  | Size the component small, large, or extra large.                                                                                   | string          | `'sm'`, `'lg'`, `'xl'`                             | -       |
-| **transition**                                            | Remove animation to create modal that simply appear rather than fade in to view.                                                   | boolean         | -                                                  | true    |
-| **unmount-on-close**                                      | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean         | -                                                  | true    |
-| **visible**                                               | Toggle the visibility of alert component.                                                                                          | boolean         | -                                                  | -       |
+| Prop name                                                    | Description                                                                                                                                        | Type                                         | Values                                             | Default |
+| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------- |
+| **alignment**                                                | Align the modal in the center or top of the screen.                                                                                                | string                                       | `'top'`, `'center'`                                | 'top'   |
+| **backdrop**                                                 | Apply a backdrop on body while offcanvas is open.                                                                                                  | boolean\|string                              | `boolean \| 'static'`                              | true    |
+| **container** <br><div class="badge bg-primary">5.3.0+</div> | Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | -                                                  | 'body'  |
+| **content-class-name**                                       | A string of all className you want applied to the modal content component.                                                                         | string                                       | -                                                  | -       |
+| **focus** <br><div class="badge bg-primary">5.0.0+</div>     | Puts the focus on the modal when shown.                                                                                                            | boolean                                      | -                                                  | true    |
+| **fullscreen**                                               | Set modal to covers the entire user viewport                                                                                                       | boolean\|string                              | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | -       |
+| **keyboard**                                                 | Closes the modal when escape key is pressed.                                                                                                       | boolean                                      | -                                                  | true    |
+| **scrollable**                                               | Create a scrollable modal that allows scrolling the modal body.                                                                                    | boolean                                      | -                                                  | -       |
+| **size**                                                     | Size the component small, large, or extra large.                                                                                                   | string                                       | `'sm'`, `'lg'`, `'xl'`                             | -       |
+| **teleport** <br><div class="badge bg-primary">5.3.0+</div>  | Generates modal using Teleport.                                                                                                                    | boolean                                      | -                                                  | false   |
+| **transition**                                               | Remove animation to create modal that simply appear rather than fade in to view.                                                                   | boolean                                      | -                                                  | true    |
+| **unmount-on-close**                                         | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.                 | boolean                                      | -                                                  | true    |
+| **visible**                                                  | Toggle the visibility of alert component.                                                                                                          | boolean                                      | -                                                  | -       |
 
 #### Events
 

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

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

diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
index 8fd104a1..9207fb9a 100644
--- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
+++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts
@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 32fe1ea0..679e5d6f 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     teleport: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 33e96a35..17fd034b 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     navLink: {
       type: Boolean,
diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index 3690fa48..03ade861 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index c982b3c8..02ad416e 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index 66b3972f..79b60043 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -8,7 +8,7 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
 
 #### Props
 
-| Prop name                                                     | Description                                                                                     | Type                                         | Values | Default |
-| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
-| **container** <br><div class="badge bg-primary">v5.0.0+</div> | An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | -      | 'body'  |
-| **teleport**                                                  | Render some children into a different part of the DOM                                           | boolean                                      | -      | true    |
+| Prop name                                                    | Description                                                                                     | Type                                         | Values | Default |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
+| **container** <br><div class="badge bg-primary">5.0.0+</div> | An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | -      | 'body'  |
+| **teleport**                                                 | Render some children into a different part of the DOM                                           | boolean                                      | -      | true    |
diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 3eaad39f..6d3bade5 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +8,21 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 
 #### Props
 
-| Prop name                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type                                         | Values                                                                                                                                                                                        | Default        |
-| ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| **alignment**                                                 | Set aligment of dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | string \| Alignments                         | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | -              |
-| **auto-close**                                                | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string                              | -                                                                                                                                                                                             | true           |
-| **container** <br><div class="badge bg-primary">v5.0.0+</div> | Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                                                                                                                                                                                                                                                                 | HTMLElement \| (() => HTMLElement) \| string | -                                                                                                                                                                                             | 'body'         |
-| **dark**                                                      | Sets a darker color scheme to match a dark navbar.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | boolean                                      | -                                                                                                                                                                                             | -              |
-| **direction**                                                 | Sets a specified direction and location of the dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                            | string                                       | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`                                                                                                                         | -              |
-| **disabled**                                                  | Toggle the disabled state for the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | boolean                                      | -                                                                                                                                                                                             | -              |
-| **offset** <br><div class="badge bg-primary">4.9.0+</div>     | Offset of the dropdown menu relative to its target.                                                                                                                                                                                                                                                                                                                                                                                                                                                      | array                                        | -                                                                                                                                                                                             | [0, 2]         |
-| **placement**                                                 | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                                                                                                                                                                                                                                                                     | Placement                                    | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'`                | 'bottom-start' |
-| **popper**                                                    | If you want to disable dynamic positioning set this property to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | true           |
-| **teleport** <br><div class="badge bg-primary">v5.0.0+</div>  | Generates dropdown menu using Teleport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | false          |
-| **trigger**                                                   | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                                                                                                                                                                                                                                                                      | Triggers                                     | -                                                                                                                                                                                             | 'click'        |
-| **variant**                                                   | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.                                                                                                                                                                                                                                                                                                                                                                                                                           | string                                       | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`                                                                                                                                    | 'btn-group'    |
-| **visible**                                                   | Toggle the visibility of dropdown menu component.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | boolean                                      | -                                                                                                                                                                                             | -              |
+| Prop name                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type                                         | Values                                                                                                                                                                                        | Default        |
+| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| **alignment**                                                | Set aligment of dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | string \| Alignments                         | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | -              |
+| **auto-close**                                               | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string                              | -                                                                                                                                                                                             | true           |
+| **container** <br><div class="badge bg-primary">5.0.0+</div> | Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                                                                                                                                                                                                                                                                 | HTMLElement \| (() => HTMLElement) \| string | -                                                                                                                                                                                             | 'body'         |
+| **dark**                                                     | Sets a darker color scheme to match a dark navbar.                                                                                                                                                                                                                                                                                                                                                                                                                                                       | boolean                                      | -                                                                                                                                                                                             | -              |
+| **direction**                                                | Sets a specified direction and location of the dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                                                            | string                                       | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'`                                                                                                                         | -              |
+| **disabled**                                                 | Toggle the disabled state for the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | boolean                                      | -                                                                                                                                                                                             | -              |
+| **offset** <br><div class="badge bg-primary">4.9.0+</div>    | Offset of the dropdown menu relative to its target.                                                                                                                                                                                                                                                                                                                                                                                                                                                      | array                                        | -                                                                                                                                                                                             | [0, 2]         |
+| **placement**                                                | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.                                                                                                                                                                                                                                                                                                                                     | Placement                                    | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'`                | 'bottom-start' |
+| **popper**                                                   | If you want to disable dynamic positioning set this property to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | true           |
+| **teleport** <br><div class="badge bg-primary">5.0.0+</div>  | Generates dropdown menu using Teleport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | boolean                                      | -                                                                                                                                                                                             | false          |
+| **trigger**                                                  | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.                                                                                                                                                                                                                                                                                                                                                                                      | Triggers                                     | -                                                                                                                                                                                             | 'click'        |
+| **variant**                                                  | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.                                                                                                                                                                                                                                                                                                                                                                                                                           | string                                       | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'`                                                                                                                                    | 'btn-group'    |
+| **visible**                                                  | Toggle the visibility of dropdown menu component.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | boolean                                      | -                                                                                                                                                                                             | -              |
 
 #### Events
 
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 2c5e2d20..ddf79509 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -8,15 +8,15 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 
 #### Props
 
-| Prop name                                                    | Description                                                                                                                                                                                                   | Type     | Values                                                                                          | Default  |
-| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
-| **as**                                                       | Component used for the root node. Either a string to use a HTML element or a component.                                                                                                                       | string   | -                                                                                               | 'button' |
-| **color**                                                    | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                                                     | string   | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -        |
-| **caret**                                                    | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
-| **custom**                                                   | Create a custom toggler which accepts any content.                                                                                                                                                            | boolean  | -                                                                                               | -        |
-| **disabled**                                                 | Toggle the disabled state for the component.                                                                                                                                                                  | boolean  | -                                                                                               | -        |
-| **nav-link** <br><div class="badge bg-primary">v5.0.0+</div> | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.                                                                                                           | boolean  | -                                                                                               | true     |
-| **size**                                                     | Size the component small or large.                                                                                                                                                                            | string   | `'sm'`, `'lg'`                                                                                  | -        |
-| **split**                                                    | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean  | -                                                                                               | -        |
-| **trigger**                                                  | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br/>`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
-| **variant**                                                  | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
+| Prop name                                                   | Description                                                                                                                                                                                                   | Type     | Values                                                                                          | Default  |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
+| **as**                                                      | Component used for the root node. Either a string to use a HTML element or a component.                                                                                                                       | string   | -                                                                                               | 'button' |
+| **color**                                                   | Sets the color context of the component to one of CoreUI’s themed colors.                                                                                                                                     | string   | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | -        |
+| **caret**                                                   | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
+| **custom**                                                  | Create a custom toggler which accepts any content.                                                                                                                                                            | boolean  | -                                                                                               | -        |
+| **disabled**                                                | Toggle the disabled state for the component.                                                                                                                                                                  | boolean  | -                                                                                               | -        |
+| **nav-link** <br><div class="badge bg-primary">5.0.0+</div> | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.                                                                                                           | boolean  | -                                                                                               | true     |
+| **size**                                                    | Size the component small or large.                                                                                                                                                                            | string   | `'sm'`, `'lg'`                                                                                  | -        |
+| **split**                                                   | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean  | -                                                                                               | -        |
+| **trigger**                                                 | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.<br/>`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
+| **variant**                                                 | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
diff --git a/packages/docs/api/form/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md
index 2637bffa..8d77c483 100644
--- a/packages/docs/api/form/CFormSelect.api.md
+++ b/packages/docs/api/form/CFormSelect.api.md
@@ -19,7 +19,7 @@ import CFormSelect from '@coreui/vue/src/components/form/CFormSelect'
 | **invalid**                                                         | Set component validation state to invalid.                                                                                                                                                                                                   | boolean              | -              | -       |
 | **label** <br><div class="badge bg-primary">4.3.0+</div>            | Add a caption for a component.                                                                                                                                                                                                               | string               | -              | -       |
 | **model-value**                                                     | The default name for a value passed using v-model.                                                                                                                                                                                           | string \| string[]   | -              | -       |
-| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`, `selected`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript', selected: true }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
+| **options**                                                         | Options list of the select component. Available keys: `label`, `value`, `disabled`.<br>Examples:<br>- `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`<br>- `:options="['js', 'html']"` | Option[] \| string[] | -              | -       |
 | **size**                                                            | Size the component small or large.                                                                                                                                                                                                           | string               | `'sm' \| 'lg'` | -       |
 | **text** <br><div class="badge bg-primary">4.3.0+</div>             | Add helper text to the component.                                                                                                                                                                                                            | string               | -              | -       |
 | **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.                                                                                                                                                                                             | boolean              | -              | -       |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 55a94fd7..725e4846 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
 | Prop name                                                              | Description                                                                                                                                                                                                                                                     | Type                                         | Values                          | Default                                  |
 | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
 | **animation** <br><div class="badge bg-primary">4.9.0+</div>           | Apply a CSS fade transition to the popover.                                                                                                                                                                                                                     | boolean                                      | -                               | true                                     |
-| **container** <br><div class="badge bg-primary">v5.0.0+</div>          | Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
+| **container** <br><div class="badge bg-primary">5.0.0+</div>           | Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
 | **content**                                                            | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                                                                                                                  | string                                       | -                               | -                                        |
 | **delay** <br><div class="badge bg-primary">4.9.0+</div>               | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number }     | -                               | 0                                        |
 | **fallback-placements** <br><div class="badge bg-primary">4.9.0+</div> | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.                                                                                                       | Placements \| Placements[]                   | -                               | () => ['top', 'right', 'bottom', 'left'] |
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index f8f3d672..3b0cac97 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
 | Prop name                                                              | Description                                                                                                                                                                                                                                                     | Type                                         | Values                          | Default                                  |
 | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
 | **animation** <br><div class="badge bg-primary">4.9.0+</div>           | Apply a CSS fade transition to the tooltip.                                                                                                                                                                                                                     | boolean                                      | -                               | true                                     |
-| **container** <br><div class="badge bg-primary">v5.0.0+</div>          | Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
+| **container** <br><div class="badge bg-primary">5.0.0+</div>           | Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.                                                                                                              | HTMLElement \| (() => HTMLElement) \| string | -                               | 'body'                                   |
 | **content**                                                            | Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`                                                                                                                                  | string                                       | -                               | -                                        |
 | **delay** <br><div class="badge bg-primary">4.9.0+</div>               | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number }     | -                               | 0                                        |
 | **fallback-placements** <br><div class="badge bg-primary">4.9.0+</div> | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.                                                                                                       | Placements \| Placements[]                   | -                               | () => ['top', 'right', 'bottom', 'left'] |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/README.md b/README.md
index 8999a03d..e21d4f28 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue`
diff --git a/lerna.json b/lerna.json
index a5830df9..6fea4400 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.4.0",
+  "version": "5.4.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index 32c3cc2a..d422298c 100644
--- a/packages/coreui-vue/README.md
+++ b/packages/coreui-vue/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue`
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 44bdc2b6..02a7b5e2 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/api/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index 2a2d63d1..bba531c6 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -8,6 +8,8 @@ import CNavItem from '@coreui/vue/src/components/nav/CNavItem'
 
 #### Props
 
-| Prop name | Description                                                                             | Type   | Values | Default |
-| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **as**    | Component used for the root node. Either a string to use a HTML element or a component. | string | -      | 'li'    |
+| Prop name    | Description                                                                             | Type    | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active**   | Toggle the active state for the component.                                              | boolean | -      | -       |
+| **as**       | Component used for the root node. Either a string to use a HTML element or a component. | string  | -      | 'li'    |
+| **disabled** | Toggle the disabled state for the component.                                            | boolean | -      | -       |
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 9064fb22..43b43f9c 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",

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

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

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

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

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

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

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

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

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

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

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

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 1846284b..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/dist/**
-/docs/**
-.eslintrc.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index a0662dcd..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict'
-
-module.exports = {
-  root: true, // So parent files don't get applied
-  env: {
-    es6: true,
-    browser: true,
-    node: true,
-  },
-  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-  parserOptions: {
-    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module', // Allows for the use of imports
-    extraFileExtensions: ['.vue'],
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:prettier/recommended',
-    'plugin:unicorn/recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/eslint-config-prettier',
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'unicorn/filename-case': 'off',
-    'unicorn/no-array-for-each': 'off',
-    'unicorn/no-null': 'off',
-    'unicorn/prefer-dom-node-append': 'off',
-    'unicorn/prefer-export-from': 'off',
-    'unicorn/prefer-query-selector': 'off',
-    'unicorn/prevent-abbreviations': 'off',
-    'vue/require-default-prop': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/*.mjs'],
-      env: {
-        browser: false,
-        node: true,
-      },
-      parserOptions: {
-        sourceType: 'module',
-      },
-    },
-    {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-      env: {
-        jest: true,
-      },
-    },
-    {
-      files: ['packages/docs/build/**'],
-      env: {
-        browser: false,
-        node: true,
-      },
-      parserOptions: {
-        sourceType: 'script',
-      },
-      rules: {
-        'no-console': 'off',
-        strict: 'error',
-      },
-    },
-  ],
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..3cee3965
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,76 @@
+import eslint from '@eslint/js'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import typescriptEslint from 'typescript-eslint'
+
+export default typescriptEslint.config(
+  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs', 'eslint.config.mjs'] },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      ...eslintPluginVue.configs['flat/recommended'],
+      eslintPluginUnicorn.configs['flat/recommended'],
+    ],
+    files: ['packages/**/src/**/*.{js,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        parser: typescriptEslint.parser,
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/no-array-for-each': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/prefer-dom-node-append': 'off',
+      'unicorn/prefer-export-from': 'off',
+      'unicorn/prefer-query-selector': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+      'vue/require-default-prop': 'off',
+    },
+  },
+  {
+    files: ['**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'module',
+    },
+  },
+  {
+    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
+  },
+  {
+    files: ['packages/docs/build/**'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'commonjs',
+    },
+    rules: {
+      'no-console': 'off',
+      strict: 'error',
+    },
+  },
+  eslintPluginPrettierRecommended,
+)
diff --git a/package.json b/package.json
index a8e640de..37eb604e 100644
--- a/package.json
+++ b/package.json
@@ -17,23 +17,21 @@
     "lib:build": "lerna run --scope \"@coreui/vue\" build --stream",
     "lib:test": "lerna run --scope \"@coreui/vue\" test --stream",
     "lib:test:update": "lerna run --scope \"@coreui/vue\" test:update --stream",
-    "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"",
+    "lint": "eslint",
     "test": "npm-run-all charts:test icons:test lib:test",
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/vue3-jest": "29.2.6",
-    "eslint": "8.57.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
     "lerna": "^8.1.8",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "typescript-eslint": "^8.19.1"
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/README.md b/README.md
index e21d4f28..3d4aab99 100644
--- a/README.md
+++ b/README.md
@@ -227,4 +227,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and license
 
-Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

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

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

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

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

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

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