From d68e5b02d0974b8dc0658aae355fa4b524565650 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 3 Sep 2025 10:26:57 +0200
Subject: [PATCH 01/13] docs: migrate to Sass modules and enhance responsive
 behavior.

---
 packages/docs/.vuepress/client.ts             |   3 +-
 .../src/client/components/Header.vue          |  70 +++-
 .../.vuepress/src/client/components/Toc.vue   |   8 +-
 .../.vuepress/src/client/styles/_ads.scss     |   3 +
 .../.vuepress/src/client/styles/_anchor.scss  |   3 +
 .../src/client/styles/_callouts.scss          |   3 +
 .../client/styles/_component-examples.scss    |   9 +
 .../.vuepress/src/client/styles/_footer.scss  |   8 +-
 .../.vuepress/src/client/styles/_layout.scss  |  37 +-
 .../.vuepress/src/client/styles/_prism.scss   |   6 +-
 .../.vuepress/src/client/styles/_search.scss  | 326 ++++++++++--------
 .../.vuepress/src/client/styles/_sidebar.scss |  12 +-
 .../.vuepress/src/client/styles/_toc.scss     |  14 +-
 .../src/client/styles/_variables.scss         |   9 +-
 .../.vuepress/src/client/styles/index.scss    |  33 +-
 15 files changed, 318 insertions(+), 226 deletions(-)

diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index 0404f0fd..ae44077a 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -3,7 +3,6 @@ import { defineClientConfig } from '@vuepress/client'
 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'
 import '@coreui/chartjs/scss/coreui-chartjs.scss'
 
 import {
@@ -21,6 +20,7 @@ import {
   cilCheckCircle,
   cilCloudDownload,
   cilContrast,
+  cilExternalLink,
   cilHandshake,
   cilInfo,
   cilLayers,
@@ -51,6 +51,7 @@ export const icons = {
   cilCheckCircle,
   cilCloudDownload,
   cilContrast,
+  cilExternalLink,
   cilHandshake,
   cilInfo,
   cilLayers,
diff --git a/packages/docs/.vuepress/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
index 17ee1090..9c252ed6 100644
--- a/packages/docs/.vuepress/src/client/components/Header.vue
+++ b/packages/docs/.vuepress/src/client/components/Header.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RouterLink} from 'vue-router'
 import { useColorModes } from '@coreui/vue/src'
 
 const props = defineProps({
@@ -12,16 +13,60 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
     <CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
       <CIcon icon="cil-menu" size="lg" />
     </CHeaderToggler>
-    <div class="docs-search" id="docsearch"></div>
-    <CHeaderNav class="ms-auto">
+    <CHeaderBrand
+      :as="RouterLink"
+      class="d-lg-none"
+      to="/"
+      aria-label="Go to CoreUI for Vue.js documentation"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 116" height="32">
+        <g fill="var(--cui-body-color, currentColor)" fillRule="nonzero">
+          <path
+            d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"
+          ></path>
+          <path
+            d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"
+          ></path>
+        </g>
+      </svg>
+    </CHeaderBrand>
+    <CHeaderNav class="me-auto d-none d-xl-flex" role="{undefined}">
+      <CNavItem
+        href="https://coreui.io/pricing/?framework=vue&src=react-docs&cta=coreui-header-pricing"
+      >
+        Pricing
+      </CNavItem>
+      <CNavItem
+        href="https://coreui.requestshub.com/p/coreui-for-vuejs/roadmap"
+        target="blank"
+        rel="noopener noreferrer"
+      >
+        Roadmap
+        <CIcon icon="cil-external-link" class="ms-2" size="sm" />
+      </CNavItem>
+    </CHeaderNav>
+    <div class="docs-search ms-auto" id="docsearch"></div>
+    <CHeaderNav class="ms-2">
       <CNavItem href="https://github.com/coreui">
         <CIcon icon="cib-github" size="xl" />
       </CNavItem>
-      <CNavItem href="https://twitter.com/core_ui">
-        <CIcon icon="cib-twitter" size="xl" />
+      <CNavItem href="https://x.com/core_ui">
+        <CIconSvg size="xl">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 271">
+            <path
+              d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"
+            ></path>
+          </svg>
+        </CIconSvg>
       </CNavItem>
-      <CNavItem href="https://opencollective.com/coreui">
-        <CIcon icon="cib-open-collective" size="xl" />
+      <CNavItem href="https://discord.gg/pQRWe5XdGm">
+        <CIconSvg size="xl">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+            <path
+              d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
+            ></path>
+          </svg>
+        </CIconSvg>
       </CNavItem>
       <li class="nav-item py-2 py-lg-1">
         <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
@@ -68,22 +113,13 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
         <hr class="d-lg-none my-2 text-white-50" />
       </li>
     </CHeaderNav>
-    <CButton
-      class="d-lg-inline-block my-2 my-md-0 ms-md-3"
-      color="primary"
-      as="a"
-      href="https://coreui.io/vue/docs/getting-started/introduction.html"
-      variant="outline"
-    >
-      <CIcon icon="cil-cloud-download" /> Download
-    </CButton>
     <CButton
       class="d-lg-inline-block my-2 my-md-0 ms-md-3"
       color="primary"
       href="https://coreui.io/about/services/?docs=coreui-header-button"
       variant="outline"
     >
-      <CIcon class="me-2" icon="cil-handshake" /> Hire Us
+      <CIcon class="me-xxl-2 d-none d-xxl-inline" icon="cil-handshake" /> Hire Us
     </CButton>
     <CButton
       class="d-lg-inline-block my-2 my-md-0 ms-md-3"
@@ -91,7 +127,7 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
       as="a"
       href="https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
     >
-      Get CoreUI PRO
+      Get CoreUI PRO<span className="d-none d-xxl-inline"> all-access</span> →
     </CButton>
   </CHeader>
 </template>
diff --git a/packages/docs/.vuepress/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
index 074ca917..e30ff3d8 100644
--- a/packages/docs/.vuepress/src/client/components/Toc.vue
+++ b/packages/docs/.vuepress/src/client/components/Toc.vue
@@ -7,9 +7,9 @@ const toggleVisible = () => {
 </script>
 
 <template>
-  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+  <div class="docs-toc mt-4 mb-5 my-lg-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"
+      class="btn btn-link p-lg-0 mb-2 mb-lg-0 text-decoration-none docs-toc-toggle d-lg-none"
       type="button"
       :aria-expanded="visible ? true : false"
       aria-controls="tocContents"
@@ -18,7 +18,7 @@ const toggleVisible = () => {
       On this page
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="icon d-md-none ms-2"
+        class="icon d-lg-none ms-2"
         aria-hidden="true"
         viewBox="0 0 512 512"
       >
@@ -29,7 +29,7 @@ const toggleVisible = () => {
         />
       </svg>
     </button>
-    <strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+    <strong class="d-none d-lg-block h6 mb-2 pb-2 border-bottom">On this page</strong>
     <CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
       <Toc />
     </CCollapse>
diff --git a/packages/docs/.vuepress/src/client/styles/_ads.scss b/packages/docs/.vuepress/src/client/styles/_ads.scss
index 575db8b0..b2b942f0 100644
--- a/packages/docs/.vuepress/src/client/styles/_ads.scss
+++ b/packages/docs/.vuepress/src/client/styles/_ads.scss
@@ -1,4 +1,7 @@
 // stylelint-disable declaration-no-important, selector-max-id
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
 
 //
 // Carbon ads
diff --git a/packages/docs/.vuepress/src/client/styles/_anchor.scss b/packages/docs/.vuepress/src/client/styles/_anchor.scss
index 3f9ade89..5098ac5a 100644
--- a/packages/docs/.vuepress/src/client/styles/_anchor.scss
+++ b/packages/docs/.vuepress/src/client/styles/_anchor.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 .anchor-link {
   font-weight: 400;
   color: rgba($link-color, .5);
diff --git a/packages/docs/.vuepress/src/client/styles/_callouts.scss b/packages/docs/.vuepress/src/client/styles/_callouts.scss
index a0dc566c..9c29d8b1 100644
--- a/packages/docs/.vuepress/src/client/styles/_callouts.scss
+++ b/packages/docs/.vuepress/src/client/styles/_callouts.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //
diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index 2e725c8f..e5c07161 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -1,3 +1,12 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/clearfix" as *;
+@use "@coreui/coreui/scss/mixins/container" as *;
+@use "@coreui/coreui/scss/mixins/grid" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //
diff --git a/packages/docs/.vuepress/src/client/styles/_footer.scss b/packages/docs/.vuepress/src/client/styles/_footer.scss
index 7544a17b..d7edfce1 100644
--- a/packages/docs/.vuepress/src/client/styles/_footer.scss
+++ b/packages/docs/.vuepress/src/client/styles/_footer.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 //
 // Footer
 //
@@ -7,13 +10,12 @@
   @include font-size(.875rem);
 
   a {
-    color: var(--#{$prefix}tertiary-color);
-    text-decoration: none;
+    color: var(--#{$prefix}secondary-color);
+    // text-decoration: none;
 
     &:hover,
     &:focus {
       color: var(--cui-link-hover-color);
-      text-decoration: underline;
     }
   }
 }
diff --git a/packages/docs/.vuepress/src/client/styles/_layout.scss b/packages/docs/.vuepress/src/client/styles/_layout.scss
index 2ee63995..7b4740de 100644
--- a/packages/docs/.vuepress/src/client/styles/_layout.scss
+++ b/packages/docs/.vuepress/src/client/styles/_layout.scss
@@ -1,12 +1,12 @@
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 .wrapper {
   width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  padding-inline-start: var(--cui-sidebar-occupy-start, 0);
   will-change: auto;
   @include transition(padding .15s);
-
-  > .container-lg {
-    --cui-gutter-x: 3rem;
-  }
 }
 
 .docs-sidebar {
@@ -15,31 +15,34 @@
 
 .docs-main {
   grid-area: main;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "intro"
+    "toc"
+    "content";
+  grid-template-rows: auto auto 1fr;
+  gap: .5rem;
 
   @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) {
+  @include media-breakpoint-up(xl) {
     grid-template-areas:
       "intro   toc"
       "content toc";
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto;
     grid-template-columns: 4fr 1fr;
+    gap: $grid-gutter-width;
   }
 }
 
+.docs-header {
+  grid-area: header;
+}
+
 .docs-intro {
   grid-area: intro;
 }
diff --git a/packages/docs/.vuepress/src/client/styles/_prism.scss b/packages/docs/.vuepress/src/client/styles/_prism.scss
index 6145e4b6..8e6bc187 100644
--- a/packages/docs/.vuepress/src/client/styles/_prism.scss
+++ b/packages/docs/.vuepress/src/client/styles/_prism.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 /* PrismJS 1.24.1
 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
 /**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
   --base05: #333;
   --base06: #fff;
   --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
   --base09: #{$cyan-700}; // #087990
   --base0A: #{$purple-500}; // #795da3
   --base0B: #{$blue-700}; // #183691
diff --git a/packages/docs/.vuepress/src/client/styles/_search.scss b/packages/docs/.vuepress/src/client/styles/_search.scss
index c487e640..55eb456a 100644
--- a/packages/docs/.vuepress/src/client/styles/_search.scss
+++ b/packages/docs/.vuepress/src/client/styles/_search.scss
@@ -1,152 +1,174 @@
-// stylelint-disable selector-class-pattern
-
-:root {
-  --docsearch-primary-color: var(--cui-primary);
-  --docsearch-logo-color: var(--cui-primary);
-}
-
-@include color-mode(dark, true) {
-  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-  // in html[data-theme="dark"] selector
-  // and are slightly modified for formatting purpose
-  --docsearch-text-color: #f5f6f7;
-  --docsearch-container-background: rgba(9, 10, 17, .8);
-  --docsearch-modal-background: #15172a;
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: #090a11;
-  --docsearch-searchbox-focus-background: #000;
-  --docsearch-hit-color: #bec3c9;
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: #090a11;
-  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  --docsearch-muted-color: #7f8497;
-}
-
-.DocSearch-Container {
-  --docsearch-muted-color: var(--cui-secondary-color);
-  --docsearch-hit-shadow: none;
-
-  z-index: 2000; // Make sure to be over all components showcased in the documentation
-  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
-
-  @include media-breakpoint-up(lg) {
-    padding-top: 4rem;
-  }
-}
-
-.DocSearch-Button {
-  --docsearch-searchbox-background: #{rgba($black, .1)};
-  // --docsearch-searchbox-color: #{$white};
-  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-  // --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-  // --docsearch-text-color: #{$white};
-  // --docsearch-muted-color: #{rgba($white, .65)};
-
-  min-width: 200px;
-  min-height: 38px;
-  font-family: $input-font-family;
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  @include font-size($input-font-size);
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($btn-border-radius);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
-  }
-
-  .DocSearch-Search-Icon {
-    opacity: .65;
-  }
-}
-
-
-.DocSearch-Button-Keys {
-  min-width: 0;
-  padding: 0 .25rem;
-  background: rgba($black, .125);
-  @include border-radius(.25rem);
-}
-
-.DocSearch-Button-Key {
-  top: 0;
-  width: auto;
-  height: 1.5rem;
-  padding: 0 .125rem;
-  margin-right: 0;
-  font-size: .875rem;
-  background: none;
-  box-shadow: none;
-}
-
-.DocSearch-Commands-Key {
-  padding-left: 1px;
-  font-size: .875rem;
-  background-color: rgba($black, .1);
-  background-image: none;
-  box-shadow: none;
-}
-
-.DocSearch-Form {
-  @include border-radius(var(--cui-border-radius));
-}
-
-.DocSearch-Hits {
-  mark {
-    padding: 0;
-  }
-}
-
-.DocSearch-Hit {
-  padding-bottom: 0;
-  @include border-radius(0);
-
-  a {
-    @include border-radius(0);
-    border: solid var(--cui-border-color);
-    border-width: 0 1px 1px;
-  }
-
-  &:first-child a {
-    @include border-top-radius(var(--cui-border-radius));
-    border-top-width: 1px;
-  }
-  &:last-child a {
-    @include border-bottom-radius(var(--cui-border-radius));
-  }
-}
-
-.DocSearch-Hit-icon {
-  display: flex;
-  align-items: center;
-}
-
-// Fix --docsearch-logo-color that doesn't do anything
-.DocSearch-Logo svg .cls-1,
-.DocSearch-Logo svg .cls-2 {
-  fill: var(--docsearch-logo-color);
-}
+/*!
+ * CoreUI Docs (https://coreui.io/bootstrap/docs/)
+ * Copyright 2025 creativeLabs Łukasz Holeczek
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+ @use "@coreui/coreui/scss/mixins/border-radius" as *;
+ @use "@coreui/coreui/scss/mixins/box-shadow" as *;
+ @use "@coreui/coreui/scss/mixins/breakpoints" as *;
+ @use "@coreui/coreui/scss/mixins/color-mode" as *;
+ @use "@coreui/coreui/scss/mixins/transition" as *;
+ @use "@coreui/coreui/scss/vendor/rfs" as *;
+ @use "@coreui/coreui/scss/variables" as *;
+ 
+ @forward "@docsearch/css/dist/style";
+ 
+ 
+ // stylelint-disable selector-class-pattern
+ :root {
+   --docsearch-primary-color: var(--cui-primary);
+   --docsearch-logo-color: var(--cui-primary);
+ }
+ 
+ @include color-mode(dark, true) {
+   // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+   // in html[data-theme="dark"] selector
+   // and are slightly modified for formatting purpose
+   --docsearch-text-color: #f5f6f7;
+   --docsearch-container-background: rgba(9, 10, 17, .8);
+   --docsearch-modal-background: #15172a;
+   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+   --docsearch-searchbox-background: #090a11;
+   --docsearch-searchbox-focus-background: #000;
+   --docsearch-hit-color: #bec3c9;
+   --docsearch-hit-shadow: none;
+   --docsearch-hit-background: #090a11;
+   --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+   --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+   --docsearch-footer-background: #1e2136;
+   --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+   --docsearch-muted-color: #7f8497;
+ }
+ 
+ .DocSearch-Container {
+   --docsearch-muted-color: var(--cui-secondary-color);
+   --docsearch-hit-shadow: none;
+ 
+   position: fixed;
+   z-index: 2000; // Make sure to be over all components showcased in the documentation
+   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+ 
+   @include media-breakpoint-up(lg) {
+     padding-top: 4rem;
+   }
+ }
+ 
+ .DocSearch-Button {
+   --docsearch-searchbox-background: #{rgba($black, .1)};
+   --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+ 
+   margin: 0;
+   font-family: $input-font-family;
+   font-weight: $input-font-weight;
+   line-height: $input-line-height;
+   @include font-size($input-font-size);
+   color: $input-color;
+   background-color: $input-bg;
+   background-clip: padding-box;
+   border: $input-border-width solid $input-border-color;
+ 
+   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+   @include border-radius($btn-border-radius);
+   @include box-shadow($input-box-shadow);
+   @include transition($input-transition);
+ 
+   &:focus {
+     color: $input-focus-color;
+     background-color: $input-focus-bg;
+     border-color: $input-focus-border-color;
+     outline: 0;
+     @if $enable-shadows {
+       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+     } @else {
+       // Avoid using mixin so we can pass custom focus shadow properly
+       box-shadow: $input-focus-box-shadow;
+     }
+   }
+ 
+   &:hover:not(:disabled):not([readonly])::file-selector-button {
+     background-color: $form-file-button-hover-bg;
+   }
+ 
+   @include media-breakpoint-down(md) {
+     &,
+     &:hover,
+     &:focus {
+       background: transparent;
+       border: 0;
+       box-shadow: none;
+     }
+   }
+ 
+   .DocSearch-Search-Icon {
+     opacity: .65;
+   }
+ }
+ 
+ .DocSearch-Button-Keys {
+   min-width: 0;
+   padding: 0 .25rem;
+   background: rgba($black, .125);
+   @include border-radius(.25rem);
+ }
+ 
+ .DocSearch-Button-Key {
+   top: 0;
+   width: auto;
+   height: 1.5rem;
+   padding: 0 .125rem;
+   margin-right: 0;
+   font-size: .875rem;
+   background: none;
+   box-shadow: none;
+ }
+ 
+ .DocSearch-Commands-Key {
+   padding-left: 1px;
+   font-size: .875rem;
+   background-color: rgba($black, .1);
+   background-image: none;
+   box-shadow: none;
+ }
+ 
+ .DocSearch-Form {
+   @include border-radius(var(--cui-border-radius));
+ }
+ 
+ .DocSearch-Hits {
+   mark {
+     padding: 0;
+   }
+ }
+ 
+ .DocSearch-Hit {
+   padding-bottom: 0;
+   @include border-radius(0);
+ 
+   a {
+     @include border-radius(0);
+     border: solid var(--cui-border-color);
+     border-width: 0 1px 1px;
+   }
+ 
+   &:first-child a {
+     @include border-top-radius(var(--cui-border-radius));
+     border-top-width: 1px;
+   }
+   &:last-child a {
+     @include border-bottom-radius(var(--cui-border-radius));
+   }
+ }
+ 
+ .DocSearch-Hit-icon {
+   display: flex;
+   align-items: center;
+ }
+ 
+ // Fix --docsearch-logo-color that doesn't do anything
+ .DocSearch-Logo svg .cls-1,
+ .DocSearch-Logo svg .cls-2 {
+   fill: var(--docsearch-logo-color);
+ }
+ 
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
index 3e2482fa..d8cfb716 100755
--- a/packages/docs/.vuepress/src/client/styles/_sidebar.scss
+++ b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
@@ -1,4 +1,6 @@
-.sidebar.docs-sidebar {
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
+.docs-sidebar {
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
   --cui-sidebar-brand-color: var(--cui-body-color);
@@ -23,10 +25,8 @@
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .docs-sidebar {
-      --cui-sidebar-bg: var(--cui-body-bg);
-    }
+@include color-mode(dark) {
+  .docs-sidebar {
+    --cui-sidebar-bg: var(--cui-body-bg);
   }
 }
diff --git a/packages/docs/.vuepress/src/client/styles/_toc.scss b/packages/docs/.vuepress/src/client/styles/_toc.scss
index 8f6dc04d..255c69f1 100644
--- a/packages/docs/.vuepress/src/client/styles/_toc.scss
+++ b/packages/docs/.vuepress/src/client/styles/_toc.scss
@@ -1,7 +1,12 @@
 // stylelint-disable selector-max-type
 
+@use "@coreui/coreui/scss/functions/math" as *;
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+
 .docs-toc {
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     position: sticky;
     top: 5rem;
     right: 0;
@@ -15,6 +20,7 @@
 
     ul {
       padding-left: 0;
+      margin-bottom: 0;
       list-style: none;
 
       ul {
@@ -50,7 +56,7 @@
     width: 100%;
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     color: var(--cui-body-color);
     border: 1px solid var(--cui-border-color);
     @include border-radius(var(--cui-border-radius));
@@ -72,7 +78,7 @@
 }
 
 .docs-toc-collapse {
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     nav {
       padding: 1.25rem 1.25rem 1.25rem 1rem;
       background-color: var(--cui-tertiary-bg);
@@ -81,7 +87,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: block !important; // stylelint-disable-line declaration-no-important
   }
 }
diff --git a/packages/docs/.vuepress/src/client/styles/_variables.scss b/packages/docs/.vuepress/src/client/styles/_variables.scss
index b53b7754..ba0ee56c 100755
--- a/packages/docs/.vuepress/src/client/styles/_variables.scss
+++ b/packages/docs/.vuepress/src/client/styles/_variables.scss
@@ -1,8 +1,9 @@
-// stylelint-disable scss/dollar-variable-default
-
+@use "sass:color";
+@use "@coreui/coreui/scss/variables" as *;
 // Local docs variables
-$cd-purple:        #4c0bce;
-$cd-violet:        lighten(saturate($cd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+
+$cd-purple:       #4c0bce;
+$cd-violet:        color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
 $cd-accent:       #ffe484;
 
 $cd-gutter-x: 3rem;
diff --git a/packages/docs/.vuepress/src/client/styles/index.scss b/packages/docs/.vuepress/src/client/styles/index.scss
index ea3615e4..4376c666 100755
--- a/packages/docs/.vuepress/src/client/styles/index.scss
+++ b/packages/docs/.vuepress/src/client/styles/index.scss
@@ -1,21 +1,20 @@
-@import "@coreui/coreui/scss/coreui.scss";
-@import "@docsearch/css/dist/style.css";
+@use "@coreui/coreui/scss/coreui" with (
+  $enable-deprecation-messages: false
+);
 
-@import "variables";
-
-@import "ads";
-@import "anchor";
-@import "callouts";
-@import "component-examples";
-@import "footer";
-@import "layout";
-@import "prism";
-@import "scrolling";
-@import "search";
-@import "sidebar";
-@import "table-api";
-@import "toc";
-@import "custom-container";
+@forward "ads";
+@forward "anchor";
+@forward "callouts";
+@forward "component-examples";
+@forward "footer";
+@forward "layout";
+@forward "prism";
+@forward "scrolling";
+@forward "search";
+@forward "sidebar";
+@forward "table-api";
+@forward "toc";
+@forward "custom-container";
 
 .back-to-top {
 --c-brand: #3eaf7c;

From 0db5c8286b3a809de72bb8d089725fa6f6c0cd67 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 3 Sep 2025 11:05:26 +0200
Subject: [PATCH 02/13] docs: update header brand link

---
 .../src/client/components/Header.vue          | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
index 9c252ed6..04628a9a 100644
--- a/packages/docs/.vuepress/src/client/components/Header.vue
+++ b/packages/docs/.vuepress/src/client/components/Header.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterLink} from 'vue-router'
+import { RouterLink } from 'vue-router'
 import { useColorModes } from '@coreui/vue/src'
 
 const props = defineProps({
@@ -13,23 +13,24 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
     <CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
       <CIcon icon="cil-menu" size="lg" />
     </CHeaderToggler>
-    <CHeaderBrand
-      :as="RouterLink"
-      class="d-lg-none"
-      to="/"
-      aria-label="Go to CoreUI for Vue.js documentation"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 116" height="32">
-        <g fill="var(--cui-body-color, currentColor)" fillRule="nonzero">
-          <path
-            d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"
-          ></path>
-          <path
-            d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"
-          ></path>
-        </g>
-      </svg>
-    </CHeaderBrand>
+    <RouterLink custom v-slot="{ href }" to="/">
+      <CHeaderBrand
+        class="d-lg-none"
+        aria-label="Go to CoreUI for Vue.js documentation"
+        :href="href"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 116" height="32">
+          <g fill="var(--cui-body-color, currentColor)" fillRule="nonzero">
+            <path
+              d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"
+            ></path>
+            <path
+              d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"
+            ></path>
+          </g>
+        </svg>
+      </CHeaderBrand>
+    </RouterLink>
     <CHeaderNav class="me-auto d-none d-xl-flex" role="{undefined}">
       <CNavItem
         href="https://coreui.io/pricing/?framework=vue&src=react-docs&cta=coreui-header-pricing"

From 095ac24570ca0d20cff3dbf02207245fdda60663 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 17:03:18 +0200
Subject: [PATCH 03/13] fix(CDropdown): prevents closing the dropdown menu when
 clicking on the scrollbar

---
 .../src/components/dropdown/CDropdown.ts      |  38 +++--
 packages/docs/components/dropdown.md          | 131 ++++++++++++++++++
 2 files changed, 158 insertions(+), 11 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 997e39a3..0fe5e356 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -194,7 +194,7 @@ const CDropdown = defineComponent({
           initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
         }
 
-        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('click', handleClick)
         window.addEventListener('keyup', handleKeyup)
         dropdownToggleRef.value.addEventListener('keydown', handleKeydown)
         dropdownMenuRef.value.addEventListener('keydown', handleKeydown)
@@ -205,15 +205,19 @@ const CDropdown = defineComponent({
             pendingKeyDownEventRef.value = null
           })
         }
-        
+
         emit('show')
         return
       }
 
-      popper.value && destroyPopper()
-      window.removeEventListener('mouseup', handleMouseUp)
+      if (popper.value) {
+        destroyPopper()
+      }
+
+      window.removeEventListener('click', handleClick)
       window.removeEventListener('keyup', handleKeyup)
       dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownToggleRef.value && dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
@@ -259,24 +263,36 @@ const CDropdown = defineComponent({
       }
     }
 
-    const handleMouseUp = (event: Event) => {
+    const handleClick = (event: Event) => {
       if (!dropdownToggleRef.value || !dropdownMenuRef.value) {
         return
       }
 
-      if (dropdownToggleRef.value.contains(event.target as HTMLElement)) {
+      if ((event as MouseEvent).button === 2) {
+        return
+      }
+
+      const composedPath = event.composedPath()
+      const isOnToggle = composedPath.includes(dropdownToggleRef.value)
+      const isOnMenu = composedPath.includes(dropdownMenuRef.value)
+
+      if (isOnToggle) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+      const FORM_TAG_RE = /^(input|select|option|textarea|form|button|label)$/i
+
+      if (isOnMenu && target && FORM_TAG_RE.test(target.tagName)) {
         return
       }
 
       if (
         props.autoClose === true ||
-        (props.autoClose === 'inside' &&
-          dropdownMenuRef.value.contains(event.target as HTMLElement)) ||
-        (props.autoClose === 'outside' &&
-          !dropdownMenuRef.value.contains(event.target as HTMLElement))
+        (props.autoClose === 'inside' && isOnMenu) ||
+        (props.autoClose === 'outside' && !isOnMenu)
       ) {
         setVisible(false)
-        return
       }
     }
 
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index cc321091..11ea8770 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -680,6 +680,137 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
 <CDropdownItem href="#">Forgot password?</CDropdownItem>
 ```
 
+## Dropdown options
+
+Use `offset` to displace the dropdown from its default position. The value is a string with two numbers separated by a comma, e.g. `:offset="[10, 20]"`. Use `teleport` property to render dropdowns in `body` instead of the parent element. This helps to avoid any overflow or z-index issues.
+
+::: demo
+<div class="d-flex gap-1">
+  <CDropdown :offset="[10, 20]">
+    <CDropdownToggle color="secondary">Offset</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown teleport>
+    <CDropdownToggle color="secondary" aria-controls="dropdownMenuInTeleport">
+      Teleport
+    </CDropdownToggle>
+    <CDropdownMenu id="dropdownMenuInTeleport">
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</div>
+:::
+```vue
+<div class="d-flex gap-1">
+  <CDropdown :offset="[10, 20]">
+    <CDropdownToggle color="secondary">Offset</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown teleport>
+    <CDropdownToggle color="secondary" aria-controls="dropdownMenuInTeleport">
+      Teleport
+    </CDropdownToggle>
+    <CDropdownMenu id="dropdownMenuInTeleport">
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</div>
+```
+
+### Auto close behavior
+
+By default, dropdowns are closed when clicking outside of the dropdown menu or the toggle button. You can change this behavior with the `autoClose` property. Set `autoClose` to: 
+
+- `true` - Close on clicks inside or outside of the React.js dropdown menu.
+- `false` - Disable auto-close; close manually by setting the `:visible="false"` (also not closed by `Escape`).
+- `'inside'` - Close only when clicking inside the React.js dropdown menu.
+- `'outside'` - Close only when clicking outside the React.js dropdown menu.
+
+::: demo
+<div class="d-flex gap-1">
+  <CDropdown>
+    <CDropdownToggle color="secondary">Default dropdown</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown autoClose="inside">
+    <CDropdownToggle color="secondary">Clickable inside</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown autoClose="outside">
+    <CDropdownToggle color="secondary">Clickable outside</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown :autoClose="false">
+    <CDropdownToggle color="secondary">Manual close</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</div>
+:::
+```vue
+<div class="d-flex gap-1">
+  <CDropdown>
+    <CDropdownToggle color="secondary">Default dropdown</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown autoClose="inside">
+    <CDropdownToggle color="secondary">Clickable inside</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown autoClose="outside">
+    <CDropdownToggle color="secondary">Clickable outside</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+  <CDropdown :autoClose="false">
+    <CDropdownToggle color="secondary">Manual close</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</div>
+```
+
 ## Customizing
 
 ### CSS variables

From ff2f78a2196c7e22c2e891540e39de7c17df617b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 17:09:36 +0200
Subject: [PATCH 04/13] refactor(CDropdown): add focus trap when used with
 teleport

---
 .../src/components/dropdown/CDropdown.ts      | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 0fe5e356..f9404a60 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -7,6 +7,7 @@ import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
 import { getPlacement } from './utils'
+import { CFocusTrap } from '../focus-trap'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
@@ -217,7 +218,8 @@ const CDropdown = defineComponent({
       window.removeEventListener('click', handleClick)
       window.removeEventListener('keyup', handleKeyup)
       dropdownMenuRef.value && dropdownMenuRef.value.removeEventListener('keydown', handleKeydown)
-      dropdownToggleRef.value && dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
+      dropdownToggleRef.value &&
+        dropdownToggleRef.value.removeEventListener('keydown', handleKeydown)
       emit('hide')
     })
 
@@ -315,22 +317,27 @@ const CDropdown = defineComponent({
     provide('setVisible', setVisible)
 
     return () =>
-      props.variant === 'input-group'
-        ? [slots.default && slots.default()]
-        : h(
-            'div',
-            {
-              class: [
-                props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
-                props.direction === 'center'
-                  ? 'dropdown-center'
-                  : props.direction === 'dropup-center'
-                    ? 'dropup dropup-center'
-                    : props.direction,
-              ],
-            },
-            slots.default && slots.default()
-          )
+      h(
+        CFocusTrap,
+        { active: props.teleport && visible.value, additionalContainer: dropdownMenuRef },
+        () =>
+          props.variant === 'input-group'
+            ? [slots.default && slots.default()]
+            : h(
+                'div',
+                {
+                  class: [
+                    props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
+                    props.direction === 'center'
+                      ? 'dropdown-center'
+                      : props.direction === 'dropup-center'
+                        ? 'dropup dropup-center'
+                        : props.direction,
+                  ],
+                },
+                slots.default && slots.default()
+              )
+      )
   },
 })
 

From 1154cd2888285400968025397b87df177c5fb25e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 17:37:30 +0200
Subject: [PATCH 05/13] feat(CDropdown): add reference prop for custom
 positioning targets

---
 .../src/components/dropdown/CDropdown.ts      | 34 +++++++++++++++----
 .../src/components/dropdown/utils.ts          | 21 ++++++++++++
 packages/docs/api/dropdown/CDropdown.api.md   | 31 +++++++++--------
 packages/docs/api/modal/CModal.api.md         |  2 +-
 packages/docs/components/dropdown.md          | 24 +++++++++++--
 5 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index f9404a60..fda77b0d 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, provide, watch, PropType, onUnmounted, nextTick } from 'vue'
+import { defineComponent, h, nextTick, onUnmounted, provide, PropType, ref, Ref, watch } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
@@ -6,7 +6,7 @@ import type { Triggers } from '../../types'
 import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
-import { getPlacement } from './utils'
+import { getPlacement, getReferenceElement } from './utils'
 import { CFocusTrap } from '../focus-trap'
 
 const CDropdown = defineComponent({
@@ -113,6 +113,21 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Sets the reference element for positioning the Vue Dropdown Menu.
+     * - `toggle` - The Vue Dropdown Toggle button (default).
+     * - `parent` - The Vue Dropdown wrapper element.
+     * - `HTMLElement` - A custom HTML element.
+     * - `Ref` - A custom reference element.
+     *
+     * @since 5.7.0
+     */
+    reference: {
+      type: [String, Object] as PropType<
+        'parent' | 'toggle' | HTMLElement | Ref<HTMLElement | null>
+      >,
+      default: 'toggle',
+    },
     /**
      * Generates dropdown menu using Teleport.
      *
@@ -157,8 +172,9 @@ const CDropdown = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const dropdownToggleRef = ref()
-    const dropdownMenuRef = ref()
+    const dropdownRef = ref<HTMLElement | null>(null)
+    const dropdownMenuRef = ref<HTMLElement | null>(null)
+    const dropdownToggleRef = ref<HTMLElement | null>(null)
     const pendingKeyDownEventRef = ref<KeyboardEvent | null>(null)
     const popper = ref(typeof props.alignment === 'object' ? false : props.popper)
     const visible = ref(props.visible)
@@ -191,8 +207,13 @@ const CDropdown = defineComponent({
 
     watch(visible, () => {
       if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
-        if (popper.value) {
-          initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
+        const referenceElement = getReferenceElement(
+          props.reference,
+          dropdownToggleRef,
+          dropdownRef
+        )
+        if (referenceElement && popper.value) {
+          initPopper(referenceElement, dropdownMenuRef.value, popperConfig)
         }
 
         window.addEventListener('click', handleClick)
@@ -334,6 +355,7 @@ const CDropdown = defineComponent({
                         ? 'dropup dropup-center'
                         : props.direction,
                   ],
+                  ref: dropdownRef,
                 },
                 slots.default && slots.default()
               )
diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts
index c9659636..03c4c3a0 100644
--- a/packages/coreui-vue/src/components/dropdown/utils.ts
+++ b/packages/coreui-vue/src/components/dropdown/utils.ts
@@ -1,3 +1,4 @@
+import { Ref } from 'vue'
 import type { Placement } from '@popperjs/core'
 import type { Placements } from '../../types'
 import type { Alignments, Breakpoints } from './types'
@@ -49,3 +50,23 @@ export const getPlacement = (
 
   return _placement
 }
+
+export const getReferenceElement = (
+  reference: 'parent' | 'toggle' | Ref<HTMLElement | null> | HTMLElement,
+  dropdownToggleRef: Ref<HTMLElement | null>,
+  dropdownRef: Ref<HTMLElement | null>
+): HTMLElement | null => {
+  if (reference === 'parent') {
+    return dropdownRef.value
+  }
+
+  if (reference instanceof HTMLElement) {
+    return reference
+  }
+
+  if (reference instanceof Object && 'value' in reference) {
+    return reference.value
+  }
+
+  return dropdownToggleRef.value
+}
diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 6d3bade5..3441b2b0 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +8,22 @@ 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">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                                      | -                                                                                                                                                                                             | -              |
+| 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           |
+| **reference** <br><div class="badge bg-primary">5.7.0+</div> | Sets the reference element for positioning the React Dropdown Menu.<br>- `toggle` - The React Dropdown Toggle button (default).<br>- `parent` - The React Dropdown wrapper element.<br>- `HTMLElement` - A custom HTML element.<br>- `Ref` - A custom reference element.                                                                                                                                                                                                                                 | 'parent' \| 'toggle' \| HTMLElement \| Ref<HTMLElement \| null> | -                                                                                                                                                                                             | 'toggle'       |
+| **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/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 6f201012..31a0e728 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -11,7 +11,7 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
 | 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    |
+| **backdrop**                                                 | Apply a backdrop on body while modal 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    |
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index 11ea8770..cd734dc5 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -704,6 +704,15 @@ Use `offset` to displace the dropdown from its default position. The value is a
       <CDropdownItem href="#">Something else here</CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
+  <CDropdown reference="parent">
+    <CButton color="secondary">Reference</CButton>
+    <CDropdownToggle color="secondary" split />
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
 </div>
 :::
 ```vue
@@ -726,6 +735,15 @@ Use `offset` to displace the dropdown from its default position. The value is a
       <CDropdownItem href="#">Something else here</CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
+  <CDropdown reference="parent">
+    <CButton color="secondary">Reference</CButton>
+    <CDropdownToggle color="secondary" split />
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
 </div>
 ```
 
@@ -733,10 +751,10 @@ Use `offset` to displace the dropdown from its default position. The value is a
 
 By default, dropdowns are closed when clicking outside of the dropdown menu or the toggle button. You can change this behavior with the `autoClose` property. Set `autoClose` to: 
 
-- `true` - Close on clicks inside or outside of the React.js dropdown menu.
+- `true` - Close on clicks inside or outside of the Vue.js dropdown menu.
 - `false` - Disable auto-close; close manually by setting the `:visible="false"` (also not closed by `Escape`).
-- `'inside'` - Close only when clicking inside the React.js dropdown menu.
-- `'outside'` - Close only when clicking outside the React.js dropdown menu.
+- `'inside'` - Close only when clicking inside the Vue.js dropdown menu.
+- `'outside'` - Close only when clicking outside the Vue.js dropdown menu.
 
 ::: demo
 <div class="d-flex gap-1">

From 03308147884f24967040982ed4690e7976e3254d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 17:48:26 +0200
Subject: [PATCH 06/13] refactor(CDropdown): minor improvements

---
 .../src/components/dropdown/CDropdown.ts      | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index fda77b0d..d51b4c8e 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -1,4 +1,15 @@
-import { defineComponent, h, nextTick, onUnmounted, provide, PropType, ref, Ref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onUnmounted,
+  provide,
+  PropType,
+  ref,
+  Ref,
+  watch,
+} from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
@@ -54,7 +65,7 @@ const CDropdown = defineComponent({
      * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
      */
     autoClose: {
-      type: [Boolean, String],
+      type: [Boolean, String] as PropType<boolean | 'inside' | 'outside'>,
       default: true,
       validator: (value: boolean | string) => {
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
@@ -181,7 +192,7 @@ const CDropdown = defineComponent({
 
     const { initPopper, destroyPopper } = usePopper()
 
-    const popperConfig = {
+    const popperConfig = computed(() => ({
       modifiers: [
         {
           name: 'offset',
@@ -196,7 +207,7 @@ const CDropdown = defineComponent({
         props.alignment,
         isRTL(dropdownMenuRef.value)
       ) as Placement,
-    }
+    }))
 
     watch(
       () => props.visible,
@@ -213,7 +224,7 @@ const CDropdown = defineComponent({
           dropdownRef
         )
         if (referenceElement && popper.value) {
-          initPopper(referenceElement, dropdownMenuRef.value, popperConfig)
+          initPopper(referenceElement, dropdownMenuRef.value, popperConfig.value)
         }
 
         window.addEventListener('click', handleClick)

From b826f84fae98b19aa5b90426992ce83f994ae922 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 18:05:44 +0200
Subject: [PATCH 07/13] feat(CDropdownToggle): add splitLabel prop for
 customizable screen reader text

---
 .../components/dropdown/CDropdownToggle.ts    | 11 +++++++-
 packages/docs/api/dropdown/CDropdown.api.md   |  4 +--
 .../docs/api/dropdown/CDropdownToggle.api.md  | 25 ++++++++++---------
 packages/docs/components/dropdown.md          |  8 +++---
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
index 0f9b7baa..fbda664a 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -74,6 +74,15 @@ const CDropdownToggle = defineComponent({
      * 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.
      */
     split: Boolean,
+    /**
+     * Screen reader label for split button dropdown toggle.
+     *
+     * @since 5.7.0
+     */
+    splitLabel: {
+      type: String,
+      default: 'Toggle Dropdown',
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      *
@@ -194,7 +203,7 @@ const CDropdownToggle = defineComponent({
               },
               () =>
                 props.split
-                  ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                  ? h('span', { class: 'visually-hidden' }, props.splitLabel)
                   : slots.default && slots.default(),
             )
   },
diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 3441b2b0..ed5fa645 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -11,7 +11,7 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 | 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           |
+| **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 \| 'inside' \| 'outside'                                | -                                                                                                                                                                                             | 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'`                                                                                                                         | -              |
@@ -19,7 +19,7 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
 | **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           |
-| **reference** <br><div class="badge bg-primary">5.7.0+</div> | Sets the reference element for positioning the React Dropdown Menu.<br>- `toggle` - The React Dropdown Toggle button (default).<br>- `parent` - The React Dropdown wrapper element.<br>- `HTMLElement` - A custom HTML element.<br>- `Ref` - A custom reference element.                                                                                                                                                                                                                                 | 'parent' \| 'toggle' \| HTMLElement \| Ref<HTMLElement \| null> | -                                                                                                                                                                                             | 'toggle'       |
+| **reference** <br><div class="badge bg-primary">5.7.0+</div> | Sets the reference element for positioning the Vue Dropdown Menu.<br>- `toggle` - The Vue Dropdown Toggle button (default).<br>- `parent` - The Vue Dropdown wrapper element.<br>- `HTMLElement` - A custom HTML element.<br>- `Ref` - A custom reference element.                                                                                                                                                                                                                                       | 'parent' \| 'toggle' \| HTMLElement \| Ref<HTMLElement \| null> | -                                                                                                                                                                                             | 'toggle'       |
 | **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'    |
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index ddf79509..9a8a82a5 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -8,15 +8,16 @@ 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">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'`                                                                          | -        |
+| 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  | -                                                                                               | -                 |
+| **split-label** <br><div class="badge bg-primary">5.7.0+</div> | Screen reader label for split button dropdown toggle.<br/>`@default` 'Toggle Dropdown'                                                                                                                        | string   | -                                                                                               | 'Toggle Dropdown' |
+| **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/components/dropdown.md b/packages/docs/components/dropdown.md
index cd734dc5..e6ad7933 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -422,7 +422,7 @@ Trigger dropdown menus at the right of the elements by adding `direction="dropen
 </CDropdown>
 <CDropdown color="secondary" direction="dropend">
   <CButton color="secondary">Split dropend</CButton>
-  <CDropdownToggle color="secondary" split/>
+  <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend" />
   <CDropdownMenu>
     <CDropdownItem href="#">Action</CDropdownItem>
     <CDropdownItem href="#">Another action</CDropdownItem>
@@ -445,7 +445,7 @@ Trigger dropdown menus at the right of the elements by adding `direction="dropen
 </CDropdown>
 <CDropdown color="secondary" direction="dropend">
   <CButton color="secondary">Split dropend</CButton>
-  <CDropdownToggle color="secondary" split/>
+  <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend" />
   <CDropdownMenu>
     <CDropdownItem href="#">Action</CDropdownItem>
     <CDropdownItem href="#">Another action</CDropdownItem>
@@ -473,7 +473,7 @@ Trigger dropdown menus at the left of the elements by adding `direction="dropsta
 </CDropdown>
 <CButtonGroup>
   <CDropdown color="secondary" direction="dropstart">
-    <CDropdownToggle color="secondary" split/>
+    <CDropdownToggle color="secondary" split splitLabel="Toggle Dropstart" />
     <CDropdownMenu>
       <CDropdownItem href="#">Action</CDropdownItem>
       <CDropdownItem href="#">Another action</CDropdownItem>
@@ -498,7 +498,7 @@ Trigger dropdown menus at the left of the elements by adding `direction="dropsta
 </CDropdown>
 <CButtonGroup>
   <CDropdown color="secondary" direction="dropstart">
-    <CDropdownToggle color="secondary" split/>
+    <CDropdownToggle color="secondary" splitLabel="Toggle Dropstart" />
     <CDropdownMenu>
       <CDropdownItem href="#">Action</CDropdownItem>
       <CDropdownItem href="#">Another action</CDropdownItem>

From 31626502f46093a4ad116042e60fd6f3dc7c8e37 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 18:15:29 +0200
Subject: [PATCH 08/13] docs: update README

---
 README.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 1f9f1834..a1cfd5c1 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,8 @@
   ·
   <a href="https://github.com/coreui/coreui-vue/issues/new?template=feature_request.md">Request feature</a>
   ·
+  <a href="https://coreui.requestshub.com/p/coreui-for-vuejs/roadmap">Roadmap</a>
+  ·
   <a href="https://coreui.io/blog/">Blog</a>
 </p>
 
@@ -183,10 +185,11 @@ CoreUI supports most popular frameworks.
 
 Fully featured, out-of-the-box, templates for your application based on CoreUI.
 
-- [Angular Admin Template](https://coreui.io/angular)
-- [Bootstrap Admin Template](https://coreui.io/)
-- [React Admin Template](https://coreui.io/react)
-- [Vue Admin Template](https://coreui.io/vue)
+- [Angular Admin Templates](https://coreui.io/themes-templates/admin-dashboard/angular/)
+- [Bootstrap Admin Templates](https://coreui.io/themes-templates/admin-dashboard/bootstrap/)
+- [Next.js Admin Templates](https://coreui.io/themes-templates/admin-dashboard/next-js/)
+- [React Admin Templates](https://coreui.io/themes-templates/admin-dashboard/react/)
+- [Vue Admin Templates](https://coreui.io/themes-templates/admin-dashboard/vue/)
 
 ## Contributing
 
@@ -198,9 +201,9 @@ Editor preferences are available in the [editor config](https://github.com/coreu
 
 Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
 
-- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/).
-
-You can also follow [@core_ui on Twitter](https://twitter.com/core_ui).
+- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog).
+- Follow [@core_ui on Twitter](https://x.com/core_ui).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/pQRWe5XdGm).
 
 ## Versioning
 

From e532f5af71656dabc8510f86b9e36b33e8a956c4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 18:30:14 +0200
Subject: [PATCH 09/13] fix(CNavItem): `class` is now a required property;
 closes #305

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

diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index e660c01a..09e5aad0 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -4,8 +4,8 @@ import { CNavLink } from './CNavLink'
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CNavItemProps extends ComponentProps<typeof CNavLink> {
-  as: string
-  class: string
+  as?: string
+  class?: string
 }
 
 const CNavItem = defineComponent({

From bd2af6133385fd439384b73149d809d888da6c9d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 20:23:59 +0200
Subject: [PATCH 10/13] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

eslint                 ^9.34.0  →  ^9.35.0
eslint-plugin-unicorn  ^60.0.0  →  ^61.0.2
globals                ^16.3.0  →  ^16.4.0
lerna                   ^8.2.3  →   ^8.2.4
rollup                 ^4.50.0  →  ^4.50.2
typescript-eslint      ^8.41.0  →  ^8.44.0
vue                    ^3.5.20  →  ^3.5.21
@docsearch/css          ^3.9.0  →   ^4.0.0
@docsearch/js           ^3.9.0  →   ^4.0.0
sass                   ^1.91.0  →  ^1.92.1
---
 package.json                     | 10 +++++-----
 packages/coreui-vue/package.json |  4 ++--
 packages/docs/package.json       |  6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index c862edad..345d3fae 100644
--- a/package.json
+++ b/package.json
@@ -23,15 +23,15 @@
   },
   "devDependencies": {
     "@vue/vue3-jest": "29.2.6",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-unicorn": "^60.0.0",
+    "eslint-plugin-unicorn": "^61.0.2",
     "eslint-plugin-vue": "^10.4.0",
-    "globals": "^16.3.0",
-    "lerna": "^8.2.3",
+    "globals": "^16.4.0",
+    "lerna": "^8.2.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
-    "typescript-eslint": "^8.41.0"
+    "typescript-eslint": "^8.44.0"
   }
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index 52f613fe..6d303e4b 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -54,11 +54,11 @@
     "cross-env": "^10.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.50.0",
+    "rollup": "^4.50.2",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.4.1",
     "typescript": "^5.9.2",
-    "vue": "^3.5.20",
+    "vue": "^3.5.21",
     "vue-types": "^6.0.0"
   },
   "peerDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 829574c4..11abef11 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -14,8 +14,8 @@
     "@coreui/icons-vue": "^2.2.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/js": "^3.9.0",
+    "@docsearch/css": "^4.0.0",
+    "@docsearch/js": "^4.0.0",
     "@vuepress/bundler-vite": "2.0.0-rc.19",
     "@vuepress/bundler-webpack": "2.0.0-rc.19",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.69",
@@ -29,7 +29,7 @@
     "@vuepress/utils": "2.0.0-rc.19",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-include": "^2.0.0",
-    "sass": "^1.91.0",
+    "sass": "^1.92.1",
     "vue-docgen-cli": "^4.79.0",
     "vuepress": "2.0.0-rc.19"
   }

From 51e2303b147db0b86c26af52a9af284729108e70 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 15 Sep 2025 20:55:58 +0200
Subject: [PATCH 11/13] fix(CNavItem): `class` is now a required property;
 closes #305

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

diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts
index 09e5aad0..bbe535b3 100644
--- a/packages/coreui-vue/src/components/nav/CNavItem.ts
+++ b/packages/coreui-vue/src/components/nav/CNavItem.ts
@@ -4,7 +4,7 @@ import { CNavLink } from './CNavLink'
 import type { ComponentProps } from '../../utils/ComponentProps'
 
 interface CNavItemProps extends ComponentProps<typeof CNavLink> {
-  as?: string
+  as: string
   class?: string
 }
 

From 2ed77781c6672e20fd84ae075e74f05929bfef1d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 17 Sep 2025 14:42:36 +0200
Subject: [PATCH 12/13] docs: update docsearch to v4

---
 .../.vuepress/src/client/styles/_search.scss  | 328 +++++++++---------
 1 file changed, 161 insertions(+), 167 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/styles/_search.scss b/packages/docs/.vuepress/src/client/styles/_search.scss
index 55eb456a..16fa476c 100644
--- a/packages/docs/.vuepress/src/client/styles/_search.scss
+++ b/packages/docs/.vuepress/src/client/styles/_search.scss
@@ -5,170 +5,164 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
- @use "@coreui/coreui/scss/mixins/border-radius" as *;
- @use "@coreui/coreui/scss/mixins/box-shadow" as *;
- @use "@coreui/coreui/scss/mixins/breakpoints" as *;
- @use "@coreui/coreui/scss/mixins/color-mode" as *;
- @use "@coreui/coreui/scss/mixins/transition" as *;
- @use "@coreui/coreui/scss/vendor/rfs" as *;
- @use "@coreui/coreui/scss/variables" as *;
- 
- @forward "@docsearch/css/dist/style";
- 
- 
- // stylelint-disable selector-class-pattern
- :root {
-   --docsearch-primary-color: var(--cui-primary);
-   --docsearch-logo-color: var(--cui-primary);
- }
- 
- @include color-mode(dark, true) {
-   // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-   // in html[data-theme="dark"] selector
-   // and are slightly modified for formatting purpose
-   --docsearch-text-color: #f5f6f7;
-   --docsearch-container-background: rgba(9, 10, 17, .8);
-   --docsearch-modal-background: #15172a;
-   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-   --docsearch-searchbox-background: #090a11;
-   --docsearch-searchbox-focus-background: #000;
-   --docsearch-hit-color: #bec3c9;
-   --docsearch-hit-shadow: none;
-   --docsearch-hit-background: #090a11;
-   --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-   --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-   --docsearch-footer-background: #1e2136;
-   --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-   --docsearch-muted-color: #7f8497;
- }
- 
- .DocSearch-Container {
-   --docsearch-muted-color: var(--cui-secondary-color);
-   --docsearch-hit-shadow: none;
- 
-   position: fixed;
-   z-index: 2000; // Make sure to be over all components showcased in the documentation
-   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
- 
-   @include media-breakpoint-up(lg) {
-     padding-top: 4rem;
-   }
- }
- 
- .DocSearch-Button {
-   --docsearch-searchbox-background: #{rgba($black, .1)};
-   --docsearch-searchbox-focus-background: #{rgba($black, .25)};
- 
-   margin: 0;
-   font-family: $input-font-family;
-   font-weight: $input-font-weight;
-   line-height: $input-line-height;
-   @include font-size($input-font-size);
-   color: $input-color;
-   background-color: $input-bg;
-   background-clip: padding-box;
-   border: $input-border-width solid $input-border-color;
- 
-   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-   @include border-radius($btn-border-radius);
-   @include box-shadow($input-box-shadow);
-   @include transition($input-transition);
- 
-   &:focus {
-     color: $input-focus-color;
-     background-color: $input-focus-bg;
-     border-color: $input-focus-border-color;
-     outline: 0;
-     @if $enable-shadows {
-       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-     } @else {
-       // Avoid using mixin so we can pass custom focus shadow properly
-       box-shadow: $input-focus-box-shadow;
-     }
-   }
- 
-   &:hover:not(:disabled):not([readonly])::file-selector-button {
-     background-color: $form-file-button-hover-bg;
-   }
- 
-   @include media-breakpoint-down(md) {
-     &,
-     &:hover,
-     &:focus {
-       background: transparent;
-       border: 0;
-       box-shadow: none;
-     }
-   }
- 
-   .DocSearch-Search-Icon {
-     opacity: .65;
-   }
- }
- 
- .DocSearch-Button-Keys {
-   min-width: 0;
-   padding: 0 .25rem;
-   background: rgba($black, .125);
-   @include border-radius(.25rem);
- }
- 
- .DocSearch-Button-Key {
-   top: 0;
-   width: auto;
-   height: 1.5rem;
-   padding: 0 .125rem;
-   margin-right: 0;
-   font-size: .875rem;
-   background: none;
-   box-shadow: none;
- }
- 
- .DocSearch-Commands-Key {
-   padding-left: 1px;
-   font-size: .875rem;
-   background-color: rgba($black, .1);
-   background-image: none;
-   box-shadow: none;
- }
- 
- .DocSearch-Form {
-   @include border-radius(var(--cui-border-radius));
- }
- 
- .DocSearch-Hits {
-   mark {
-     padding: 0;
-   }
- }
- 
- .DocSearch-Hit {
-   padding-bottom: 0;
-   @include border-radius(0);
- 
-   a {
-     @include border-radius(0);
-     border: solid var(--cui-border-color);
-     border-width: 0 1px 1px;
-   }
- 
-   &:first-child a {
-     @include border-top-radius(var(--cui-border-radius));
-     border-top-width: 1px;
-   }
-   &:last-child a {
-     @include border-bottom-radius(var(--cui-border-radius));
-   }
- }
- 
- .DocSearch-Hit-icon {
-   display: flex;
-   align-items: center;
- }
- 
- // Fix --docsearch-logo-color that doesn't do anything
- .DocSearch-Logo svg .cls-1,
- .DocSearch-Logo svg .cls-2 {
-   fill: var(--docsearch-logo-color);
- }
- 
\ No newline at end of file
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/box-shadow" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+ 
+@forward "@docsearch/css/dist/style";
+
+
+// stylelint-disable selector-class-pattern
+:root {
+  --docsearch-primary-color: var(--cui-primary);
+  --docsearch-muted-color: var(--cui-secondary-color);
+  --docsearch-logo-color: var(--cui-primary);
+  --docsearch-key-color: var(--cui-secondary-color);
+}
+
+@include color-mode(dark, true) {
+  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+  // in html[data-theme="dark"] selector
+  // and are slightly modified for formatting purpose
+  --docsearch-text-color: #f5f6f7;
+  --docsearch-container-background: rgba(9, 10, 17, .8);
+  --docsearch-modal-background: #15172a;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-focus-background: #000;
+  --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: #090a11;
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  --docsearch-footer-background: #1e2136;
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+  --docsearch-muted-color: #7f8497;
+}
+
+.DocSearch-Container {
+  --docsearch-hit-shadow: none;
+
+  position: fixed;
+  z-index: 2000; // Make sure to be over all components showcased in the documentation
+  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+  @include media-breakpoint-up(lg) {
+    padding-top: 4rem;
+  }
+}
+
+.DocSearch-Button {
+  --docsearch-searchbox-background: #{rgba($black, .1)};
+  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+
+  margin: 0;
+  font-family: $input-font-family;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  @include font-size($input-font-size);
+  color: $input-color;
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color;
+
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius($btn-border-radius);
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
+
+  &:focus,
+  &:hover {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+}
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding: 0 .25rem;
+  background: var(--cui-secondary-bg);
+  @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+  width: auto;
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+
+  &:first-child {
+    margin-right: 0;
+  }
+}
+
+// .DocSearch-Commands-Key {
+//   padding-left: 1px;
+//   font-size: .875rem;
+//   background-color: rgba($black, .1);
+//   background-image: none;
+//   box-shadow: none;
+// }
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--cui-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--cui-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--cui-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}
+
+// Fix --docsearch-logo-color that doesn't do anything
+.DocSearch-Logo svg .cls-1,
+.DocSearch-Logo svg .cls-2 {
+  fill: var(--docsearch-logo-color);
+}

From e09679af9bc5cb7e0011e0bfe2ba51d52d372f02 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 17 Sep 2025 15:00:18 +0200
Subject: [PATCH 13/13] release: v5.7.0

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

diff --git a/README.md b/README.md
index a1cfd5c1..e6c179ec 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.6.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.7.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 a4d781c9..e456a603 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.6.0",
+  "version": "5.7.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md
index aabe8d99..6237b002 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.6.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.7.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 6d303e4b..f932b6c5 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 9a8a82a5..587b216f 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -18,6 +18,6 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 | **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  | -                                                                                               | -                 |
-| **split-label** <br><div class="badge bg-primary">5.7.0+</div> | Screen reader label for split button dropdown toggle.<br/>`@default` 'Toggle Dropdown'                                                                                                                        | string   | -                                                                                               | 'Toggle Dropdown' |
+| **split-label** <br><div class="badge bg-primary">5.7.0+</div> | Screen reader label for split button dropdown toggle.                                                                                                                                                         | string   | -                                                                                               | 'Toggle Dropdown' |
 | **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/package.json b/packages/docs/package.json
index 11abef11..597286bd 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",